.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);background:rgba(7,11,20,.72);margin:0 -22px;padding:14px 22px;border-bottom:1px solid var(--line)}
.nav .links{display:flex;flex-wrap:wrap;gap:4px}.nav a.lnk{margin-left:16px}
@media(max-width:700px){.nav{flex-direction:column;gap:8px}.nav a.lnk{margin:0 8px;font-size:13px}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}
.phero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:60px 0 30px}@media(max-width:900px){.phero{grid-template-columns:1fr;padding-top:30px}}
.frame{border-radius:18px;border:1px solid var(--line);overflow:hidden;background:#0b1220;box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03);position:relative}
.frame:before{content:"";display:block;height:28px;background:linear-gradient(#141e30,#0f1828);border-bottom:1px solid var(--line)}
.frame:after{content:"";position:absolute;top:10px;left:14px;width:8px;height:8px;border-radius:50%;background:#f87171;box-shadow:14px 0 #fbbf24,28px 0 #a3e635}
.frame video,.frame img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;background:#0b1220}
.cat{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc,var(--cyan))}
.purpose{font-size:19px;line-height:1.65;color:#cbd5e1;max-width:900px;border-left:3px solid var(--acc,var(--cyan));padding-left:20px}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.pillar{padding:20px;border-radius:14px;border:1px solid var(--line);background:var(--card)}.pillar b{display:block;margin-bottom:6px;color:var(--acc,var(--cyan))}.pillar span{color:var(--muted);font-size:14px;line-height:1.55}
.selector{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}@media(max-width:900px){.selector{grid-template-columns:1fr}}
.flist{display:flex;flex-direction:column;gap:6px}@media(max-width:900px){.flist{flex-direction:row;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}.flist button{flex:none;scroll-snap-align:start}}
.flist button{all:unset;cursor:pointer;padding:12px 14px;border-radius:12px;border:1px solid transparent;color:var(--muted);font-weight:650;font-size:14.5px;transition:.2s;position:relative;overflow:hidden}
.flist button:hover{color:var(--text);background:rgba(255,255,255,.03)}.flist button.on{color:var(--text);background:var(--card);border-color:var(--line)}
.flist button.on:after{content:"";position:absolute;left:0;bottom:0;height:2px;background:var(--acc,var(--cyan));width:0;animation:prog var(--dur,6s) linear forwards}@keyframes prog{to{width:100%}}
.fcap{margin-top:16px}.fcap h3{margin:0 0 6px;font-size:22px}.fcap p{margin:0 0 8px;color:#cbd5e1;line-height:1.6}.fcap .how{color:var(--muted);font-size:14px}.fcap .how b{color:var(--acc,var(--cyan))}
.stage{transition:opacity .25s}.stage.fade{opacity:.2}
.gal{columns:3 300px;column-gap:16px}.gal button{all:unset;cursor:zoom-in;display:block;margin:0 0 16px;border-radius:12px;overflow:hidden;border:1px solid var(--line);break-inside:avoid;transition:transform .25s,border-color .25s}.gal button:hover{transform:translateY(-3px);border-color:var(--acc,var(--cyan))}.gal img{width:100%;display:block}
.lb{position:fixed;inset:0;background:rgba(3,6,12,.92);display:none;place-items:center;z-index:99;padding:20px;cursor:zoom-out}.lb.on{display:grid}.lb img{max-width:96vw;max-height:92vh;border-radius:12px}
.cta{margin:40px 0;padding:40px;border-radius:20px;border:1px solid var(--line);background:radial-gradient(600px 200px at 20% 0,color-mix(in srgb,var(--acc,#22d3ee) 18%,transparent),transparent),var(--card);text-align:center}
.demo{display:inline-flex;gap:8px;align-items:center}.demo i{width:10px;height:10px;border-radius:50%}
.pcard{display:block;text-decoration:none;color:inherit;border-radius:20px;border:1px solid var(--line);background:var(--card);overflow:hidden;transition:transform .3s,border-color .3s}.pcard:hover{transform:translateY(-4px);border-color:var(--acc)}
.pcard img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block;border-bottom:1px solid var(--line)}.pcard .b{padding:22px}.pcard h3{margin:8px 0 6px;font-size:22px}.pcard p{color:var(--muted);margin:0 0 12px;line-height:1.55;font-size:14.5px}.pcard .go{font-weight:700;color:var(--acc)}
.flag{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.2fr}@media(max-width:900px){.flag{grid-template-columns:1fr}}.flag img{height:100%;aspect-ratio:auto;border:0;border-right:1px solid var(--line)}

.segt{display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--line);background:var(--card);margin-bottom:18px}.segt a{padding:8px 22px;border-radius:999px;font-weight:800;font-size:14px;color:var(--muted);text-decoration:none;transition:.2s}.segt a.on{background:var(--cyan);color:#04121a}
.badge-new{color:#fbbf24;border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08)}.planner h2{font-size:30px;margin:12px 0 6px}
.planner{border:1px solid var(--line);border-radius:22px;padding:30px;margin:20px 0;background:radial-gradient(700px 240px at 10% 0,rgba(34,211,238,.12),transparent),var(--card)}
.plgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}.plcard b{display:block;margin:12px 0 4px}.plcard span{color:var(--muted);font-size:14px;line-height:1.5}.plcard .frame:before{height:18px}.plcard .frame:after{top:6px}
@media(max-width:700px){.planner{padding:18px}}
