/* Landingpage-Styles — 07.08.2026 aus index.html UND index_saas.html herausgeloest.
   Vorher stand dieser Block 24 KB gross in BEIDEN Dateien, byte-identisch: jede
   Aenderung musste zweimal gemacht werden und wurde bei jedem Seitenaufruf neu
   uebertragen. Jetzt: eine Quelle, vom Browser zwischengespeichert. */

  :root{
    --bg:#FAF8F5; --surface:#FFFFFF; --sunken:#F3EEE7; --ink:#1C1A17; --muted:#6B655C;
    --line:#EAE4DB; --line2:#E0D8CC;
    --accent:#6C4CE0; --accent-d:#573AC0; --accent-soft:#ECE7FB;
    --teal:#0E97A8; --teal-soft:#DCF0F2;
    --serif:'Space Grotesk','Inter',sans-serif;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --r:22px; --r-sm:14px;
    --sh1:0 1px 2px rgba(28,26,23,.04), 0 6px 20px rgba(96,84,155,.06);
    --sh2:0 2px 8px rgba(28,26,23,.05), 0 20px 50px rgba(96,84,155,.10);
    --sh-lift:0 10px 24px rgba(28,26,23,.08), 0 34px 80px rgba(96,84,155,.15);
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--sans); background:var(--bg); color:var(--ink);
    line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  /* grain overlay */
  body::before{
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
    mix-blend-mode:multiply;
  }
  body{position:relative}
  body>*{position:relative;z-index:1}
  .auroraorbs{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
  .auroraorbs span{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
  .auroraorbs .o1{width:520px;height:520px;top:-160px;left:-120px;background:radial-gradient(circle,rgba(108,76,224,.5),transparent 70%);animation:orbf 26s ease-in-out infinite}
  .auroraorbs .o2{width:480px;height:480px;top:-60px;right:-140px;background:radial-gradient(circle,rgba(14,151,168,.42),transparent 70%);animation:orbf 32s ease-in-out infinite reverse}
  .auroraorbs .o3{width:560px;height:560px;bottom:-220px;left:34%;background:radial-gradient(circle,rgba(168,85,247,.3),transparent 70%);animation:orbf 30s ease-in-out infinite}
  @keyframes orbf{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-3%) scale(1.1)}}
  @media(prefers-reduced-motion:reduce){.auroraorbs span{animation:none}}
  a{color:inherit}
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1}
  h1,h2,h3{font-family:var(--serif); font-weight:700; letter-spacing:-.015em; line-height:1.06}
  em{font-style:normal; font-weight:600}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans);
    font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    color:var(--accent-d); background:var(--accent-soft); border:1px solid #D9CFF5;
    padding:6px 13px; border-radius:100px}
  .eyebrow.teal{color:var(--teal); background:var(--teal-soft); border-color:#BFE6EA}
  .accent-txt{color:var(--accent-d)}

  /* ── buttons ── */
  .btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans);
    font-weight:600; font-size:15.5px; text-decoration:none; cursor:pointer; border:none;
    padding:14px 24px; border-radius:12px; transition:transform .16s, box-shadow .2s, background .2s}
  .btn.primary{background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(108,76,224,.32)}
  .btn.primary:hover{background:var(--accent-d); transform:translateY(-2px); box-shadow:0 10px 26px rgba(108,76,224,.4)}
  .btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line2)}
  .btn.ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
  .btn.lg{padding:16px 30px; font-size:16.5px}

  /* ── nav ── */
  header.nav{position:sticky; top:0; z-index:50; transition:box-shadow .25s, background .25s;
    background:rgba(250,248,245,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
  header.nav.scrolled{box-shadow:0 1px 0 var(--line), 0 4px 20px rgba(28,26,23,.05)}
  .navbar{display:flex; align-items:center; justify-content:space-between; height:68px}
  .logo{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700;
    font-size:21px; letter-spacing:-.02em; text-decoration:none; color:var(--ink)}
  .logo .mark{width:32px; height:32px; display:grid; place-items:center; overflow:visible}
  .logo .mark svg{width:32px; height:32px; overflow:visible; filter:drop-shadow(0 0 6px rgba(34,211,238,.42)); transition:transform .3s}
  .logo:hover .mark svg{animation:logospin 9s linear infinite}
  @keyframes logospin{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){.logo:hover .mark svg{animation:none}}
  .navlinks{display:flex; align-items:center; gap:28px}
  .navlinks a.navlink{font-size:14.5px; font-weight:500; color:var(--muted); text-decoration:none; transition:color .15s}
  .navlinks a.navlink:hover{color:var(--ink)}
  .navactions{display:flex; align-items:center; gap:14px}
  .navactions a.login{font-size:14.5px; font-weight:600; color:var(--ink); text-decoration:none}
  @media(max-width:860px){.navlinks{display:none} .navactions a.login{display:none}}

  /* ── section rhythm ── */
  section{padding:88px 0; position:relative}
  .kicker{margin-bottom:16px}
  h2.sect{font-size:clamp(32px,4.8vw,50px); max-width:820px}
  h2.sect em{color:var(--accent-d)}
  .lead{font-size:18.5px; color:var(--muted); max-width:660px; margin-top:16px; line-height:1.65}
  .center{text-align:center; margin-left:auto; margin-right:auto}
  .center h2.sect,.center .lead{margin-left:auto; margin-right:auto}

  /* ── hero ── */
  .hero{padding:64px 0 76px; position:relative; overflow:hidden}
  .hero-mesh{position:absolute; inset:-20% -10% auto -10%; height:120%; z-index:0; pointer-events:none;
    background:
      radial-gradient(46% 40% at 78% 8%, rgba(108,76,224,.20), transparent 70%),
      radial-gradient(40% 42% at 12% 22%, rgba(14,151,168,.14), transparent 70%),
      radial-gradient(50% 50% at 60% 90%, rgba(236,231,251,.6), transparent 72%);
    filter:blur(4px)}
  .hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center; position:relative; z-index:1}
  .hero h1{font-size:clamp(38px,6vw,76px); line-height:1.0; letter-spacing:-.018em}
  .hero h1 .hl{color:var(--accent-d)}
  .hero .lead{font-size:20px; max-width:520px; margin-top:24px}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}
  .microtrust{display:flex; gap:18px; flex-wrap:wrap; margin-top:22px; font-size:13.5px; color:var(--muted)}
  .microtrust span{display:inline-flex; align-items:center; gap:6px}
  .microtrust svg{color:var(--teal)}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr; gap:40px} .hero .lead{max-width:none}}

  /* ── browser frame mockup ── */
  .frame{background:var(--surface); border:1px solid var(--line); border-radius:16px;
    box-shadow:var(--sh-lift), inset 0 1px 0 rgba(255,255,255,.9); overflow:hidden; transform:rotate(.4deg)}
  .frame .bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); background:#fbf9f6}
  .frame .bar i{width:10px; height:10px; border-radius:50%; background:#E4DCD0; display:inline-block}
  .frame .bar i:nth-child(1){background:#F0A58C}.frame .bar i:nth-child(2){background:#F3D08A}.frame .bar i:nth-child(3){background:#A9D3B7}
  .frame .bar .url{margin-left:10px; font-size:11.5px; color:var(--muted); background:#fff; border:1px solid var(--line);
    padding:3px 12px; border-radius:100px; flex:1; max-width:230px}
  .frame .body{padding:20px}
  .compose{display:flex; gap:12px}
  .avatar{width:42px; height:42px; border-radius:50%; flex:none; background:linear-gradient(135deg,#A88CF0,var(--accent-d));
    display:grid; place-items:center; color:#fff; font-weight:700; font-family:var(--serif)}
  .compose .cbody{flex:1}
  .compose .who{font-weight:600; font-size:14px}
  .compose .who small{color:var(--muted); font-weight:400}
  .post-txt{margin-top:8px; font-size:14px; line-height:1.6; color:#2b2822}
  .post-txt b{color:var(--ink)}
  .voicechip{display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; font-weight:600;
    color:var(--teal); background:var(--teal-soft); border:1px solid #BFE6EA; padding:6px 12px; border-radius:100px}
  .voicebar{width:64px; height:6px; border-radius:100px; background:#BFE6EA; overflow:hidden; position:relative}
  .voicebar b{position:absolute; inset:0 12% 0 0; background:var(--teal); border-radius:100px; display:block}
  .postmeta{display:flex; gap:16px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:var(--muted)}
  .postmeta span{display:inline-flex; align-items:center; gap:6px}

  /* ── proof strip ── */
  .proof{padding:34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--sunken)}
  .proof-in{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
  .proof p{font-size:14.5px; color:var(--muted); max-width:420px}
  .proof p b{color:var(--ink)}
  .roles{display:flex; flex-wrap:wrap; gap:10px}
  .role{font-size:13.5px; font-weight:600; color:var(--ink); background:var(--surface);
    border:1px solid var(--line); padding:8px 15px; border-radius:100px}

  /* ── problem cards ── */
  .pain-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px}
  .pain{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--sh1)}
  .pain .pn{font-family:var(--serif); font-size:15px; color:var(--accent-d); font-weight:600}
  .pain h3{font-size:18px; margin-top:12px; line-height:1.25}
  .pain p{font-size:14px; color:var(--muted); margin-top:8px}
  @media(max-width:900px){.pain-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.pain-grid{grid-template-columns:1fr}}

  /* ── bento ── */
  .bento{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(140px,auto); gap:18px; margin-top:44px; align-items:start}
  .tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px;
    box-shadow:var(--sh1), inset 0 1px 0 rgba(255,255,255,.85); transition:transform .18s, box-shadow .22s; position:relative; overflow:hidden; display:flex; flex-direction:column}
  .tile:hover{transform:translateY(-4px); box-shadow:var(--sh2)}
  .tile .tico{width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent-d);
    display:grid; place-items:center; margin-bottom:14px}
  .tile.tealico .tico{background:var(--teal-soft); color:var(--teal)}
  .tile h3{font-size:19px; line-height:1.22}
  .tile p{font-size:14px; color:var(--muted); margin-top:8px}
  .tile.big{grid-column:span 2}
  .tile.wide{grid-column:span 2}
  @media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)} .tile.big{grid-column:span 2; grid-row:auto} .tile.wide{grid-column:span 2}}
  @media(max-width:560px){.bento{grid-template-columns:1fr} .tile.big,.tile.wide{grid-column:auto}}

  /* mini-ui fragments inside tiles */
  .mini{margin-top:auto; padding-top:18px}
  .mrow{display:flex; align-items:center; gap:10px; background:#fbf9f6; border:1px solid var(--line);
    border-radius:12px; padding:10px 12px; margin-top:8px}
  .mrow .mav{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(135deg,#7FD0D9,var(--teal));display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700}
  .mrow .mtx{flex:1; font-size:12.5px}
  .mrow .mtx b{font-size:13px}
  .mrow .mtx span{color:var(--muted); display:block; font-size:11.5px}
  .mrow .mtag{font-size:10.5px; font-weight:700; color:var(--teal); background:var(--teal-soft); padding:3px 8px; border-radius:100px}
  .mrow .mtag.warn{color:var(--accent-d); background:var(--accent-soft)}
  .bubble{max-width:82%; font-size:12.5px; padding:9px 13px; border-radius:14px; margin-top:8px; line-height:1.45}
  .bubble.them{background:#f1ede7; border-bottom-left-radius:4px}
  .bubble.me{background:var(--accent); color:#fff; margin-left:auto; border-bottom-right-radius:4px}
  .biglead .mockpost{background:#fbf9f6; border:1px solid var(--line); border-radius:16px; padding:18px; margin-top:18px}
  .biglead h3{margin-top:0}
  .biglead>p{margin-bottom:4px}

  /* ── feature split ── */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
  .split.rev .txt{order:2}
  .split h2{font-size:clamp(28px,3.8vw,44px)}
  .split .lead{margin-top:14px}
  .flist{list-style:none; margin-top:22px; display:grid; gap:12px}
  .flist li{display:flex; gap:11px; font-size:15px; align-items:flex-start}
  .flist li svg{color:var(--teal); flex:none; margin-top:3px}
  @media(max-width:900px){.split{grid-template-columns:1fr; gap:34px} .split.rev .txt{order:0}}

  /* voice compare */
  .vcompare{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .vc{border-radius:var(--r-sm); padding:18px; font-size:13.5px; line-height:1.55}
  .vc.bad{background:var(--sunken); border:1px dashed var(--line2); color:var(--muted)}
  .vc.good{background:#fff; border:1px solid var(--line); box-shadow:var(--sh1)}
  .vc .vh{font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px}
  .vc.bad .vh{color:var(--muted)}
  .vc.good .vh{color:var(--teal)}
  @media(max-width:520px){.vcompare{grid-template-columns:1fr}}

  /* regio map */
  .regio{background:var(--sunken)}
  .mapwrap{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh2)}
  .pin{position:absolute; width:14px; height:14px; border-radius:50% 50% 50% 0; background:var(--accent);
    transform:rotate(-45deg); box-shadow:0 0 0 6px rgba(108,76,224,.16)}
  .pin.p2{background:var(--teal); box-shadow:0 0 0 6px rgba(14,151,168,.16)}

  /* steps */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; counter-reset:s}
  .step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh1)}
  .step .num{counter-increment:s; font-family:var(--serif); font-size:34px; color:var(--accent); line-height:1}
  .step .num::before{content:counter(s)}
  .step h3{font-size:19px; margin-top:12px}
  .step p{font-size:14.5px; color:var(--muted); margin-top:8px}
  @media(max-width:820px){.steps{grid-template-columns:1fr}}

  /* guarantee promises */
  .promises{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px}
  .promise{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--sh1)}
  .promise .fico{width:42px;height:42px;border-radius:11px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;margin-bottom:14px}
  .promise h3{font-size:17px}
  .promise p{font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.55}
  @media(max-width:820px){.promises{grid-template-columns:1fr}}

  /* pricing */
  .vstack{margin:36px auto 0; border:1px solid var(--line); border-radius:var(--r); padding:24px 28px; background:var(--surface); max-width:760px; box-shadow:var(--sh1)}
  .vstack .vl{font-size:14.5px; color:var(--muted); margin:0 0 12px}
  .vstack ul{list-style:none}
  .vstack li{display:flex; justify-content:space-between; gap:16px; align-items:baseline; font-size:14.5px; color:var(--muted); border-bottom:1px dashed var(--line); padding:9px 0}
  .vstack li b{color:var(--ink); font-weight:600}
  .vstack .sum{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px; margin-top:16px}
  .vstack .sum .old{text-decoration:line-through; opacity:.7}
  .vstack .sum .new{font-family:var(--serif); font-size:26px; font-weight:600; color:var(--accent-d)}
  .plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; align-items:start}
  .plan{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--sh1); transition:transform .16s, box-shadow .2s}
  .plan:hover{transform:translateY(-4px); box-shadow:var(--sh2)}
  .plan.win{border-color:#D9CFF5; box-shadow:0 10px 34px rgba(108,76,224,.16)}
  @media(min-width:821px){.plan.win{transform:translateY(-10px)} .plan.win:hover{transform:translateY(-14px)}}
  .plan h3{font-size:20px}
  .plan .amt{display:block; font-family:var(--serif); font-size:34px; margin-top:6px; color:var(--ink)}
  .plan .amt small{font-size:14px; color:var(--muted); font-weight:400; font-family:var(--sans)}
  .plan .planbadge{position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff;
    font-size:12px; font-weight:700; padding:5px 14px; border-radius:100px; box-shadow:0 4px 12px rgba(108,76,224,.3)}
  .plan .note{font-size:12.5px; color:var(--muted); margin:6px 0 10px}
  .pricelist{list-style:none; margin:14px 0; display:grid; gap:9px}
  .pricelist li{position:relative; padding-left:24px; font-size:14px; color:var(--muted)}
  .pricelist li::before{content:''; position:absolute; left:0; top:7px; width:14px; height:8px; border-left:2px solid var(--teal); border-bottom:2px solid var(--teal); transform:rotate(-45deg)}
  .pcta{display:block; text-align:center; text-decoration:none; padding:13px; border-radius:11px; font-weight:600; font-size:14.5px; border:1px solid var(--line2); color:var(--ink); background:#fbf9f6; transition:.16s}
  .pcta:hover{border-color:var(--ink)}
  .plan.win .pcta{background:var(--accent); color:#fff; border:none; box-shadow:0 6px 16px rgba(108,76,224,.3)}
  .plan.win .pcta:hover{background:var(--accent-d)}
  @media(max-width:820px){.plans{grid-template-columns:1fr}}

  /* founder */
  .founder{margin-top:32px; background:linear-gradient(120deg,var(--accent-soft),var(--teal-soft)); border:1px solid var(--line);
    border-radius:var(--r); padding:32px 34px; max-width:820px}
  .founder .q{font-family:var(--serif); font-size:21px; line-height:1.5; color:var(--ink)}
  .founder .by{margin-top:16px; font-size:14.5px; color:var(--muted)}
  .founder .by b{color:var(--ink)}
  .trustpills{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
  .trustpills span{font-size:13px; font-weight:500; color:var(--ink); background:var(--surface); border:1px solid var(--line); padding:8px 14px; border-radius:100px}

  /* faq */
  .faqs{margin-top:32px; max-width:820px}
  .faq{border-top:1px solid var(--line); padding:18px 0}
  .faq summary{cursor:pointer; font-weight:600; font-size:16.5px; list-style:none; display:flex; justify-content:space-between; gap:12px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:'+'; color:var(--accent); font-weight:600; font-size:22px; flex:none; line-height:1}
  .faq[open] summary::after{content:'–'}
  .faq p{color:var(--muted); font-size:15px; line-height:1.65; margin-top:12px; max-width:660px}
  .faq a{color:var(--accent-d); font-weight:600}

  /* end cta */
  .photoband{position:relative; border-radius:28px; overflow:hidden; box-shadow:var(--sh2)}
  .photoband img{width:100%; height:clamp(300px,40vw,470px); object-fit:cover; display:block}
  .photoband .pb-cap{position:absolute; inset:auto 0 0 0; padding:clamp(24px,4vw,44px);
    background:linear-gradient(to top,rgba(24,20,30,.74),rgba(24,20,30,.15) 58%,transparent)}
  .photoband .pb-cap h2{color:#fff; font-size:clamp(23px,3vw,36px); max-width:560px; margin-top:10px}
  .photoband .pb-cap .eyebrow{background:rgba(255,255,255,.92); color:var(--accent-d); border-color:transparent}
  .endcta{position:relative; overflow:hidden; text-align:center; border-radius:32px; margin:40px 0 20px; padding:78px 32px;
    background:#18121e url('/static/img/hp_abstract.jpg') center/cover; color:#faf6f1}
  .endcta::before{content:''; position:absolute; inset:0; z-index:0;
    background:linear-gradient(180deg, rgba(20,16,26,.78), rgba(20,16,26,.87))}
  .endcta>*{position:relative; z-index:1}
  .endcta h2{font-size:clamp(28px,4vw,42px); color:#fff; max-width:720px; margin:0 auto}
  .endcta h2 .hl{color:#C9B8F5}
  .endcta p{color:#e9e0d6; margin-top:16px; font-size:16px}
  .endcta .tiny{font-size:12.5px; color:#c9beb2; margin-top:16px}

  footer{padding:40px 0; text-align:center; font-size:13.5px; color:var(--muted); border-top:1px solid var(--line)}
  footer a{color:var(--muted); text-decoration:none}
  footer a:hover{color:var(--ink)}

  /* mobile sticky cta */
  .mcta{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; align-items:center; justify-content:space-between;
    gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.9);
    backdrop-filter:blur(12px); border-top:1px solid var(--line)}
  .mcta .t{font-size:12.5px; line-height:1.2}
  .mcta .t b{display:block; font-size:14px}
  .mcta a{background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:14px; padding:12px 18px; border-radius:11px; white-space:nowrap}
  @media(max-width:720px){.mcta{display:flex}}

  /* ── motion 2026 ── */
  @keyframes auroraDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-2%) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
  .hero-mesh{animation:auroraDrift 24s ease-in-out infinite}
  @keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .js .htext>*{opacity:0;animation:heroIn .7s cubic-bezier(.16,1,.3,1) forwards}
  .htext>*:nth-child(1){animation-delay:.04s}.htext>*:nth-child(2){animation-delay:.12s}
  .htext>*:nth-child(3){animation-delay:.20s}.htext>*:nth-child(4){animation-delay:.28s}
  .htext>*:nth-child(5){animation-delay:.36s}
  .js .hvisual{opacity:0;animation:heroIn .8s cubic-bezier(.16,1,.3,1) .28s forwards}
  .navbar{transition:height .28s ease}
  header.nav.scrolled .navbar{height:58px}
  .navlinks a.navlink{position:relative}
  .navlinks a.navlink.active{color:var(--ink)}
  .navlinks a.navlink.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--accent)}
  .tile{--mx:50%;--my:0%}
  .tile::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .3s;pointer-events:none;
    background:radial-gradient(240px circle at var(--mx) var(--my),rgba(108,76,224,.13),transparent 62%)}
  .tile:hover::after{opacity:1}
  .btn.primary.lg{will-change:transform}
  @media (prefers-reduced-motion:reduce){
    .hero-mesh{animation:none}
    .htext>*,.hvisual{opacity:1;animation:none}
    .navbar{transition:none}
  }
  /* ── premium extras ── */
  .scrollprog{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);z-index:70;background:linear-gradient(90deg,var(--accent),var(--teal));pointer-events:none}
  @supports (animation-timeline:scroll()){.scrollprog{animation:scrollgrow linear;animation-timeline:scroll(root)}@keyframes scrollgrow{to{transform:scaleX(1)}}}
  .hvisual{perspective:1200px}
  .hvisual .frame{will-change:transform}
  .vmcaret{display:inline-block;width:2px;height:15px;background:var(--teal);margin-left:2px;vertical-align:-2px;animation:caretblink 1s step-end infinite}
  .vmcaret.done{display:none}
  @keyframes caretblink{50%{opacity:0}}
  .voicechip .vmcheck{opacity:0;transition:opacity .3s;color:var(--teal);vertical-align:middle}
  .voicechip .vmcheck path{stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .5s ease .1s}
  .voicechip .vmcheck.on{opacity:1}.voicechip .vmcheck.on path{stroke-dashoffset:0}
  #vmBar{transition:right 2.4s cubic-bezier(.22,1,.36,1)}
  .js .tile .mrow,.js .tile .bubble{opacity:0;transform:translateY(10px)}
  .tile.live .mrow,.tile.live .bubble{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.34,1.56,.64,1),transform .5s cubic-bezier(.34,1.56,.64,1)}
  .tile.live .mrow:nth-of-type(2){transition-delay:.07s}
  .tile.live .mrow:nth-of-type(3){transition-delay:.14s}
  .tile.live .bubble.me{transition-delay:.16s}
  @media(prefers-reduced-motion:reduce){.scrollprog{display:none}.tile .mrow,.tile .bubble{opacity:1;transform:none}.voicechip .vmcheck{opacity:1}.voicechip .vmcheck path{stroke-dashoffset:0}}
  /* reveal */
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
  .reveal.in{opacity:1; transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important} .frame{transform:none}}