/* CineFlex 2.0 Foundation: identity, cinematic hero, glass cards, community feed */
:root{
  --cf-space:#030611;
  --cf-panel:rgba(8,14,30,.68);
  --cf-glass:rgba(255,255,255,.075);
  --cf-line:rgba(142,225,255,.18);
  --cf-blue:#00e5ff;
  --cf-purple:#8f5cff;
  --cf-pink:#ff3b7a;
  --cf-amber:#ffbf47;
  --cf-radius:22px;
  --cf-shadow:0 24px 80px rgba(0,0,0,.55),0 0 34px rgba(0,229,255,.08);
}
body{
  background:
    radial-gradient(circle at 18% 0%, rgba(0,229,255,.16), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(143,92,255,.16), transparent 34%),
    linear-gradient(180deg,#02040b 0%,#050505 55%,#02040b 100%) !important;
}
.navbar{
  background:linear-gradient(90deg,rgba(3,6,17,.92),rgba(3,6,17,.55)) !important;
  border-bottom:1px solid var(--cf-line) !important;
  box-shadow:0 8px 30px rgba(0,0,0,.22);
}
.logo{
  color:#fff !important;
  text-shadow:0 0 16px rgba(0,229,255,.8),0 0 36px rgba(143,92,255,.34);
}
.logo::first-letter{color:var(--cf-blue)}
.banner{
  height:92vh !important;
  isolation:isolate;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background-image .8s ease, filter .4s ease;
}
.banner::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(2,4,11,.92) 0%,rgba(2,4,11,.58) 38%,rgba(2,4,11,.16) 72%),
             radial-gradient(circle at 30% 55%,rgba(0,229,255,.14),transparent 28%);
  z-index:2; pointer-events:none;
}
.banner::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(to top,var(--bg),transparent);
  z-index:3; pointer-events:none;
}
.banner-content{z-index:7 !important; animation:cfHeroIn .7s ease both;}
@keyframes cfHeroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.hero-kicker,.cf-hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--cf-line);border-radius:999px;
  background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(143,92,255,.12));
  color:#eafcff; backdrop-filter:blur(16px); box-shadow:0 0 28px rgba(0,229,255,.12);
}
#banner-title{line-height:.92;letter-spacing:-.05em;text-shadow:0 10px 40px rgba(0,0,0,.85),0 0 28px rgba(0,229,255,.16)}
#banner-desc{max-width:720px;color:#dce8ff !important;font-size:clamp(.95rem,2vw,1.12rem) !important;}
.cf-hero-video{
  position:absolute; inset:0; z-index:1; opacity:0; transform:scale(1.04);
  transition:opacity .9s ease; pointer-events:none; background:#000;
}
.cf-hero-video.active{opacity:.28;}
.cf-hero-video iframe{width:100%;height:100%;border:0;transform:scale(1.24);filter:saturate(1.05) contrast(1.05)}
.cf-hero-metrics{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0;}
.cf-hero-metric{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);font-weight:800;color:#fff;}
.banner-buttons button{border-radius:999px !important;}
.play-btn{background:linear-gradient(135deg,#fff,#dffaff) !important;box-shadow:0 12px 35px rgba(0,229,255,.25) !important;}
.info-btn{background:rgba(255,255,255,.1) !important;border-color:var(--cf-line) !important;}
.cf-hero-progress{position:absolute;left:5%;right:5%;bottom:26px;z-index:9;height:4px;border-radius:999px;background:rgba(255,255,255,.13);overflow:hidden;}
.cf-hero-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cf-blue),var(--cf-purple),var(--cf-pink));animation:cfHeroProgress 9s linear infinite;}
@keyframes cfHeroProgress{to{width:100%}}
.card{
  border-radius:18px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025)) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.card img{border:0 !important; transition:transform .55s ease, filter .35s ease;}
.card:hover img{transform:scale(1.08);filter:saturate(1.15) brightness(1.08)}
.card:hover{box-shadow:var(--cf-shadow),0 0 0 1px rgba(0,229,255,.18) !important;}
.card-info-overlay{background:linear-gradient(to top,rgba(2,4,11,.98),rgba(2,4,11,.55),transparent) !important;}
.row h2{letter-spacing:-.02em;}
.scroller{gap:18px !important;}
.cf-community-section{
  margin:34px 0 42px;padding:24px;border-radius:var(--cf-radius);
  border:1px solid var(--cf-line);background:linear-gradient(135deg,rgba(0,229,255,.07),rgba(143,92,255,.06));
  box-shadow:var(--cf-shadow);backdrop-filter:blur(18px);
}
.cf-feed-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px;}
.cf-feed-item{padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.065);display:flex;gap:12px;align-items:flex-start;}
.cf-feed-icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cf-blue),var(--cf-purple));box-shadow:0 0 24px rgba(0,229,255,.22);flex:0 0 auto;}
.cf-feed-item strong{display:block;color:#fff;font-size:.9rem}.cf-feed-item small{color:#aebbd2;line-height:1.35;}
.cf-skeleton-row{display:flex;gap:16px;overflow:hidden;padding:14px 0}.cf-skel-card{min-width:170px;height:240px;border-radius:18px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.11),rgba(255,255,255,.04));background-size:300% 100%;animation:cfSkel 1.2s infinite linear}@keyframes cfSkel{to{background-position:-300% 0}}
@media(max-width:700px){.banner{height:82vh !important;padding-bottom:105px !important}.cf-hero-video{display:none}.cf-hero-metric{font-size:.78rem}.cf-community-section{padding:17px;margin-left:-2%;margin-right:-2%}.card{border-radius:14px !important}}