@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/Geist.woff2") format("woff2")}
  :root{--bg:#ffffff;--bg-soft:#f7f8fa;--panel:#f7f8fa;--line:#e4e7ec;--txt:#1a1d23;--muted:#6b7280;--selln:#1f7bff;
        --accent:#1a1d23;--accent-ink:#ffffff;--shadow-lg:0 14px 34px rgba(19,23,34,.09);color-scheme:light}
  @media (prefers-color-scheme:dark){:root{--bg:#131417;--bg-soft:#17181c;--panel:#1c1d21;--line:#2b2d33;--txt:#ededed;--muted:#9aa0a6;--selln:#69b0ff;
        --accent:#ededed;--accent-ink:#131417;--shadow-lg:0 18px 44px rgba(0,0,0,.5);color-scheme:dark}}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.55 "Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-feature-settings:"ss01" 1,"ss03" 1,"ss04" 1;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1240px;margin:0 auto;padding:0 24px}
  /* ── Floating nav — the same bar as the landing page and /icons (keep in sync) ── */
  header.nav{position:relative;z-index:90;margin-top:14px}
  .nav-in{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:60px;gap:12px}
  .brand{grid-column:1;justify-self:start;display:flex;align-items:center;gap:11px;font-weight:600;font-size:18px;letter-spacing:-.02em;
         transition:opacity .4s cubic-bezier(0,.49,.56,1), transform .4s cubic-bezier(0,.49,.56,1)}
  .brand .logo{width:34px;height:34px;border-radius:8px;flex:0 0 auto}
  .nav-links{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:100;
             display:flex;align-items:center;gap:2px;padding:6px 8px;background:transparent;border-radius:999px;
             transition:background .4s cubic-bezier(0,.49,.56,1), box-shadow .4s cubic-bezier(0,.49,.56,1), backdrop-filter .4s cubic-bezier(0,.49,.56,1)}
  header.nav.scrolled .nav-links{background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
    box-shadow:0px 2px 4px 0px rgba(43,30,11,.04), 0px 1px 2px -1px rgba(43,30,11,.06), 0px 0px 0px 1px rgba(43,30,10,.06)}
  @media (prefers-color-scheme:dark){
    header.nav.scrolled .nav-links{box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.1)}
  }
  .nav-links a{padding:8px 15px;border-radius:999px;color:var(--muted);font-weight:550;font-size:14.5px;
               transition:color .2s cubic-bezier(0,.49,.56,1), background .2s cubic-bezier(0,.49,.56,1)}
  .nav-links a:hover{color:var(--txt);background:color-mix(in srgb, var(--txt) 8%, transparent)}
  .nav-links a[aria-current="page"]{color:var(--txt)}
  .nav-right{grid-column:3;justify-self:end;display:flex;align-items:center}
  .nav-links .pill-brand{display:flex;align-items:center;justify-content:center;
    width:0;padding:0;opacity:0;transform:scale(.5);overflow:hidden;pointer-events:none;flex:0 0 auto;
    transition:width .4s cubic-bezier(0,.49,.56,1), opacity .3s cubic-bezier(0,.49,.56,1), transform .4s cubic-bezier(0,.49,.56,1), margin .4s cubic-bezier(0,.49,.56,1)}
  .nav-links .pill-brand .logo{width:34px;height:34px;border-radius:9px;flex:0 0 auto}
  .nav-links .pill-cta{display:flex;align-items:center;justify-content:center;height:34px;
    max-width:0;padding:0;opacity:0;transform:scale(.85);overflow:hidden;pointer-events:none;flex:0 0 auto;
    background:var(--accent);color:var(--accent-ink);border-radius:999px;font-weight:650;font-size:13.5px;white-space:nowrap;
    transition:max-width .4s cubic-bezier(0,.49,.56,1), padding .4s cubic-bezier(0,.49,.56,1), opacity .3s cubic-bezier(0,.49,.56,1), transform .4s cubic-bezier(0,.49,.56,1), margin .4s cubic-bezier(0,.49,.56,1)}
  .nav-links .pill-cta:hover{color:var(--accent-ink);box-shadow:0 2px 6px rgba(19,23,34,.10), 0 1px 2px rgba(19,23,34,.07)}
  header.nav.scrolled .nav-links .pill-brand{width:34px;opacity:1;transform:none;margin-right:8px;pointer-events:auto}
  header.nav.scrolled .nav-links .pill-cta{max-width:180px;padding:0 15px;opacity:1;transform:none;margin-left:8px;pointer-events:auto}
  header.nav.scrolled .nav-links .pill-cta:hover{transform:translateY(-2px)}
  header.nav.scrolled .brand{opacity:0;transform:translateY(-8px);pointer-events:none}
  .nav-links .pill-sec{display:none}
  .menu-btn{display:none}
  .menu-btn .ic-close{display:none}
  /* beam ring on the CTA — desktop uses the thin rotating ring; mobile uses the fuller masked beam (.beamfx) */
  @property --beam-angle{syntax:'<angle>';inherits:true;initial-value:0deg}
  @keyframes beam-spin{to{--beam-angle:360deg}}
  @media (min-width:821px){
    .nav-links .pill-cta.beam{position:relative;overflow:hidden;background:transparent;border:0;animation:beam-spin 1.96s linear infinite}
    .nav-links .pill-cta.beam > *{position:relative;z-index:4}
    .nav-links .pill-cta.beam::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
      background:conic-gradient(from var(--beam-angle), #1f7bff, #5aa0ff, #ffb800, #b52bff, #e21c94, #c83cff, #ff5a3c, #ff3c78, #1f7bff)}
    .nav-links .pill-cta.beam::before{content:"";position:absolute;inset:1.5px;z-index:2;border-radius:inherit;background:var(--accent)}
    .nav-links .pill-cta.beam .beam-bloom{display:none}
  }
  @media (max-width:820px){
    header.nav{position:fixed;top:0;left:0;right:0;margin-top:0;z-index:100;padding:16px 16px 0}
    .nav-in{grid-template-columns:1fr auto;height:56px;padding:0;border-radius:999px;background:transparent;box-shadow:none;
      transition:background .4s cubic-bezier(0,.49,.56,1), box-shadow .4s cubic-bezier(0,.49,.56,1), backdrop-filter .4s cubic-bezier(0,.49,.56,1), padding .4s cubic-bezier(0,.49,.56,1)}
    /* glass tuned to match the expanded menu card exactly (same tint + blur radius) so the
       frosted backdrop doesn't shift when the bar morphs into the card and back. */
    header.nav.scrolled .nav-in{padding:0 9px 0 11px;background:color-mix(in srgb, var(--bg) 90%, transparent);
      backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
      box-shadow:0px 10px 26px rgba(19,23,34,.12), 0px 0px 0px 1px rgba(43,30,10,.06)}
    @media (prefers-color-scheme:dark){
      header.nav.scrolled .nav-in{box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1)}
    }
    .brand{grid-column:1;position:relative;z-index:2}
    header.nav.scrolled .brand{opacity:1;transform:none;pointer-events:auto}
    .brand .logo{transition:border-radius .4s cubic-bezier(0,.49,.56,1)}
    header.nav.scrolled .brand .logo{border-radius:50%}
    .nav-right{grid-column:2;position:relative;z-index:2}
    .menu-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:transparent;
      border-radius:999px;color:var(--txt);cursor:pointer;font:inherit}
    .menu-btn[aria-expanded="true"] .ic-burger{display:none}
    .menu-btn[aria-expanded="false"] .ic-close{display:none}
    .menu-btn[aria-expanded="true"] .ic-close{display:block}
    header.nav.menu-open .nav-in{padding:0 9px 0 11px;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
    header.nav.menu-open .brand .logo{border-radius:50%}
    .nav-links .pill-brand{display:none}
    .nav-links{display:flex;position:absolute;top:-10px;right:-10px;left:-10px;
      /* side + bottom gutter = 20px so the menu content (labels, CTAs) lines up with the
         logo on the left and the CTAs get an equal margin on the right and bottom. */
      flex-direction:column;align-items:stretch;gap:2px;padding:74px 20px 20px;border-radius:26px;
      /* The blur is NOT applied while the card animates: resizing a backdrop-filtered box makes
         WebKit stretch a stale backdrop snapshot (visible smearing while the menu opens/closes).
         JS adds .settled once the height morph ends; only then does the glass blur (rule below).
         Because of that, the animating card must be FULLY OPAQUE. It used to carry the collapsed
         bar's 90%/10% tint the whole time, so for the ~0.42s of the morph 10% of the page showed
         through with no blur behind it — the hero headline was plainly readable straight through
         the menu, which looked like the panel flashing transparent (reported 07-26). The tint and
         the blur now arrive together on .settled, cross-faded by a background transition. */
      background:var(--bg);
      border:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:1;
      transform:translateZ(0);height:66px;overflow:hidden;will-change:height;
      opacity:0;visibility:hidden;pointer-events:none;
      transition:height .38s cubic-bezier(0.22,1,0.36,1), opacity .22s cubic-bezier(0,.49,.56,1) .12s, visibility 0s linear .38s}
    .nav-links.open{opacity:1;visibility:visible;pointer-events:auto;
      transition:height .42s cubic-bezier(0.22,1,0.36,1), opacity .18s cubic-bezier(0,.49,.56,1), background .2s cubic-bezier(0,.49,.56,1), visibility 0s}
    /* the desktop scrolled-pill glass targets this same element with higher specificity —
       neutralize it on mobile so the card's blur is governed solely by .settled */
    header.nav.scrolled .nav-links{background:var(--bg);
      backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--shadow-lg)}
    .nav-links.open.settled,header.nav.scrolled .nav-links.open.settled{background:color-mix(in srgb, var(--bg) 90%, transparent);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px)}
    .nav-links a{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;
      padding:15px 0;font-size:18px;font-weight:550;border-radius:999px;text-align:left;
      opacity:0;transform:translateY(-4px);
      transition:opacity .22s cubic-bezier(0,.49,.56,1), transform .25s cubic-bezier(0,.49,.56,1)}
    /* no filled hover/press pill on the mobile menu items — only the label darkens on press */
    .nav-links a:hover,.nav-links a:active,.nav-links a:focus{background:transparent}
    .nav-links a:active{color:var(--txt)}
    .nav-links.open a{opacity:1;transform:none}
    .nav-links.open a:nth-child(3){transition-delay:.03s}
    .nav-links.open a:nth-child(4){transition-delay:.06s}
    .nav-links.open a:nth-child(5){transition-delay:.09s}
    .nav-links.open a:nth-child(6){transition-delay:.12s}
    .nav-links.open a:nth-child(7){transition-delay:.15s}
    .nav-links.open a:nth-child(8){transition-delay:.18s}
    .nav-links > a[href="/icons"]:not(.pill-sec){display:none}
    .nav-links .pill-sec{display:flex;align-items:center;justify-content:center;height:50px;margin-top:14px;
      padding:0 20px;border-radius:999px;border:1px solid color-mix(in srgb, var(--txt) 15%, transparent);
      color:var(--txt);font-size:16px;font-weight:650;
      opacity:0;transform:translateY(-4px);
      transition:opacity .22s cubic-bezier(0,.49,.56,1), transform .25s cubic-bezier(0,.49,.56,1)}
    .nav-links.open .pill-sec{opacity:1;transform:none}
    .nav-links .pill-cta{display:flex;justify-content:center;height:50px;margin-top:10px;
      max-width:none;width:auto;opacity:0;padding:0 20px;border-radius:999px;
      background:var(--accent);color:var(--accent-ink);font-size:16px;font-weight:650;
      transform:translateY(-4px);
      transition:opacity .22s cubic-bezier(0,.49,.56,1), transform .25s cubic-bezier(0,.49,.56,1)}
    .nav-links.open .pill-cta{opacity:1;transform:none;pointer-events:auto}
    header.nav.scrolled .nav-links .pill-cta{max-width:none;margin-left:0;padding:0 20px}
    @media (prefers-reduced-motion:reduce){ .nav-links, .nav-links a, .menu-btn{transition:none} }
  }
  /* ── Breadcrumbs: Icons › Category › name ─────────────────────────────── */
  .crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:7px;color:var(--muted);font-size:13.5px;padding:44px 0 6px}
  .crumbs a{color:var(--muted)}
  .crumbs a:hover{color:var(--txt)}
  .crumbs .csep{display:flex;color:var(--muted);opacity:.55}
  .crumbs .here{color:var(--txt);font-weight:550}
  /* mobile: clear the fixed floating bar (16px inset + 56px bar) */
  @media (max-width:820px){ .crumbs{padding-top:104px} }
  h1{margin:12px 0 6px;font-size:clamp(28px,3.8vw,40px);letter-spacing:-.025em;line-height:1.08;font-weight:600}
  .sub{color:var(--muted);font-size:15px;margin:0 0 44px}
  .sub .pro{font-weight:700;font-size:10px;letter-spacing:.05em;border:1px solid var(--line);border-radius:99px;padding:2px 7px;margin-left:6px;vertical-align:2px}
  .cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start;padding-bottom:12px}
  @media (max-width:820px){.cols{grid-template-columns:1fr}}
  .stage{border:1px solid var(--line);border-radius:16px;background:var(--panel);display:flex;align-items:center;justify-content:center;padding:72px 20px}
  .stage svg{width:112px;height:112px}
  .rowlbl{color:var(--muted);font-size:12.5px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;margin:32px 0 12px}
  .styles3{display:flex;gap:10px;flex-wrap:wrap}
  .stylecard{flex:1;min-width:110px;border:1px solid var(--line);border-radius:13px;padding:16px 10px 10px;display:flex;flex-direction:column;align-items:center;gap:9px}
  .stylecard svg{width:44px;height:44px}
  .stylecard span{font-size:12px;color:var(--muted)}
  .sizesrow{display:flex;gap:22px;align-items:flex-end;border:1px solid var(--line);border-radius:13px;padding:16px 18px}
  .sizesrow .sz{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:11.5px}
  .side{border:1px solid var(--line);border-radius:16px;padding:18px;position:sticky;top:96px}
  @media (max-width:820px){ .side{position:static;top:auto} }
  .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:1px solid color-mix(in srgb, var(--txt) 15%, transparent);background:transparent;color:var(--txt);border-radius:999px;padding:12px 14px;font:inherit;font-weight:650;cursor:pointer;margin-bottom:9px;transition:border-color .15s ease, box-shadow .2s ease, transform .2s ease}
  .btn:hover{border-color:color-mix(in srgb, var(--txt) 40%, transparent)}
  .btn.primary{background:var(--txt);color:var(--bg);border-color:var(--txt)}
  .btn.primary:hover{border-color:var(--txt);box-shadow:0 2px 6px rgba(19,23,34,.10),0 1px 2px rgba(19,23,34,.07);transform:translateY(-1px)}
  .side .note{color:var(--muted);font-size:13px;margin:4px 0 0}
  .kw{color:var(--muted);font-size:13.5px;line-height:1.7}
  .related{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;padding-bottom:8px}
  .related a{display:flex;flex-direction:column;align-items:center;gap:7px;border:1px solid transparent;border-radius:12px;padding:13px 4px 10px}
  .related a:hover{border-color:var(--line);background:var(--panel)}
  .related svg{width:26px;height:26px}
  .related span{font-size:10.5px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .morecat{display:inline-flex;align-items:center;justify-content:center;margin:18px 0 8px;padding:11px 22px;
    border:1px solid color-mix(in srgb, var(--txt) 15%, transparent);border-radius:999px;color:var(--txt);
    font-weight:650;font-size:14px;transition:border-color .15s ease}
  .morecat:hover{border-color:color-mix(in srgb, var(--txt) 40%, transparent)}
  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);background:var(--txt);color:var(--bg);padding:10px 16px;border-radius:99px;font-weight:600;font-size:13.5px;opacity:0;pointer-events:none;transition:.22s;z-index:130}
  .toast.on{opacity:1;transform:translateX(-50%)}


  .shader-wash{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.65;pointer-events:none;
    background:radial-gradient(90% 70% at 74% 24%, #cfe0ff 0%, rgba(207,224,255,0) 64%),radial-gradient(80% 62% at 22% 72%, #e2ecff 0%, rgba(226,236,255,0) 60%)}
  @media (prefers-color-scheme:dark){.shader-wash{opacity:.5;
    background:radial-gradient(90% 70% at 74% 24%, #1b2947 0%, rgba(27,41,71,0) 64%),radial-gradient(80% 62% at 22% 72%, #16203a 0%, rgba(22,32,58,0) 60%)}}

  .cta-band{position:relative;overflow:hidden;text-align:center;padding:140px 0;margin-top:40px;
    background:radial-gradient(95% 75% at 50% 55%, #dfe9fc 0%, rgba(223,233,252,0) 66%) var(--bg)}
  @media (prefers-color-scheme:dark){.cta-band{background:radial-gradient(95% 75% at 50% 55%, #1a2743 0%, rgba(26,39,67,0) 66%) var(--bg)}}
  .cta-band .shader-wash{-webkit-mask-image:radial-gradient(120% 130% at 50% 55%, #000 30%, transparent 82%);mask-image:radial-gradient(120% 130% at 50% 55%, #000 30%, transparent 82%)}
  .cta-band::before,.cta-band::after{content:"";position:absolute;left:0;right:0;height:150px;z-index:1;pointer-events:none}
  .cta-band::before{top:0;background:linear-gradient(var(--bg),transparent)}
  .cta-band::after{bottom:0;background:linear-gradient(transparent,var(--bg))}
  .cta-band > .wrap{position:relative;z-index:2}
  .cta-band h2{font-size:clamp(26px,4vw,40px);margin:0 0 14px;letter-spacing:-.02em;font-weight:600}
  .cta-band .lead{color:var(--muted);font-size:clamp(16px,1.5vw,18.5px);line-height:1.6;margin:0 auto 30px;max-width:600px;text-wrap:pretty}
  .cta-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
  .cta-band .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:auto;flex:0 0 auto;height:50px;padding:0 24px;margin:0;
    border-radius:999px;font:inherit;font-weight:650;font-size:15px;cursor:pointer;
    border:1px solid color-mix(in srgb, var(--txt) 15%, transparent);color:var(--txt);
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease}
  .cta-band .btn svg{flex:0 0 auto}
  .cta-band .btn.ghost:hover{border-color:color-mix(in srgb, var(--txt) 40%, transparent)}
  /* the same border-beam as the landing page's CTA (masked rotating ring + bloom) */
  @keyframes beam-hue{
    0%{ filter:hue-rotate(-30deg) brightness(var(--beam-bri)) saturate(var(--beam-sat)) }
    50%{ filter:hue-rotate(30deg) brightness(var(--beam-bri)) saturate(var(--beam-sat)) }
    100%{ filter:hue-rotate(-30deg) brightness(var(--beam-bri)) saturate(var(--beam-sat)) }
  }
  /* reusable border-beam (landing-page CTA). !important overrides the base button's
     border/background so it works on both .cta-band .btn and .panel .pbtn.primary. */
  .beamfx{ position:relative !important; overflow:hidden !important; background:var(--accent) !important; color:var(--accent-ink) !important; border:0 !important;
    --beam-bri:1.3; --beam-sat:1.2; animation:beam-spin 1.96s linear infinite }
  .beamfx > *{position:relative; z-index:4}
  .beamfx::after{
    content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; padding:1.4px;
    clip-path:inset(0 round 999px); pointer-events:none;
    background:
      conic-gradient(from var(--beam-angle),
        transparent 0%, transparent 54%,
        rgba(255,255,255,.1) 57%, rgba(255,255,255,.3) 60%, rgba(255,255,255,.6) 63%,
        rgba(255,255,255,.75) 66%,
        rgba(255,255,255,.6) 69%, rgba(255,255,255,.3) 72%, rgba(255,255,255,.1) 75%,
        transparent 78%, transparent 100%),
      radial-gradient(ellipse 24px 46px at 2% 68%, rgb(31,123,255), transparent),
      radial-gradient(ellipse 10px 20px at 2% 68%, rgb(90,160,255), transparent),
      radial-gradient(ellipse 150px 22px at 72% -3%, rgb(255,157,0), transparent),
      radial-gradient(ellipse 110px 18px at 74% 100%, rgb(181,43,255), transparent),
      radial-gradient(ellipse 26px 44px at 100% 27%, rgb(226,28,148), transparent),
      radial-gradient(ellipse 26px 46px at 100% 27%, rgb(200,60,255), transparent),
      radial-gradient(ellipse 13px 26px at 100% 27%, rgb(255,90,60), transparent),
      radial-gradient(ellipse 28px 30px at 100% 27%, rgb(255,60,120), transparent);
    -webkit-mask:
      conic-gradient(from var(--beam-angle),
        transparent 0%, transparent 30%,
        rgba(255,255,255,.1) 36%, rgba(255,255,255,.35) 44%,
        white 52%, white 80%,
        rgba(255,255,255,.35) 86%, rgba(255,255,255,.1) 92%,
        transparent 95%, transparent 100%),
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite:source-in, xor;
    mask:
      conic-gradient(from var(--beam-angle),
        transparent 0%, transparent 30%,
        rgba(255,255,255,.1) 36%, rgba(255,255,255,.35) 44%,
        white 52%, white 80%,
        rgba(255,255,255,.35) 86%, rgba(255,255,255,.1) 92%,
        transparent 95%, transparent 100%),
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite:intersect, exclude;
    opacity:.95; animation:beam-hue 12s ease-in-out infinite; }
  .beamfx::before{
    content:""; position:absolute; inset:0; z-index:1; border-radius:inherit;
    clip-path:inset(0 round 999px); pointer-events:none;
    background:
      radial-gradient(ellipse 24px 46px at 2% 68%, rgba(31,123,255,.5), transparent),
      radial-gradient(ellipse 10px 20px at 2% 68%, rgba(90,160,255,.45), transparent),
      radial-gradient(ellipse 150px 22px at 72% -3%, rgba(255,157,0,.35), transparent),
      radial-gradient(ellipse 110px 18px at 74% 100%, rgba(181,43,255,.35), transparent),
      radial-gradient(ellipse 26px 44px at 100% 27%, rgba(226,28,148,.3), transparent),
      radial-gradient(ellipse 26px 46px at 100% 27%, rgba(200,60,255,.4), transparent),
      radial-gradient(ellipse 13px 26px at 100% 27%, rgba(255,90,60,.3), transparent),
      radial-gradient(ellipse 28px 30px at 100% 27%, rgba(255,60,120,.3), transparent);
    box-shadow:inset 0 0 5px 1px rgba(255,255,255,.3);
    -webkit-mask-image:conic-gradient(from var(--beam-angle),
      transparent 0%, transparent 22%, rgba(255,255,255,.12) 28%, rgba(255,255,255,.4) 36%,
      white 46%, white 82%, rgba(255,255,255,.4) 88%, rgba(255,255,255,.12) 94%, transparent 97%, transparent 100%);
    mask-image:conic-gradient(from var(--beam-angle),
      transparent 0%, transparent 22%, rgba(255,255,255,.12) 28%, rgba(255,255,255,.4) 36%,
      white 46%, white 82%, rgba(255,255,255,.4) 88%, rgba(255,255,255,.12) 94%, transparent 97%, transparent 100%);
    opacity:.5; animation:beam-hue 12s ease-in-out infinite; }
  .beamfx .beam-bloom{
    position:absolute; inset:0; z-index:3; border-radius:inherit; padding:1.4px;
    clip-path:inset(0 round 999px); pointer-events:none;
    background:conic-gradient(from var(--beam-angle),
      transparent 0%, transparent 58%,
      rgba(255,255,255,.03) 62%, rgba(255,255,255,.08) 65%, rgba(255,255,255,.2) 67%,
      rgba(255,255,255,.45) 69%, rgba(255,255,255,.85) 70%, rgba(255,255,255,.85) 70.5%,
      rgba(255,255,255,.45) 71.5%, rgba(255,255,255,.2) 73%, rgba(255,255,255,.08) 75%,
      rgba(255,255,255,.03) 78%, transparent 82%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite:exclude;
    filter:blur(8px) brightness(1.3) saturate(1.2); opacity:.6; }
  @media (prefers-color-scheme:dark){
    .beamfx{ --beam-sat:1.8 }
    .beamfx::after{ opacity:.4; background:
        conic-gradient(from var(--beam-angle),
          transparent 0%, transparent 54%,
          rgba(0,0,0,.08) 57%, rgba(0,0,0,.2) 60%, rgba(0,0,0,.4) 63%, rgba(0,0,0,.55) 66%,
          rgba(0,0,0,.4) 69%, rgba(0,0,0,.2) 72%, rgba(0,0,0,.08) 75%, transparent 78%, transparent 100%),
        radial-gradient(ellipse 24px 46px at 2% 68%, rgb(31,123,255), transparent),
        radial-gradient(ellipse 10px 20px at 2% 68%, rgb(90,160,255), transparent),
        radial-gradient(ellipse 150px 22px at 72% -3%, rgb(255,157,0), transparent),
        radial-gradient(ellipse 110px 18px at 74% 100%, rgb(181,43,255), transparent),
        radial-gradient(ellipse 26px 44px at 100% 27%, rgb(226,28,148), transparent),
        radial-gradient(ellipse 26px 46px at 100% 27%, rgb(200,60,255), transparent),
        radial-gradient(ellipse 13px 26px at 100% 27%, rgb(255,90,60), transparent),
        radial-gradient(ellipse 28px 30px at 100% 27%, rgb(255,60,120), transparent); }
    .beamfx::before{ box-shadow:inset 0 0 5px 1px rgba(0,0,0,.14); opacity:.5 }
    .beamfx .beam-bloom{ opacity:.34; filter:blur(8px) brightness(1.3) saturate(1.8);
      background:conic-gradient(from var(--beam-angle),
        transparent 0%, transparent 58%,
        rgba(0,0,0,.02) 62%, rgba(0,0,0,.08) 65%, rgba(0,0,0,.2) 67%,
        rgba(0,0,0,.4) 69%, rgba(0,0,0,.6) 70%, rgba(0,0,0,.6) 70.5%,
        rgba(0,0,0,.4) 71.5%, rgba(0,0,0,.2) 73%, rgba(0,0,0,.08) 75%,
        rgba(0,0,0,.02) 78%, transparent 82%); }
  }
  @media (prefers-reduced-motion:reduce){ .beamfx, .beamfx::before, .beamfx::after, .beamfx .beam-bloom{ animation:none } }
  .beamfx:hover{ transform:translateY(-2px); box-shadow:0 2px 6px rgba(19,23,34,.10), 0 1px 2px rgba(19,23,34,.07) }
  footer{padding:64px 0 44px;background:var(--bg);position:relative;z-index:2}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
  .foot-brand .brand{margin-bottom:14px}
  .foot-brand p{color:var(--muted);font-size:14px;max-width:280px}
  .foot-col h4{font-size:13px;font-weight:650;color:var(--muted);margin:0 0 14px}
  .foot-col a{display:block;color:var(--txt);font-size:14.5px;padding:5px 0;opacity:.85}
  .foot-col a:hover{opacity:1;color:var(--selln)}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    margin-top:48px;color:var(--muted);font-size:13.5px}
  .foot-bottom .made a{color:var(--txt);font-weight:600}
  .foot-bottom .made a:hover{color:var(--selln)}
  @media (max-width:760px){
    .cta-band{padding:88px 0}
    .foot-grid{grid-template-columns:1fr;gap:36px}
    .foot-brand p{max-width:none}
    .foot-bottom{flex-direction:column;align-items:flex-start;gap:6px;margin-top:40px}
  }

  .rvl{opacity:0;transform:translateY(16px);filter:blur(4px);
    transition:opacity .6s cubic-bezier(0.22,1,0.36,1), transform .6s cubic-bezier(0.22,1,0.36,1), filter .6s cubic-bezier(0.22,1,0.36,1);
    transition-delay:calc(var(--i,0)*70ms)}
  .rvl.in{opacity:1;transform:none;filter:none}
  @media (prefers-reduced-motion:reduce){ .rvl{opacity:1;transform:none;filter:none;transition:none} }