/* ============================================================ HERO */
.hero{ position:relative; padding-top:172px; padding-bottom:var(--s10); }
.hero::before{ content:""; position:absolute; top:-6%; left:50%; transform:translateX(-50%); width:130%; height:620px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 60% at 50% -2%, var(--accent-soft), transparent 68%),
    conic-gradient(from 210deg at 22% -8%, transparent 0deg, var(--accent-softer) 14deg, transparent 30deg),
    conic-gradient(from 110deg at 78% -8%, transparent 0deg, var(--accent-softer) 14deg, transparent 30deg);
  opacity:calc(.9 * var(--glow-strength));
  -webkit-mask:radial-gradient(80% 80% at 50% 0%, #000, transparent 78%); mask:radial-gradient(80% 80% at 50% 0%, #000, transparent 78%); }
@media (max-width:720px){ .hero{ padding-top:128px; } }
.hero__grid-lines{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  -webkit-mask:radial-gradient(70% 60% at 50% 30%, #000, transparent 80%); mask:radial-gradient(70% 60% at 50% 30%, #000, transparent 80%);
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:64px 64px; }

.hero__badge{ display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 14px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border-2); font-size:12.5px; font-weight:600; color:var(--text-mid); box-shadow:var(--shadow-card); white-space:nowrap; }
.hero__badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.hero__badge .tag{ font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-bright); }

