/* Design tokens */
:root{
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --bg:#F6F7FB; --bg2:#EEF1F7; --surface:#FFFFFF; --surface2:#F8FAFD; --ink:#0D1526; --dim:#47536A; --faint:#7A869C; --line:#DDE3EE;
  --gold:#C98A12; --gold-ink:#5C3D00; --goldbg:#FFF4DC; --cyan:#0E8FA6; --cyanbg:#E3F7FB; --ok:#1E8A55; --okbg:#E4F6EC; --warn:#A35B00; --warnbg:#FFF1DE;
  --hero1:#0B1426; --hero2:#12213D;
  --shadow:0 1px 2px rgba(13,21,38,.06),0 8px 24px rgba(13,21,38,.06); --shadow2:0 2px 6px rgba(13,21,38,.08),0 18px 48px rgba(13,21,38,.12);
  --r:14px; --r2:22px; --maxw:1200px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:104px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#070C18; --bg2:#0B1222; --surface:#0F1729; --surface2:#131D33; --ink:#EDF1F8; --dim:#A9B4C8; --faint:#76829A; --line:#22304B;
  --gold:#F2B544; --gold-ink:#FFE2A6; --goldbg:#2A2109; --cyan:#38D1E8; --cyanbg:#0A2A33; --ok:#4AD18B; --okbg:#0D2A1C; --warn:#F5B04D; --warnbg:#2B1D07;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); --shadow2:0 2px 6px rgba(0,0,0,.35),0 18px 48px rgba(0,0,0,.4); color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#070C18; --bg2:#0B1222; --surface:#0F1729; --surface2:#131D33; --ink:#EDF1F8; --dim:#A9B4C8; --faint:#76829A; --line:#22304B;
  --gold:#F2B544; --gold-ink:#FFE2A6; --goldbg:#2A2109; --cyan:#38D1E8; --cyanbg:#0A2A33; --ok:#4AD18B; --okbg:#0D2A1C; --warn:#F5B04D; --warnbg:#2B1D07;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); --shadow2:0 2px 6px rgba(0,0,0,.35),0 18px 48px rgba(0,0,0,.4); color-scheme:dark; }

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.6 var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden}
html[lang="vi"] [lang="en"], html[lang="en"] [lang="vi"]{display:none !important}
a{color:inherit} img{max-width:100%; display:block}
h1,h2,h3,h4{margin:0; line-height:1.18; letter-spacing:-.015em; font-weight:700}
h1{font-size:clamp(32px,5vw,58px); letter-spacing:-.03em}
h2{font-size:clamp(26px,3.2vw,40px); letter-spacing:-.025em}
h3{font-size:20px} p{margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 max(16px, env(safe-area-inset-left))}
.eyebrow{font:700 12px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.lead{font-size:clamp(16px,1.6vw,19px); color:var(--dim); max-width:62ch}
.muted{color:var(--dim)} .faint{color:var(--faint)}
section{padding:var(--s9) 0} .sec-head{display:grid; gap:var(--s3); margin-bottom:var(--s7)}
.icon{width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 20px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:600 15px var(--font); text-decoration:none; cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s, border-color .2s; white-space:nowrap}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow); border-color:var(--faint)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--gold); border-color:var(--gold); color:#160F00}
:root[data-theme="dark"] .btn.primary{color:#160F00}
.btn.ghost{background:transparent}
.btn.sm{height:36px; padding:0 14px; font-size:14px}
.btn:focus-visible,.chip:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

/* top bar */
.top{position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent)}
.top .wrap{display:flex; align-items:center; gap:var(--s4); height:66px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:-.01em}
.brand .mark{width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--gold),#E88C2A); display:grid; place-items:center; color:#1A1000; font:800 13px var(--mono)}
.brand small{display:block; font:500 11.5px var(--font); color:var(--faint)}
.proto{font:700 11px var(--font); letter-spacing:.06em; padding:4px 8px; border-radius:999px; background:var(--warnbg); color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent)}
.nav{display:flex; gap:var(--s5); margin-left:auto; font-size:15px} .nav a{text-decoration:none; color:var(--dim)} .nav a:hover{color:var(--ink)}
.tools{display:flex; gap:6px; margin-left:var(--s4)}
.tbtn{width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer; font:700 12px var(--mono)}
.tbtn:hover{border-color:var(--faint)}
@media (max-width:900px){ .nav{display:none} .tools{margin-left:auto} }

