/* BURO EDER — all page styles. Ported verbatim from the <style> block of
   docs/design/mockup-green/BURO EDER Landing.dc.html (ADR-0001).
   Only DC specifics were transformed; numbers, order and values are untouched.

   Three deliberate deviations from the mockup, and why:

   1. data-theme / data-accent / data-hero moved from .be-root to <html>.
      The A/B bootstrap sets them synchronously in <head>, before <body> exists
      (ADR-0002 §FOUC), so they cannot live on an element inside the body.
      <html> is an ancestor of .be-root, so `.be-root[data-x]` becomes
      `[data-x] .be-root` and keeps winning over the plain `.be-root` rule.

   2. Accent key is `purple`, not the mockup's `plum`. The bucket names of the
      A/B test are green-3 / green-2 / purple-3 / purple-2 (ADR-0002), and the
      hook contract of this epic uses data-accent="green|purple". The absent
      attribute is the green gamma, exactly as in the mockup.

   3. The rules for the fixed bottom-left hero switcher are gone with it: that
      control is a designer aid and its markup does not ship (ADR-0001).

   Hero visibility rule (ADR-0002 §consequences): visibility is owned by
   [data-hero] on <html>, and only by it. S4 additionally puts the `hidden`
   attribute on the INACTIVE hero sections so screen readers skip them. The
   author rules below outrank the UA `[hidden]{display:none}`, so the active
   hero stays visible even if `hidden` ever leaks onto it, and the inactive
   ones are display:none whether or not `hidden` is set. Both states agree. */

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0}
  :root{
    --bg:#0a0a0f; --bg-2:#101017; --surface:#14141d; --surface-2:#191926;
    --fg:#f3f2f8; --fg-2:#a3a1b0; --fg-3:#858394;
    --line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.06);
    --card-sh:0 30px 70px -30px rgba(0,0,0,0.7);
    --mesh:rgba(255,255,255,0.06); --tint:rgba(255,255,255,0.028);
  }
  [data-theme="light"]{
    --bg:#f4f2ee; --bg-2:#ecebe5; --surface:#ffffff; --surface-2:#f6f5f1;
    --fg:#15141b; --fg-2:#55535f; --fg-3:#65636f;
    --line:rgba(20,18,28,0.12); --line-2:rgba(20,18,28,0.06);
    --card-sh:0 24px 50px -28px rgba(40,36,70,0.35);
    --mesh:rgba(20,18,28,0.08); --tint:rgba(20,18,28,0.03);
  }
  /* Accent gammas. Each role is derived from a base + a highlight, so swapping the
     gamma stays readable in both themes and no hue is hard-coded downstream. */
  .be-root{--base:#0A6E56;--hi:#4FD8A5}
  [data-accent="purple"] .be-root{--base:#7B2FA8;--hi:#C88CF0}
  .be-root{
    --accent:color-mix(in oklch,var(--base) 84%,var(--hi));
    --accent-soft:color-mix(in oklch,var(--base) 45%,var(--hi));
    --accent-text:color-mix(in oklch,var(--base) 26%,var(--hi));
    --accent-tint:color-mix(in oklch,var(--base) 10%,var(--hi));
    --glow:color-mix(in srgb,var(--base) 46%,transparent);
    --grid:color-mix(in srgb,var(--base) 20%,transparent);
    --arc:color-mix(in oklch,var(--hi) 48%,var(--base));
    --mark:var(--arc);
  }
  [data-theme="light"] .be-root{
    --accent:color-mix(in oklch,var(--base) 92%,#000);
    --accent-soft:color-mix(in oklch,var(--base) 62%,var(--hi));
    --accent-text:color-mix(in oklch,var(--base) 84%,#000);
    --accent-tint:color-mix(in oklch,var(--hi) 55%,#fff);
    --glow:color-mix(in srgb,var(--base) 28%,transparent);
    --grid:color-mix(in srgb,var(--base) 16%,transparent);
    --arc:var(--base);
    --mark:var(--accent);
  }
  .be-root ::selection{background:var(--accent);color:#fff}
  .be-root{background-color:var(--bg);color:var(--fg);font-family:'Onest',system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .5s ease,color .5s ease;overflow-x:hidden;position:relative}
  .mono{font-family:'Onest',system-ui,sans-serif;font-weight:600;font-feature-settings:'tnum' 1;font-variant-numeric:tabular-nums}
  .disp{font-family:'Unbounded',sans-serif}
  .hero-1{display:flex} .hero-2,.hero-3{display:none}
  [data-hero="2"] .hero-1{display:none} [data-hero="2"] .hero-2{display:flex}
  [data-hero="3"] .hero-1{display:none} [data-hero="3"] .hero-3{display:flex}
  /* `hidden` has to actually hide. The UA rule for it is the weakest thing in the
     cascade, and almost every block this page hides (typing indicator, record
     overlay, success panel, "show more" button) carries either an inline display
     or a class-level one, both of which outrank it. ADR-0004 §hiding asks for
     attribute + display:none, so this is that rule, once, for the whole page. */
  [hidden]{display:none!important}
  /* Exception, and the only one: hero visibility belongs to [data-hero] on <html>
     and to nothing else. S4 additionally marks the INACTIVE heroes with `hidden`
     so they leave the screen-reader reading order (ADR-0002 §consequences) — that
     is the intended contract. The rule below is the belt to that braces: should
     `hidden` ever land on the ACTIVE hero, the page still shows a hero instead of
     rendering an empty first screen. Inactive heroes stay display:none either way,
     so the two mechanisms can never disagree. */
  [data-hero="1"] .hero-1[hidden],[data-hero="2"] .hero-2[hidden],[data-hero="3"] .hero-3[hidden]{display:flex!important}
  .reveal{opacity:1;transform:none}
  @keyframes revealin{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  @supports (animation-timeline:view()){
    .reveal{animation:revealin .7s cubic-bezier(.16,1,.3,1) both;animation-timeline:view();animation-range:entry 0% cover 24%}
    .reveal.revealed{animation:none;opacity:1;transform:none}
  }
  .lift{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s}
  .lift:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 30px 60px -28px var(--glow)}
  .nav-links{display:flex;gap:34px;align-items:center}
  @media(max-width:1140px){
    .nav-links{gap:22px}
    .navlink{font-size:13.5px}
    .navword{font-size:16px!important}
  }
  .navlink{position:relative;color:var(--fg-2);text-decoration:none;font-weight:600;font-size:14px;transition:color .25s}
  .navlink:hover{color:var(--fg)}
  .navlink::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent);transition:width .3s}
  .navlink:hover::after{width:100%}
  .btn-pri{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;border:none;border-radius:999px;padding:14px 26px;font-family:'Onest';font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;box-shadow:0 14px 40px -10px var(--glow);transition:transform .25s,box-shadow .25s}
  .btn-pri:hover{transform:translateY(-3px);box-shadow:0 22px 50px -10px var(--glow)}
  .btn-sec{display:inline-flex;align-items:center;gap:10px;background:transparent;color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:13px 24px;font-family:'Onest';font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;transition:border-color .25s,background .25s}
  .btn-sec:hover{border-color:var(--fg-3);background:var(--surface)}
  .chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:600;color:var(--fg-2);background:var(--surface);transition:color .25s,border-color .25s,transform .25s}
  .chip:hover{color:var(--fg);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));transform:translateY(-2px)}
  .field{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:15px 16px;color:var(--fg);font-family:'Onest';font-size:15px;outline:none;transition:border-color .25s,box-shadow .25s}
  .field::placeholder{color:var(--fg-3)}
  .field:focus{border-color:var(--accent-text);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
  .glassfloor{position:absolute;left:-25%;right:-25%;bottom:-12%;height:62%;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:54px 54px;transform:perspective(560px) rotateX(72deg);transform-origin:bottom center;mask-image:linear-gradient(to top,#000 0%,transparent 78%);-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 78%);animation:gridmove 9s linear infinite;pointer-events:none}
  .gtext{background:linear-gradient(100deg,var(--accent) 0%,var(--accent-soft) 45%,var(--accent-tint) 60%,var(--accent) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradient 7s linear infinite}
  .marquee{display:flex;width:max-content;animation:marquee 38s linear infinite}
  .marquee-r{display:flex;width:max-content;animation:marquee-r 46s linear infinite}
  .marquee:hover,.marquee-r:hover{animation-play-state:paused}
  .toggle{font-family:'Onest',system-ui,sans-serif;position:relative;width:62px;height:32px;border:1px solid var(--line);border-radius:999px;background:var(--surface);cursor:pointer;padding:0;transition:background .3s}
  .toggle::before{content:"";position:absolute;inset:-7px -5px;border-radius:999px}
  .toggle .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--accent);box-shadow:0 4px 12px var(--glow);transition:transform .35s cubic-bezier(.16,1,.3,1)}
  [data-theme="light"] .toggle .knob{transform:translateX(30px)}
  @keyframes gridmove{to{background-position:0 54px,54px 0}}
  @keyframes gradient{to{background-position:220% 0}}
  @keyframes marquee{to{transform:translateX(-50%)}}
  @keyframes marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  @keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,7vh) scale(1.12)}}
  @keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,-6vh) scale(1.08)}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
  @keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
  @keyframes pulse{0%,100%{opacity:.55}50%{opacity:.9}}
  @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
  @keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-5px);opacity:1}}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--fg-3);display:block;animation:bounce .9s infinite}
  .lmark{animation:lmin .82s cubic-bezier(.16,1,.3,1) both}
  .lmk{transform-box:fill-box;transform-origin:center;transition:transform .55s cubic-bezier(.16,1,.3,1)}
  a:hover .lmk{transform:rotate(-5deg) scale(1.06)}
  @keyframes lmin{0%{opacity:0;transform:scale(.7) rotate(-9deg)}100%{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.lmark{animation:none}a:hover .lmk{transform:none}}
  .ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .ambient .aur{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
  .ambient .a1{width:54vw;height:54vw;left:-13vw;top:-16vw;background:radial-gradient(circle,var(--glow),transparent 68%);animation:drift1 28s ease-in-out infinite}
  .ambient .a2{width:46vw;height:46vw;right:-12vw;top:32vh;background:radial-gradient(circle,color-mix(in srgb,var(--accent-soft) 44%,transparent),transparent 68%);animation:drift2 34s ease-in-out infinite}
  .ambient .mesh{position:absolute;inset:-8%;background-image:radial-gradient(var(--mesh) 1px,transparent 1.5px);background-size:32px 32px;-webkit-mask-image:radial-gradient(ellipse 76% 60% at 50% 34%,#000 28%,transparent 76%);mask-image:radial-gradient(ellipse 76% 60% at 50% 34%,#000 28%,transparent 76%)}
  .ambient .vig{position:absolute;inset:0;background:radial-gradient(ellipse 104% 80% at 50% 38%,transparent 44%,var(--bg) 100%);opacity:.6}
  @keyframes eq{0%,100%{height:4px;opacity:.45}50%{height:16px;opacity:1}}
  @keyframes ping{0%{transform:scale(.85);opacity:.7}70%,100%{transform:scale(1.75);opacity:0}}
  .pmt2{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line-2);color:var(--fg-2);border-radius:999px;padding:8px 15px;font-family:'Onest';font-weight:600;font-size:13px;white-space:nowrap;cursor:pointer;transition:color .22s,border-color .22s,background .22s}
  .pmt2:hover{color:var(--fg);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--surface-2)}
  .recover{position:absolute;left:1px;top:1px;bottom:1px;right:58px;display:flex;align-items:center;gap:12px;padding:0 17px;border-radius:19px;background:color-mix(in srgb,#ef4444 9%,var(--surface-2));pointer-events:none}
  .wv{display:flex;align-items:center;gap:3px;height:22px;flex:none}
  .wv span{width:3px;border-radius:2px;background:#ef4444}
  .csend{touch-action:none;user-select:none}
  .csend.crec{background:#ef4444;box-shadow:0 10px 26px -10px rgba(239,68,68,.65);transform:scale(1.08)}
  .csend.crec:hover{background:#dc2626}
  .csend.crec{background:#ef4444;box-shadow:0 10px 26px -10px rgba(239,68,68,.65)}
  .crec:hover{background:#dc2626}
  .recring{position:absolute;inset:-5px;border-radius:50%;border:2px solid #ef4444;animation:ping 1.4s ease-out infinite;pointer-events:none}
  .askbar{transition:border-color .3s,box-shadow .3s,background .3s}
  .askbar:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 18px 44px -22px var(--glow)}
  .phone{transition:color .25s,letter-spacing .25s}
  .phone:hover{color:var(--accent-text);letter-spacing:-.024em}
  .askarr{color:var(--fg-3);transition:color .3s,transform .3s}
  .askbar:hover .askarr{color:var(--accent-text);transform:translateX(4px)}
  .strat{transition:background .3s}
  .strat:hover{background:var(--surface-2)}
  .strat:hover .stratn{color:var(--accent-text)}
  .srow:hover .srn{color:var(--accent-text)}
  .cinput{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--fg);font-family:'Onest';font-size:15px;line-height:1.55;resize:none;padding:13px 0;max-height:132px}
  .cinput::placeholder{color:var(--fg-3)}
  .composer{transition:border-color .25s,box-shadow .25s}
  .composer:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
  .csend{font-family:'Onest',system-ui,sans-serif;position:relative;width:44px;height:44px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;font-size:19px;box-shadow:0 10px 24px -10px var(--glow);transition:transform .25s,box-shadow .25s,background .25s}
  .csend:hover{transform:scale(1.07);box-shadow:0 14px 30px -10px var(--glow)}
  @media(max-width:760px){.strat{grid-template-columns:1fr!important;gap:14px!important}}
  h1,h2,h3{text-wrap:balance}
  p{text-wrap:pretty}
  .gfx{position:relative;width:54px;height:54px;margin-bottom:20px;flex:none}
  .gfx i{position:absolute;display:block;transition:all .6s cubic-bezier(.16,1,.3,1)}
  .g1{background-image:radial-gradient(var(--fg-3) 1.5px,transparent 1.6px);background-size:13.5px 13.5px;background-position:3px 3px}
  .g1 i{left:14px;top:14px;width:22px;height:22px;border-radius:50%;border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
  .srow:hover .g1 i{transform:translate(14px,14px)}
  .g2 i{border:1.6px solid var(--accent);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
  .g2 i:nth-child(1){width:12px;height:12px;background:var(--accent);border:none}
  .g2 i:nth-child(2){width:28px;height:28px;opacity:.6}
  .g2 i:nth-child(3){width:46px;height:46px;opacity:.3}
  .srow:hover .g2 i:nth-child(2){transform:translate(-50%,-50%) scale(1.28);opacity:.9}
  .srow:hover .g2 i:nth-child(3){transform:translate(-50%,-50%) scale(1.14);opacity:.5}
  .g3 i{height:5px;border-radius:3px;background:var(--accent);left:0}
  .g3 i:nth-child(1){top:7px;width:54px}
  .g3 i:nth-child(2){top:20px;width:38px;opacity:.7}
  .g3 i:nth-child(3){top:33px;width:24px;opacity:.45}
  .g3 i:nth-child(4){top:46px;width:12px;opacity:.25}
  .srow:hover .g3 i:nth-child(2){transform:translateX(16px)}
  .srow:hover .g3 i:nth-child(3){transform:translateX(30px)}
  .srow:hover .g3 i:nth-child(4){transform:translateX(42px)}
  .g4 i{left:4px;width:46px;height:13px;border:1.5px solid var(--accent);border-radius:3px;transform:skewX(-20deg)}
  .g4 i:nth-child(1){top:4px;opacity:.35}
  .g4 i:nth-child(2){top:20px;opacity:.65}
  .g4 i:nth-child(3){top:36px;background:color-mix(in srgb,var(--accent) 20%,transparent)}
  .srow:hover .g4 i:nth-child(1){transform:skewX(-20deg) translateY(-5px)}
  .srow:hover .g4 i:nth-child(3){transform:skewX(-20deg) translateY(5px)}
  .g5 i{border:1.6px solid var(--accent);left:50%;top:50%;border-radius:4px}
  .g5 i:nth-child(1){width:50px;height:50px;transform:translate(-50%,-50%);opacity:.3}
  .g5 i:nth-child(2){width:36px;height:36px;transform:translate(-50%,-50%) rotate(15deg);opacity:.6}
  .g5 i:nth-child(3){width:22px;height:22px;transform:translate(-50%,-50%) rotate(30deg);background:color-mix(in srgb,var(--accent) 22%,transparent)}
  .srow:hover .g5 i:nth-child(2){transform:translate(-50%,-50%) rotate(45deg)}
  .srow:hover .g5 i:nth-child(3){transform:translate(-50%,-50%) rotate(75deg)}
  .g6 i{background:var(--accent);border-radius:50%}
  .g6 i:nth-child(1){left:0;top:23px;width:9px;height:9px}
  .g6 i:nth-child(2){right:0;top:4px;width:7px;height:7px;opacity:.75}
  .g6 i:nth-child(3){right:0;top:23px;width:7px;height:7px;opacity:.75}
  .g6 i:nth-child(4){right:0;top:42px;width:7px;height:7px;opacity:.75}
  .g6 i:nth-child(5){left:11px;top:26px;width:36px;height:1.5px;border-radius:0;opacity:.35}
  .g6 i:nth-child(6){left:11px;top:26px;width:38px;height:1.5px;border-radius:0;opacity:.35;transform-origin:left center;transform:rotate(-28deg)}
  .g6 i:nth-child(7){left:11px;top:26px;width:38px;height:1.5px;border-radius:0;opacity:.35;transform-origin:left center;transform:rotate(28deg)}
  .srow:hover .g6 i:nth-child(2){transform:translateX(-4px) scale(1.35)}
  .srow:hover .g6 i:nth-child(4){transform:translateX(-4px) scale(1.35)}
  .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;grid-auto-flow:dense}
  .bcard{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:17px 19px 16px;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .4s}
  .bcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 22px 44px -34px var(--glow)}
  .bs2{grid-column:span 2}
  .bs3{grid-column:span 3}
  .bs4{grid-column:span 4}
  .bs6,.bdet{grid-column:span 6}
  .sb2{grid-column:span 2}
  .sb3{grid-column:span 3}
  .sb4{grid-column:span 4}
  .bcard{cursor:pointer}
  .bcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .bmore{position:absolute;top:15px;right:16px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--fg-3);transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s,color .3s}
  .bcard:hover .bmore{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent-text)}
  .bact .bmore{transform:rotate(45deg);border-color:var(--accent);color:var(--accent-text)}
  .ctop{display:none;align-items:center;gap:9px;flex-wrap:wrap}
  .csec{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);transition:color .3s}
  .bdet .ctop{display:flex}
  .bdet .csec{font-size:10.5px;color:var(--accent-text)}
  .ctit{text-wrap:pretty}
  .cdesc{margin:0;color:var(--fg-2);font-size:13.5px;line-height:1.5;text-wrap:pretty}
  .cfull{margin:0 0 16px;color:var(--fg-2);font-size:15.5px;line-height:1.58;max-width:64ch;text-wrap:pretty}
  .cmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:15px;border-top:1px solid color-mix(in srgb,var(--accent) 22%,var(--line-2))}
  .cfoot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-2);display:flex;align-items:baseline;gap:8px;min-width:0}
  .cnum{font-family:'Unbounded',sans-serif;font-weight:600;font-size:18px;line-height:1;letter-spacing:-.02em;color:var(--fg-2);flex:none;transition:color .3s,font-size .3s}
  .cun{font-size:11px;line-height:1.35;color:var(--fg-3);min-width:0}
  .copen{display:none}
  /* wide tile: stat rail on the right */
  .bs4,.bdet{display:grid;align-content:start;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sec num" "tit num" "desc num" "open num"}
  .bs4{column-gap:24px}
  .bs4 .ctop,.bdet .ctop{grid-area:sec}
  .bs4 .ctit,.bdet .ctit{grid-area:tit}
  .bs4 .cdesc,.bdet .cdesc{grid-area:desc}
  .bs4 .copen,.bdet .copen{grid-area:open}
  .bs4 .cfoot,.bdet .cfoot{grid-area:num;margin:0;padding:2px 0 2px 24px;border-top:none;border-left:1px solid var(--line-2);flex-direction:column;align-items:flex-start;gap:5px;align-self:center}
  .bs4 .cnum{font-size:25px}
  /* expanded */
  .bdet{padding:24px 26px 22px;column-gap:clamp(24px,3.4vw,52px);background:color-mix(in srgb,var(--accent) 9%,var(--surface));border-color:color-mix(in srgb,var(--accent) 46%,var(--line));box-shadow:0 30px 60px -44px var(--glow);cursor:default;overflow:hidden;animation:bdetIn .5s cubic-bezier(.3,.9,.3,1)}
  .bdet:hover{transform:none}
  .bdet .cdesc{display:none}
  .bdet .cfoot{align-self:start;padding:2px 42px 2px clamp(24px,3.4vw,52px);gap:9px}
  .bdet .cnum{font-size:clamp(30px,3.6vw,44px);color:var(--accent-text)}
  .bdet .cun{font-size:12.5px;max-width:22ch}
  .bdet .copen{display:block;margin-top:14px}
  .fpill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg-2);font-family:'Onest',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:-.005em;padding:10px 16px;border-radius:999px;cursor:pointer;min-height:44px;transition:background .25s,color .25s,border-color .25s}
  .fpill:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--fg)}
  .fpill .fn{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;color:var(--fg-3);transition:color .25s}
  .fpill[data-on="1"]{background:var(--accent);border-color:var(--accent);color:#fff}
  .fpill[data-on="1"] .fn{color:color-mix(in srgb,#fff 68%,transparent)}
  .bkey{background:linear-gradient(142deg,color-mix(in srgb,var(--accent) 15%,var(--surface)) 0%,color-mix(in srgb,var(--hi) 7%,var(--surface)) 100%);border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
  .bact{z-index:2;background:color-mix(in srgb,var(--accent) 13%,var(--surface));border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
  .bact:hover{transform:none}
  .bact::after{content:"";position:absolute;left:50%;bottom:-9px;width:13px;height:13px;transform:translateX(-50%) rotate(45deg);background:color-mix(in srgb,var(--accent) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 46%,var(--line));clip-path:polygon(100% 0,100% 100%,0 100%)}
  @keyframes bdetIn{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}100%{opacity:1;max-height:620px;padding-top:24px;padding-bottom:22px}}
  .bento[data-cut="1"]{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 128px),transparent 100%);mask-image:linear-gradient(180deg,#000 calc(100% - 128px),transparent 100%)}
  .bshow{display:flex;align-items:center;justify-content:center;margin:-26px auto 0;position:relative;z-index:2;padding:13px 24px;min-height:46px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg-2);font-family:'Onest',sans-serif;font-weight:500;font-size:13.5px;letter-spacing:-.005em;cursor:pointer;transition:color .25s,border-color .25s}
  .bshow:hover{color:var(--fg);border-color:var(--fg-3)}
  .bshow[data-lift="0"]{margin-top:14px}
  @media(max-width:1180px){.tgrid{grid-template-columns:repeat(2,1fr)!important}}
  @media(max-width:640px){.tgrid{grid-template-columns:1fr!important}}
  .bcard .ctit{font-size:15px}
  .bs3 .ctit{font-size:16px}
  .bkey .ctit{font-size:clamp(16.5px,1.7vw,18.5px)}
  .bs4 .ctit{font-size:clamp(17px,1.8vw,19.5px)}
  .bdet .ctit,.bdet .bmore{display:none}
  @media(max-width:1180px){
    .bento{grid-template-columns:repeat(2,1fr)}
    .bs2,.bs3,.bs4,.sb2,.sb3,.sb4{grid-column:span 1}
    .bs2w{grid-column:span 2}
    .bs6,.bdet{grid-column:span 2}
    .bs4,.bdet{display:flex;flex-direction:column}
    .bs4 .cfoot,.bdet .cfoot{margin-top:auto;padding:12px 0 0;border-top:1px solid var(--line-2);border-left:none;flex-direction:row;align-items:baseline;gap:8px;align-self:auto}
    .bs4 .cnum{font-size:20px}
    .bdet .cfoot{flex-direction:column;align-items:flex-start;gap:4px}
  }
  @media(max-width:640px){.bento{grid-template-columns:1fr;gap:12px}.bs2,.bs3,.bs4,.sb2,.sb3,.sb4,.bs6,.bs2w,.bdet{grid-column:span 1}.bcard{padding:17px 17px 15px}.bdet{padding:20px 18px 18px}}
  @media(max-width:640px){
    .be-root > section{padding-top:52px!important;padding-bottom:74px!important;padding-left:18px!important;padding-right:18px!important}
    .be-root > section.hero-3{padding:96px 0 0!important}
    .hero-1,.hero-2{padding-left:18px!important;padding-right:18px!important}
    .h3in{padding-left:18px!important;padding-right:18px!important}
    .be-root > footer{padding-left:18px!important;padding-right:18px!important}
    .chatpad{padding-left:15px!important;padding-right:15px!important}
    .cgrid{gap:34px!important}
    .strat{padding:20px 18px 20px 24px!important}
    .bcard{padding:20px 18px!important}
    .composer{padding-left:14px!important}
    .cinput{font-size:14.5px}
    .consult-h2{font-size:clamp(25px,6.6vw,52px)!important}
    .marquee{font-size:21px!important}
    .h3ask{margin:0 auto 30px!important}
    .h3mq{margin-top:48px!important}
    .pmt2{padding:13px 16px}
    .navcta{padding:13px 18px!important;font-size:13.5px!important}
    .btn-pri,.btn-sec{padding-top:15px;padding-bottom:15px}
    .field{padding:16px}
    #agents a[href^="tel:"]{padding:7px 0}
    #contact a.navlink{padding:12px 0}
    header a[href="#top"]{padding:6px 0}
    .toggle{height:44px;background:transparent;border:none}
    .toggle::after{content:"";position:absolute;inset:6px 0;border:1px solid var(--line);border-radius:999px;background:var(--surface);transition:background .3s}
    .toggle .knob{top:9px;z-index:1}
    .phone{font-size:clamp(23px,7.4vw,52px)!important;padding:10px 0}
  }
  .burger{display:none;position:relative;width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;padding:0;flex:none;transition:border-color .25s}
  .burger:hover{border-color:var(--accent)}
  .burger i{position:absolute;left:13px;width:18px;height:1.8px;border-radius:2px;background:var(--fg);transition:transform .34s cubic-bezier(.16,1,.3,1),opacity .2s}
  .burger i:nth-child(1){top:16px}
  .burger i:nth-child(2){top:21.5px}
  .burger i:nth-child(3){top:27px}
  .burger[data-open="1"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .burger[data-open="1"] i:nth-child(2){opacity:0}
  .burger[data-open="1"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
  .sheet{position:fixed;left:0;right:0;top:74px;z-index:54;display:none;flex-direction:column;padding:10px 18px 22px;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .28s,transform .34s cubic-bezier(.16,1,.3,1)}
  .sheet[data-open="1"]{opacity:1;transform:none;pointer-events:auto}
  .sheet a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:6px 2px;font-size:17px;font-weight:500;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line-2)}
  .sheet a:last-of-type{border-bottom:none}
  .sheet a span.n{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--fg-3)}
  @media(max-width:820px){.nav-links{display:none}.burger{display:block}.sheet{display:flex}}
  @media(max-width:430px){
    .navwrap{padding:0 18px!important;gap:12px!important}
    .navcta{padding:14px 15px!important;font-size:13px!important}
    .hero-3 h1{white-space:normal!important;font-size:clamp(22px,7.8vw,102px)!important}
  }
  @media(max-width:360px){
    .navwrap{padding:0 14px!important;gap:10px!important}
    .navcta{padding:14px 13px!important;font-size:12px!important}
    .navword{display:none}
    .toggle{width:52px}
    .toggle .knob{left:2px;width:22px;height:22px}
    [data-theme="light"] .toggle .knob{transform:translateX(24px)}
  }
