/* CQS Audio Innovations - site styles.
   Edit colors and fonts in the :root block. Fonts live in /fonts (Michroma and Montserrat, free open-license fonts). */
@font-face{font-family:"Michroma";src:url("fonts/michroma-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
:root{
  --bg:#05070B; --bg2:#0A0E15; --card:#0E131C; --rule:#232B38;
  --text:#C5CBD3; --head:#EEF1F5; --muted:#8E97A4;
  --blue:#3274C5; --blue-bright:#6BA3FF; --blue-deep:#2A63AC; --on-blue:#FFFFFF;
  --chrome:linear-gradient(180deg,#FBFCFD 0%,#C3C8CF 40%,#868C96 55%,#DDE1E6 100%);
  --chrome-soft:linear-gradient(180deg,#FFFFFF 0%,#D5D9DF 55%,#A9AFB8 100%);
  --display:"Michroma","Eurostile","Arial Black",system-ui,sans-serif;
  --font:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:1120px; --gut:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16.5px/1.7 var(--font);-webkit-text-size-adjust:100%;overflow-x:hidden}
img,svg{max-width:100%;height:auto}
a{color:var(--blue-bright);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#B3CFFF}
h1,h2,h3{color:var(--head);line-height:1.25;margin:0 0 .6em}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:.02em}
h1{font-size:clamp(1.55rem,3.9vw,2.6rem)} h2{font-size:clamp(1.2rem,2.6vw,1.75rem)}
h3{font-size:1.08rem;font-weight:700}
h1{background:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--head)}
h1 .accent{background:linear-gradient(180deg,#9CC4FF,#3274C5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
p{margin:0 0 1em} ul,ol{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative}
.narrow{max-width:780px}.center{text-align:center}
section{padding:84px 0;position:relative}
.skip{position:absolute;left:-999px;top:0;background:var(--blue);color:var(--on-blue);padding:10px 14px;z-index:20}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px}

/* header */
.site-header{position:sticky;top:0;z-index:10;background:rgba(5,7,11,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;max-width:1260px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-decoration:none;line-height:1}
.brand-img{height:33px;width:auto;display:block}
.brand-text{font-size:.5rem;letter-spacing:.26em;text-transform:uppercase;color:#B9BFC8;font-weight:600;white-space:nowrap;padding-left:2px}
.nav{display:flex;align-items:center;gap:22px}
.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav a{color:var(--text);text-decoration:none;font-size:.82rem;font-weight:600;letter-spacing:.02em;position:relative;white-space:nowrap}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--blue-bright);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav ul a:hover::after,.nav ul a[aria-current="page"]::after{transform:scaleX(1)}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav .btn{color:var(--on-blue)}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);color:var(--head);padding:8px 14px;border-radius:6px;font:inherit;cursor:pointer}

/* buttons */
.btn{position:relative;overflow:hidden;display:inline-block;background:linear-gradient(180deg,#3270C0,#2A63AC);color:var(--on-blue);font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:14px 26px;border-radius:6px;border:1px solid #6BA3FF;font-size:.8rem;cursor:pointer;box-shadow:0 0 0 rgba(107,163,255,0);transition:box-shadow .25s,transform .25s}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .5s}
.btn:hover{color:var(--on-blue);box-shadow:0 0 24px rgba(107,163,255,.45);transform:translateY(-1px)}
.btn:hover::after{left:130%}
.btn-ghost{background:transparent;color:var(--head);border:1px solid #8B919A}
.btn-ghost:hover{background:rgba(107,163,255,.12);color:#fff;border-color:var(--blue-bright)}
.btn-sm{padding:10px 17px;font-size:.74rem}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.center .cta-row{justify-content:center}

/* hero */
.hero{padding:92px 0 150px;border-bottom:1px solid var(--rule);overflow:hidden;background:radial-gradient(900px 420px at 84% 18%,rgba(50,116,197,.30) 0,transparent 70%),radial-gradient(600px 300px at 0% 100%,rgba(107,163,255,.10) 0,transparent 70%)}
.gridbg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(107,163,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(107,163,255,.08) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 72% 30%,#000 0,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 72% 30%,#000 0,transparent 75%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero-logo{width:100%;display:block;filter:drop-shadow(0 0 38px rgba(50,116,197,.45));animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.eyebrow{text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;font-weight:600;color:var(--blue-bright);margin-bottom:14px}
.lead{font-size:1.1rem;color:var(--text);max-width:700px}
.lockup{margin:34px 0 0;font-family:var(--display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#C3C8CF;padding-top:18px;border-top:1px solid var(--rule);display:inline-block}
.eq{position:absolute;left:0;right:0;bottom:0;height:96px;display:flex;align-items:flex-end;justify-content:center;gap:5px;padding:0 var(--gut);-webkit-mask-image:linear-gradient(0deg,#000 0,transparent 100%);mask-image:linear-gradient(0deg,#000 0,transparent 100%);opacity:.7;pointer-events:none}
.eq span{flex:1 1 0;max-width:14px;height:calc(var(--h)*1%);min-height:8px;background:linear-gradient(0deg,#3274C5,#C3C8CF);border-radius:3px 3px 0 0;animation:eq 2.6s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.17s);transform-origin:bottom}
@keyframes eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

/* page head */
.page-head{padding:76px 0 40px;border-bottom:1px solid var(--rule);overflow:hidden;background:radial-gradient(800px 260px at 90% 0,rgba(50,116,197,.22) 0,transparent 70%)}
.page-head .gridbg{-webkit-mask-image:radial-gradient(ellipse 60% 100% at 80% 0,#000 0,transparent 75%);mask-image:radial-gradient(ellipse 60% 100% at 80% 0,#000 0,transparent 75%)}
.band{background:var(--bg2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sub{color:var(--muted)}

/* method */
.method{background:linear-gradient(180deg,var(--bg),var(--bg2));border-bottom:1px solid var(--rule)}
.method-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start;margin-top:34px}
.steps{list-style:none;padding:0;margin:0;position:relative}
.steps::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,var(--blue-bright),rgba(107,163,255,0))}
.steps li{display:flex;gap:20px;padding:0 0 30px;position:relative}
.num{font-family:var(--display);font-size:1.05rem;min-width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--blue-bright);color:var(--head);box-shadow:0 0 18px rgba(107,163,255,.25);flex:none}
.steps h3{font-family:var(--display);font-weight:400;font-size:1.1rem;margin:.55em 0 .3em;letter-spacing:.03em}
.steps p{margin:0;color:var(--text)}
.graph{margin:0;background:linear-gradient(180deg,#0F1622,#0A0E15);border:1px solid var(--rule);border-radius:14px;padding:18px 18px 14px;box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)}
.graph-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.tabs{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:3px;background:var(--bg)}
.tabs button{border:0;background:transparent;color:var(--muted);font:600 .74rem var(--font);letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;border-radius:999px;cursor:pointer}
.tabs button[aria-pressed="true"]{background:linear-gradient(180deg,#3270C0,#2A63AC);color:#fff}
.graph-note{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.graph svg{width:100%;display:block}
.graph figcaption{font-family:var(--display);font-size:.8rem;letter-spacing:.05em;color:var(--head);margin:6px 2px 2px;min-height:1.5em}
.graph-fine{font-size:.78rem;color:var(--muted);margin:4px 2px 0}

/* cards */
.grid{display:grid;gap:22px;margin-top:30px}
.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.four{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:linear-gradient(180deg,#111723,var(--card));border:1px solid var(--rule);border-radius:12px;padding:26px;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.card.glow::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(107,163,255,.16),transparent 60%);opacity:0;transition:opacity .3s}
.card.glow:hover{transform:translateY(-4px);border-color:rgba(107,163,255,.7);box-shadow:0 18px 50px rgba(0,0,0,.5)}
.card.glow:hover::before{opacity:1}
.card p:last-child{margin-bottom:0}
a.card.link{display:block;text-decoration:none;color:var(--text)}
.ico{display:block;width:56px;height:56px;margin-bottom:16px}
.ico svg{width:100%;height:100%;fill:none;stroke:var(--blue-bright);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tag-no{position:absolute;top:18px;right:20px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.price{font-family:var(--display);font-size:1.75rem;margin:.1em 0 .5em;background:var(--chrome-soft);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--head)}
.more{font-weight:700;text-decoration:none}
.note{color:var(--muted);font-size:.88rem}
.ticks{list-style:none;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:.6em}
.ticks li::before{content:"";position:absolute;left:2px;top:.62em;width:12px;height:6px;border-left:2px solid var(--blue-bright);border-bottom:2px solid var(--blue-bright);transform:rotate(-45deg)}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.chips li{border:1px solid var(--rule);background:var(--card);border-radius:999px;padding:9px 18px;font-size:.9rem;transition:border-color .25s,color .25s}
.chips li:hover{border-color:var(--blue-bright);color:#fff}
.service{display:grid;grid-template-columns:minmax(230px,1fr) 2fr;gap:30px;padding:38px 0;border-bottom:1px solid var(--rule)}
.service:last-child{border-bottom:0}
.service .num{margin-bottom:16px}
.service h2{font-size:1.2rem}

/* demo + final */
.demo{background:var(--bg2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.demo-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
.demo-photo{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--rule);box-shadow:0 18px 50px rgba(0,0,0,.45)}.demo-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.portrait{margin:0 0 8px;line-height:0;max-width:300px}.portrait img{display:block;width:100%;height:auto}
.social{display:flex;gap:12px;margin:6px 0 16px}.social a{width:44px;height:44px;border:1px solid var(--rule);border-radius:50%;display:grid;place-items:center;color:#C3C8CF;text-decoration:none;background:rgba(255,255,255,.03);transition:color .2s,border-color .2s,background .2s}.social a:hover,.social a:focus-visible{color:#6BA3FF;border-color:#3274C5;background:rgba(50,116,197,.12)}.social svg{width:22px;height:22px;display:block}
.follow{margin:34px 0 0;color:#9fb0c6;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase}.social-c{justify-content:center}
.arcs svg{width:100%;max-width:340px;margin:0 auto;display:block;filter:drop-shadow(0 0 22px rgba(50,116,197,.5))}
.arcs .a1{stroke:#C3C8CF;stroke-width:3}.arcs .a2{stroke:#6BA3FF;stroke-width:4}.arcs .a3{stroke:#3274C5;stroke-width:4}
.arcs .a2,.arcs .a3,.arcs .a1{animation:pulse 3.2s ease-in-out infinite}
.arcs .a2{animation-delay:.3s}.arcs .a3{animation-delay:.6s}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
.final{border-top:1px solid var(--rule);background:radial-gradient(700px 260px at 50% 0,rgba(50,116,197,.22) 0,transparent 70%),linear-gradient(180deg,var(--bg2),var(--bg))}
.big-sig{font-family:var(--display);font-size:clamp(1.05rem,3vw,1.7rem);letter-spacing:.06em;margin:0 0 22px;background:var(--chrome-soft);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--head)}
.book-list{list-style:none;margin:14px 0;padding:0}.book-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}.book-list li:last-child{border-bottom:0}.book-list strong{display:block}.book-list span{display:block;color:#9fb0c6;font-size:.92rem;margin-top:2px}
.booking{min-height:320px}
iframe.cal{width:100%;min-height:680px;border:0;border-radius:8px;background:#fff}
.form label{display:block;margin-bottom:16px;font-size:.9rem;color:var(--head)}
.form input,.form textarea{display:block;width:100%;margin-top:6px;padding:12px;background:#080C12;border:1px solid var(--rule);border-radius:6px;color:var(--head);font:inherit}
.form input:focus,.form textarea:focus{border-color:var(--blue-bright);outline:none;box-shadow:0 0 0 3px rgba(107,163,255,.2)}
.hp{position:absolute;left:-9999px}

/* footer */
.site-footer{border-top:1px solid var(--rule);background:#030508;padding:54px 0 26px;font-size:.92rem}
.sig{font-family:var(--display);font-size:clamp(.95rem,2.6vw,1.55rem);letter-spacing:.08em;text-align:center;margin:0 0 40px;padding-bottom:34px;border-bottom:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:center;gap:.3em 1em}
.sig span{background:var(--chrome-soft);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--head)}
.sig span:nth-child(2){background:linear-gradient(180deg,#9CC4FF,#3274C5);-webkit-background-clip:text;background-clip:text}
.foot{display:grid;grid-template-columns:2fr 2fr 1fr;gap:28px}
.foot p{margin:0 0 .5em}
.legal{margin-top:30px;color:var(--muted);font-size:.82rem}



/* photo hero */
.hero-copy .hero-q{margin:0;max-width:640px}
.stmt-h2{font-size:clamp(1.55rem,3.9vw,2.6rem);margin:0 0 .6em;background:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--head)}
.stmt-h2 .accent{background:linear-gradient(180deg,#9CC4FF,#3274C5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.statement{padding:72px 0 8px}
.stmt-copy{max-width:760px}.stmt-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}.stmt-photo{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--rule);box-shadow:0 18px 50px rgba(0,0,0,.45)}.stmt-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}.stmt-photo figcaption{text-align:center;padding:12px 14px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#9CC4FF;background:#04070C;font-weight:700}.stmt-photo.tall img{aspect-ratio:4/5;object-position:center 40%}.stmt-photo.solo{max-width:880px;margin:30px auto 0}@media(min-width:900px){.stmt-grid{grid-template-columns:1.05fr 1fr;gap:48px}}
.statement .kicker{margin-bottom:14px}
.notalone{font-family:var(--display);font-size:.95rem;letter-spacing:.06em;color:#9CC4FF;margin:0 0 18px}
.elements{padding:84px 0 40px}
.elements .enum{display:block;font-family:var(--display);font-size:.8rem;color:#6BA3FF;letter-spacing:.2em;margin-bottom:12px}
.closer{margin:34px 0 0;font-family:var(--display);font-size:clamp(1rem,2.2vw,1.35rem);letter-spacing:.03em;color:var(--head);max-width:760px}
.spaces .card .ticks{margin:8px 0 0}
.invest{margin-top:34px;padding:26px;border:1px solid var(--rule);border-radius:12px;background:linear-gradient(180deg,#0E141F,#0A0F18);max-width:860px}
.invest h3{font-family:var(--display);font-size:1.05rem;margin:0 0 10px}.invest p{margin:0}
.glance{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 26px;padding:22px;border:1px solid var(--rule);border-radius:12px;background:linear-gradient(180deg,#0E141F,#0A0F18)}
.glance span{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#8FB6F2;margin-bottom:6px}.glance strong{font-weight:600;font-size:.92rem;color:var(--head)}
.cs-steps{margin-top:26px;max-width:860px}
.claims{display:grid;gap:22px;margin-top:28px}
.claim{padding:26px;border:1px solid var(--rule);border-radius:12px;background:linear-gradient(180deg,#111723,var(--card))}
.claim h3{font-family:var(--display);font-size:1.05rem;margin:0 0 12px}.claim p{margin:0 0 10px}.claim .limit{color:#C9CED6;border-top:1px solid var(--rule);padding-top:10px;margin-top:14px;margin-bottom:0}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.shot{margin:0}.shot-btn{display:block;width:100%;padding:0;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:#000;cursor:zoom-in}
.shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s}.shot-btn:hover img{transform:scale(1.03)}
.shot .ph{aspect-ratio:4/3;border:1px dashed #3A4B6A;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#6F86AD;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;background:repeating-linear-gradient(45deg,#0B111B,#0B111B 12px,#0D1420 12px,#0D1420 24px)}
.shot figcaption{padding:12px 2px 0}.shot figcaption strong{display:block;font-size:.95rem;color:var(--head);margin-bottom:4px}.shot figcaption span{font-size:.88rem;color:#AEB4BD}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(3,5,9,.92);display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.lightbox.open{display:flex}.lightbox img{max-width:100%;max-height:100%;border-radius:8px}
.cs-teaser-in{max-width:760px}
@media(max-width:900px){.glance{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.glance{grid-template-columns:1fr}.gallery{grid-template-columns:1fr}}
.hero-photo{padding:0;min-height:clamp(580px,80vh,780px);display:flex;align-items:center;background:var(--bg)}
.hero-bg{position:absolute;inset:0;display:block}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 45%;display:block}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,11,.94) 0%,rgba(5,7,11,.78) 38%,rgba(5,7,11,.30) 72%,rgba(5,7,11,.12) 100%),linear-gradient(0deg,var(--bg) 0%,rgba(5,7,11,0) 28%),linear-gradient(180deg,rgba(5,7,11,.55) 0%,rgba(5,7,11,0) 22%)}
.hero-copy-wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:150px;width:100%}
.hero-copy{max-width:640px}
.kicker{font-style:italic;color:#D5D9DF;margin:0 0 14px;font-size:1.02rem;max-width:560px}
.img-note{position:absolute;z-index:3;right:var(--gut);bottom:104px;margin:0;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#C3C8CF;text-shadow:0 1px 6px #000}
.film{padding:56px 0 8px}.film-frame{position:relative;max-width:960px;margin:0 auto;border-radius:8px;overflow:hidden;border:1px solid var(--rule);background:#000}.film-frame video{display:block;width:100%;height:auto}.film-tag{position:static;margin:0;padding:14px 16px;text-align:center;font-size:clamp(.7rem,1.8vw,1rem);letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:600;background:#04070C}.film-snd{position:absolute;top:12px;right:12px;font:600 .66rem Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 14px;cursor:pointer}
.proof figure:not(.lead){aspect-ratio:auto}.proof figure:not(.lead) img{position:absolute;inset:0}.visit{padding:56px 0 8px}.visit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}@media(max-width:900px){.visit-grid{grid-template-columns:repeat(2,1fr)}.proof-grid{grid-template-columns:1fr}}@media(max-width:480px){.visit-grid{grid-template-columns:1fr}}
.walk{padding:44px 0 4px}.walk .btn{margin-top:6px}
.final{position:relative;overflow:hidden}
.final-bg{position:absolute;inset:0;z-index:0;background:#05070b url(/video/droplet-poster.jpg) center/cover no-repeat}
.final-bg video{width:100%;height:100%;object-fit:cover;display:block;opacity:.5}
.final-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(5,7,11,.55) 28%,rgba(5,7,11,.62) 70%,var(--bg) 100%)}
.final .wrap{position:relative}
@media (prefers-reduced-motion:reduce){.final-bg video{display:none}}@media(max-width:700px){.final-bg video{display:none}}
.final-logo{width:min(420px,80%);height:auto;margin:0 auto 26px;display:block;mix-blend-mode:screen}
.proof{padding:14px 0;background:#04070C;border-bottom:1px solid var(--rule)}.proof-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:10px}.proof figure{margin:0;position:relative;overflow:hidden;border-radius:6px;aspect-ratio:16/9}.proof img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.85)}.proof figcaption{position:absolute;left:12px;bottom:10px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:700;text-shadow:0 1px 8px #000}
.principle-bar{border-top:1px solid #1d3f66;border-bottom:1px solid #1d3f66;background:linear-gradient(90deg,#071322,#0b2744 55%,#061323);text-align:center;padding:20px 0}.principle-bar strong{font-family:var(--display);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:#E7F1FF;font-weight:400}.principle-bar i{color:#6BA3FF;font-style:normal;margin:0 8px}
@media(max-width:700px){.proof-grid{grid-template-columns:1fr}.principle-bar strong{font-size:.62rem;letter-spacing:.12em}}

/* report outline */
.report-sec{background:var(--bg2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.report-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.report{margin:0;background:linear-gradient(180deg,#F3F5F8,#D9DDE3);color:#10141B;border-radius:12px;padding:22px 24px 16px;box-shadow:0 24px 60px rgba(0,0,0,.55);transform:rotate(1.2deg)}
.report-head{display:flex;justify-content:space-between;gap:10px;font-family:var(--display);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid #3274C5;padding-bottom:10px;margin-bottom:12px;color:#10141B}
.report ol{list-style:none;margin:0;padding:0}
.report li{display:flex;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(16,20,27,.14);font-size:.92rem;font-weight:600}
.report li b{font-family:var(--display);font-weight:400;font-size:.7rem;color:#2A63AC}
.report figcaption{font-size:.72rem;color:#4A5463;margin-top:10px}
/* FAQ */
.faq details{border:1px solid var(--rule);border-radius:10px;background:linear-gradient(180deg,#111723,var(--card));margin-bottom:12px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font-weight:700;color:var(--head);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--display);color:var(--blue-bright);font-size:1.2rem}
.faq details[open] summary::after{content:"\2212"}
.faq details[open]{border-color:rgba(107,163,255,.6)}
.faq details p{padding:0 0 18px;margin:0}
.js .reveal.in{opacity:1;transform:none}

/* scroll reveal (only when JS is running) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  section{padding:60px 0}
  .hero{padding:0}
  .hero-copy-wrap{padding-top:64px;padding-bottom:120px}
  .hero-shade{background:linear-gradient(180deg,rgba(5,7,11,.82) 0%,rgba(5,7,11,.72) 55%,rgba(5,7,11,.9) 100%)}
  .img-note{bottom:100px}
  .hero-grid,.method-grid,.demo-grid,.report-grid{grid-template-columns:1fr}
  .report{transform:none}
  .hero-art{max-width:460px;margin:6px auto 0}
  .grid.four,.grid.three,.grid.two{grid-template-columns:1fr 1fr}
  .service{grid-template-columns:1fr;gap:10px}
  .foot{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:68px;background:var(--bg);border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;padding:14px var(--gut) 20px;gap:14px}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;gap:2px}
  .nav ul a{display:block;padding:12px 0;border-bottom:1px solid var(--rule)}
  .nav ul a::after{display:none}
}
@media (max-width:560px){
  .grid.four,.grid.three,.grid.two{grid-template-columns:1fr}
  body{font-size:16px}
  .lockup{font-size:.66rem}
  .eq span:nth-child(n+33){display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-logo,.eq span,.arcs .a1,.arcs .a2,.arcs .a3{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
}