/* PROJECT TAWQ: video theme (screen only; the print styles in each page are unchanged).
   Visual and layout changes only: no wording, numbers or calculations live here. */
:root{--bg0:#071330;--bg1:#0B2240;--tl:#2FE3D3;--cy:#5FF3FF;--li:#C4B3FF;--or:#F2964F;--tx:#EAF4F6;--tx2:#BFD3DE;--mu:#8EA7BA;
--glass:rgba(10,34,64,.62);--gline:rgba(95,243,255,.25);--shadow:0 20px 44px rgba(0,0,0,.4);
/* the page's own tokens, remapped for a dark page */
--navy:#EAF4F6;--navy2:#BFD3DE;--ink:#EAF4F6;--ink2:#BFD3DE;--muted:#8EA7BA;--line:rgba(95,243,255,.16);--soft:rgba(10,34,64,.62);
--teal:#2FE3D3;--teal2:#2BB8AC;--tealb:#2FE3D3;--tealt:rgba(47,227,211,.10)}
html{background:var(--bg0);color-scheme:dark}
body{background:var(--bg0);color:var(--tx);font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
h1,h2,h3,h4{font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#fff}
.tagline{font-family:Lora,Georgia,"Times New Roman",serif;font-style:italic;color:var(--tx2)}
a{color:var(--cy)}
a:hover{color:#fff}
::selection{background:rgba(95,243,255,.35);color:#fff}

/* glass cards and panels */
.kpi,.mcard,details.calc,.chart,.gates li,.opt,.vcard,.howfoot .box,.ovw,.figr .frame,.vblock{
background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--gline);border-radius:18px;box-shadow:var(--shadow)}
.inshort,.limit,.aiq{background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--gline);
border-left:4px solid var(--tl);border-radius:0 16px 16px 0;box-shadow:var(--shadow);color:var(--tx)}
.inshort .lab{color:var(--cy)}
.limit{border-left-color:var(--or)}
.limit .lab,.hero-limit .lab{color:var(--or)}
.aiq{border-left-color:var(--li)}

/* hero */
.hero{background:var(--bg0)}
.hero-art{background:var(--bg0)}
.hero h1{font-weight:800}
.kpi .big{color:var(--or)}
.kpi .mean{color:var(--tx2)}
.hero-limit{background:rgba(10,34,64,.62);border:1px solid rgba(242,150,79,.55);border-radius:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-foot{color:var(--tx2)}
.art-tag{background:rgba(7,19,48,.78);border-color:rgba(95,243,255,.45)}
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.bubbles span{position:absolute;bottom:-24px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;opacity:0;
background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.95),rgba(95,243,255,.45) 45%,rgba(95,243,255,0) 72%);
animation:tawq-rise var(--d) linear infinite;animation-delay:var(--t)}
@keyframes tawq-rise{0%{transform:translate(0,0);opacity:0}12%{opacity:.75}100%{transform:translate(14px,-640px);opacity:0}}
.hero-copy{z-index:2}
.hero-shade{background:linear-gradient(90deg,rgba(7,19,48,.92) 0%,rgba(7,19,48,.88) 42%,rgba(7,19,48,0) 62%),
linear-gradient(0deg,#071330 0%,rgba(7,19,48,0) 22%)}

/* navigation */
nav.sec{background:rgba(7,19,48,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--gline)}
nav.sec a{color:var(--tx2)}
nav.sec a:hover,nav.sec a.on{color:#fff}
nav.sec a.on{border-bottom-color:var(--tl)}
nav.sec a.brand{color:#fff}

/* sections: underwater backgrounds under a navy gradient (text contrast at least 4.5:1) */
section{border-top:1px solid rgba(95,243,255,.12);
background:linear-gradient(180deg,rgba(7,19,48,.88),rgba(11,34,64,.84)),url(underwater_bg_1.jpg) center/cover no-repeat}
section:nth-of-type(3n+2){background:linear-gradient(180deg,rgba(7,19,48,.88),rgba(11,34,64,.84)),url(underwater_bg_2.jpg) center/cover no-repeat}
section:nth-of-type(3n+3){background:linear-gradient(180deg,rgba(7,19,48,.88),rgba(11,34,64,.84)),url(underwater_bg_3.jpg) center/cover no-repeat}
section.curtain-bg{background:linear-gradient(180deg,rgba(7,19,48,.80),rgba(11,34,64,.76)),url(curtain_bg_dim.jpg) center/cover no-repeat}
.snum{background:var(--tl);color:var(--bg0)}
.steps li{border-bottom-color:var(--line)}
.steps li::before{background:var(--tl);color:var(--bg0)}
.steps b,.howfoot b,.more b,.gloss dt,.vbig,.vlab,.ctitle,.opt .verdict{color:#fff}

/* calculations, tables, tags */
.toc a{background:var(--glass);border-color:var(--gline);color:var(--tx)}
.toc a:hover{border-color:var(--cy)}
.toggle-all{background:transparent;color:var(--tl);border-color:var(--tl)}
.toggle-all:hover{background:rgba(47,227,211,.12)}
details.calc>summary:hover{background:rgba(95,243,255,.05)}
.show{color:var(--tl)}
.panel{background:rgba(4,14,34,.55);border:1px solid rgba(95,243,255,.12)}
.formula{background:rgba(7,19,48,.75);border-color:var(--gline);color:var(--tx)}
.result{border-left-color:var(--tl)}
thead th{color:var(--tx2);border-bottom-color:rgba(95,243,255,.32)}
table.data tr.sum td{border-top-color:rgba(95,243,255,.32)}
table.fleet tr.pick td{background:rgba(47,227,211,.14)}
.pill.model{color:var(--cy);background:rgba(95,243,255,.10);border-color:rgba(95,243,255,.45)}
.pill.pub{color:var(--tl);background:rgba(47,227,211,.10);border-color:rgba(47,227,211,.50)}
.pill.ass{color:var(--li);background:transparent;border-color:rgba(196,179,255,.60)}
.gate{background:rgba(47,227,211,.10);color:var(--tx)}
.ok{color:var(--tl)}
.bad{color:var(--or)}

/* charts */
.grl{border-left-color:rgba(255,255,255,.10)}
.bfill{background:#5E7387}
.brow.light .bfill{background:#7FC9C0}
.brow.mid .bfill{background:var(--teal2)}
.brow.em .bfill{background:var(--tl)}
.brow.hatch .bfill{background:repeating-linear-gradient(45deg,#5E7387 0 4px,#2A3F57 4px 8px)}
.whisk,.whisk::before,.whisk::after{background:var(--tx);box-shadow:0 0 0 1px rgba(7,19,48,.85)}
.brow.em .whisk,.brow.em .whisk::before,.brow.em .whisk::after{background:var(--bg0);box-shadow:none}
.seg.off,.sw.off{background:#6B7F92}
.seg.base,.sw.base{background:var(--teal2)}
.seg.boost,.sw.boost{background:var(--cy)}
.wcells .c{background:rgba(255,255,255,.12)}
.wcells .c.on{background:var(--or)}

/* footer */
.foot{background:#050E24;color:var(--tx2);border-top:1px solid var(--gline)}

/* figures with renders, the overview video, badges, buttons */
.figr{margin:0}
.figr .frame{position:relative;overflow:hidden;padding:0}
.figr img,.vblock video{display:block;width:100%;height:auto;border-radius:18px}
.figr figcaption{margin-top:10px;font-size:var(--s);color:var(--tx2)}
.figr.wide{margin:0 0 26px}
.badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx);
background:rgba(7,19,48,.78);border:1px solid rgba(95,243,255,.45);border-radius:6px;padding:2px 8px;margin-right:8px;vertical-align:1px}
.badge.sim{border-color:rgba(242,150,79,.65)}
.strip{margin:26px 0 0}
.strip .shead{margin:0 0 10px}
.strip .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.figs-2{display:grid;gap:22px;margin:4px 0 22px}
.ovw-band{background:linear-gradient(180deg,var(--bg0),var(--bg1));padding:8px 0 44px}
.ovw{padding:22px 24px 20px}
.ovw h2{margin:0 0 14px}
.ovw video{display:block;width:100%;height:auto;border-radius:14px;background:#000}
.ovw-cap{margin:12px 0 16px;color:var(--tx2);font-size:var(--s)}
.btn{display:inline-block;font-weight:700;color:var(--bg0);background:var(--tl);border-radius:999px;padding:10px 20px;text-decoration:none}
.btn:hover{color:var(--bg0);background:var(--cy)}

/* motion: gentle fade-up on scroll; nothing is hidden without JavaScript */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in,.reveal-all .reveal{opacity:1;transform:none}

@media (max-width:1099px){.bubbles{display:none}}
@media (max-width:980px){.strip .row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
 nav.sec::after{background:linear-gradient(90deg,rgba(7,19,48,0),rgba(7,19,48,.95) 75%)}
 .ovw{padding:14px 12px 14px}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .bubbles{display:none}
 .js .reveal{opacity:1;transform:none;transition:none}
}