/* hero */
.hero{position:relative; background:radial-gradient(1200px 600px at 75% 20%, #1B3360 0%, transparent 60%), linear-gradient(180deg,var(--hero1),var(--hero2)); color:#EDF1F8; overflow:hidden; padding:var(--s8) 0 var(--s8)}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:center; min-height:min(640px, 78vh)}
.hero h1{color:#fff} .hero h1 em{font-style:normal; background:linear-gradient(90deg,#F2B544,#FFD98A); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lead{color:#B8C3D8; margin-top:var(--s5)}
.hero .cta{display:flex; gap:var(--s3); margin-top:var(--s6); flex-wrap:wrap}
.hero .btn{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.18)} .hero .btn.primary{background:#F2B544; color:#160F00; border-color:#F2B544}
.hero .pill{display:inline-flex; gap:8px; align-items:center; font:700 12px var(--font); letter-spacing:.08em; color:#FFD98A; padding:6px 12px; border-radius:999px; border:1px solid rgba(242,181,68,.35); background:rgba(242,181,68,.08); margin-bottom:var(--s5)}
.hero-3d{position:relative; aspect-ratio:1/1; max-height:560px; width:100%}
.hero-3d canvas{width:100% !important; height:100% !important; display:block}
.hero-3d .tag{position:absolute; left:6%; bottom:8%; font:500 12.5px var(--font); color:#8FA0BE; background:rgba(11,20,38,.6); border:1px solid rgba(255,255,255,.1); padding:8px 12px; border-radius:10px; backdrop-filter:blur(6px)}
.hero-3d .tag b{color:#F2B544}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:var(--s7); background:rgba(255,255,255,.08); border-radius:var(--r); overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.stats div{background:rgba(11,20,38,.55); padding:18px 20px} .stats b{display:block; font-size:28px; color:#fff; letter-spacing:-.02em} .stats span{font-size:13px; color:#97A5BF}
@media (max-width:900px){ .hero .wrap{grid-template-columns:1fr} .hero-3d{max-height:340px; order:-1} .stats{grid-template-columns:repeat(2,1fr)} }

/* roles */
.roles{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5)}
.role{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:var(--s6); box-shadow:var(--shadow); cursor:pointer; transition:transform .2s, box-shadow .2s, border-color .2s; text-align:left; font:inherit; color:inherit}
.role:hover{transform:translateY(-3px); box-shadow:var(--shadow2)} .role[aria-pressed="true"]{border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 25%, transparent), var(--shadow2)}
.role .ic{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--goldbg); color:var(--gold); margin-bottom:var(--s5)} .role .ic .icon{width:24px; height:24px}
.role h3{margin-bottom:var(--s2)} .role p{color:var(--dim); font-size:15px}
.role .go{margin-top:var(--s5); display:inline-flex; gap:6px; align-items:center; font-weight:600; color:var(--gold); font-size:14px}
.role-panel{margin-top:var(--s5); background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:var(--s6); display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s6); box-shadow:var(--shadow)}
.role-panel ol{margin:0; padding:0; list-style:none; counter-reset:s; display:grid; gap:var(--s4)}
.role-panel li{counter-increment:s; display:grid; grid-template-columns:36px 1fr; gap:var(--s3); align-items:start}
.role-panel li::before{content:counter(s); width:32px; height:32px; border-radius:50%; background:var(--cyanbg); color:var(--cyan); display:grid; place-items:center; font:700 14px var(--mono)}
.role-panel li b{display:block} .role-panel li span{color:var(--dim); font-size:15px}
.role-panel aside{background:var(--surface2); border-radius:var(--r); padding:var(--s5); border:1px solid var(--line); display:grid; gap:var(--s3); align-content:start}
@media (max-width:900px){ .roles{grid-template-columns:1fr} .role-panel{grid-template-columns:1fr} }

/* steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); position:relative}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s5)}
.step .n{font:700 13px var(--mono); color:var(--cyan); margin-bottom:var(--s3)} .step h3{font-size:17px; margin-bottom:6px} .step p{font-size:14.5px; color:var(--dim)}
@media (max-width:900px){ .steps{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* featured */
.feat{display:grid; grid-template-columns:1.1fr .9fr; border-radius:var(--r2); overflow:hidden; background:linear-gradient(135deg,#0B1426,#16274A); color:#EDF1F8; box-shadow:var(--shadow2); border:1px solid #22304B}
.feat .txt{padding:var(--s7); display:grid; gap:var(--s4); align-content:center} .feat .lead{color:#B8C3D8}
.feat .vis{position:relative; min-height:380px; background:radial-gradient(500px 300px at 50% 50%, #20365F, transparent)}
.feat .vis img{position:absolute; inset:10% 12%; width:76%; height:80%; object-fit:contain; filter:invert(1) hue-rotate(180deg) brightness(1.1); opacity:.9; mix-blend-mode:screen}
.feat .chips{display:flex; gap:8px; flex-wrap:wrap}
.feat .chip{background:rgba(255,255,255,.06); color:#D4DCEA; border-color:rgba(255,255,255,.14)}
@media (max-width:900px){ .feat{grid-template-columns:1fr} .feat .vis{min-height:260px; order:-1} .feat .txt{padding:var(--s5)} }

/* catalogue */
.cat{display:grid; grid-template-columns:270px 1fr; gap:var(--s6); align-items:start}
.filters{position:sticky; top:84px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:var(--s5); display:grid; gap:var(--s5); max-height:calc(100vh - 100px); overflow:auto}
.fgroup h4{font:700 12px var(--font); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:var(--s2)}
.fopt{display:flex; align-items:center; gap:10px; padding:5px 2px; font-size:14.5px; cursor:pointer; color:var(--ink)}
.fopt input{width:17px; height:17px; accent-color:var(--gold)} .fopt .c{margin-left:auto; font:500 12px var(--mono); color:var(--faint)}
.fopt.zero{color:var(--faint)}
.searchbar{display:flex; gap:var(--s3); align-items:center; margin-bottom:var(--s5); flex-wrap:wrap}
.search{flex:1; min-width:220px; position:relative}
.search input{width:100%; height:50px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:0 16px 0 46px; font:500 16px var(--font); box-shadow:var(--shadow)}
.search .icon{position:absolute; left:15px; top:15px; color:var(--faint)}
select{height:50px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:0 14px; font:500 15px var(--font)}
.resinfo{font-size:14px; color:var(--dim); margin-bottom:var(--s4); display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--s5)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .2s, box-shadow .2s, border-color .2s; box-shadow:var(--shadow)}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow2); border-color:color-mix(in srgb,var(--gold) 45%, var(--line))}
.card .img{aspect-ratio:16/10; background:#fff; display:grid; place-items:center; padding:18px; border-bottom:1px solid var(--line); position:relative}
.card .img img{max-height:100%; object-fit:contain; transition:transform .4s}
.card:hover .img img{transform:scale(1.04)}
:root[data-theme="dark"] .card .img{background:#E9EDF4}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .card .img{background:#E9EDF4} }
.card .img .badge3d{position:absolute; right:12px; top:12px}
.card .body{padding:var(--s5); display:grid; gap:var(--s3); flex:1; align-content:start}
.card h3{font-size:18px} .card p{font-size:14.5px; color:var(--dim)}
.card .meta{display:flex; gap:6px; flex-wrap:wrap}
.card .foot{padding:14px var(--s5); border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--faint)}
.card .foot b{color:var(--gold); font-weight:600}
.chip{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:999px; font:600 12px var(--font); border:1px solid var(--line); color:var(--dim); background:var(--surface2); white-space:nowrap}
.chip.ok{background:var(--okbg); color:var(--ok); border-color:transparent} .chip.gold{background:var(--goldbg); color:var(--gold-ink); border-color:transparent} .chip.cyan{background:var(--cyanbg); color:var(--cyan); border-color:transparent} .chip.warn{background:var(--warnbg); color:var(--warn); border-color:transparent}
.chip.x{cursor:pointer} .chip.x:hover{border-color:var(--faint)}
.empty{grid-column:1/-1; padding:var(--s7); text-align:center; border:1px dashed var(--line); border-radius:var(--r2); color:var(--dim)}
.ftoggle{display:none}
@media (max-width:900px){ .cat{grid-template-columns:1fr} .filters{position:static; max-height:none; display:none} .filters.open{display:grid} .ftoggle{display:inline-flex} }

/* external */
.ext{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.extc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s5); text-decoration:none; display:grid; gap:6px; transition:border-color .2s, transform .2s}
.extc:hover{border-color:var(--cyan); transform:translateY(-2px)} .extc b{display:flex; gap:8px; align-items:center} .extc span{font-size:14px; color:var(--dim)}
@media (max-width:900px){ .ext{grid-template-columns:1fr} }

/* partners */
.parties{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4)}
.party{border:1px solid var(--line); border-radius:var(--r); padding:var(--s5); background:var(--surface)}
.party .ic{color:var(--cyan); margin-bottom:var(--s3)} .party h3{font-size:16px; margin-bottom:6px} .party p{font-size:14px; color:var(--dim)}
@media (max-width:900px){ .parties{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .parties{grid-template-columns:1fr} }
.note{display:flex; gap:var(--s3); align-items:flex-start; background:var(--warnbg); color:var(--warn); border-radius:var(--r); padding:var(--s4) var(--s5); font-size:14px; margin-top:var(--s5)}
.note .icon{margin-top:2px}

/* contact */
.contact{border-radius:var(--r2); padding:var(--s7); background:linear-gradient(135deg,#0B1426,#16274A); color:#EDF1F8; display:grid; grid-template-columns:1.3fr .7fr; gap:var(--s6); align-items:center}
.contact .lead{color:#B8C3D8}
@media (max-width:900px){ .contact{grid-template-columns:1fr; padding:var(--s5)} }
footer{padding:var(--s7) 0; border-top:1px solid var(--line); color:var(--faint); font-size:14px}
footer .wrap{display:grid; gap:var(--s3)}

/* reveal */
.rv{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease} .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} *{scroll-behavior:auto} }

/* update pill (dims the rest of the screen) */
#upd{position:fixed; z-index:200; left:50%; top:max(14px, env(safe-area-inset-top)); transform:translateX(-50%); display:none; align-items:center; gap:10px; background:#F2B544; color:#0A0F1F; border:0; border-radius:999px; padding:12px 22px; font:700 15px var(--font); cursor:pointer; box-shadow:0 0 0 100vmax rgba(5,8,15,.72), 0 10px 40px rgba(0,0,0,.5); animation:updp 1.6s ease-in-out infinite}
#upd.on{display:flex} @keyframes updp{50%{box-shadow:0 0 0 10px rgba(255,204,78,.25), 0 0 0 100vmax rgba(5,8,15,.72), 0 10px 40px rgba(0,0,0,.5)}}

/* detail page */
.dhero{background:linear-gradient(180deg,var(--hero1),var(--hero2)); color:#EDF1F8; padding:var(--s7) 0 var(--s7)}
.crumbs{font-size:14px; color:#97A5BF; display:flex; gap:8px; align-items:center; margin-bottom:var(--s5)} .crumbs a{text-decoration:none; color:#C9D3E5}
.dhero h1{font-size:clamp(28px,4vw,46px); color:#fff; max-width:22ch}
.dhero .en{color:#97A5BF; font-size:17px; margin-top:var(--s2)}
.dhero .lead{color:#B8C3D8; margin-top:var(--s4)}
.dhero .chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:var(--s5)}
.dhero .chip{background:rgba(255,255,255,.07); color:#D4DCEA; border-color:rgba(255,255,255,.14)} .dhero .chip.ok{background:rgba(74,209,139,.14); color:#7BE3AA}
.dgrid{display:grid; grid-template-columns:1fr 360px; gap:var(--s6); align-items:start}
.facts{position:sticky; top:84px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:var(--s5); box-shadow:var(--shadow); display:grid; gap:var(--s4)}
.facts dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:14px} .facts dt{color:var(--faint)} .facts dd{margin:0; font-weight:600; text-align:right}
.facts .cover{border-radius:10px; overflow:hidden; border:1px solid var(--line); cursor:zoom-in}
.block{background:var(--surface); border:1px solid var(--line); border-radius:var(--r2); padding:var(--s6); margin-bottom:var(--s5)}
.block h2{font-size:24px; margin-bottom:var(--s4)} .block p{color:var(--dim)}
.block ul{margin:0; padding-left:20px; color:var(--dim); display:grid; gap:6px}
.viewer{position:relative; border-radius:var(--r2); overflow:hidden; background:radial-gradient(800px 400px at 50% 30%, #1B2D52, #0A1222); aspect-ratio:16/9; min-height:320px; border:1px solid #22304B}
.viewer canvas{display:block; width:100% !important; height:100% !important; touch-action:none}
.vbar{position:absolute; left:12px; right:12px; bottom:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.vbar .btn{height:36px; padding:0 14px; font-size:13.5px; background:rgba(11,20,38,.75); color:#EDF1F8; border-color:rgba(255,255,255,.16); backdrop-filter:blur(8px)}
.vbar .btn.on{background:#F2B544; color:#160F00; border-color:#F2B544}
.vbar label{display:flex; align-items:center; gap:8px; font-size:13px; color:#C9D3E5; background:rgba(11,20,38,.75); padding:0 12px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.16)}
.vbar input[type=range]{width:110px; accent-color:#F2B544}
.vinfo{position:absolute; top:12px; right:12px; max-width:280px; background:rgba(11,20,38,.82); color:#EDF1F8; border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:12px 14px; font-size:13.5px; backdrop-filter:blur(8px); display:none}
.vinfo.on{display:block} .vinfo b{color:#F2B544} .vinfo small{display:block; color:#97A5BF; margin-top:4px}
.vtag{position:absolute; top:12px; left:12px; font:600 11.5px var(--font); letter-spacing:.06em; color:#97A5BF; background:rgba(11,20,38,.7); padding:6px 10px; border-radius:8px}
.figs{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:var(--s3)}
.figs figure{margin:0; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; cursor:zoom-in; display:grid; gap:6px} .figs img{aspect-ratio:1/1; object-fit:contain; width:100%}
.figs figcaption{font-size:12.5px; color:#47536A; text-align:center}
.partsl{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--s2)}
.partsl div{display:grid; grid-template-columns:30px 1fr; gap:10px; padding:10px; border:1px solid var(--line); border-radius:12px; font-size:14px; background:var(--surface2); cursor:pointer}
.partsl div:hover{border-color:var(--gold)}
.partsl i{font:700 12px var(--mono); font-style:normal; width:28px; height:28px; border-radius:8px; background:var(--goldbg); color:var(--gold-ink); display:grid; place-items:center}
.partsl small{display:block; color:var(--faint)}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s3); margin-bottom:var(--s4)}
.kpi{border:1px solid var(--line); border-radius:var(--r); padding:var(--s4); background:var(--surface2)} .kpi b{display:block; font-size:30px; letter-spacing:-.02em; color:var(--gold)} .kpi span{display:block; font-weight:600; font-size:14px} .kpi small{color:var(--faint); font-size:12.5px}
.lb{position:fixed; inset:0; z-index:150; background:rgba(5,8,15,.86); display:none; place-items:center; padding:20px; cursor:zoom-out} .lb.on{display:grid} .lb img{max-height:92vh; max-width:92vw; background:#fff; border-radius:10px; padding:10px}
@media (max-width:980px){ .dgrid{grid-template-columns:1fr} .facts{position:static} }
@media (max-width:560px){ .block{padding:var(--s5)} .viewer{aspect-ratio:4/3} }
@media (max-width:600px){ .brand small{display:none} .brand{white-space:nowrap; font-size:15px} .proto{font-size:9.5px; padding:3px 7px; white-space:nowrap} .top .wrap{gap:10px} .hero-3d .tag{display:none} }
@media (max-width:380px){ .proto{display:none} }
/* buyer sections */
.subnav{position:sticky; top:66px; z-index:30; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex; gap:6px; overflow-x:auto; padding-top:10px; padding-bottom:10px; scrollbar-width:none} .subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{flex:none; text-decoration:none; font-size:13.5px; font-weight:600; color:var(--dim); padding:7px 12px; border-radius:999px; border:1px solid transparent}
.subnav a:hover,.subnav a.on{color:var(--ink); border-color:var(--line); background:var(--surface)}
.block .sub{color:var(--dim); margin:-8px 0 18px; font-size:15px}
.tlist{display:grid; gap:8px}
.titem{display:grid; grid-template-columns:28px 1fr auto; gap:12px; align-items:start; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface2)}
.titem .ck{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--okbg); color:var(--ok)} .titem.xn .ck{background:var(--cyanbg); color:var(--cyan)} .titem.dp .ck{background:var(--goldbg); color:var(--gold-ink)}
.titem b{display:block; font-size:15px} .titem small{color:var(--dim); font-size:13.5px}
.legend{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.appc{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.appc div{border:1px solid var(--line); border-radius:16px; padding:16px; background:var(--surface2); display:grid; gap:6px; align-content:start; transition:transform .2s, border-color .2s}
.appc div:hover{transform:translateY(-3px); border-color:var(--gold)}
.appc svg.ill{width:100%; height:86px; border-radius:10px; background:linear-gradient(135deg,#0F1D38,#1A2E55)}
.appc b{font-size:15.5px} .appc em{font-style:normal; font-size:12.5px; color:var(--cyan); font-weight:600} .appc span{font-size:13.5px; color:var(--dim)}
.cfg{display:grid; grid-template-columns:300px 1fr; gap:18px; margin-top:16px; border:1px solid var(--line); border-radius:16px; padding:16px; background:var(--surface2)}
.cfg .ctl{display:grid; gap:14px; align-content:start}
.cfg label{display:grid; gap:6px; font-size:14px; font-weight:600}
.cfg label span.v{font-weight:500; color:var(--gold-ink); background:var(--goldbg); padding:1px 8px; border-radius:999px; font-size:12.5px; justify-self:start}
.cfg input[type=range]{width:100%; accent-color:var(--gold)}
.cfg .segs{display:flex; flex-wrap:wrap; gap:6px} .cfg .segs button{height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:600 13px var(--font); cursor:pointer} .cfg .segs button.on{background:var(--gold); border-color:var(--gold); color:#160F00}
.cfg canvas{width:100%; height:230px; display:block; background:var(--surface); border:1px solid var(--line); border-radius:12px}
.cfg .out{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px} .cfg .out div{border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--surface)} .cfg .out b{display:block; font-size:22px; color:var(--gold)} .cfg .out small{color:var(--faint); font-size:12px}
.cfg .gview{position:relative; height:300px; border-radius:12px; overflow:hidden; background:radial-gradient(600px 300px at 50% 30%, #1B2D52, #0A1222)}
.cfg .gview canvas{height:100% !important; border:0; background:none}
.estnote{font-size:12.5px; color:var(--warn); background:var(--warnbg); border-radius:10px; padding:8px 12px; margin-top:10px; display:flex; gap:8px; align-items:flex-start}
.road{display:grid; gap:0; position:relative}
.road .st{display:grid; grid-template-columns:44px 1fr 1fr; gap:14px; padding:12px 0; border-bottom:1px dashed var(--line)}
.road .st:last-child{border:0}
.road .n{width:36px; height:36px; border-radius:50%; background:var(--cyanbg); color:var(--cyan); display:grid; place-items:center; font-weight:800}
.road b{display:block} .road small{color:var(--dim); font-size:13.5px} .road .o{font-size:13.5px; color:var(--dim)} .road .o b{font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em}
.trlbar{display:grid; grid-template-columns:repeat(9,1fr); gap:4px; margin:6px 0 16px} .trlbar i{height:30px; border-radius:6px; background:var(--bg2); display:grid; place-items:center; font:700 12px var(--font); color:var(--faint); font-style:normal; border:1px solid var(--line)} .trlbar i.on{background:var(--cyan); color:#04121A; border-color:var(--cyan)} .trlbar i.half{background:linear-gradient(90deg,var(--cyan) 50%, var(--bg2) 50%); color:#04121A}
.cmp{width:100%; border-collapse:separate; border-spacing:0; font-size:14px; overflow:hidden; border:1px solid var(--line); border-radius:14px}
.cmp th,.cmp td{padding:12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)} .cmp tr:last-child td{border-bottom:0}
.cmp th{background:var(--surface2); font-size:13px} .cmp td:first-child{font-weight:600; color:var(--dim); width:18%} .cmp td:last-child,.cmp th:last-child{background:color-mix(in srgb, var(--gold) 9%, var(--surface)); }
.cmpw{overflow-x:auto}
.forms{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px}
.forms button{text-align:left; border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--surface2); color:var(--ink); font:inherit; cursor:pointer; display:grid; gap:4px; transition:border-color .2s, box-shadow .2s}
.forms button b{font-size:15px} .forms button span{font-size:13px; color:var(--dim)}
.forms button[aria-pressed="true"]{border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 25%, transparent)}
.faq details{border:1px solid var(--line); border-radius:12px; padding:0 16px; margin-bottom:8px; background:var(--surface2)}
.faq summary{cursor:pointer; padding:14px 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px} .faq summary::after{content:'+'; color:var(--gold); font-size:20px; line-height:1} .faq details[open] summary::after{content:'−'}
.faq details p{padding:0 0 14px; color:var(--dim)}
.cta-box{display:grid; gap:12px; background:linear-gradient(135deg,#0B1426,#16274A); color:#EDF1F8; border-radius:20px; padding:24px; border:1px solid #22304B}
.cta-box .lead{color:#B8C3D8} .cta-box pre{white-space:pre-wrap; font:13px/1.5 var(--font); background:rgba(255,255,255,.05); border-radius:10px; padding:10px 12px; color:#C9D3E5; margin:0}
@media (max-width:760px){ .cfg{grid-template-columns:1fr} .road .st{grid-template-columns:40px 1fr} .road .o{grid-column:2} .cfg .out{grid-template-columns:1fr 1fr 1fr} }
.card .img{aspect-ratio:auto; height:210px; overflow:hidden} .card .img img{max-height:174px; max-width:100%; width:auto; height:auto}
@media (max-width:560px){ .titem{grid-template-columns:28px 1fr} .titem > .chip{grid-column:2; justify-self:start} .cfg .out b{font-size:18px} .road .st{grid-template-columns:40px 1fr} }

.hname{margin-top:14px; font:700 clamp(14px,1.4vw,17px) var(--font); color:#F2B544; letter-spacing:.01em; max-width:60ch}
.hnote{margin-top:18px; font-size:13px; color:#97A5BF; max-width:70ch}
@media (max-width:600px){ .top .wrap{min-width:0} .brand{white-space:normal; font-size:13.5px; line-height:1.2; min-width:0; flex:1 1 auto} .brand > span:last-child{min-width:0} .proto{flex:none} .tools{flex:none} }
@media (max-width:420px){ .top .wrap{gap:8px} .brand{font-size:12.5px} .brand .mark{display:none} .proto{display:inline-block; font-size:8.5px; padding:2px 6px; letter-spacing:.02em} .tools .tbtn{width:34px; height:34px} }
@media (max-width:900px){ .role-panel{grid-template-columns:minmax(0,1fr); padding:var(--s5)} .role-panel li{grid-template-columns:36px minmax(0,1fr)} .role-panel aside .btn{white-space:normal; height:auto; min-height:46px; padding-top:10px; padding-bottom:10px} }
@media (max-width:980px){ .dgrid{grid-template-columns:minmax(0,1fr)} .dgrid > *{min-width:0} .vbar{flex-wrap:wrap} }
@media (max-width:560px){ .viewer{aspect-ratio:auto; width:100%; height:340px; min-height:0} .vbar .btn,.vbar a.btn{white-space:normal; height:auto; min-height:36px} .dhero .btn{white-space:normal; height:auto; min-height:46px} }
@media (max-width:560px){ .block .btn{white-space:normal; height:auto; min-height:40px; padding-top:8px; padding-bottom:8px; max-width:100%} }