/* ============================================================
   BEAT.VISION — CLIENT SITE V2 · Accent #FF1369
   ============================================================ */
:root{
  --accent:#ff1369;
  --accent-soft:rgba(255,19,105,.12);
  --accent-glow:rgba(255,19,105,.35);
  --bg:#050505;
  --bg2:#0a0a0a;
  --panel:#0d0d0d;
  --panel2:#131313;
  --line:#1c1c1c;
  --line2:#272727;
  --white:#fff;
  --gray:#9a9a9a;
  --gray-dim:#5c5c5c;
  --head:'Anton', Impact, sans-serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
::selection{background:var(--accent); color:#000;}
body{background:var(--bg); color:var(--white); font-family:var(--body); font-size:16px; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--head); font-weight:400; letter-spacing:.02em; text-transform:uppercase;}
body::after{
  content:""; position:fixed; inset:-50%; z-index:2000; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}20%{transform:translate(-12%,4%)}30%{transform:translate(6%,-14%)}40%{transform:translate(-4%,12%)}50%{transform:translate(-12%,8%)}60%{transform:translate(12%,0)}70%{transform:translate(0,12%)}80%{transform:translate(-12%,0)}90%{transform:translate(10%,4%)}}

/* ---------- LOADER ---------- */
#loader{position:fixed; inset:0; z-index:3000; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; transition:opacity .7s, visibility .7s;}
#loader.done{opacity:0; visibility:hidden;}
#loader svg{width:110px; overflow:visible;}
#loader .eyelid{transform-origin:100px 60px; animation:blink 1.6s ease-in-out infinite;}
@keyframes blink{0%,40%,100%{transform:scaleY(1)}50%{transform:scaleY(.06)}60%{transform:scaleY(1)}}
#loader .ld-tag{font-family:var(--mono); font-size:10px; letter-spacing:.4em; color:var(--gray-dim); text-transform:uppercase;}