.hero__title{ font-family:var(--display); font-weight:700; font-size:clamp(40px,6.4vw,82px); line-height:1.02; letter-spacing:-0.03em; color:var(--text-hi); margin:24px 0 0; text-wrap:balance; }
.hero__title .grad{ background:linear-gradient(108deg, var(--accent-hot), var(--accent) 55%, var(--accent-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero__title .caret{ display:inline-block; width:.5ch; color:var(--accent); opacity:.85; }
.hero__sub{ font-size:clamp(16px,1.7vw,19px); line-height:1.6; color:var(--text-lo); margin:26px 0 0; max-width:560px; }
.hero__cta{ display:flex; align-items:center; gap:var(--s3); margin:36px 0 0; flex-wrap:wrap; }
.hero__note{ display:flex; align-items:center; gap:8px; margin-top:18px; font-size:12.5px; color:var(--text-dim); }
.hero__note svg{ width:14px; height:14px; color:var(--ok); }

/* hero stats */
.hero__stats{ display:flex; gap:var(--s8); margin-top:var(--s8); flex-wrap:wrap; }
.hstat__v{ font-family:var(--display); font-weight:600; font-size:clamp(24px,3vw,34px); letter-spacing:-0.03em; color:var(--text-hi); line-height:1; font-variant-numeric:tabular-nums; }
.hstat__l{ font-size:12.5px; color:var(--text-lo); margin-top:7px; max-width:140px; }
.hstat__v .u{ color:var(--accent); }

/* ---- Variant: centered (default) ---- */
.hero[data-variant="a"] .hero__head{ max-width:840px; margin:0 auto; text-align:center; }
.hero[data-variant="a"] .hero__sub{ margin-left:auto; margin-right:auto; }
.hero[data-variant="a"] .hero__cta{ justify-content:center; }
.hero[data-variant="a"] .hero__note{ justify-content:center; }
.hero[data-variant="a"] .hero__stats{ justify-content:center; }
.hero[data-variant="a"] .hero__stage{ margin-top:var(--s10); }

/* ---- Variant: split ---- */
.hero[data-variant="b"] .hero__row{ display:grid; grid-template-columns:1fr 1.04fr; gap:var(--s9); align-items:center; }
.hero[data-variant="b"] .hero__stats{ margin-top:var(--s7); gap:var(--s7); }
.hero[data-variant="b"] .hero__stage{ margin-top:0; }
@media (max-width:980px){ .hero[data-variant="b"] .hero__row{ grid-template-columns:1fr; gap:var(--s9); } }

/* ---- Variant: spotlight ---- */
.hero[data-variant="c"] .hero__head{ max-width:920px; margin:0 auto; text-align:center; }
.hero[data-variant="c"] .hero__sub{ margin-left:auto; margin-right:auto; }
.hero[data-variant="c"] .hero__cta{ justify-content:center; }
.hero[data-variant="c"] .hero__note{ justify-content:center; }
.hero[data-variant="c"] .hero__title{ font-size:clamp(44px,7.6vw,96px); }
.hero[data-variant="c"] .hero__stage{ margin-top:var(--s9); }
.hero[data-variant="c"] .hero__float{ display:block; }
.hero__float{ display:none; }

/* hero stage / perspective frame */
.hero__stage{ position:relative; }
.stage-frame{ position:relative; border-radius:var(--r-2xl); background:var(--bg-soft); box-shadow:var(--shadow-pop); overflow:hidden; }
.stage-bar{ display:flex; align-items:center; gap:10px; padding:12px var(--s5); border-bottom:1px solid var(--border); background:var(--bg-soft); }
.stage-bar__dots{ display:flex; gap:7px; }
.stage-bar__dots i{ width:11px; height:11px; border-radius:50%; }
.stage-bar__dots i:nth-child(1){ background:#ED6A5E; }
.stage-bar__dots i:nth-child(2){ background:#F4BF4F; }
.stage-bar__dots i:nth-child(3){ background:#61C554; }
.stage-bar__url{ margin-left:10px; display:inline-flex; align-items:center; gap:7px; padding:5px 14px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--border); font-family:var(--mono); font-size:11.5px; color:var(--text-lo); }
.stage-bar__url svg{ width:12px; height:12px; }
.stage-bar__live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:0.1em; color:var(--accent-bright); }
.stage-bar__live .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px 1px var(--accent-glow); }
.stage-screen{ position:relative; }
.hero[data-variant="a"] .stage-frame{ transform:perspective(2200px) rotateX(2deg); }
.stage-glow{ position:absolute; left:50%; top:-8%; transform:translateX(-50%); width:60%; height:120px; background:var(--accent); filter:blur(90px); opacity:calc(.3 * var(--glow-strength)); border-radius:50%; z-index:-1; }

.hero__float-card{ position:absolute; z-index:8; padding:13px 16px; border-radius:var(--r-md); background:color-mix(in oklab,var(--surface-2),transparent 8%); backdrop-filter:blur(14px); border:1px solid var(--border-2); box-shadow:var(--shadow-pop); animation:floaty 6s ease-in-out infinite; }
.hero__float-card.c1{ top:14%; left:-3%; animation-delay:0s; }
.hero__float-card.c2{ bottom:16%; right:-2%; animation-delay:-3s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.ffc__row{ display:flex; align-items:center; gap:10px; }
.ffc__ico{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none; color:#fff; }
.ffc__ico svg{ width:16px; height:16px; }
.ffc__t{ font-size:12px; color:var(--text-lo); }
.ffc__v{ font-family:var(--display); font-weight:600; font-size:16px; color:var(--text-hi); }

/* ============================================================ LOGO / TRUST STRIP */
.trust{ padding:var(--s8) 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust__lbl{ text-align:center; font-family:var(--mono); font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-dim); margin-bottom:var(--s6); }
.trust__marq{ position:relative; overflow:hidden; -webkit-mask:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.trust__track{ display:flex; align-items:center; gap:var(--s8); width:max-content; animation:trustMarq 34s linear infinite; }
.trust__marq:hover .trust__track{ animation-play-state:paused; }
@keyframes trustMarq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .trust__track{ animation:none; flex-wrap:wrap; justify-content:center; row-gap:var(--s5); } }
.trust__logo{ flex:none; white-space:nowrap; display:flex; align-items:center; gap:10px; color:var(--text-lo); font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-0.01em; opacity:.62; transition:opacity .25s, color .25s; }
.trust__logo:hover{ opacity:1; color:var(--text-mid); }
.trust__logo svg{ width:20px; height:20px; }
.trust__dot{ width:30px; height:30px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); display:grid; place-items:center; color:var(--accent-bright); flex:none; }
.trust__dot svg{ width:15px; height:15px; }

/* ============================================================ HOW IT WORKS */
.how__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); position:relative; }
@media (max-width:980px){ .how__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .how__grid{ grid-template-columns:1fr; } }
.how__line{ position:absolute; top:42px; left:12%; right:12%; height:1px; background:linear-gradient(90deg, transparent, var(--accent-line), transparent); z-index:0; }
@media (max-width:980px){ .how__line{ display:none; } }
.step{ position:relative; z-index:1; padding:var(--s6); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.step:hover{ transform:translateY(-4px); border-color:var(--border-2); }
.step__k{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:0.1em; color:var(--accent-bright); }
.step__ico{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin:var(--s4) 0 var(--s5); color:#fff; background:linear-gradient(150deg, var(--accent-bright), var(--accent) 55%, var(--accent-deep)); box-shadow:0 8px 20px -8px var(--accent-glow), 0 1px 0 rgba(255,255,255,0.2) inset; }
.step__ico svg{ width:22px; height:22px; }
.step__t{ font-family:var(--display); font-weight:600; font-size:18px; color:var(--text-hi); letter-spacing:-0.01em; }
.step__d{ font-size:13.5px; color:var(--text-lo); margin-top:10px; line-height:1.6; }

/* ============================================================ FEATURES BENTO */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s4); grid-auto-rows:minmax(150px,auto); }
@media (max-width:980px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .bento{ grid-template-columns:1fr; } }
.bcell{ position:relative; overflow:hidden; padding:var(--s6); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-card); transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s; display:flex; flex-direction:column; }
.bcell:hover{ transform:translateY(-3px); border-color:var(--border-2); }
.bcell--w3{ grid-column:span 3; }
.bcell--w2{ grid-column:span 2; }
.bcell--w4{ grid-column:span 4; }
.bcell--h2{ grid-row:span 2; }
@media (max-width:980px){ .bcell--w3,.bcell--w2,.bcell--w4{ grid-column:span 1; } .bcell--h2{ grid-row:auto; } }
.bcell--accent{ background:radial-gradient(140% 130% at 100% 0%, var(--accent-soft), transparent 55%), var(--surface); border-color:var(--accent-line); }
.bcell__ico{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; color:var(--accent-bright); background:var(--accent-soft); border:1px solid var(--accent-line); }
.bcell__ico svg{ width:20px; height:20px; }
.bcell__tag{ position:absolute; top:var(--s5); right:var(--s5); font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--text-lo); }
.bcell__t{ font-family:var(--display); font-weight:600; font-size:18px; color:var(--text-hi); letter-spacing:-0.01em; margin-top:var(--s5); }
.bcell__d{ font-size:13.5px; color:var(--text-lo); margin-top:9px; line-height:1.6; max-width:42ch; }
.bcell__spacer{ flex:1; min-height:var(--s4); }

/* mini visual chips inside feature cells */
.minibars{ display:flex; align-items:flex-end; gap:7px; height:118px; margin-top:auto; padding-top:var(--s5); }
.minibars i{ flex:1; border-radius:6px 6px 0 0; background:linear-gradient(180deg, color-mix(in oklab,var(--accent-bright),white 18%), var(--accent-bright) 55%, var(--accent)); opacity:1; box-shadow:0 0 22px -5px var(--accent-glow); }
.minibars i:nth-child(even){ background:var(--surface-3); box-shadow:none; }
.miniline{ margin-top:auto; padding-top:var(--s5); }
.tagrow{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:var(--s5); }
.tagrow span{ font-size:11.5px; padding:5px 11px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--border); color:var(--text-mid); }

/* feature stat counters big cell */
.stackcell{ justify-content:flex-start; }
.fcount{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:auto; padding-top:var(--s6); }
.fcount__cell{ padding:14px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--border); }
.fcount__v{ font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-0.03em; color:var(--text-hi); line-height:1; }
.fcount__v .u{ color:var(--accent); }
.fcount__l{ font-size:11.5px; color:var(--text-lo); margin-top:7px; line-height:1.3; }