:root{
    --bg: #07060f;
    --bg-2: #0c0a1a;
    --surface: rgba(255,255,255,.035);
    --surface-2: rgba(255,255,255,.06);
    --line: rgba(255,255,255,.08);
    --line-2: rgba(255,255,255,.14);
    --text: #eeecff;
    --text-soft: #b9b6d6;
    --muted: #8b88a8;
    --brand: #7c6cff;
    --brand-2: #c04fd0;
    --accent: #3ee0ff;
    --ok: #4ade80;
    --radius: 20px;
    --serif: 'Instrument Serif', Georgia, serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    --shine: linear-gradient(100deg, #a99bff 0%, #f0c3ff 25%, #7de8ff 50%, #c04fd0 75%, #a99bff 100%);
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; scroll-padding-top:90px; }
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  a{ color:inherit; }
  svg{ display:block; }
  .wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
  ::selection{ background: rgba(124,108,255,.45); color:#fff; }
  :focus-visible{ outline:2px solid #b3a9ff; outline-offset:3px; border-radius:6px; }

  /* film grain */
  body::after{
    content:''; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- header ---------- */
  header{ position:fixed; top:14px; left:0; right:0; z-index:60; }
  .nav{
    position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px;
    height:62px; padding:0 10px 0 20px; border-radius:999px;
    background: rgba(12,10,26,.55); border:1px solid var(--line);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    transition: background .3s ease, border-color .3s ease;
  }
  header.scrolled .nav{ background: rgba(12,10,26,.85); border-color: var(--line-2); }
  .brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.02em; text-decoration:none; }
  .brand-mark{
    width:30px; height:30px; border-radius:9px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    background: conic-gradient(from 200deg, var(--brand), var(--brand-2), var(--accent), var(--brand));
    box-shadow: 0 0 22px -4px rgba(124,108,255,.8);
  }
  .brand-mark svg{ width:16px; height:16px; }
  .nav-links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
  .nav-links > li > a, .nav-trigger{
    display:inline-flex; align-items:center; gap:6px; padding:9px 13px; border-radius:999px;
    text-decoration:none; font:inherit; font-size:14px; font-weight:500; color:var(--text-soft);
    background:none; border:0; cursor:pointer; transition: color .2s, background .2s;
  }
  .nav-links > li > a:hover, .nav-trigger:hover, .has-menu.open .nav-trigger{ color:#fff; background: var(--surface-2); }
  .nav-trigger svg{ width:14px; height:14px; transition: transform .25s ease; }
  .has-menu:hover .nav-trigger svg, .has-menu.open .nav-trigger svg{ transform: rotate(180deg); }
  .pill-new{
    font-size:10px; font-weight:800; letter-spacing:.06em; padding:2px 7px; border-radius:999px; color:#fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
  }
  .nav-right{ display:flex; align-items:center; gap:8px; }
  .mobile-toggle{ display:none; background:none; border:0; padding:8px; color:var(--text); cursor:pointer; }
  .mobile-toggle svg{ width:22px; height:22px; }

  /* mega menu */
  .has-menu{ position:relative; }
  .mega{
    position:absolute; top:calc(100% + 20px); left:50%; width:760px;
    transform: translate(-50%, 10px); opacity:0; visibility:hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    display:grid; grid-template-columns: 1fr 1fr 230px; gap:6px; padding:12px;
    background: rgba(14,12,30,.97); border:1px solid var(--line-2); border-radius:22px;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(124,108,255,.08);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }
  .mega::before{ content:''; position:absolute; left:0; right:0; top:-22px; height:22px; }
  .has-menu:hover .mega, .has-menu.open .mega{ opacity:1; visibility:visible; transform: translate(-50%, 0); }
  .mitem{ display:flex; gap:12px; padding:13px; border-radius:14px; text-decoration:none; transition: background .2s; }
  .mitem:hover{ background: var(--surface-2); }
  .mitem .mi{
    width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    background: rgba(124,108,255,.12); border:1px solid rgba(124,108,255,.25);
  }
  .mitem .mi svg{ width:18px; height:18px; color:#c9c2ff; }
  .mitem b{ display:block; font-size:14px; font-weight:600; color:#fff; margin-bottom:3px; }
  .mitem span{ display:block; font-size:12.5px; line-height:1.45; color:var(--muted); }
  .mega-promo{
    grid-row: span 3; grid-column:3; position:relative; overflow:hidden; border-radius:16px; padding:20px; text-decoration:none;
    display:flex; flex-direction:column; justify-content:flex-end; min-height:250px;
    background: radial-gradient(120% 90% at 100% 0%, rgba(192,79,208,.55), transparent 60%), radial-gradient(100% 80% at 0% 100%, rgba(124,108,255,.55), transparent 60%), #120e2a;
    border:1px solid rgba(192,160,255,.25);
  }
  .mega-promo .pill-new{ align-self:flex-start; margin-bottom:auto; }
  .mega-promo b{ font-size:18px; letter-spacing:-.02em; margin-bottom:6px; }
  .mega-promo span{ font-size:13px; color:var(--text-soft); line-height:1.5; margin-bottom:14px; }
  .mega-promo em{ font-style:normal; font-size:13px; font-weight:700; color:#fff; display:inline-flex; align-items:center; gap:6px; }
  .mega-promo em svg{ width:14px; height:14px; transition: transform .2s; }
  .mega-promo:hover em svg{ transform: translateX(3px); }

  .btn{
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 20px; border-radius:999px; font-weight:600; font-size:14.5px; text-decoration:none;
    border:1px solid transparent; cursor:pointer; white-space:nowrap; font-family:inherit;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  }
  .btn svg{ width:16px; height:16px; transition: transform .2s ease; }
  .btn:hover svg{ transform: translateX(3px); }
  .btn-primary{
    color:#fff; background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 10px 30px -10px rgba(124,108,255,.9), inset 0 1px 0 rgba(255,255,255,.25);
  }
  .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(192,79,208,.9), inset 0 1px 0 rgba(255,255,255,.3); }
  .btn-ghost{ color:var(--text); background: var(--surface); border-color: var(--line-2); backdrop-filter: blur(8px); }
  .btn-ghost:hover{ background: var(--surface-2); border-color: rgba(255,255,255,.24); }
  .btn-lg{ padding:15px 28px; font-size:16px; }
  .btn-sm{ padding:9px 16px; font-size:13.5px; }

  /* ---------- hero ---------- */
  .hero{ position:relative; min-height:100vh; padding:150px 0 90px; overflow:hidden; isolation:isolate; }
  #net{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
  .aurora{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
  .aurora i{
    position:absolute; border-radius:50%; filter: blur(90px); opacity:.55; mix-blend-mode: screen;
    animation: drift 18s ease-in-out infinite alternate;
  }
  .aurora i:nth-child(1){ width:620px; height:620px; left:-120px; top:-160px; background:#5b3cff; }
  .aurora i:nth-child(2){ width:520px; height:520px; right:-120px; top:-60px; background:#b43ad0; animation-duration:22s; animation-delay:-6s; }
  .aurora i:nth-child(3){ width:420px; height:420px; left:38%; top:280px; background:#0ea5c6; opacity:.28; animation-duration:26s; animation-delay:-12s; }
  @keyframes drift{
    0%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(60px,40px) scale(1.12); }
    100%{ transform: translate(-40px,80px) scale(.95); }
  }
  .grid-bg{
    position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(70% 55% at 50% 30%, #000 20%, transparent 75%);
            mask-image: radial-gradient(70% 55% at 50% 30%, #000 20%, transparent 75%);
    opacity:.55;
  }
  .hero-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; border-radius:999px; text-decoration:none;
    background: var(--surface); border:1px solid var(--line-2); font-size:13px; font-weight:600; color:var(--text-soft);
    backdrop-filter: blur(8px); margin-bottom:30px; transition: border-color .2s, background .2s;
  }
  .eyebrow:hover{ border-color: rgba(192,160,255,.45); background: var(--surface-2); }
  .eyebrow b{
    padding:3px 9px; border-radius:999px; font-size:11.5px; letter-spacing:.04em; color:#fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
  }
  .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); animation: pulse 2s ease-out infinite; }
  .eyebrow svg{ width:14px; height:14px; transition: transform .2s; }
  .eyebrow:hover svg{ transform: translateX(3px); }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(74,222,128,.6); }
    70%{ box-shadow:0 0 0 9px rgba(74,222,128,0); }
    100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
  }
  h1{
    margin:0 0 26px; font-weight:800; letter-spacing:-.045em; line-height:1.0;
    font-size: clamp(46px, 8.4vw, 104px); max-width: 1000px;
  }
  h1 .line{ display:block; }
  .serif{ font-family:var(--serif); font-weight:400; font-style:italic; letter-spacing:-.02em; }
  .shine{
    background-image: var(--shine);
    background-size: 200% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
    animation: shine 8s linear infinite;
  }
  @keyframes shine{ to{ background-position: 200% center; } }
  .rotator{ display:inline-block; position:relative; vertical-align:bottom; text-align:left; transition: width .5s cubic-bezier(.2,.8,.2,1); }
  .rotator span{
    position:absolute; left:0; top:0; white-space:nowrap; opacity:0; transform: translateY(40%);
    filter: blur(8px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), filter .5s ease;
    padding-right:.08em;
  }
  .rotator span.on{ position:relative; opacity:1; transform:none; filter:none; }
  .rotator span.off{ opacity:0; transform: translateY(-40%); filter: blur(8px); }
  .lead{ font-size: clamp(17px, 1.6vw, 20px); line-height:1.65; color:var(--text-soft); max-width:680px; margin:0 0 40px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:22px; }
  .hero-note{ font-size:13px; color:var(--muted); display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
  .hero-note span{ display:inline-flex; align-items:center; gap:6px; }
  .hero-note svg{ width:14px; height:14px; color:var(--ok); }

  /* product mock */
  .stage{ margin-top:74px; width:100%; perspective: 1800px; }
  .mock{
    position:relative; border-radius:22px; padding:1px; text-align:left;
    background: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,.04) 30%, rgba(124,108,255,.35) 70%, rgba(192,79,208,.5));
    box-shadow: 0 60px 120px -40px rgba(92,60,255,.55), 0 30px 60px -30px rgba(0,0,0,.8);
    transform: rotateX(18deg) scale(.96); transform-origin: 50% 0;
    transition: transform .9s cubic-bezier(.2,.8,.2,1);
  }
  .mock.flat{ transform: rotateX(0) scale(1); }
  .mock::before{
    content:''; position:absolute; left:10%; right:10%; top:-1px; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  }
  .mock-in{ border-radius:21px; background: linear-gradient(180deg, #110e24, #0a0817); overflow:hidden; }
  .mock-top{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line); }
  .mock-top i{ width:11px; height:11px; border-radius:50%; background: rgba(255,255,255,.12); }
  .mock-top .title{ margin-left:14px; font-size:12.5px; color:var(--muted); font-weight:500; }
  .mock-top .live{ margin-left:auto; display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-soft); }
  .mock-top .live::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); }
  .mock-body{ display:grid; grid-template-columns: 190px 1.25fr 1fr; min-height:400px; }
  .m-side{ border-right:1px solid var(--line); padding:18px 12px; }
  .m-side .it{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:3px; }
  .m-side .it svg{ width:15px; height:15px; }
  .m-side .it.on{ background: var(--surface-2); color:#fff; box-shadow: inset 0 0 0 1px var(--line); }
  .m-side .sep{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#5f5c7c; padding:18px 10px 8px; font-weight:700; }
  .m-chat{ border-right:1px solid var(--line); padding:20px; display:flex; flex-direction:column; gap:12px; }
  .bubble{ max-width:92%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.55; opacity:0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
  .bubble.show{ opacity:1; transform:none; }
  .bubble.user{ align-self:flex-end; background: linear-gradient(135deg, var(--brand), #9a5ae0); color:#fff; border-bottom-right-radius:4px; }
  .bubble.ai{ align-self:flex-start; background: var(--surface-2); border:1px solid var(--line); color:var(--text); border-bottom-left-radius:4px; }
  .bubble.ai .who{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:#c9c2ff; margin-bottom:6px; letter-spacing:.02em; }
  .bubble.ai .who i{ width:14px; height:14px; border-radius:5px; background: conic-gradient(from 200deg, var(--brand), var(--brand-2), var(--accent), var(--brand)); }
  .caret{ display:inline-block; width:7px; height:14px; margin-left:1px; vertical-align:-2px; background:#c9c2ff; animation: blink 1s steps(1) infinite; }
  @keyframes blink{ 50%{ opacity:0; } }
  .tasks{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
  .tasks li{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-soft); opacity:0; transform: translateX(-6px); transition: all .35s ease; }
  .tasks li.show{ opacity:1; transform:none; }
  .tasks li svg{ width:14px; height:14px; color:var(--ok); flex:0 0 auto; }
  .m-input{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background: rgba(255,255,255,.02); font-size:12.5px; color:#6d6a8c; }
  .m-input .send{ margin-left:auto; width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
  .m-input .send svg{ width:13px; height:13px; color:#fff; }
  .m-data{ padding:20px; display:grid; gap:12px; align-content:start; }
  .kpis{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
  .kpi{ border:1px solid var(--line); border-radius:14px; padding:14px; background: rgba(255,255,255,.02); }
  .kpi .k{ font-size:11.5px; color:var(--muted); font-weight:600; margin-bottom:6px; }
  .kpi .v{ font-size:22px; font-weight:800; letter-spacing:-.02em; }
  .kpi .d{ font-size:11.5px; color:var(--ok); font-weight:600; margin-left:6px; }
  .chart{ border:1px solid var(--line); border-radius:14px; padding:14px 14px 8px; background: rgba(255,255,255,.02); }
  .chart .k{ font-size:11.5px; color:var(--muted); font-weight:600; display:flex; justify-content:space-between; }
  .chart svg{ width:100%; height:120px; margin-top:8px; }
  .chart .ln{ stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1); }
  .chart .ar{ opacity:0; transition: opacity 1.2s ease .9s; }
  .chart.draw .ln{ stroke-dashoffset:0; }
  .chart.draw .ar{ opacity:1; }
  .chart .pt{ opacity:0; transition: opacity .4s ease 2s; }
  .chart.draw .pt{ opacity:1; }
  .flow-row{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:14px; padding:12px 14px; font-size:12px; color:var(--text-soft); background: rgba(255,255,255,.02); }
  .flow-row .chip{ padding:4px 9px; border-radius:7px; background: var(--surface-2); border:1px solid var(--line); font-weight:600; white-space:nowrap; }
  .flow-row .wire{ flex:1; height:2px; min-width:14px; border-radius:2px; background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand)); background-size:200% 100%; animation: wire 1.6s linear infinite; opacity:.8; }
  @keyframes wire{ to{ background-position: -200% 0; } }

  .hero-fade{ position:absolute; left:0; right:0; bottom:0; height:180px; background: linear-gradient(180deg, transparent, var(--bg)); z-index:-1; pointer-events:none; }

  /* ---------- marquee ---------- */
  .marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; overflow:hidden; background: var(--bg-2);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .marquee-track{ display:flex; gap:56px; width:max-content; animation: marquee 44s linear infinite; }
  .marquee:hover .marquee-track{ animation-play-state: paused; }
  .marquee-track span{ display:inline-flex; align-items:center; gap:14px; font-size:20px; font-weight:600; color:#a6a3c4; letter-spacing:-.01em; white-space:nowrap; }
  .marquee-track span:nth-child(even){ font-family:var(--serif); font-style:italic; font-weight:400; font-size:24px; color:#d6d0ff; }
  .marquee-track span::after{ content:'✦'; font-size:12px; color: var(--brand); font-style:normal; margin-left:42px; }
  @keyframes marquee{ to{ transform: translateX(-50%); } }

  /* ---------- sections ---------- */
  section{ padding:130px 0; position:relative; }
  .section-head{ max-width:760px; margin:0 auto 64px; text-align:center; }
  .kicker{
    display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:#b3a9ff; margin-bottom:18px;
  }
  .kicker::before, .kicker::after{ content:''; width:18px; height:1px; background: linear-gradient(90deg, transparent, #b3a9ff); }
  .kicker::after{ transform: scaleX(-1); }
  h2{ font-size: clamp(34px, 5vw, 60px); letter-spacing:-.04em; line-height:1.04; margin:0 0 18px; font-weight:800; }
  .section-head p{ font-size:18px; line-height:1.65; color:var(--text-soft); margin:0; }

  /* bento */
  .bento{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(250px, auto); gap:18px; }
  .card{
    position:relative; border-radius: var(--radius); padding:28px; overflow:hidden; isolation:isolate;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    border:1px solid var(--line);
    transition: border-color .3s ease, transform .3s ease;
  }
  .card::before{
    content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition: opacity .3s ease;
    background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(124,108,255,.16), transparent 45%);
  }
  .card::after{
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition: opacity .3s ease;
    background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(192,160,255,.7), transparent 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  }
  .card:hover::before, .card:hover::after{ opacity:1; }
  .card .tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#b3a9ff; margin-bottom:12px; }
  .card h3{ font-size:20px; letter-spacing:-.02em; margin:0 0 8px; }
  .card p{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; max-width:440px; }
  .c-a{ grid-column: span 2; grid-row: span 2; display:flex; flex-direction:column; }
  .c-2{ grid-column: span 2; }
  .c-4{ grid-column: span 4; }

  /* code editor */
  .editor{
    margin-top:24px; flex:1; display:flex; flex-direction:column; position:relative;
    border:1px solid var(--line-2); border-radius:14px; overflow:hidden; background:#0a0818;
    font-family:var(--mono); font-size:13px;
  }
  .ed-tabs{ display:flex; border-bottom:1px solid var(--line); background: rgba(255,255,255,.02); }
  .ed-tabs span{ padding:10px 16px; font-size:12px; color:var(--muted); border-right:1px solid var(--line); }
  .ed-tabs span.on{ color:#fff; background:#0a0818; box-shadow: inset 0 2px 0 var(--brand); }
  .ed-body{ padding:16px 0; counter-reset: ln; flex:1; }
  .cl{ display:block; padding:2px 18px 2px 0; white-space:pre; line-height:1.75; color:#cfcbef; }
  .cl::before{ counter-increment: ln; content: counter(ln); display:inline-block; width:44px; padding-right:16px; text-align:right; color:#4a4766; }
  .js .c-a .cl{ opacity:0; transform: translateX(-8px); }
  .c-a.in .cl{ animation: lineIn .45s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * .13s + .5s); }
  @keyframes lineIn{ to{ opacity:1; transform:none; } }
  .tk-k{ color:#c792ea; } .tk-s{ color:#7de8ff; } .tk-f{ color:#f0c3ff; } .tk-c{ color:#5f5c7c; font-style:italic; } .tk-p{ color:#a6a3c4; } .tk-b{ color:#fbbf24; }
  .ed-toast{
    position:absolute; right:16px; bottom:16px; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px;
    font-family:'Inter', sans-serif; font-size:12.5px; font-weight:600; color:#fff;
    background: rgba(20,40,30,.9); border:1px solid rgba(74,222,128,.4); box-shadow: 0 10px 30px -10px rgba(74,222,128,.5);
  }
  .ed-toast svg{ width:16px; height:16px; color:var(--ok); }
  .js .c-a .ed-toast{ opacity:0; transform: translateY(10px); }
  .c-a.in .ed-toast{ animation: lineIn .5s cubic-bezier(.2,.8,.2,1) 2.1s forwards; }

  /* automation flow */
  .flow{ margin-top:26px; display:flex; align-items:center; }
  .node{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--text-soft); }
  .node .box{ width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center; background: var(--surface-2); border:1px solid var(--line-2); }
  .node .box svg{ width:24px; height:24px; color:#cfc8ff; }
  .node.ai .box{ background: linear-gradient(135deg, rgba(124,108,255,.35), rgba(192,79,208,.35)); border-color: rgba(192,160,255,.5); box-shadow: 0 0 30px -6px rgba(124,108,255,.8); }
  .pipe{ flex:1; height:2px; margin:0 8px 26px; position:relative; background: rgba(255,255,255,.1); border-radius:2px; }
  .pipe::after{
    content:''; position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%;
    background:#fff; box-shadow: 0 0 12px 3px var(--brand); animation: travel 2.4s cubic-bezier(.6,0,.4,1) infinite;
  }
  .pipe.p2::after{ animation-delay:1.2s; }
  @keyframes travel{ 0%{ left:0; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:calc(100% - 8px); opacity:0; } }

  /* shield */
  .shield{ margin:22px auto 0; width:100px; height:112px; position:relative; }
  .shield svg{ width:100%; height:100%; }
  .shield .scan{
    position:absolute; left:8px; right:8px; height:2px; top:10%; border-radius:2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 14px var(--accent);
    animation: scan 2.8s ease-in-out infinite;
  }
  @keyframes scan{ 50%{ top:82%; } }

  /* bars */
  .bars{ margin-top:26px; height:100px; display:flex; align-items:flex-end; gap:7px; }
  .bars i{
    flex:1; height:100%; border-radius:6px 6px 2px 2px; background: linear-gradient(180deg, var(--brand-2), var(--brand) 70%, rgba(124,108,255,.3));
    transform-origin: bottom; animation: bar 3.2s ease-in-out infinite;
  }
  @keyframes bar{ 0%,100%{ transform: scaleY(var(--a)); } 50%{ transform: scaleY(var(--b)); } }

  /* devices */
  .devices{ margin-top:24px; display:flex; align-items:flex-end; gap:16px; height:150px; }
  .browser{ flex:1; height:100%; border-radius:12px; border:1px solid var(--line-2); background:#0a0818; overflow:hidden; }
  .browser .bar{ display:flex; gap:5px; padding:8px 10px; border-bottom:1px solid var(--line); }
  .browser .bar i{ width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,.15); }
  .browser .pg{ padding:12px; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; }
  .phone{ width:78px; height:100%; border-radius:16px; border:1px solid var(--line-2); background:#0a0818; padding:14px 8px 8px; display:grid; gap:6px; align-content:start; position:relative; }
  .phone::before{ content:''; position:absolute; top:5px; left:50%; width:22px; height:4px; margin-left:-11px; border-radius:4px; background: rgba(255,255,255,.12); }
  .sk{ height:9px; border-radius:5px; background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(192,160,255,.28) 50%, rgba(255,255,255,.06) 100%); background-size:200% 100%; animation: shimmer 2.2s linear infinite; }
  .sk.h{ height:34px; grid-column: span 3; background-image: linear-gradient(90deg, rgba(124,108,255,.2), rgba(192,79,208,.45), rgba(124,108,255,.2)); }
  .sk.b{ height:40px; }
  .phone .sk.h{ grid-column:auto; height:30px; }
  @keyframes shimmer{ to{ background-position: -200% 0; } }

  /* chips */
  .chips{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }
  .chips span{
    display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:12px; font-size:13px; font-weight:600;
    background: var(--surface); border:1px solid var(--line); color:var(--text-soft); transition: all .25s ease;
  }
  .chips span:hover{ color:#fff; border-color: rgba(192,160,255,.5); background: rgba(124,108,255,.12); transform: translateY(-2px); }
  .chips span i{ width:6px; height:6px; border-radius:50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }

  /* SaaS wide card */
  .saas{ display:grid; grid-template-columns: 1fr 1fr; gap:30px; align-items:center; }
  .saas h3{ font-size:30px; letter-spacing:-.03em; }
  .saas p{ font-size:15.5px; }
  .orbit{ min-height:380px; display:flex; align-items:center; justify-content:center; position:relative; }
  .orbit .core{
    width:104px; height:104px; border-radius:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; z-index:2;
    background: conic-gradient(from 200deg, var(--brand), var(--brand-2), var(--accent), var(--brand));
    box-shadow: 0 0 80px -6px rgba(124,108,255,.9), inset 0 1px 0 rgba(255,255,255,.4);
    animation: breathe 4s ease-in-out infinite; font-size:11px; font-weight:800; letter-spacing:.04em; text-align:center;
  }
  .orbit .core svg{ width:34px; height:34px; }
  @keyframes breathe{ 50%{ box-shadow: 0 0 120px 0 rgba(192,79,208,.85), inset 0 1px 0 rgba(255,255,255,.4); } }
  .ring{ position:absolute; border-radius:50%; border:1px dashed rgba(255,255,255,.12); animation: spin 40s linear infinite; }
  .ring.r1{ width:230px; height:230px; }
  .ring.r2{ width:360px; height:360px; border-style:solid; border-color: rgba(255,255,255,.06); }
  .ring .sat{ position:absolute; left:50%; top:50%; }
  .ring .sat b{
    display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:10px; font-size:12px; font-weight:600; white-space:nowrap;
    background: rgba(18,15,38,.92); border:1px solid var(--line-2); color:var(--text); box-shadow: 0 8px 20px -8px rgba(0,0,0,.8);
    translate: -50% -50%; animation: spin 40s linear infinite reverse;
  }
  .ring .sat b i{ width:8px; height:8px; border-radius:3px; }
  @keyframes spin{ to{ transform: rotate(360deg); } }

  /* ---------- Omneth AI ---------- */
  .ai-section{ overflow:hidden; }
  .ai-section::before{
    content:''; position:absolute; left:50%; top:10%; width:1100px; height:700px; transform: translateX(-50%); z-index:-1; pointer-events:none;
    background: radial-gradient(50% 50% at 30% 50%, rgba(124,108,255,.18), transparent 70%), radial-gradient(40% 50% at 75% 40%, rgba(192,79,208,.16), transparent 70%);
  }
  .ai-grid{ display:grid; grid-template-columns: 1fr 1.05fr; gap:60px; align-items:center; }
  .ai-copy .kicker{ margin-bottom:18px; }
  .ai-copy h2{ margin-bottom:20px; }
  .ai-copy > p{ font-size:18px; line-height:1.65; color:var(--text-soft); margin:0 0 30px; max-width:520px; }
  .apps{ display:grid; gap:10px; margin-bottom:34px; }
  .app{
    display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:16px;
    background: var(--surface); border:1px solid var(--line); transition: all .25s ease;
  }
  .app:hover{ border-color: rgba(192,160,255,.45); background: rgba(124,108,255,.08); transform: translateX(4px); }
  .app .ai-ic{ width:44px; height:44px; border-radius:13px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
  .app .ai-ic svg{ width:21px; height:21px; color:#fff; }
  .app b{ display:block; font-size:15.5px; margin-bottom:2px; }
  .app span{ display:block; font-size:13.5px; color:var(--muted); line-height:1.45; }
  .ai-ctas{ display:flex; gap:12px; flex-wrap:wrap; }

  .ai-visual{ position:relative; display:grid; gap:16px; }
  .ai-card{
    position:relative; border-radius:22px; padding:22px; overflow:hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border:1px solid var(--line-2);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
  }
  .ai-card .hd{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700; margin-bottom:16px; }
  .ai-card .hd .ai-ic{ width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
  .ai-card .hd .ai-ic svg{ width:15px; height:15px; color:#fff; }
  .ai-card .hd .st{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--text-soft); }
  .ai-card .hd .st::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }
  .g-talk{ background: linear-gradient(135deg, #0ea5c6, #7c6cff); }
  .g-draw{ background: linear-gradient(135deg, #f472b6, #c04fd0); }
  .g-chat{ background: linear-gradient(135deg, #7c6cff, #c04fd0); }
  .talk-row{ display:flex; align-items:center; gap:18px; }
  .mic{ position:relative; width:58px; height:58px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, #0ea5c6, #7c6cff); }
  .mic svg{ width:24px; height:24px; color:#fff; }
  .mic::before, .mic::after{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(62,224,255,.6); animation: ripple 2.2s ease-out infinite; }
  .mic::after{ animation-delay:1.1s; }
  @keyframes ripple{ to{ transform: scale(1.8); opacity:0; } }
  .wave{ flex:1; height:58px; display:flex; align-items:center; gap:3px; }
  .wave i{ flex:1; border-radius:3px; background: linear-gradient(180deg, var(--accent), var(--brand)); height:20%; animation: wave 1.2s ease-in-out infinite; }
  @keyframes wave{ 50%{ height: var(--h); } }
  .prompt{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background: rgba(255,255,255,.02); font-size:13px; color:var(--text-soft); margin-bottom:12px; }
  .prompt svg{ width:15px; height:15px; color:#f0c3ff; flex:0 0 auto; }
  .gens{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; }
  .gen{ aspect-ratio:1; border-radius:12px; position:relative; overflow:hidden; animation: gen 9s linear infinite; }
  .gen:nth-child(1){ background: radial-gradient(circle at 70% 30%, #ffd29b, transparent 40%), linear-gradient(160deg, #ff9a8b, #7c6cff 60%, #1b1440); }
  .gen:nth-child(2){ background: radial-gradient(circle at 30% 70%, #7de8ff, transparent 45%), linear-gradient(200deg, #3ee0ff, #5b3cff 60%, #120e2a); animation-delay:-2s; }
  .gen:nth-child(3){ background: radial-gradient(circle at 50% 40%, #fff1, transparent 40%), conic-gradient(from 90deg at 40% 60%, #c04fd0, #7c6cff, #3ee0ff, #c04fd0); animation-delay:-4s; }
  .gen:nth-child(4){ background: radial-gradient(circle at 60% 60%, #f0c3ff, transparent 45%), linear-gradient(120deg, #1b1440, #c04fd0 60%, #ff9a8b); animation-delay:-6s; }
  .gen::after{ content:''; position:absolute; inset:0; background: repeating-linear-gradient(0deg, rgba(7,6,15,.7) 0 5px, transparent 5px 10px); animation: resolve 4.5s ease-in-out infinite; }
  .gen:nth-child(2)::after{ animation-delay:.4s; } .gen:nth-child(3)::after{ animation-delay:.8s; } .gen:nth-child(4)::after{ animation-delay:1.2s; }
  @keyframes gen{ to{ filter: hue-rotate(360deg); } }
  @keyframes resolve{ 0%{ opacity:1; } 55%,100%{ opacity:0; } }
  .mini-chat{ display:grid; gap:8px; }
  .mini-chat div{ max-width:85%; padding:9px 13px; border-radius:12px; font-size:13px; line-height:1.5; }
  .mini-chat .u{ justify-self:end; background: linear-gradient(135deg, var(--brand), #9a5ae0); color:#fff; border-bottom-right-radius:4px; }
  .mini-chat .a{ background: var(--surface-2); border:1px solid var(--line); color:var(--text); border-bottom-left-radius:4px; }
  .ai-card.t2{ margin-left:40px; }
  .ai-card.t3{ margin-right:40px; }

  /* ---------- manifesto ---------- */
  .manifesto{ padding: 150px 0; }
  .manifesto p{
    margin:0 auto; max-width:1040px; text-align:center;
    font-size: clamp(30px, 4.4vw, 58px); line-height:1.18; letter-spacing:-.03em; font-weight:700;
  }
  .manifesto .w{ opacity:.14; transition: opacity .25s linear; }
  .manifesto .w.lit{ opacity:1; }
  .manifesto .serif{ font-weight:400; }

  /* ---------- engagement models ---------- */
  .build-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
  .build-card{
    position:relative; border-radius:24px; padding:34px 30px 30px; min-height:420px; display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); border:1px solid var(--line);
    transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
  }
  .build-card:hover{ transform: translateY(-6px); border-color: rgba(192,160,255,.4); }
  .build-card.featured{ border-color: rgba(192,160,255,.35); background: linear-gradient(180deg, rgba(124,108,255,.12), rgba(255,255,255,.01)); }
  .build-card .glow{
    position:absolute; width:260px; height:260px; border-radius:50%; filter: blur(70px); opacity:.35; z-index:-1;
    right:-80px; top:-90px; transition: opacity .4s ease, transform .6s ease;
  }
  .build-card:hover .glow{ opacity:.6; transform: scale(1.2); }
  .build-card:nth-child(1) .glow{ background:#7c6cff; }
  .build-card:nth-child(2) .glow{ background:#c04fd0; }
  .build-card:nth-child(3) .glow{ background:#0ea5c6; }
  .build-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:auto; }
  .build-num{ font-family:var(--serif); font-style:italic; font-size:84px; line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.28); }
  .build-badge{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px; color:#fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
  .build-card h3{ font-size:26px; letter-spacing:-.03em; margin:40px 0 10px; }
  .build-card p{ font-size:15px; line-height:1.65; color:var(--muted); margin:0 0 20px; }
  .checks{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:9px; }
  .checks li{ display:flex; gap:10px; font-size:14px; color:var(--text-soft); }
  .checks svg{ width:16px; height:16px; color:#b3a9ff; flex:0 0 auto; margin-top:2px; }
  .build-card .more{ margin-top:auto; font-size:14px; font-weight:600; text-decoration:none; color:#fff; display:inline-flex; align-items:center; gap:6px; }
  .build-card .more svg{ width:15px; height:15px; transition: transform .2s; }
  .build-card .more:hover svg{ transform: translateX(3px); }

  /* ---------- process ---------- */
  .timeline{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
  .timeline .track{ position:absolute; left:12.5%; right:12.5%; top:31px; height:2px; background: var(--line); border-radius:2px; overflow:hidden; }
  .timeline .track i{ position:absolute; inset:0; transform-origin:left; transform: scaleX(var(--p,0)); background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--accent)); box-shadow: 0 0 16px var(--brand); }
  .step{ text-align:center; padding:0 6px; }
  .step-num{
    position:relative; width:64px; height:64px; margin:0 auto 26px; border-radius:20px; display:flex; align-items:center; justify-content:center;
    font-size:22px; font-weight:800; background: #0f0c22; border:1px solid var(--line-2); color:var(--muted); transition: all .5s ease;
  }
  .step.active .step-num{ color:#fff; border-color:transparent; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 0 40px -6px rgba(124,108,255,.9); }
  .step h3{ font-size:21px; letter-spacing:-.02em; margin:0 0 10px; }
  .step p{ font-size:14.5px; line-height:1.65; color:var(--muted); margin:0 auto; max-width:260px; }

  /* ---------- why ---------- */
  .why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
  .why{ padding:28px 24px; border-radius:20px; border:1px solid var(--line); background: var(--surface); transition: border-color .3s, transform .3s; }
  .why:hover{ border-color: rgba(192,160,255,.35); transform: translateY(-4px); }
  .why .wi{
    width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:22px;
    background: linear-gradient(135deg, rgba(124,108,255,.25), rgba(192,79,208,.25)); border:1px solid rgba(192,160,255,.3);
  }
  .why .wi svg{ width:22px; height:22px; color:#e4dfff; }
  .why h3{ font-size:18px; letter-spacing:-.02em; margin:0 0 8px; }
  .why p{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; }

  /* ---------- FAQ ---------- */
  .faq{ max-width:860px; margin:0 auto; }
  .faq details{ border-bottom:1px solid var(--line); }
  .faq details:first-child{ border-top:1px solid var(--line); }
  .faq summary{
    list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px;
    padding:24px 4px; font-size:18px; font-weight:600; letter-spacing:-.01em; transition: color .2s;
  }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary:hover{ color:#d6d0ff; }
  .faq summary i{ position:relative; width:30px; height:30px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line-2); transition: transform .3s ease, background .3s; }
  .faq summary i::before, .faq summary i::after{ content:''; position:absolute; left:50%; top:50%; width:11px; height:1.5px; background:#fff; transform: translate(-50%,-50%); }
  .faq summary i::after{ transform: translate(-50%,-50%) rotate(90deg); transition: transform .3s ease; }
  .faq details[open] summary i{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color:transparent; }
  .faq details[open] summary i::after{ transform: translate(-50%,-50%) rotate(0deg); }
  .faq .ans{ padding:0 60px 26px 4px; font-size:15.5px; line-height:1.7; color:var(--text-soft); }
  .faq details[open] .ans{ animation: fadeDown .35s ease; }
  @keyframes fadeDown{ from{ opacity:0; transform: translateY(-6px); } }

  /* ---------- CTA ---------- */
  .cta{ padding-bottom:150px; }
  .cta-box{ position:relative; border-radius:32px; padding:2px; overflow:hidden; isolation:isolate; }
  .cta-box::before{
    content:''; position:absolute; inset:-60%; z-index:-1;
    background: conic-gradient(from 0deg, transparent 0 55%, var(--brand) 70%, var(--brand-2) 80%, var(--accent) 88%, transparent 95%);
    animation: spin 6s linear infinite;
  }
  .cta-in{
    position:relative; border-radius:30px; padding:100px 40px; text-align:center; overflow:hidden;
    background: radial-gradient(80% 120% at 50% 0%, #1e1650 0%, #0d0a1f 55%, #09071a 100%);
  }
  .cta-in .orb{
    position:absolute; left:50%; top:100%; width:760px; height:760px; transform: translate(-50%,-38%); border-radius:50%; z-index:0;
    background: radial-gradient(circle at 50% 30%, rgba(192,79,208,.55), rgba(124,108,255,.35) 35%, transparent 65%);
    filter: blur(20px); animation: breathe2 6s ease-in-out infinite;
  }
  @keyframes breathe2{ 50%{ transform: translate(-50%,-44%) scale(1.06); } }
  .cta-in > *:not(.orb){ position:relative; z-index:1; }
  .cta-in h2{ font-size: clamp(38px, 6vw, 76px); margin-bottom:20px; }
  .cta-in p{ color:var(--text-soft); font-size:18px; line-height:1.6; max-width:560px; margin:0 auto 38px; }
  .cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .cta-mail{ margin-top:30px; font-size:14px; color:var(--text-soft); }
  .cta-mail a{ color:#fff; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); }
  .cta-mail a:hover{ border-color:#fff; }

  /* ---------- footer ---------- */
  footer{ border-top:1px solid var(--line); padding:72px 0 36px; position:relative; overflow:hidden; background: linear-gradient(180deg, var(--bg), #05040b); }
  .footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap:40px; margin-bottom:56px; }
  .footer-col a .ext{ width:13px; height:13px; opacity:.55; transition: opacity .2s, transform .2s; }
  .footer-col a:hover .ext{ opacity:1; transform: translate(2px,-2px); }
  .footer-brand p{ margin:16px 0 22px; font-size:14.5px; color:var(--muted); max-width:320px; line-height:1.65; }
  .f-contact{ display:grid; gap:10px; font-size:14px; }
  .f-contact a, .f-contact span{ display:inline-flex; align-items:center; gap:10px; color:var(--text-soft); text-decoration:none; }
  .f-contact a:hover{ color:#fff; }
  .f-contact svg{ width:16px; height:16px; color:#b3a9ff; flex:0 0 auto; }
  .f-ai{
    margin-top:24px; display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; text-decoration:none;
    background: rgba(124,108,255,.1); border:1px solid rgba(192,160,255,.3); font-size:13.5px; font-weight:600; transition: background .2s;
  }
  .f-ai:hover{ background: rgba(124,108,255,.18); }
  .f-ai svg{ width:14px; height:14px; }
  .footer-col h4{ margin:4px 0 18px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#8f8ab8; }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
  .footer-col a{ text-decoration:none; color:var(--text-soft); font-size:14.5px; transition: color .2s; display:inline-flex; align-items:center; gap:8px; }
  .footer-col a:hover{ color:#fff; }
  .footer-col .pill-new{ font-size:9.5px; }
  .footer-word{
    font-size: clamp(80px, 21vw, 300px); font-weight:800; letter-spacing:-.06em; line-height:.8; text-align:center; margin:0 0 36px;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 85%); -webkit-background-clip:text; background-clip:text; color:transparent;
    user-select:none;
  }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
  .to-top{ display:inline-flex; align-items:center; gap:8px; color:var(--text-soft); text-decoration:none; font-weight:600; }
  .to-top:hover{ color:#fff; }
  .to-top svg{ width:15px; height:15px; transition: transform .2s; }
  .to-top:hover svg{ transform: translateY(-3px); }

  /* ---------- reveal ---------- */
  .js .reveal{ opacity:0; transform: translateY(34px); filter: blur(6px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1), filter 1s ease; transition-delay: var(--d, 0s); }
  .js .reveal.in{ opacity:1; transform:none; filter:none; }

  /* ---------- theme toggle ---------- */
  .theme-toggle{
    position:relative; width:40px; height:40px; flex:0 0 auto; border-radius:50%; cursor:pointer; overflow:hidden;
    background: var(--surface); border:1px solid var(--line-2); color:var(--text);
    display:inline-flex; align-items:center; justify-content:center; transition: background .2s, border-color .2s, transform .2s;
  }
  .theme-toggle:hover{ background: var(--surface-2); transform: rotate(-12deg); }
  .theme-toggle svg{ position:absolute; width:18px; height:18px; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
  .theme-toggle .sun{ opacity:0; transform: translateY(20px) rotate(-90deg); }
  html[data-theme="light"] .theme-toggle .sun{ opacity:1; transform:none; }
  html[data-theme="light"] .theme-toggle .moon{ opacity:0; transform: translateY(-20px) rotate(90deg); }
  html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{
    transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, fill .45s ease, stroke .45s ease !important;
  }

  /* ---------- light theme ---------- */
  html[data-theme="light"]{
    --bg: #f7f6fc;
    --bg-2: #efedf9;
    --surface: rgba(30,20,90,.035);
    --surface-2: rgba(30,20,90,.065);
    --line: rgba(30,20,90,.09);
    --line-2: rgba(30,20,90,.16);
    --text: #16122e;
    --text-soft: #4a4569;
    --muted: #6d6890;
    --brand: #6a55ff;
    --brand-2: #b43ad0;
    --shine: linear-gradient(100deg, #5b3cff 0%, #b43ad0 25%, #0891b2 50%, #7c3aed 75%, #5b3cff 100%);
    color-scheme: light;
  }
  /* pieces that stay dark on purpose: product UI, code, closing CTA, menu promo */
  html[data-theme="light"] :is(.mock, .editor, .cta-in, .mega-promo){
    --surface: rgba(255,255,255,.035); --surface-2: rgba(255,255,255,.06);
    --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
    --text: #eeecff; --text-soft: #b9b6d6; --muted: #8b88a8;
    --shine: linear-gradient(100deg, #a99bff 0%, #f0c3ff 25%, #7de8ff 50%, #c04fd0 75%, #a99bff 100%);
    color: var(--text);
  }
  html[data-theme="light"] body::after{ opacity:.025; }
  html[data-theme="light"] .nav{ background: rgba(255,255,255,.62); box-shadow: 0 10px 30px -18px rgba(40,30,110,.25); }
  html[data-theme="light"] header.scrolled .nav{ background: rgba(255,255,255,.88); }
  html[data-theme="light"] .nav-links > li > a:hover, html[data-theme="light"] .nav-trigger:hover, html[data-theme="light"] .has-menu.open .nav-trigger{ color: var(--text); }
  html[data-theme="light"] .mega{ background: rgba(255,255,255,.98); box-shadow: 0 40px 80px -30px rgba(40,30,110,.35); }
  html[data-theme="light"] .mitem b{ color: var(--text); }
  html[data-theme="light"] .mitem .mi svg{ color: var(--brand); }
  html[data-theme="light"] .mega-promo b, html[data-theme="light"] .mega-promo em{ color:#fff; }
  html[data-theme="light"] .aurora i{ mix-blend-mode: normal; opacity:.2; }
  html[data-theme="light"] .aurora i:nth-child(3){ opacity:.12; }
  html[data-theme="light"] .mock{ box-shadow: 0 60px 120px -50px rgba(92,60,255,.55), 0 30px 60px -30px rgba(30,20,90,.35); }
  html[data-theme="light"] .marquee-track span{ color: var(--muted); }
  html[data-theme="light"] .marquee-track span:nth-child(even){ color: var(--brand); }
  html[data-theme="light"] .kicker{ color: var(--brand); }
  html[data-theme="light"] .kicker::before, html[data-theme="light"] .kicker::after{ background: linear-gradient(90deg, transparent, var(--brand)); }
  html[data-theme="light"] :is(.card, .build-card, .why, .ai-card, .app){
    background: rgba(255,255,255,.8);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 48px -32px rgba(40,30,110,.3);
  }
  html[data-theme="light"] .build-card.featured{ background: linear-gradient(180deg, rgba(106,85,255,.1), rgba(255,255,255,.85)); }
  html[data-theme="light"] .card::before{ background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(106,85,255,.1), transparent 45%); }
  html[data-theme="light"] .card .tag, html[data-theme="light"] .checks svg, html[data-theme="light"] .f-contact svg{ color: var(--brand); }
  html[data-theme="light"] .node .box svg, html[data-theme="light"] .why .wi svg{ color: var(--brand); }
  html[data-theme="light"] .node .box{ background:#fff; }
  html[data-theme="light"] .node.ai .box{ background: linear-gradient(135deg, rgba(106,85,255,.18), rgba(180,58,208,.18)); }
  html[data-theme="light"] .pipe{ background: var(--line-2); }
  html[data-theme="light"] .pipe::after{ background: var(--brand); box-shadow: 0 0 12px 3px rgba(106,85,255,.5); }
  html[data-theme="light"] .shield svg path:last-child{ stroke: var(--brand); }
  html[data-theme="light"] :is(.browser, .phone){ background:#fff; }
  html[data-theme="light"] .browser .bar i, html[data-theme="light"] .phone::before{ background: var(--line-2); }
  html[data-theme="light"] .sk{ background-image: linear-gradient(90deg, rgba(30,20,90,.06) 0%, rgba(106,85,255,.22) 50%, rgba(30,20,90,.06) 100%); }
  html[data-theme="light"] .sk.h{ background-image: linear-gradient(90deg, rgba(106,85,255,.18), rgba(180,58,208,.35), rgba(106,85,255,.18)); }
  html[data-theme="light"] .chips span:hover{ color: var(--text); }
  html[data-theme="light"] .ring{ border-color: rgba(30,20,90,.16); }
  html[data-theme="light"] .ring.r2{ border-color: rgba(30,20,90,.08); }
  html[data-theme="light"] .ring .sat b{ background:#fff; box-shadow: 0 8px 20px -10px rgba(40,30,110,.35); }
  html[data-theme="light"] .build-num{ -webkit-text-stroke-color: rgba(30,20,90,.28); }
  html[data-theme="light"] .build-card .glow{ opacity:.18; }
  html[data-theme="light"] .build-card:hover .glow{ opacity:.3; }
  html[data-theme="light"] .build-card .more{ color: var(--text); }
  html[data-theme="light"] .step-num{ background:#fff; }
  html[data-theme="light"] .step.active .step-num{ color:#fff; }
  html[data-theme="light"] .faq summary:hover{ color: var(--brand); }
  html[data-theme="light"] .faq summary i::before, html[data-theme="light"] .faq summary i::after{ background: var(--text); }
  html[data-theme="light"] .faq details[open] summary i::before, html[data-theme="light"] .faq details[open] summary i::after{ background:#fff; }
  html[data-theme="light"] footer{ background: linear-gradient(180deg, var(--bg), #ebe9f7); }
  html[data-theme="light"] .footer-col h4{ color: var(--muted); }
  html[data-theme="light"] .footer-col a:hover, html[data-theme="light"] .to-top:hover, html[data-theme="light"] .f-contact a:hover{ color: var(--text); }
  html[data-theme="light"] .f-ai{ background: rgba(106,85,255,.08); border-color: rgba(106,85,255,.25); }
  html[data-theme="light"] .footer-word{ background-image: linear-gradient(180deg, rgba(30,20,90,.12), rgba(30,20,90,0) 85%); }
  html[data-theme="light"] .ai-section::before{ opacity:.6; }
  @media (max-width: 900px){
    html[data-theme="light"] .nav-links.open{ background: rgba(255,255,255,.98); box-shadow: 0 30px 60px -30px rgba(40,30,110,.35); }
  }

  /* ---------- responsive ---------- */
  @media (max-width: 1180px){
    .nav-right .btn-ghost{ display:none; }
  }
  @media (max-width: 1020px){
    .mock-body{ grid-template-columns: 1fr 1fr; }
    .m-side{ display:none; }
    .bento{ grid-template-columns: repeat(2,1fr); }
    .c-a, .c-2, .c-4{ grid-column: span 2; }
    .c-a{ grid-row:auto; }
    .saas{ grid-template-columns: 1fr; }
    .ai-grid{ grid-template-columns: 1fr; gap:48px; }
    .build-grid{ grid-template-columns: 1fr; }
    .build-card{ min-height:auto; }
    .timeline{ grid-template-columns: 1fr 1fr; row-gap:48px; }
    .timeline .track{ display:none; }
    .why-grid{ grid-template-columns: 1fr 1fr; }
    .footer-grid{ grid-template-columns: repeat(4, 1fr); }
    .footer-brand{ grid-column: 1 / -1; }
  }
  @media (max-width: 900px){
    .nav-links{ display:none; }
    .nav-links.open{
      display:flex; flex-direction:column; align-items:stretch; gap:0; position:absolute; top:72px; left:0; right:0; padding:10px 14px;
      background: rgba(12,10,26,.97); border:1px solid var(--line-2); border-radius:22px;
    }
    .nav-links.open > li > a, .nav-links.open .nav-trigger{ width:100%; padding:14px 10px; border-radius:12px; font-size:15px; }
    .mobile-toggle{ display:inline-flex; }
  }
  @media (max-width: 760px){
    header{ top:10px; }
    .nav-right .btn-primary{ display:none; }
    .hero{ padding:120px 0 60px; min-height:auto; }
    .stage{ margin-top:52px; }
    .mock-body{ grid-template-columns: 1fr; }
    .m-chat{ border-right:0; border-bottom:1px solid var(--line); min-height:300px; }
    .bento{ grid-template-columns: 1fr; }
    .c-a, .c-2, .c-4{ grid-column: auto; }
    .cl{ font-size:11.5px; }
    .cl::before{ width:30px; padding-right:10px; }
    .orbit{ min-height:320px; transform: scale(.8); margin: -20px -40px; }
    .ai-card.t2, .ai-card.t3{ margin:0; }
    .timeline{ grid-template-columns: 1fr; }
    .why-grid{ grid-template-columns: 1fr; }
    section{ padding:90px 0; }
    .manifesto{ padding:100px 0; }
    .cta-in{ padding:70px 22px; }
    .faq summary{ font-size:16.5px; }
    .faq .ans{ padding-right:4px; }
    .footer-grid{ grid-template-columns: 1fr 1fr; gap:36px; }
    .wrap{ padding:0 16px; }
  }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation:none !important; transition:none !important; }
    .js .reveal, .js .c-a .cl, .js .c-a .ed-toast{ opacity:1; transform:none; filter:none; }
    .manifesto .w{ opacity:1; }
  }

/* ================= multi-page additions ================= */
.mega.sm{ width:340px; grid-template-columns: 1fr; }
.nav-links .pill-new{ margin-left:2px; }

/* footer: sitemap */
.footer-top2{ display:grid; grid-template-columns: minmax(240px, 1.1fr) 3.4fr; gap:56px; margin-bottom:56px; }
.footer-cols{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:40px 28px; }
.footer-col a{ align-items:flex-start; gap:9px; line-height:1.35; }
.footer-col a .fi{ width:15px; height:15px; flex:0 0 auto; margin-top:1px; opacity:.6; transition: opacity .2s, color .2s; }
.footer-col a:hover .fi{ opacity:1; color:#b3a9ff; }
.footer-col a .ext{ width:12px; height:12px; flex:0 0 auto; margin-top:3px; opacity:.45; }
.footer-col ul{ gap:11px; }
.footer-col a{ font-size:14px; }
.fb-links{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; }
.fb-links a{ display:inline-flex; align-items:center; gap:6px; color:var(--text-soft); text-decoration:none; font-size:13px; font-weight:500; }
.fb-links a:hover{ color:var(--text); }
.fb-links svg{ width:14px; height:14px; opacity:.7; }
.fb-links .to-top{ font-weight:600; }

/* inner page hero */
.page-hero{ position:relative; padding:170px 0 80px; overflow:hidden; isolation:isolate; text-align:center; }
.page-hero .aurora i:nth-child(3){ top:120px; }
.page-hero .wrap{ display:flex; flex-direction:column; align-items:center; }
.crumbs{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:22px; }
.crumbs a{ color:var(--text-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--text); }
.crumbs svg{ width:12px; height:12px; opacity:.6; }
.page-hero h1{ font-size: clamp(40px, 6.6vw, 82px); max-width: 980px; margin-bottom:22px; }
.page-hero .lead{ margin:0 auto 32px; }
.page-hero .hero-ctas{ margin-bottom:0; }
.page-hero .hero-ic{
  width:64px; height:64px; border-radius:20px; margin-bottom:22px; display:flex; align-items:center; justify-content:center;
  background: conic-gradient(from 200deg, var(--brand), var(--brand-2), var(--accent), var(--brand));
  box-shadow: 0 0 60px -8px rgba(124,108,255,.8);
}
.page-hero .hero-ic svg{ width:30px; height:30px; color:#fff; }
.subnav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:34px; }
.subnav a{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; text-decoration:none;
  font-size:13.5px; font-weight:600; color:var(--text-soft); background: var(--surface); border:1px solid var(--line); transition: all .2s;
}
.subnav a svg{ width:14px; height:14px; opacity:.75; }
.subnav a:hover{ color:var(--text); border-color: var(--line-2); }
.subnav a.on{ color:#fff; border-color:transparent; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.subnav a.on svg{ opacity:1; }

/* inner sections */
body.inner main section{ padding:90px 0; }
body.inner main section.tight{ padding-top:20px; }
body.inner main section.page-hero{ padding:170px 0 80px; }
.sec-head{ max-width:720px; margin:0 0 44px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head h2{ font-size: clamp(30px, 4vw, 48px); }
.sec-head p{ font-size:17px; line-height:1.65; color:var(--text-soft); margin:0; }
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.grid.c2{ grid-template-columns: repeat(2, 1fr); }
.grid.c4{ grid-template-columns: repeat(4, 1fr); }
a.card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
a.card:hover{ transform: translateY(-4px); border-color: rgba(192,160,255,.35); }
.card .ic{
  width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  background: linear-gradient(135deg, rgba(124,108,255,.25), rgba(192,79,208,.25)); border:1px solid rgba(192,160,255,.3);
}
.card .ic svg{ width:21px; height:21px; color:#e4dfff; }
.card .go{ margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--text); }
.card .go svg{ width:15px; height:15px; transition: transform .2s; }
a.card:hover .go svg{ transform: translateX(3px); }
.card ul.checks{ margin:16px 0 0; }

.split{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; }
.split.rev > :first-child{ order:2; }
.split h2{ font-size: clamp(30px, 4vw, 46px); }
.split .txt p{ font-size:17px; line-height:1.7; color:var(--text-soft); margin:0 0 16px; }
.split .txt .checks{ margin-top:22px; }
.panel{
  border-radius:24px; padding:26px; border:1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.8); display:grid; gap:10px;
}
.prow{ display:flex; gap:14px; align-items:flex-start; padding:14px; border-radius:14px; background: var(--surface); border:1px solid var(--line); }
.prow .pi{ width:36px; height:36px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.prow .pi svg{ width:17px; height:17px; color:#fff; }
.prow b{ display:block; font-size:14.5px; margin-bottom:3px; }
.prow span{ display:block; font-size:13.5px; color:var(--muted); line-height:1.5; }

.rowlist{ display:grid; gap:10px; }
.rowlist a{
  display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:16px; text-decoration:none;
  background: var(--surface); border:1px solid var(--line); transition: all .25s ease;
}
.rowlist a:hover{ border-color: rgba(192,160,255,.45); background: rgba(124,108,255,.08); transform: translateX(4px); }
.rowlist .ri{ width:42px; height:42px; border-radius:12px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(124,108,255,.25), rgba(192,79,208,.25)); border:1px solid rgba(192,160,255,.3); }
.rowlist .ri svg{ width:19px; height:19px; color:#e4dfff; }
.rowlist b{ display:block; font-size:16px; margin-bottom:2px; }
.rowlist span{ display:block; font-size:14px; color:var(--muted); }
.rowlist a > svg{ width:18px; height:18px; margin-left:auto; color:var(--muted); flex:0 0 auto; }

.steps4{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; counter-reset: s; }
.steps4 .st{ padding:24px; border-radius:20px; border:1px solid var(--line); background: var(--surface); }
.steps4 .st::before{
  counter-increment: s; content: counter(s); display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px; margin-bottom:18px;
  font-weight:800; color:#fff; background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.steps4 h3{ font-size:17px; margin:0 0 8px; letter-spacing:-.01em; }
.steps4 p{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; }

.note{ display:flex; gap:14px; align-items:flex-start; padding:18px 20px; border-radius:16px; background: rgba(124,108,255,.08); border:1px solid rgba(192,160,255,.25); color:var(--text-soft); font-size:15px; line-height:1.6; }
.note svg{ width:20px; height:20px; flex:0 0 auto; color:#b3a9ff; margin-top:1px; }
.note b{ color:var(--text); }

/* entries: news / release notes */
.entries{ max-width:960px; margin:0 auto; }
.entry{ display:grid; grid-template-columns: 200px 1fr; gap:40px; padding:40px 0; border-top:1px solid var(--line); }
.entry:last-child{ border-bottom:1px solid var(--line); }
.entry .when{ font-size:14px; color:var(--muted); font-weight:500; }
.entry .when .etag{ display:inline-block; margin-top:10px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px; color:#fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.entry h3{ font-size:24px; letter-spacing:-.02em; margin:0 0 12px; }
.entry p{ font-size:16px; line-height:1.7; color:var(--text-soft); margin:0 0 12px; }
.entry ul{ margin:0 0 12px; padding-left:20px; color:var(--text-soft); line-height:1.75; }
.entry a.go{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:14.5px; text-decoration:none; color:var(--text); }
.entry a.go svg{ width:15px; height:15px; }

/* legal / long-form */
.legal-wrap{ display:grid; grid-template-columns: 240px minmax(0, 760px); gap:64px; justify-content:center; }
.toc{ position:sticky; top:110px; align-self:start; }
.toc b{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:4px; counter-reset:t; }
.toc a{ display:block; padding:7px 12px; border-radius:10px; font-size:14px; color:var(--text-soft); text-decoration:none; border-left:2px solid transparent; }
.toc a:hover{ background: var(--surface); color:var(--text); }
.toc a.on{ color:var(--text); border-left-color: var(--brand); background: var(--surface); }
.prose .updated{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); margin-bottom:28px; }
.prose .updated svg{ width:15px; height:15px; }
.prose h2{ font-size:26px; letter-spacing:-.02em; margin:48px 0 14px; scroll-margin-top:110px; }
.prose h2:first-of-type{ margin-top:0; }
.prose p, .prose li{ font-size:16.5px; line-height:1.75; color:var(--text-soft); }
.prose ul{ padding-left:22px; }
.prose a{ color:var(--text); }
.prose strong{ color:var(--text); }

/* accordions (resources, support) */
.acc{ max-width:900px; margin:0 auto; }
.acc details{ border:1px solid var(--line); border-radius:18px; background: var(--surface); margin-bottom:12px; overflow:hidden; }
.acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:20px 22px; font-size:17px; font-weight:600; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .ri{ width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.acc summary .ri svg{ width:18px; height:18px; color:#fff; }
.acc summary .chev{ margin-left:auto; width:18px; height:18px; color:var(--muted); transition: transform .25s; }
.acc details[open] summary .chev{ transform: rotate(180deg); }
.acc .body{ padding:0 22px 22px 76px; color:var(--text-soft); font-size:15.5px; line-height:1.7; }
.acc .body ul{ margin:0; padding-left:18px; }

/* contact form */
.form{ display:grid; gap:16px; }
.form .two{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.form label{ display:grid; gap:8px; font-size:13.5px; font-weight:600; color:var(--text-soft); }
.form input, .form select, .form textarea{
  font:inherit; font-size:15px; color:var(--text); padding:13px 15px; border-radius:12px; outline:none;
  background: var(--surface); border:1px solid var(--line-2); transition: border-color .2s, box-shadow .2s;
}
.form select option{ color:#111; }
.form textarea{ min-height:150px; resize:vertical; }
.form input:focus, .form select:focus, .form textarea:focus{ border-color: var(--brand); box-shadow: 0 0 0 4px rgba(124,108,255,.18); }
.form .hint{ font-size:13px; color:var(--muted); }

/* empty state */
.empty{ text-align:center; padding:56px 30px; border-radius:24px; border:1px dashed var(--line-2); background: var(--surface); }
.empty .hero-ic{ margin:0 auto 20px; width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.empty .hero-ic svg{ width:26px; height:26px; color:#fff; }
.empty h3{ font-size:24px; margin:0 0 10px; letter-spacing:-.02em; }
.empty p{ color:var(--text-soft); max-width:560px; margin:0 auto 24px; line-height:1.65; }

/* small CTA */
.cta-in.sm{ padding:70px 30px; }
.cta-in.sm h2{ font-size: clamp(32px, 4.6vw, 56px); }

/* light theme for new components */
html[data-theme="light"] .card .ic svg, html[data-theme="light"] .rowlist .ri svg{ color: var(--brand); }
html[data-theme="light"] :is(.panel, .rowlist a, .steps4 .st, .acc details, .empty){ background: rgba(255,255,255,.8); box-shadow: 0 24px 48px -34px rgba(40,30,110,.3); }
html[data-theme="light"] .prow{ background:#fff; }
html[data-theme="light"] .subnav a{ background: rgba(255,255,255,.7); }
html[data-theme="light"] .subnav a.on{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
html[data-theme="light"] .note svg{ color: var(--brand); }
html[data-theme="light"] .form input, html[data-theme="light"] .form select, html[data-theme="light"] .form textarea{ background:#fff; }
html[data-theme="light"] .footer-col a:hover .fi{ color: var(--brand); }

@media (max-width: 1020px){
  .footer-top2{ grid-template-columns: 1fr; gap:44px; }
  .footer-cols{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid, .grid.c4{ grid-template-columns: repeat(2, 1fr); }
  .split{ grid-template-columns: 1fr; gap:40px; }
  .split.rev > :first-child{ order:0; }
  .steps4{ grid-template-columns: 1fr 1fr; }
  .legal-wrap{ grid-template-columns: 1fr; }
  .toc{ position:static; }
  .toc ol{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .nav-links.open{ max-height: calc(100vh - 110px); overflow-y:auto; }
  .nav-links.open .mega{
    display:grid; position:static; opacity:1; visibility:visible; transform:none; width:auto; grid-template-columns:1fr;
    padding:0 0 8px 6px; background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; gap:0;
  }
  .nav-links.open .mega::before, .nav-links.open .mega-promo, .nav-links.open .mitem span, .nav-links.open .mitem .mi{ display:none; }
  .nav-links.open .mitem{ padding:9px 10px; }
  .nav-links.open .mitem b{ font-weight:500; color:var(--text-soft); margin:0; }
  .nav-links.open .nav-trigger{ pointer-events:none; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:14px 10px 4px; }
  .nav-links.open .nav-trigger svg, .nav-links.open .nav-trigger .pill-new{ display:none; }
}
@media (max-width: 760px){
  body.inner main section.page-hero{ padding:130px 0 56px; }
  .grid, .grid.c2, .grid.c4, .steps4{ grid-template-columns: 1fr; }
  .footer-cols{ grid-template-columns: 1fr 1fr; gap:32px 20px; }
  .entry{ grid-template-columns: 1fr; gap:10px; }
  .form .two{ grid-template-columns: 1fr; }
  .acc .body{ padding-left:22px; }
  .toc ol{ grid-template-columns: 1fr; }
  body.inner main section{ padding:64px 0; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}