/* ---------- CURSOR ---------- */
#cursor{position:fixed; z-index:2700; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--accent); pointer-events:none; transform:translate(-50%,-50%); transition:width .25s,height .25s,background .25s,opacity .3s; mix-blend-mode:difference; opacity:0;}
#cursor.on{opacity:1;}
#cursor.hover{width:52px; height:52px; background:var(--accent-soft);}
@media (hover:none){#cursor{display:none;}}

/* ---------- NAV ---------- */
nav.top{position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; padding:18px 40px; transition:transform .45s, background .45s, border-color .45s; border-bottom:1px solid transparent;}
nav.top.scrolled{background:rgba(5,5,5,.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom-color:var(--line);}
nav.top.hidden{transform:translateY(-100%);}
.nav-logo{display:flex; align-items:center; gap:12px;}
.nav-logo svg{width:44px; display:block;}
.nav-logo svg .eye-o{stroke:var(--accent);}
.nav-logo .wordmark{font-family:var(--head); font-size:19px; letter-spacing:.06em;}
.nav-logo .wordmark span{color:var(--accent);}
.nav-links{display:flex; gap:30px; align-items:center;}
.nav-links a{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); transition:color .3s; position:relative;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--accent); transition:width .3s;}
.nav-links a:hover{color:var(--white);}
.nav-links a:hover::after{width:100%;}
.nav-links a.on{color:var(--white);}
.nav-links a.on::after{width:100%;}
.nav-cta{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; border:1px solid var(--accent); color:var(--white); padding:11px 22px; border-radius:30px; transition:all .3s;}
.nav-cta:hover{background:var(--accent); color:#000; box-shadow:0 0 30px var(--accent-glow);}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.burger i{width:26px; height:2px; background:#fff; display:block; transition:all .3s;}
.burger.active i:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.active i:nth-child(2){opacity:0;}
.burger.active i:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
#mobileMenu{display:none;}
body.menu-open{overflow:hidden;}
body.menu-open nav.top{transform:none;}

/* ---------- HERO (index) ---------- */
.hero{position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:130px 40px 60px; overflow:hidden;}
#eyeCanvas{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
.hero-inner{position:relative; z-index:2;}
.hero-eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--accent); margin-bottom:30px; display:flex; align-items:center; gap:14px;}
.hero-eyebrow::before{content:""; width:44px; height:1px; background:var(--accent);}
.hero h1{font-size:clamp(58px,11vw,168px); line-height:.92;}
.hero h1 .dot{color:var(--accent);}
.hero h1 .row{display:block; overflow:hidden;}
.hero h1 .row i{display:inline-block; font-style:normal; transform:translateY(110%); animation:heroUp 1s cubic-bezier(.19,1,.22,1) forwards;}
.hero h1 .row:nth-child(2) i{animation-delay:.12s;}
@keyframes heroUp{to{transform:translateY(0)}}
.hero-sub{margin-top:34px; max-width:600px; color:var(--gray); font-size:18px; line-height:1.7; opacity:0; animation:fadeUp 1s ease .6s forwards;}
.hero-sub b{color:var(--white); font-weight:600;}
@keyframes fadeUp{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:translateY(0)}}
.hero-ctas{display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; opacity:0; animation:fadeUp 1s ease .8s forwards;}
.btn{display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; padding:16px 32px; border-radius:40px; transition:all .35s; cursor:pointer; border:1px solid var(--accent);}
.btn.solid{background:var(--accent); color:#000; font-weight:700;}
.btn.solid:hover{box-shadow:0 0 50px var(--accent-glow); transform:translateY(-2px);}
.btn.ghost{color:#fff;}
.btn.ghost:hover{background:var(--accent); color:#000; box-shadow:0 0 40px var(--accent-glow);}
.hero-meta{margin-top:64px; display:flex; gap:44px; flex-wrap:wrap; opacity:0; animation:fadeUp 1s ease 1s forwards;}
.hero-meta div{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-dim);}
.hero-meta div b{display:block; color:var(--white); font-size:13px; margin-bottom:4px; font-weight:500;}
.scroll-hint{position:absolute; bottom:34px; left:40px; z-index:2; display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gray-dim);}
.scroll-hint i{width:1px; height:44px; background:var(--line2); position:relative; overflow:hidden; display:block;}
.scroll-hint i::after{content:""; position:absolute; left:0; top:-50%; width:100%; height:50%; background:var(--accent); animation:scrollDrop 1.8s ease-in-out infinite;}
@keyframes scrollDrop{to{top:110%;}}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{position:relative; padding:200px 40px 90px; border-bottom:1px solid var(--line); overflow:hidden;}
.page-hero .ph-bg{position:absolute; right:-6%; top:50%; transform:translateY(-50%); width:46vw; opacity:.07; pointer-events:none;}
.page-hero .ph-bg path{stroke:var(--accent);}
.page-hero h1{font-size:clamp(54px,9vw,140px); line-height:.94; position:relative;}
.page-hero h1 .ghost{color:transparent; -webkit-text-stroke:1px var(--line2);}
.page-hero h1 .dot{color:var(--accent);}
.page-hero .ph-sub{margin-top:26px; color:var(--gray); font-size:18px; max-width:640px; line-height:1.7; position:relative;}
.page-hero .ph-sub b{color:#fff;}
.crumbs{font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:26px; display:flex; align-items:center; gap:14px;}
.crumbs::before{content:""; width:44px; height:1px; background:var(--accent);}

/* ---------- MARQUEE ---------- */
.marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; overflow:hidden; white-space:nowrap; background:var(--bg2);}
.marquee .track{display:inline-block; animation:marq 26s linear infinite;}
.marquee span{font-family:var(--head); font-size:30px; letter-spacing:.05em; text-transform:uppercase; margin:0 34px; color:var(--white);}
.marquee span.o{-webkit-text-stroke:1px var(--gray-dim); color:transparent;}
.marquee em{color:var(--accent); font-style:normal; font-size:22px; vertical-align:middle;}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
section{position:relative; padding:130px 40px; max-width:1440px; margin:0 auto;}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:64px; flex-wrap:wrap;}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:14px; margin-bottom:22px;}
.kicker::before{content:""; width:34px; height:1px; background:var(--accent);}
.sec-title{font-size:clamp(42px,6vw,90px); line-height:.95;}
.sec-title .ghost{color:transparent; -webkit-text-stroke:1px var(--line2);}
.sec-num{font-family:var(--mono); font-size:12px; color:var(--gray-dim); letter-spacing:.2em; text-align:right;}
.sec-num b{display:block; font-size:44px; color:var(--line2); font-weight:700; line-height:1;}
.lead{font-size:clamp(19px,2vw,24px); line-height:1.6; color:#d8d8d8; max-width:880px;}
.lead b{color:var(--white);}
.lead .a{color:var(--accent);}
html.js .rv{opacity:0; transform:translateY(46px); transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1);}
html.js .rv.vis{opacity:1; transform:translateY(0);}
.rv.d1{transition-delay:.08s;}.rv.d2{transition-delay:.16s;}.rv.d3{transition-delay:.24s;}.rv.d4{transition-delay:.32s;}

