/* ==========================================================================
   HAPI — Sections
   ========================================================================== */

/* ---------------- Ambient background field ---------------- */
.ambient{
  position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden;
  background:var(--ivory);
}
.ambient .orb{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.55;
  will-change:transform;
}
.orb-a{ width:60vw; height:60vw; left:-14vw; top:-22vw; background:radial-gradient(circle,rgba(255,206,110,.55),transparent 66%); }
.orb-b{ width:52vw; height:52vw; right:-16vw; top:24vh; background:radial-gradient(circle,rgba(255,178,84,.34),transparent 68%); }
.orb-c{ width:46vw; height:46vw; left:22vw; bottom:-20vw; background:radial-gradient(circle,rgba(226,196,140,.34),transparent 68%); }

.hexfield{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23A98A4E' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/%3E%3Cpath d='M28 48 L56 64 L56 96 L28 112 L0 96 L0 64 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 97px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 10%, #000 0%, transparent 72%);
  mask-image:radial-gradient(120% 80% at 50% 10%, #000 0%, transparent 72%);
}

/* ---------------- Progress bar ---------------- */
.progress{
  position:fixed; top:0; left:0; height:2px; z-index:1200;
  width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,#E39A12,#F5C560,#B9720A);
  box-shadow:0 0 14px rgba(227,154,18,.55);
}

/* ---------------- Cursor ---------------- */
.cursor{
  position:fixed; top:0; left:0; z-index:1100; pointer-events:none;
  width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
  border:1px solid rgba(197,124,8,.45);
  background:radial-gradient(circle at 50% 40%, rgba(255,206,110,.22), transparent 70%);
  backdrop-filter:invert(4%);
  transition:width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out),
             background .35s var(--ease-out), border-color .35s var(--ease-out), opacity .3s;
  opacity:0;
}
.cursor.show{ opacity:1; }
.cursor.grow{
  width:58px; height:58px; margin:-29px 0 0 -29px;
  background:radial-gradient(circle at 50% 40%, rgba(255,206,110,.3), transparent 72%);
  border-color:rgba(197,124,8,.6);
}
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ---------------- NAV ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:transform .6s var(--ease-out);
}
.nav-in{
  margin:14px auto; max-width:var(--maxw);
  padding:0 var(--gut);
}
.nav-bar{
  display:flex; align-items:center; gap:22px;
  height:60px; padding:0 10px 0 18px;
  border-radius:100px;
  border:1px solid transparent;
  transition:background .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease), backdrop-filter .55s var(--ease), height .45s var(--ease);
}
.nav.stuck .nav-bar{
  background:rgba(252,249,243,.72);
  border-color:rgba(22,17,10,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 30px rgba(44,29,10,.08);
  backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%);
  height:56px;
}
.brand{ display:flex; align-items:center; gap:9px; font-weight:640; font-size:17.5px; letter-spacing:-.035em; }
.brand .mk{ width:26px; height:26px; }
.nav-links{ display:flex; gap:4px; margin-left:8px; }
.nav-links a{
  position:relative; padding:8px 13px; border-radius:9px;
  font-size:14px; font-weight:500; color:var(--muted); letter-spacing:-.011em;
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:5px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease-out);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.nav-cta .lg{ font-size:14px; font-weight:500; color:var(--muted); padding:8px 13px; transition:color .3s; }
.nav-cta .lg:hover{ color:var(--ink); }
.burger{
  display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--hairline);
  background:rgba(255,255,255,.6); align-items:center; justify-content:center; cursor:pointer;
}
.burger i{ display:block; width:16px; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .4s var(--ease-out), opacity .3s; }
.burger i+i{ margin-top:4px; }
.nav.open .burger i:first-child{ transform:translateY(2.75px) rotate(45deg); }
.nav.open .burger i:last-child{ transform:translateY(-2.75px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:990;
  background:rgba(250,248,243,.92);
  backdrop-filter:blur(26px) saturate(160%); -webkit-backdrop-filter:blur(26px);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--gut);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.mobile-menu.on{ opacity:1; visibility:visible; }
.mobile-menu a{
  font-size:clamp(30px,9vw,44px); font-weight:600; letter-spacing:-.04em; padding:10px 0;
  border-bottom:1px solid var(--hairline-2);
  opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.mobile-menu.on a{ opacity:1; transform:none; }
.mobile-menu .btn{ margin-top:26px; align-self:flex-start; }

@media (max-width:880px){
  .nav-links,.nav-cta .lg,.nav-cta .btn{ display:none; }
  .burger{ display:flex; margin-left:auto; }
}

/* ---------------- HERO ---------------- */
.hero{
  position:relative; padding-top:clamp(120px,17vh,190px); padding-bottom:clamp(60px,9vw,110px);
  overflow:clip;
}
.sunrise{
  position:absolute; left:50%; top:clamp(180px,30vh,340px); transform:translate(-50%,-50%);
  width:min(1500px,140vw); height:min(1100px,110vw);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,196,88,.42) 0%, rgba(255,178,70,.22) 32%, rgba(255,214,150,.09) 52%, transparent 72%);
  filter:blur(12px); pointer-events:none; z-index:0;
}
.sunbeam{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(1200px,120vw); height:70vh; pointer-events:none; z-index:0;
  background:conic-gradient(from 180deg at 50% 0%, transparent 0deg, rgba(255,214,140,.16) 12deg, transparent 26deg, transparent 334deg, rgba(255,214,140,.13) 350deg, transparent 360deg);
  -webkit-mask-image:linear-gradient(#000,transparent 78%); mask-image:linear-gradient(#000,transparent 78%);
  opacity:.85;
}
.hero-in{ position:relative; z-index:2; text-align:center; }
.hero h1{ margin:0 auto; max-width:15ch; }
.hero .lede{ margin:26px auto 0; text-align:center; max-width:60ch; }

.hero-pill{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  padding:6px 8px 6px 7px; border-radius:100px;
  background:rgba(255,255,255,.62); border:1px solid rgba(22,17,10,.07);
  box-shadow:var(--e1); backdrop-filter:blur(14px);
  font-size:12.5px; color:var(--muted); letter-spacing:-.008em;
}
.hero-pill b{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#6C4A0C; background:linear-gradient(180deg,#FFE1A2,#F8CC72);
  padding:4px 9px; border-radius:100px; box-shadow:0 1px 2px rgba(150,95,10,.2);
}
.hero-pill span{ padding-right:6px; }

.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.trust{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:30px;
}
.trust b{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:520; color:var(--muted);
  padding:7px 13px 7px 11px; border-radius:100px;
  background:rgba(255,255,255,.5); border:1px solid rgba(22,17,10,.055);
  backdrop-filter:blur(10px);
}
.trust svg{ width:13px; height:13px; color:var(--honey-deep); }

/* hero stage */
.stage-wrap{
  position:relative; margin-top:clamp(52px,7vw,86px);
  perspective:2000px; perspective-origin:50% 22%;
  z-index:2;
}
.stage{
  position:relative; max-width:1120px; margin:0 auto;
  transform-style:preserve-3d;
  will-change:transform;
}
.stage-glow{
  position:absolute; left:6%; right:6%; bottom:-6%; height:60%;
  background:radial-gradient(ellipse at 50% 50%, rgba(226,150,25,.5), transparent 70%);
  filter:blur(60px); z-index:-1;
}
.stage .app{ --r:20px; }
.stage-shadow{
  position:absolute; left:8%; right:8%; bottom:-34px; height:60px;
  background:radial-gradient(ellipse at 50% 50%, rgba(53,34,8,.30), transparent 72%);
  filter:blur(26px); z-index:-2;
}
/* floating satellite cards */
.sat{
  position:absolute; z-index:5; width:max-content;
  border-radius:15px; padding:12px 14px;
  background:linear-gradient(155deg, rgba(255,255,255,.94), rgba(255,252,246,.78));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 44px rgba(60,38,8,.16), 0 2px 6px rgba(60,38,8,.08), 0 1px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  will-change:transform;
}
.sat-a{ left:-6%;  top:16%;  transform:translateZ(80px); }
.sat-b{ right:-5%; top:38%;  transform:translateZ(110px); }
.sat-c{ right:6%;  bottom:-7%; transform:translateZ(60px); }
.sat h6{ margin:0; font-size:11.5px; font-weight:620; letter-spacing:-.02em; display:flex; align-items:center; gap:7px; }
.sat p{ margin:5px 0 0; font-size:10.5px; color:var(--muted-2); }
.sat .big{ font-size:20px; font-weight:650; letter-spacing:-.035em; margin-top:3px; font-variant-numeric:tabular-nums; }
@media (max-width:900px){ .sat-a,.sat-b{ display:none; } .sat-c{ right:2%; bottom:-8%; } }

/* honey particles canvas */
.particles{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* marquee logos */
.proof{ padding-top:clamp(56px,7vw,84px); }
.proof p{ text-align:center; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); font-weight:600; margin:0 0 26px; }
.marq{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marq-t{ display:flex; gap:clamp(38px,6vw,76px); width:max-content; animation:marq 44s linear infinite; }
.marq:hover .marq-t{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marq-t span{
  display:flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:15px; font-weight:600; letter-spacing:-.02em; color:rgba(22,17,10,.42);
}
.marq-t svg{ width:17px; height:17px; opacity:.5; }

/* ---------------- SECTION HEADERS ---------------- */
.sec-head{ max-width:800px; }
.sec-head.center{ margin-inline:auto; }
.sec-head .h2{ margin-top:20px; }
.sec-head .lede{ margin-top:20px; }
.sec-head.center .lede{ margin-inline:auto; }

/* ---------------- PROBLEM (split) ---------------- */
.problem{ position:relative; }
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-radius:26px; overflow:hidden;
  border:1px solid var(--hairline);
  box-shadow:var(--e3);
  background:#fff;
  position:relative;
}
.split-half{ position:relative; min-height:clamp(400px,52vw,560px); padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; }
.split-old{
  background:linear-gradient(180deg,#211C15,#100C08);
  color:#D9D1C4;
}
.split-old .ph{ position:absolute; inset:0; opacity:.34; filter:grayscale(.55) contrast(1.05); }
.split-old .ph img{ width:100%; height:100%; object-fit:cover; }
.split-old::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(16,12,8,.5), rgba(16,12,8,.9));
}
.split-old > *{ position:relative; z-index:2; }
.split-new{
  background:
    radial-gradient(110% 80% at 90% 0%, rgba(255,224,164,.5), transparent 60%),
    linear-gradient(180deg,#FFFDF9,#F8F3E9);
  overflow:hidden;
}
.split-tag{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:650;
}
.split-old .split-tag{ color:#9A8B72; }
.split-new .split-tag{ color:var(--honey-deep); }
.split-list{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.split-list li{
  display:flex; align-items:center; gap:11px; padding:11px 0;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:14.5px; letter-spacing:-.015em;
}
.split-new .split-list li{ border-top-color:var(--hairline-2); color:var(--ink-soft); }
.split-list svg{ width:16px; height:16px; flex:none; opacity:.7; }
.split-old .split-list svg{ color:#A5765C; }
.split-new .split-list svg{ color:#2F7D4F; opacity:.9; }
.split-new .app{ margin-top:20px; box-shadow:var(--e2); }
.split-old h3, .split-new h3{ margin-top:14px; max-width:16ch; }
.split-old h3{ color:#EFE7D9; }

.split-divider{
  position:absolute; top:0; bottom:0; left:50%; width:1px; z-index:5;
  background:linear-gradient(180deg,transparent,rgba(227,154,18,.5),transparent);
  box-shadow:0 0 22px rgba(227,154,18,.4);
}
.split-knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:6;
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(180deg,#FFF8EA,#F6E4BE);
  border:1px solid rgba(227,154,18,.45);
  box-shadow:0 8px 24px rgba(150,95,10,.24), 0 1px 0 rgba(255,255,255,.9) inset;
  display:grid; place-items:center; color:#8A5A0C;
}
.split-knob svg{ width:18px; height:18px; }
@media (max-width:820px){
  .split{ grid-template-columns:1fr; }
  .split-divider,.split-knob{ display:none; }
  .split-half{ min-height:0; }
}

.problem-quote{
  margin-top:clamp(46px,6vw,72px); text-align:center;
  font-size:clamp(24px,3.6vw,44px); font-weight:600; letter-spacing:-.035em; line-height:1.14;
  max-width:20ch; margin-inline:auto;
}

/* ---------------- FEATURES ---------------- */
.feat{
  display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(34px,6vw,88px); align-items:center;
  padding-block:clamp(56px,8vw,110px);
}
.feat.flip .feat-copy{ order:2; }
.feat-copy{ max-width:520px; }
.feat-ico{
  width:52px; height:52px; flex:none; aspect-ratio:1; border-radius:16px; display:grid; place-items:center; margin-bottom:24px;
  background:linear-gradient(160deg,#FFF3DC,#FBE3B4);
  border:1px solid rgba(227,154,18,.28);
  box-shadow:0 6px 18px rgba(197,124,8,.14), 0 1px 0 rgba(255,255,255,.9) inset;
  color:#8A5A0C;
}
.feat-ico svg{ width:24px; height:24px; }
.feat-copy .lede{ margin-top:18px; font-size:17px; }
.feat-points{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:0; }
.feat-points li{
  display:flex; gap:12px; align-items:flex-start; padding:13px 0;
  border-top:1px solid var(--hairline-2); font-size:14.5px; color:var(--ink-soft); letter-spacing:-.014em;
}
.feat-points li:last-child{ border-bottom:1px solid var(--hairline-2); }
.feat-points svg{ width:16px; height:16px; margin-top:2px; color:var(--honey-deep); flex:none; }
.feat-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:26px;
  font-size:14.5px; font-weight:560; color:var(--honey-deep); letter-spacing:-.012em;
}
.feat-link svg{ width:15px; height:15px; transition:transform .45s var(--ease-out); }
.feat-link:hover svg{ transform:translateX(4px); }

.feat-vis{ position:relative; }
.feat-vis .app{ transform:translateZ(0); }
.feat-vis-glow{
  position:absolute; inset:6% -4% -10%; z-index:-1;
  background:radial-gradient(ellipse at 50% 60%, rgba(226,150,25,.28), transparent 70%);
  filter:blur(52px);
}
.feat-float{
  position:absolute; z-index:4;
  border-radius:14px; padding:11px 13px;
  background:linear-gradient(155deg, rgba(255,255,255,.95), rgba(255,251,243,.8));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 16px 40px rgba(60,38,8,.16), 0 1px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:blur(16px);
}
@media (max-width:900px){
  .feat{ grid-template-columns:1fr; }
  .feat.flip .feat-copy{ order:0; }
}

/* ---------------- SIGNATURE DROP ---------------- */
.signature{
  position:relative; height:210vh;
  margin-top:clamp(40px,6vw,80px);
}
.sig-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:grid; place-items:center;
}
.sig-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.sig-copy{
  position:relative; z-index:3; text-align:center; padding-inline:var(--gut);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.sig-copy h2{ max-width:16ch; margin-inline:auto; }
.sig-copy .lede{ margin:22px auto 0; }
.sig-hex{
  position:absolute; inset:0; z-index:1; opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%23E8A320' stroke-opacity='.55' stroke-width='1.1'%3E%3Cpath d='M30 1 L59 17.5 L59 51.5 L30 68 L1 51.5 L1 17.5 Z'/%3E%3Cpath d='M30 53 L59 69.5 L59 103.5 L30 120 L1 103.5 L1 69.5 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:60px 104px;
  transition:opacity 1s var(--ease);
}

/* ---------------- DEMO (dark stage) ---------------- */
.demo{
  position:relative; overflow:clip;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(226,150,25,.20), transparent 58%),
    radial-gradient(80% 60% at 88% 108%, rgba(226,150,25,.13), transparent 62%),
    linear-gradient(180deg,#0E0A06,#161009 52%,#0C0906);
  color:var(--stage-ink);
  border-radius:clamp(26px,3.2vw,40px);
  margin-inline:clamp(8px,2vw,24px);
  box-shadow:0 40px 120px rgba(30,18,4,.34), 0 0 0 1px rgba(255,236,201,.07) inset;
}
.demo .lede{ color:var(--stage-muted); }
.demo .eyebrow{ color:var(--honey-lit); }
.demo-hex{
  position:absolute; inset:0; opacity:.3; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23FFD08A' stroke-opacity='.2' stroke-width='1'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/%3E%3Cpath d='M28 48 L56 64 L56 96 L28 112 L0 96 L0 64 Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(100% 70% at 50% 0%, #000, transparent 70%);
  mask-image:radial-gradient(100% 70% at 50% 0%, #000, transparent 70%);
}
.demo-tabs{
  display:flex; gap:4px; padding:5px; margin:38px auto 0; width:max-content; max-width:100%;
  border-radius:100px; background:rgba(255,255,255,.05);
  border:1px solid var(--stage-line); backdrop-filter:blur(14px);
  overflow-x:auto; scrollbar-width:none;
}
.demo-tabs::-webkit-scrollbar{ display:none; }
.demo-tab{
  position:relative; border:0; background:transparent; cursor:pointer;
  padding:9px 18px; border-radius:100px; white-space:nowrap;
  font-size:13.5px; font-weight:520; letter-spacing:-.012em; color:var(--stage-muted);
  transition:color .4s var(--ease);
}
.demo-tab.on{ color:#221803; }
.demo-tab .bg{
  position:absolute; inset:0; border-radius:100px; z-index:-1;
  background:linear-gradient(180deg,#F3B93F,#D5850C);
  box-shadow:0 4px 16px rgba(226,150,25,.4);
  opacity:0; transform:scale(.9); transition:opacity .4s var(--ease), transform .5s var(--ease-out);
}
.demo-tab.on .bg{ opacity:1; transform:none; }

.demo-frame{
  position:relative; margin:clamp(34px,4.6vw,58px) auto 0; max-width:1080px;
  perspective:1800px;
}
.demo-stage{
  position:relative; border-radius:20px;
  box-shadow:0 50px 120px rgba(0,0,0,.5);
}
.demo-panel{ display:none; }
.demo-panel.on{ display:block; animation:panelIn .8s var(--ease-out); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(16px) scale(.99); } to{ opacity:1; transform:none; } }

.demo-metrics{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:clamp(44px,5vw,66px);
  background:var(--stage-line); border:1px solid var(--stage-line); border-radius:18px; overflow:hidden;
}
.demo-metric{ background:rgba(12,9,6,.6); padding:clamp(20px,2.4vw,28px); backdrop-filter:blur(8px); }
.demo-metric b{ display:block; font-size:clamp(26px,3.4vw,42px); font-weight:640; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#FFE7BC,#E5A231); -webkit-background-clip:text; background-clip:text; color:transparent; }
.demo-metric span{ display:block; margin-top:10px; font-size:12.5px; color:var(--stage-muted); letter-spacing:-.008em; }
@media (max-width:760px){ .demo-metrics{ grid-template-columns:1fr 1fr; } }

/* ---------------- BENEFITS ---------------- */
.bene{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(42px,5vw,64px); }
.bcard{
  position:relative; padding:26px 24px 28px; border-radius:20px; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--e1), 0 1px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  transition:transform .65s var(--ease-out), box-shadow .65s var(--ease-out), border-color .5s;
  will-change:transform;
}
.bcard::before{ /* cursor glow */
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%), rgba(255,197,90,.28), transparent 62%);
  opacity:0; transition:opacity .5s var(--ease);
}
.bcard:hover{ transform:translateY(-6px); box-shadow:var(--e3); border-color:rgba(227,154,18,.3); }
.bcard:hover::before{ opacity:1; }
.bcard-n{ font-family:var(--mono); font-size:11px; color:var(--honey-deep); letter-spacing:.08em; }
.bcard h4{ margin:16px 0 0; font-size:19px; letter-spacing:-.028em; line-height:1.16; }
.bcard p{ margin:11px 0 0; font-size:14px; color:var(--muted); line-height:1.55; letter-spacing:-.008em; }
.bcard .bstat{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--hairline-2);
  font-size:26px; font-weight:640; letter-spacing:-.04em;
}
.bcard .bstat em{ font-style:normal; font-size:12px; font-weight:550; color:var(--muted-2); letter-spacing:-.01em; margin-left:6px; }
@media (max-width:1000px){ .bene{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .bene{ grid-template-columns:1fr; } }

/* ---------------- HOW IT WORKS ---------------- */
.flow{ position:relative; margin-top:clamp(48px,6vw,72px); }
.flow-line{
  position:absolute; left:27px; top:10px; bottom:10px; width:2px; border-radius:2px;
  background:var(--hairline);
  overflow:hidden;
}
.flow-line i{
  position:absolute; left:0; top:0; width:100%; height:var(--fill,0%);
  background:linear-gradient(180deg,#F3BC52,#C97F09);
  box-shadow:0 0 14px rgba(227,154,18,.5);
  transition:height .18s linear;
}
.step{
  position:relative; display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:clamp(16px,3vw,42px);
  padding:clamp(20px,2.6vw,30px) 0;
  border-bottom:1px solid var(--hairline-2);
}
.step:last-child{ border-bottom:0; }
.step-dot{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(160deg,#FFFDF8,#F5EEE0);
  border:1px solid var(--hairline);
  font-size:14px; font-weight:620; letter-spacing:-.02em; color:var(--muted-2);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
  transition:all .7s var(--ease-out);
  z-index:2;
}
.step.lit .step-dot{
  background:linear-gradient(160deg,#F6BC48,#D5850C); color:#2A1B05; border-color:rgba(197,124,8,.5);
  box-shadow:0 0 0 6px rgba(227,154,18,.13), 0 8px 22px rgba(197,124,8,.3);
  transform:scale(1.04);
}
.step-b h4{ font-size:clamp(19px,2.3vw,26px); letter-spacing:-.03em; transition:color .6s; }
.step-b p{ margin:7px 0 0; font-size:14.5px; color:var(--muted); max-width:52ch; letter-spacing:-.01em; }
.step-t{ font-family:var(--mono); font-size:11px; color:var(--muted-2); letter-spacing:.06em; white-space:nowrap; }
@media (max-width:700px){
  .step{ grid-template-columns:44px 1fr; }
  .step-dot{ width:44px; height:44px; font-size:12.5px; }
  .step-t{ display:none; }
  .flow-line{ left:21px; }
}

/* ---------------- DEVICES ---------------- */
.devices{
  position:relative; margin-top:clamp(50px,7vw,84px);
  display:grid; grid-template-columns:1fr; place-items:center;
  min-height:clamp(420px,48vw,600px);
  perspective:1600px;
}
.dev-group{ position:relative; width:min(1060px,100%); display:grid; place-items:center; transform-style:preserve-3d; }
.dev-laptop{ position:relative; z-index:2; width:min(660px,64%); will-change:transform; }
.dev-tablet{ position:absolute; left:0; bottom:2%; z-index:1; width:min(230px,19%); will-change:transform; }
.dev-phone{ position:absolute; right:0; bottom:-1%; z-index:3; width:min(172px,14.5%); will-change:transform; }
/* The tablet / phone mini-UIs are authored at a fixed design width, so simply
   narrowing the frame clipped their contents. Instead render them at their
   natural size and scale the whole screen down proportionally. */
.dev-tablet .dev-screen,
.dev-phone .dev-screen{ position:relative; overflow:hidden; }
.dev-tablet .dev-screen > *,
.dev-phone .dev-screen > *{
  transform-origin:top left;
  transform:scale(var(--s,1));
  width:calc(100% / var(--s,1));
}
/* keep the frame's height in proportion to the scaled content */
.dev-tablet .dev-screen{ aspect-ratio:283/400; }
.dev-phone  .dev-screen{ aspect-ratio:206/455; }

.dev-floor{
  position:absolute; left:5%; right:5%; bottom:-9%; height:90px; z-index:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(53,34,8,.24), transparent 70%);
  filter:blur(30px);
}
.dev-reflect{
  position:absolute; left:12%; right:12%; top:100%; height:38%;
  background:linear-gradient(180deg, rgba(226,150,25,.14), transparent 72%);
  filter:blur(14px); transform:scaleY(-1); opacity:.5; pointer-events:none;
}
@media (max-width:720px){
  .dev-laptop{ width:74%; }
  .dev-tablet{ left:0; bottom:-6%; width:22%; }
  .dev-phone{ right:0; bottom:-9%; width:17%; }
}

/* ---------------- TESTIMONIALS ---------------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(44px,5vw,66px); }
.quote{
  display:flex; flex-direction:column; overflow:hidden; border-radius:22px;
  background:linear-gradient(170deg,#fff,rgba(255,253,249,.7));
  border:1px solid var(--hairline);
  box-shadow:var(--e1);
  transition:transform .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.quote:hover{ transform:translateY(-5px); box-shadow:var(--e3); }
.quote-ph{ position:relative; aspect-ratio:16/11; overflow:hidden; background:#EAE3D6; }
.quote-ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease-out); }
.quote:hover .quote-ph img{ transform:scale(1.045); }
.quote-ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%, rgba(28,20,10,.34));
}
.quote-body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.quote-mark{ font-size:34px; line-height:.6; color:rgba(227,154,18,.45); font-weight:700; }
.quote-body blockquote{
  margin:16px 0 0; font-size:clamp(16px,1.6vw,18.5px); line-height:1.5; letter-spacing:-.022em; font-weight:450;
  color:var(--ink-soft);
}
.quote-foot{ margin-top:auto; padding-top:22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.quote-who b{ display:block; font-size:13.5px; font-weight:600; letter-spacing:-.015em; }
.quote-who span{ font-size:12px; color:var(--muted-2); }
.stars{ display:flex; gap:2px; color:var(--honey); }
.stars svg{ width:13px; height:13px; }
@media (max-width:960px){ .quotes{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }

/* ---------------- PRICING ---------------- */
.price-toggle{
  display:inline-flex; align-items:center; gap:3px; padding:4px; border-radius:100px;
  background:rgba(22,17,10,.05); border:1px solid var(--hairline-2); margin-top:30px;
}
.price-toggle button{
  border:0; background:transparent; cursor:pointer; padding:8px 17px; border-radius:100px;
  font-size:13.5px; font-weight:520; color:var(--muted); letter-spacing:-.01em; transition:all .4s var(--ease);
}
.price-toggle button.on{ background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(22,17,10,.1); }
.price-toggle .save{ font-size:10px; color:var(--honey-deep); font-weight:700; margin-left:5px; }

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(38px,4.6vw,56px); align-items:start; }
.plan{
  position:relative; padding:32px 28px 30px; border-radius:24px;
  background:linear-gradient(165deg, rgba(255,255,255,.92), rgba(255,255,255,.62));
  border:1px solid var(--hairline);
  box-shadow:var(--e1);
  backdrop-filter:blur(16px);
  display:flex; flex-direction:column;
}
.plan.pro{
  background:linear-gradient(170deg,#191308,#241A0C 60%,#120D06);
  border-color:rgba(227,154,18,.4);
  color:var(--stage-ink);
  box-shadow:0 30px 80px rgba(60,38,8,.28), 0 0 0 1px rgba(227,154,18,.18) inset;
  transform:translateY(-10px);
}
.plan.pro::before{
  content:""; position:absolute; inset:-2px; border-radius:26px; z-index:-1;
  background:conic-gradient(from 0deg, rgba(227,154,18,0), rgba(245,197,96,.85), rgba(227,154,18,0) 40%);
  filter:blur(9px); opacity:.65;
  animation:spin 9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .plan.pro::before{ animation:none; } }
.plan-badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:5px 13px; border-radius:100px; color:#2A1B05;
  background:linear-gradient(180deg,#F6C463,#DE9615);
  box-shadow:0 4px 14px rgba(197,124,8,.4);
}
.plan h3{ font-size:18px; letter-spacing:-.025em; }
.plan .pdesc{ margin:8px 0 0; font-size:13.5px; color:var(--muted); letter-spacing:-.008em; min-height:38px; }
.plan.pro .pdesc{ color:var(--stage-muted); }
.plan-price{ margin:22px 0 0; display:flex; align-items:baseline; gap:4px; }
.plan-price b{ font-size:clamp(38px,4.6vw,52px); font-weight:640; letter-spacing:-.045em; line-height:1; }
.plan-price span{ font-size:13.5px; color:var(--muted-2); }
.plan.pro .plan-price b{ background:linear-gradient(180deg,#FFEBC4,#E5A231); -webkit-background-clip:text; background-clip:text; color:transparent; }
.plan .btn{ width:100%; margin-top:24px; }
.plan-feats{ list-style:none; margin:26px 0 0; padding:24px 0 0; border-top:1px solid var(--hairline-2); display:flex; flex-direction:column; gap:12px; }
.plan.pro .plan-feats{ border-top-color:var(--stage-line); }
.plan-feats li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; letter-spacing:-.01em; color:var(--ink-soft); }
.plan.pro .plan-feats li{ color:#D9CFBC; }
.plan-feats svg{ width:15px; height:15px; margin-top:2.5px; flex:none; color:var(--honey-deep); }
.plan.pro .plan-feats svg{ color:var(--honey-lit); }
.plan-note{ margin-top:22px; font-size:11.5px; color:var(--muted-2); }
@media (max-width:940px){
  .plans{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
  .plan.pro{ transform:none; }
}

/* faq */
.faq{ max-width:800px; margin:clamp(56px,7vw,90px) auto 0; }
.qa{ border-top:1px solid var(--hairline-2); }
.qa:last-child{ border-bottom:1px solid var(--hairline-2); }
.qa summary{
  list-style:none; cursor:pointer; padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-size:16.5px; font-weight:550; letter-spacing:-.02em;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary i{
  width:22px; height:22px; flex:none; position:relative;
}
.qa summary i::before,.qa summary i::after{
  content:""; position:absolute; inset:50% 0 auto; height:1.5px; background:var(--muted); border-radius:2px;
  transition:transform .45s var(--ease-out);
}
.qa summary i::after{ transform:rotate(90deg); }
.qa[open] summary i::after{ transform:rotate(0deg); }
.qa-a{ padding:0 0 24px; font-size:15px; color:var(--muted); line-height:1.62; max-width:66ch; letter-spacing:-.008em; }

/* ---------------- FINAL CTA ---------------- */
.final{
  position:relative; overflow:clip; text-align:center;
  padding-block:clamp(110px,14vw,190px);
}
.final-sun{
  position:absolute; left:50%; bottom:-38%; transform:translateX(-50%);
  width:min(1400px,150vw); height:min(1000px,110vw);
  background:radial-gradient(ellipse at 50% 50%, rgba(255,193,80,.5), rgba(255,178,70,.2) 38%, transparent 68%);
  filter:blur(14px); pointer-events:none;
}
.final-hex{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23B98B3E' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z'/%3E%3Cpath d='M28 48 L56 64 L56 96 L28 112 L0 96 L0 64 Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(80% 60% at 50% 100%, #000, transparent 72%);
  mask-image:radial-gradient(80% 60% at 50% 100%, #000, transparent 72%);
}
.final .wrap{ position:relative; z-index:2; }
.final h2{ max-width:16ch; margin-inline:auto; }
.final .lede{ margin:24px auto 0; }
.final-cta{ margin-top:38px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.final-mini{
  margin-top:26px; font-size:12.5px; color:var(--muted-2);
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
}
.final-mini b{ display:inline-flex; align-items:center; gap:6px; font-weight:500; }
.final-mini svg{ width:13px; height:13px; color:var(--honey-deep); }
.final-peek{
  position:relative; z-index:2; margin:clamp(56px,7vw,86px) auto -14vh; max-width:900px;
  -webkit-mask-image:linear-gradient(#000 42%, transparent 92%);
  mask-image:linear-gradient(#000 42%, transparent 92%);
}

/* ---------------- FOOTER ---------------- */
.foot{
  position:relative; background:linear-gradient(180deg,#100C07,#0A0705);
  color:#CFC5B2; padding-top:clamp(70px,8vw,104px); padding-bottom:34px;
  border-radius:clamp(26px,3.2vw,40px) clamp(26px,3.2vw,40px) 0 0;
  margin-inline:clamp(8px,2vw,24px);
  box-shadow:0 -30px 80px rgba(30,18,4,.18);
}
.foot-top{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(28px,4vw,54px); }
.foot-brand .brand{ color:#F7F0E2; }
.foot-brand p{ margin:18px 0 0; font-size:14px; color:#8E8271; max-width:34ch; line-height:1.6; }
.foot-col h6{ margin:0 0 18px; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:#7E7263; font-weight:650; }
.foot-col a{ display:block; padding:7px 0; font-size:14px; color:#CFC5B2; transition:color .3s var(--ease), transform .4s var(--ease-out); }
.foot-col a:hover{ color:var(--honey-lit); transform:translateX(3px); }
.foot-bot{
  margin-top:clamp(48px,6vw,76px); padding-top:26px; border-top:1px solid rgba(255,236,201,.09);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:12.5px; color:#7E7263;
}
.foot-social{ display:flex; gap:8px; }
.foot-social a{
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  border:1px solid rgba(255,236,201,.1); color:#A0937F;
  transition:all .4s var(--ease);
}
.foot-social a:hover{ color:#221803; background:linear-gradient(180deg,#F3B93F,#D5850C); border-color:transparent; }
.foot-social svg{ width:15px; height:15px; }
.foot-word{
  margin-top:40px; width:100%; opacity:.055; pointer-events:none; user-select:none;
  font-size:clamp(70px,19vw,260px); font-weight:660; letter-spacing:-.06em; line-height:.8;
  text-align:center; color:#FFE7BC;
}
@media (max-width:820px){ .foot-top{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1/-1; } }

/* ---------------- Magnetic ---------------- */
[data-magnetic]{ will-change:transform; }

/* ---------------- Misc ---------------- */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{
  position:fixed; top:-60px; left:16px; z-index:2000; background:var(--ink); color:#fff;
  padding:10px 16px; border-radius:10px; font-size:14px; transition:top .3s;
}
.skip:focus{ top:16px; }

/* device mini-UI scale factors (design width -> rendered width) */
.dev-tablet{ --dw:283px; }
.dev-phone{  --dw:206px; }