/* ---------- SHOWREEL ---------- */
.reel-wrap{max-width:none; padding:0; border-bottom:1px solid var(--line);}
.reel{position:relative; height:78vh; min-height:480px; overflow:hidden; cursor:pointer; background:#000;}
.reel .reel-frames{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:8px; opacity:.5;}
.reel .rf-row{white-space:nowrap; font-family:var(--head); text-transform:uppercase; font-size:clamp(40px,7vw,110px); line-height:1; color:transparent; -webkit-text-stroke:1px #2c2c2c; animation:reelSlide 30s linear infinite;}
.reel .rf-row:nth-child(2){animation-direction:reverse; -webkit-text-stroke-color:#222; animation-duration:38s;}
.reel .rf-row:nth-child(3){animation-duration:46s;}
.reel .rf-row b{color:var(--accent); -webkit-text-stroke:0; font-weight:400; margin:0 30px;}
.reel .rf-row .strike{text-decoration:none; margin:0 30px;}
@keyframes reelSlide{to{transform:translateX(-50%)}}
.reel .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:130px; height:130px; border-radius:50%; border:1px solid var(--accent);
  display:flex; align-items:center; justify-content:center; background:rgba(5,5,5,.55);
  backdrop-filter:blur(8px); transition:all .35s;
}
.reel:hover .play{transform:translate(-50%,-50%) scale(1.12); box-shadow:0 0 80px var(--accent-glow); background:var(--accent);}
.reel .play svg{width:34px; margin-left:6px;}
.reel .play svg path{fill:#fff; transition:fill .3s;}
.reel:hover .play svg path{fill:#000;}
.reel .reel-tag{position:absolute; left:40px; bottom:34px; z-index:3; font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gray);}
.reel .reel-tag b{color:var(--accent);}
.reel .reel-dur{position:absolute; right:40px; bottom:34px; z-index:3; font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--gray-dim);}
.reel-note{padding:14px 40px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--gray-dim); text-transform:uppercase; border-top:1px dashed var(--line);}
.reel-note b{color:var(--accent);}
.strike{text-decoration:line-through;}

/* video modal */
#vmodal{position:fixed; inset:0; z-index:2600; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; padding:5vw;}
#vmodal.open{display:flex;}
#vmodal .vbox{width:100%; max-width:1100px; aspect-ratio:16/9; background:#0a0a0a; border:1px solid var(--line2); border-radius:12px; overflow:hidden; position:relative;}
#vmodal iframe, #vmodal video{width:100%; height:100%; border:none; display:block;}
#vmodal .vempty{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:30px;}
#vmodal .vempty .t{font-family:var(--head); text-transform:uppercase; font-size:26px;}
#vmodal .vempty .t span{color:var(--accent);}
#vmodal .vempty p{color:var(--gray); font-size:13px; max-width:460px; font-family:var(--mono);}
#vmodal .vclose{position:absolute; top:-48px; right:0; background:none; border:none; color:#fff; font-family:var(--mono); font-size:12px; letter-spacing:.2em; cursor:pointer; text-transform:uppercase;}
#vmodal .vclose:hover{color:var(--accent);}
#vmodal .vwrap{position:relative; width:100%; max-width:1100px;}

/* ---------- WORK / PORTFOLIO ---------- */
.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:50px;}
.fbtn{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray); border:1px solid var(--line2); background:none; border-radius:30px; padding:10px 22px; cursor:pointer; transition:all .3s;}
.fbtn:hover{color:#fff; border-color:var(--accent);}
.fbtn.on{background:var(--accent); color:#000; border-color:var(--accent); font-weight:700;}
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.work-grid.home{grid-template-columns:repeat(3,1fr);}
.wcard{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); transition:transform .4s, border-color .4s, box-shadow .4s; position:relative; display:block;}
.wcard:hover{transform:translateY(-8px); border-color:var(--accent); box-shadow:0 30px 70px rgba(0,0,0,.55);}
.wcard .thumb{position:relative; aspect-ratio:4/3; overflow:hidden; background:#000;}
.wcard .thumb .art{position:absolute; inset:0; transition:transform .6s cubic-bezier(.19,1,.22,1);}
.wcard:hover .thumb .art{transform:scale(1.06);}
.wcard .thumb .cat{position:absolute; top:16px; left:16px; z-index:2; font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; background:rgba(5,5,5,.7); border:1px solid var(--line2); color:#fff; padding:6px 12px; border-radius:20px; backdrop-filter:blur(6px);}
.wcard .thumb .dur{position:absolute; bottom:14px; right:16px; z-index:2; font-family:var(--mono); font-size:10px; color:#fff; background:rgba(5,5,5,.7); padding:4px 10px; border-radius:4px;}
.wcard .thumb .wplay{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8); z-index:2; width:64px; height:64px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; opacity:0; transition:all .35s;}
.wcard:hover .thumb .wplay{opacity:1; transform:translate(-50%,-50%) scale(1);}
.wcard .thumb .wplay svg{width:18px; margin-left:3px;} .wcard .thumb .wplay svg path{fill:#000;}
.wcard .binfo{padding:22px 24px;}
.wcard .binfo h3{font-size:21px; letter-spacing:.04em; margin-bottom:6px;}
.wcard .binfo p{color:var(--gray); font-size:13px; line-height:1.55;}
.wcard .metrics{display:flex; gap:18px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); flex-wrap:wrap;}
.wcard .metrics div{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--gray-dim); text-transform:uppercase;}
.wcard .metrics div b{display:block; font-size:16px; color:var(--accent); font-weight:700; margin-bottom:2px;}
/* generative thumb arts */
.art.a1{background:radial-gradient(120% 100% at 20% 0%, #2a0313, #050505 60%);}
.art.a1::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg, transparent 0 34px, rgba(255,19,105,.16) 34px 36px);}
.art.a2{background:conic-gradient(from 210deg at 60% 40%, #050505, #1b040d, #050505 70%);}
.art.a2::after{content:""; position:absolute; width:70%; aspect-ratio:1; border-radius:50%; border:1.5px solid rgba(255,19,105,.5); top:15%; left:15%; box-shadow:0 0 90px rgba(255,19,105,.25) inset;}
.art.a3{background:linear-gradient(160deg, #0a0a0a, #000);}
.art.a3::after{content:""; position:absolute; inset:12% 8%; background:repeating-linear-gradient(0deg, transparent 0 26px, rgba(255,255,255,.08) 26px 27px), repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,.08) 26px 27px); border:1px solid rgba(255,19,105,.4);}
.art.a4{background:radial-gradient(80% 90% at 80% 80%, #24030f, #050505 65%);}
.art.a4::after{content:"◉"; position:absolute; font-size:120px; color:rgba(255,19,105,.35); top:50%; left:50%; transform:translate(-50%,-56%);}
.art.a5{background:#070707;}
.art.a5::after{content:""; position:absolute; inset:0; background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,19,105,.14) 0 6deg, transparent 6deg 30deg);}
.art.a6{background:linear-gradient(120deg, #16020b 0%, #050505 55%);}
.art.a6::after{content:"72H"; position:absolute; font-family:var(--head); font-size:110px; color:transparent; -webkit-text-stroke:1.5px rgba(255,19,105,.5); top:50%; left:50%; transform:translate(-50%,-52%);}

/* ---------- STATS ---------- */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:60px;}
.stat{border:1px solid var(--line); border-radius:14px; padding:28px; background:var(--panel); transition:border-color .3s;}
.stat:hover{border-color:var(--accent);}
.stat .v{font-family:var(--head); font-size:clamp(34px,4vw,54px); line-height:1;}
.stat .v em{color:var(--accent); font-style:normal;}
.stat .l{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray); margin-top:12px;}

/* ---------- ECO TILES (index) ---------- */
.eco-tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.etile{border:1px solid var(--line); border-radius:18px; padding:44px 40px; background:linear-gradient(160deg,var(--panel2),var(--bg2)); min-height:300px; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:border-color .4s, transform .4s;}
.etile:hover{border-color:var(--accent); transform:translateY(-6px);}
.etile .en{font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--accent); margin-bottom:22px;}
.etile h3{font-size:clamp(28px,3vw,44px); letter-spacing:.03em; margin-bottom:12px;}
.etile p{color:var(--gray); font-size:14.5px; max-width:420px; line-height:1.65;}
.etile .elink{margin-top:auto; padding-top:26px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#fff; display:flex; align-items:center; gap:10px; transition:color .3s, gap .3s;}
.etile:hover .elink{color:var(--accent); gap:16px;}
.etile .bigghost{position:absolute; right:-10px; bottom:-30px; font-family:var(--head); font-size:150px; color:transparent; -webkit-text-stroke:1px var(--line); pointer-events:none; text-transform:uppercase; line-height:1;}
.etile:hover .bigghost{-webkit-text-stroke-color:rgba(255,19,105,.25);}

/* ---------- PROCESS ---------- */
.proc{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:60px;}
.pstep{padding:34px 28px; border-right:1px solid var(--line); background:var(--bg2); transition:background .3s;}
.pstep:last-child{border-right:none;}
.pstep:hover{background:var(--panel2);}
.pstep .pn{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.2em; margin-bottom:16px;}
.pstep h4{font-family:var(--head); font-weight:400; font-size:20px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px;}
.pstep p{color:var(--gray); font-size:13px; line-height:1.6;}

/* ---------- QUOTE STRIP ---------- */
.quote-strip{text-align:center; max-width:1100px;}
.quote-strip blockquote{font-family:var(--head); text-transform:uppercase; font-size:clamp(28px,4.2vw,58px); line-height:1.15;}
.quote-strip blockquote .a{color:var(--accent);}
.quote-strip cite{display:block; margin-top:32px; font-family:var(--mono); font-style:normal; font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--gray-dim);}

/* ---------- TESTIMONIALS ---------- */
.tst-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.tst{border:1px solid var(--line); border-radius:16px; padding:32px; background:var(--panel); display:flex; flex-direction:column; gap:20px; transition:border-color .3s;}
.tst:hover{border-color:var(--line2);}
.tst .q{color:#d8d8d8; font-size:15px; line-height:1.7; font-style:italic;}
.tst .q::before{content:"“"; color:var(--accent); font-size:34px; font-style:normal; line-height:0; vertical-align:-10px; margin-right:6px; font-family:var(--head);}
.tst .who{margin-top:auto; display:flex; align-items:center; gap:14px;}
.tst .who .av{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, var(--accent), #3a0119); flex:0 0 44px;}
.tst .who b{display:block; font-size:14px;}
.tst .who span{font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--gray-dim); text-transform:uppercase;}

/* ---------- FEATURE LIST / SPLIT ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; margin-top:50px;}
.feature-list{display:flex; flex-direction:column;}
.feat{padding:26px 6px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:64px 1fr; gap:18px; transition:padding-left .3s, background .3s;}
.feat:first-child{border-top:1px solid var(--line);}
.feat:hover{padding-left:18px; background:var(--bg2);}
.feat .f-n{font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.1em; padding-top:4px;}
.feat h4{font-family:var(--head); font-weight:400; text-transform:uppercase; font-size:19px; letter-spacing:.05em; margin-bottom:6px;}
.feat p{color:var(--gray); font-size:14px; line-height:1.6;}
.big-visual{position:sticky; top:120px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--bg2); padding:44px; min-height:420px; display:flex; flex-direction:column; justify-content:space-between;}
.big-visual .bv-k{font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent);}
.big-visual .bv-t{font-family:var(--head); text-transform:uppercase; font-size:clamp(30px,3.4vw,48px); line-height:1.05; margin:18px 0;}
.big-visual .bv-t .ghost{color:transparent; -webkit-text-stroke:1px var(--gray-dim);}
.big-visual .bv-d{color:var(--gray); font-size:14px; max-width:420px; line-height:1.65;}
.big-visual .bv-eye{position:absolute; right:-40px; bottom:-50px; width:280px; opacity:.14; transform:rotate(-8deg);}
.big-visual .bv-eye path{stroke:var(--accent);}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.chip{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--gray); border:1px solid var(--line2); border-radius:30px; padding:8px 16px; transition:all .3s; cursor:default;}
.chip:hover{border-color:var(--accent); color:#fff; box-shadow:0 0 20px var(--accent-soft);}

/* ---------- CARD GRIDS ---------- */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; perspective:1200px;}
.cards4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px;}
.xcard{border:1px solid var(--line); border-radius:16px; background:linear-gradient(160deg,var(--panel2),var(--bg2)); padding:36px 30px; display:flex; flex-direction:column; transition:border-color .4s, box-shadow .4s, transform .4s; position:relative; overflow:hidden;}
.xcard:hover{border-color:var(--line2); box-shadow:0 30px 80px rgba(0,0,0,.5); transform:translateY(-6px);}
.xcard .xn{font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--accent); margin-bottom:22px; text-transform:uppercase;}
.xcard h3{font-size:26px; letter-spacing:.04em; margin-bottom:8px;}
.xcard .xt{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-dim); margin-bottom:20px;}
.xcard ul{list-style:none; display:flex; flex-direction:column; gap:11px; margin-top:auto;}
.xcard ul li{position:relative; padding-left:20px; color:#cfcfcf; font-size:14px; line-height:1.55;}
.xcard ul li::before{content:"—"; position:absolute; left:0; color:var(--accent); font-weight:700;}
.xcard .price{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:#fff;}
.xcard .price b{color:var(--accent); font-size:18px;}
.xcard.hot{border-color:var(--accent);}
.xcard.hot::before{content:"POPULAR"; position:absolute; top:18px; right:-34px; transform:rotate(45deg); background:var(--accent); color:#000; font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.2em; padding:5px 40px;}

/* ---------- PRICING TABLE ---------- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
table.pr{width:100%; border-collapse:collapse; margin:40px 0 10px; font-size:14px;}
table.pr th{background:var(--accent); color:#000; text-transform:uppercase; letter-spacing:.06em; font-size:11px; text-align:left; padding:14px 16px; font-weight:800; font-family:var(--mono);}
table.pr td{padding:14px 16px; border-bottom:1px solid var(--line); color:#d8d8d8; vertical-align:top;}
table.pr tr:nth-child(even) td{background:var(--panel);}
table.pr td.hl{color:var(--accent); font-weight:700; white-space:nowrap;}
table.pr td b{color:#fff;}

/* ---------- PRINCIPLES / NUM LIST ---------- */
.nlist{counter-reset:pr; margin-top:20px;}
.nitem{display:grid; grid-template-columns:110px 1fr; gap:30px; align-items:baseline; padding:36px 10px; border-bottom:1px solid var(--line); transition:background .3s, padding-left .3s;}
.nitem:first-child{border-top:1px solid var(--line);}
.nitem:hover{background:var(--bg2); padding-left:24px;}
.nitem .p-n{font-family:var(--head); font-size:52px; color:transparent; -webkit-text-stroke:1px var(--line2); transition:all .35s; line-height:1;}
.nitem:hover .p-n{color:var(--accent); -webkit-text-stroke:1px var(--accent);}
.nitem h3{font-size:clamp(20px,2.4vw,30px); letter-spacing:.04em; margin-bottom:8px;}
.nitem p{color:var(--gray); font-size:15px; max-width:760px; line-height:1.65;}

/* ---------- FAQ ---------- */
.faq{margin-top:40px;}
.faq details{border-bottom:1px solid var(--line);}
.faq details:first-child{border-top:1px solid var(--line);}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 6px; font-family:var(--head); text-transform:uppercase; font-size:19px; letter-spacing:.04em; transition:color .3s, padding-left .3s;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--accent); font-size:26px; font-family:var(--mono); transition:transform .3s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq summary:hover{color:var(--accent); padding-left:14px;}
.faq .fa{padding:0 6px 26px; color:var(--gray); font-size:15px; max-width:800px; line-height:1.7;}
.faq .fa b{color:#fff;}

/* ---------- CTA BAND ---------- */
.cta-band{max-width:none; background:var(--bg2); border-top:1px solid var(--line); text-align:center; padding:150px 40px;}
.cta-band .kicker{justify-content:center;}
.cta-band .kicker::before{display:none;}
.cta-band h2{font-size:clamp(48px,9vw,130px); line-height:.95;}
.cta-band h2 a{position:relative; display:inline-block;}
.cta-band h2 a .dot{color:var(--accent);}
.cta-band h2 a::after{content:""; position:absolute; left:0; bottom:6px; height:4px; width:0; background:var(--accent); transition:width .5s cubic-bezier(.19,1,.22,1);}
.cta-band h2 a:hover::after{width:100%;}
.cta-band .c-sub{color:var(--gray); margin-top:28px; font-size:16px;}
.cta-band .c-mail{display:inline-flex; align-items:center; gap:14px; margin-top:40px; border:1px solid var(--accent); border-radius:40px; padding:18px 38px; font-family:var(--mono); font-size:13px; letter-spacing:.14em; transition:all .35s;}
.cta-band .c-mail:hover{background:var(--accent); color:#000; box-shadow:0 0 60px var(--accent-glow);}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); padding:60px 40px 50px; display:flex; align-items:flex-start; justify-content:space-between; gap:30px; flex-wrap:wrap;}
footer .f-brand{display:flex; align-items:center; gap:12px;}
footer .f-brand svg{width:34px;}
footer .f-brand svg .eye-o{stroke:var(--accent);}
footer .f-brand b{font-family:var(--head); font-weight:400; font-size:15px; letter-spacing:.06em;}
footer .f-brand b span{color:var(--accent);}
footer .cols{display:flex; gap:34px; flex-wrap:wrap;}
footer .cols a, footer .cols span{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-dim); transition:color .3s;}
footer .cols a:hover{color:var(--accent);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .work-grid, .work-grid.home, .tst-grid, .cards3{grid-template-columns:repeat(2,1fr);}
  .cards4, .eco-tiles, .split{grid-template-columns:1fr;}
  .big-visual{position:static;}
  .proc{grid-template-columns:repeat(2,1fr);}
  .pstep{border-bottom:1px solid var(--line);}
}
@media (max-width:760px){
  nav.top{padding:14px 20px;}
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .burger{display:flex;}
  #mobileMenu{display:block; position:fixed; inset:0; z-index:990; background:rgba(5,5,5,.97); backdrop-filter:blur(10px); padding:110px 30px; transform:translateY(-100%); visibility:hidden; transition:transform .45s cubic-bezier(.19,1,.22,1), visibility 0s linear .45s;}
  #mobileMenu.open{transform:translateY(0); visibility:visible; transition:transform .45s cubic-bezier(.19,1,.22,1), visibility 0s linear 0s;}
  #mobileMenu a{display:block; font-family:var(--head); font-size:34px; text-transform:uppercase; padding:12px 0; border-bottom:1px solid var(--line); color:#fff;}
  #mobileMenu a span{color:var(--accent);}
  section{padding:90px 20px;}
  .hero{padding:120px 20px 90px;}
  .page-hero{padding:150px 20px 70px;}
  .scroll-hint{left:20px;}
  .work-grid, .work-grid.home, .tst-grid, .cards3, .stat-row, .proc{grid-template-columns:1fr;}
  .nitem{grid-template-columns:1fr; gap:8px;}
  .cta-band{padding:100px 20px;}
  footer{padding:50px 20px;}
  .reel{height:60vh;}
  .reel .play{width:92px; height:92px;}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  body::after{animation:none;}
  .marquee .track{animation:none;}
  .reel .rf-row{animation:none;}
  #loader .eyelid{animation:none;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  html.js .rv{opacity:1; transform:none;}
}

/* ===== Обложки кейсов из админки (public/uploads) ===== */
.wcard .thumb img.cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.19,1,.22,1);}
.wcard:hover .thumb img.cover{transform:scale(1.06);}