/* ==========================================================================
   InmoConnect - Landing Page v5
   Three-role tabbed landing (agent / developer / affiliate).
   Self-contained, no external dependencies.
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body.lp5-body{font-family:"Inter",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--page);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lp5-body a{text-decoration:none;color:inherit}
body.lp5-body button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
body.lp5-body img{max-width:100%}

:root{
  --ink:#16142e; --muted:#5b5872; --faint:#8b88a3;
  --page:#ffffff; --surface:#ffffff; --soft:#f6f5ff; --line:#eceaf9;
  --radius:18px; --maxw:1180px; --sb-maxw:1320px;
  --shadow-sm:0 1px 2px rgba(28,22,70,.06);
  --shadow:0 18px 40px -18px rgba(40,28,110,.22);
  --shadow-lg:0 30px 70px -25px rgba(40,28,110,.32);
  --accent:#4f46e5; --accent2:#6d63ff; --accent-soft:#eef0fe; --accent-ink:#2c2580;
  --hero:linear-gradient(150deg,#eef0fe 0%,#f6f3ff 55%,#fef6ff 100%);
  --glow:rgba(79,70,229,.55);
  --lp5-section-y:clamp(56px,5.5vw,72px);
  --lp5-section-x:26px;
  --lp5-section-head-space:clamp(36px,4vw,48px);
}
body[data-theme="agent"]{
  --ink:#0F172A;
  --muted:#64748B;
  --faint:#94A3B8;
  --page:#FFFFFF;
  --surface:#FFFFFF;
  --accent:#5856D6;
  --accent2:#6B69E8;
  --accent-soft:#EEF2FF;
  --accent-ink:#4338CA;
  --agent-orange:#F59E0B;
  --agent-orange-hover:#D97706;
  --soft:#F5F7FF;
  --line:#E0E7FF;
  --hero:linear-gradient(180deg,#F5F7FF 0%,#FFFFFF 100%);
  --glow:rgba(88,86,214,.22);
  --lp5-eyebrow-bg:#FFF7ED;
  --lp5-eyebrow-border:#FFEDD5;
  --lp5-eyebrow-dot:#F59E0B;
  --lp5-eyebrow-text:#D97706;
}
body[data-theme="agent"] .switch-pill{
  background:#5856D6;
  box-shadow:0 6px 16px -8px rgba(88,86,214,.35);
}
body[data-theme="agent"] .nav-cta.btn-primary{
  background:#5856D6;
  box-shadow:0 8px 18px -10px rgba(88,86,214,.26);
}
body[data-theme="agent"] .nav-cta.btn-primary:hover{
  background:#4338CA;
  box-shadow:0 10px 22px -10px rgba(88,86,214,.32);
}
body[data-theme="developer"]{
  --ink:#0F172A;
  --muted:#64748B;
  --faint:#94A3B8;
  --page:#F8FAFC;
  --surface:#FFFFFF;
  --soft:#F8FAFC;
  --line:#E2E8F0;
  --accent:#047857;
  --accent2:#059669;
  --accent-lime:#059669;
  --accent-soft:#F0FDF4;
  --accent-ink:#065F46;
  --hero:linear-gradient(180deg,#F8FAFC 0%,#F0FDF9 100%);
  --glow:rgba(4,120,87,.2);
  --lp5-eyebrow-bg:#ECFDF5;
  --lp5-eyebrow-border:#D1FAE5;
  --lp5-eyebrow-dot:#059669;
  --lp5-eyebrow-text:#047857;
}
body[data-theme="affiliate"]{
  --ink:#0F172A;
  --muted:#64748B;
  --faint:#94A3B8;
  --page:#F8FAFC;
  --surface:#FFFFFF;
  --soft:#F5F9FF;
  --line:#E2E8F0;
  --accent:#2563EB;
  --accent2:#3B82F6;
  --accent-cyan:#06B6D4;
  --accent-soft:#EFF6FF;
  --accent-ink:#1E40AF;
  --hero:linear-gradient(180deg,#F5F9FF 0%,#F8FAFC 100%);
  --glow:rgba(37,99,235,.22);
  --lp5-eyebrow-bg:#EFF6FF;
  --lp5-eyebrow-border:#DBEAFE;
  --lp5-eyebrow-dot:#2563EB;
  --lp5-eyebrow-text:#1D4ED8;
}

.display{font-family:"Bricolage Grotesque","Inter",sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.04;color:var(--ink)}
.eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
.lp5-eyebrow,
.vis-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px 5px 10px;margin-bottom:18px;
  border-radius:999px;
  background:var(--lp5-eyebrow-bg,#FFF7ED);
  border:1px solid var(--lp5-eyebrow-border,#FFEDD5)
}
.lp5-eyebrow-dot,
.vis-eyebrow-dot{
  width:6px;height:6px;flex:none;border-radius:50%;
  background:var(--lp5-eyebrow-dot,#F59E0B)
}
.lp5-eyebrow-text,
.vis-eyebrow-text{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.625rem;font-weight:700;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--lp5-eyebrow-text,#D97706)
}
.shead .lp5-eyebrow,
.feat-head .lp5-eyebrow,
.how-head .lp5-eyebrow,
.why-head .lp5-eyebrow,
.cs-head .lp5-eyebrow,
.faq-aside .lp5-eyebrow{margin-bottom:12px}
.contact-copy .lp5-eyebrow{margin-bottom:16px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

/* ============ HEADER ============ */
header.nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.86);backdrop-filter:saturate(190%) blur(18px);-webkit-backdrop-filter:saturate(190%) blur(18px);border-bottom:1px solid transparent;box-shadow:0 1px 0 rgba(255,255,255,.6) inset;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
header.nav.is-scrolled{background:rgba(255,255,255,.97);border-bottom-color:var(--line);box-shadow:0 10px 30px -20px rgba(40,28,110,.18)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;gap:12px}

.brand{display:inline-flex;align-items:center;text-decoration:none;flex:none;color:var(--ink)}
.brand-logo{display:block;width:auto;height:24px;max-width:min(148px,30vw);object-fit:contain;object-position:left center}

.nav-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vw,18px);min-width:0;overflow:visible}
.switcher{display:inline-flex;gap:3px;background:var(--soft);border:1px solid var(--line);padding:3px;border-radius:12px;position:relative;flex:none;overflow:visible;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.switcher-item{position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;justify-content:center;padding:7px 14px;font-family:"Bricolage Grotesque","Inter",sans-serif;font-size:.81rem;font-weight:650;letter-spacing:-.015em;color:var(--muted);border-radius:9px;transition:color .2s,background .2s,transform .1s;white-space:nowrap;text-decoration:none}
.switcher-item.on{color:#fff}
.switcher-item:not(.on):hover{color:var(--ink);background:rgba(255,255,255,.65)}
.switcher-item:hover,.switcher-item:focus-visible{z-index:12}
.switcher-item[data-role-link="agent"]:not(.on):hover{color:#4338CA}
.switcher-item[data-role-link="agent"]:not(.on):hover .switcher-icon{color:#4338CA}
.switcher-item[data-role-link="developer"]:not(.on):hover{color:#047857}
.switcher-item[data-role-link="affiliate"]:not(.on):hover{color:#2563EB}
.switcher-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.switcher-icon{width:16px;height:16px;flex:none;opacity:1;transition:opacity .2s,transform .2s,color .2s;display:block;color:inherit}
.switcher-icon path,.drawer-role-icon path{fill:currentColor}
.drawer-role-icon{width:18px;height:18px;flex:none;display:block;color:inherit}
.switcher-item:not(.on) .switcher-icon{color:#16142E;opacity:.88}
.switcher-item.on .switcher-icon{opacity:1;color:#fff}
.switcher-item:hover .switcher-icon{opacity:1}
.switcher-item .switcher-label{line-height:1}

.switcher-tip{
  position:absolute;top:calc(100% + 9px);left:50%;z-index:20;
  width:max-content;min-width:196px;max-width:232px;padding:11px 13px 12px;
  border:1px solid var(--line);border-radius:13px;background:#fff;
  box-shadow:0 16px 40px -14px rgba(40,28,110,.24),0 6px 16px -10px rgba(28,22,70,.12);
  text-align:center;pointer-events:none;white-space:normal;line-height:1.35;
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(6px) scale(.97);
  transition:opacity .22s ease,transform .28s cubic-bezier(.2,.7,.2,1),visibility .22s ease
}
.switcher-tip::before{
  content:"";position:absolute;left:50%;top:-6px;width:11px;height:11px;
  background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg);border-radius:2px 0 0 0
}
.switcher-tip strong{
  display:block;margin-bottom:5px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase
}
.switcher-tip>span{
  display:block;font-size:.78rem;font-weight:500;color:var(--muted);letter-spacing:-.01em
}
.switcher-item[data-role-link="agent"] .switcher-tip strong{color:#4338CA}
.switcher-item[data-role-link="developer"] .switcher-tip strong{color:#047857}
.switcher-item[data-role-link="affiliate"] .switcher-tip strong{color:#2563EB}
.switcher-item[data-role-link="agent"] .switcher-tip{border-top:2px solid #5856D6}
.switcher-item[data-role-link="developer"] .switcher-tip{border-top:2px solid #047857}
.switcher-item[data-role-link="affiliate"] .switcher-tip{border-top:2px solid #2563EB}
.switcher-item:hover .switcher-tip,.switcher-item:focus-visible .switcher-tip{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1)
}
.switch-pill{position:absolute;z-index:1;top:3px;height:calc(100% - 6px);border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));transition:transform .42s cubic-bezier(.65,.05,.2,1),width .42s cubic-bezier(.65,.05,.2,1),background .3s;box-shadow:0 6px 16px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
@media(hover:none){
  .switcher-tip{display:none}
}
@media(prefers-reduced-motion:reduce){
  .switcher-tip{transition:none}
  .switcher-item:hover .switcher-tip,.switcher-item:focus-visible .switcher-tip{transform:translateX(-50%)}
}
@media(hover:none){
  .switcher-tip{display:none}
}

.nav-explore{display:flex;align-items:center;gap:2px;flex:none}
.nav-explore-link{padding:4px 8px;font-size:.78rem;font-weight:550;color:var(--muted);border-radius:8px;text-decoration:none;white-space:nowrap;transition:color .2s,background .2s}
.nav-explore-link:hover{color:var(--accent-ink);background:var(--accent-soft)}
.nav-pricing-item[hidden],.nav-pricing-sep[hidden],[data-nav-features][hidden]{display:none!important}

.nav-right{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.nav-lang{display:inline-flex;align-items:center;gap:1px;padding:3px 7px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:.74rem;font-weight:650;flex:none}
.lang-opt{color:var(--muted);text-decoration:none;padding:2px 4px;border-radius:5px;transition:color .2s,background .2s}
.lang-opt.is-on{color:var(--accent-ink);background:var(--accent-soft)}
.lang-opt:hover{color:var(--accent-ink)}
.lang-sep{color:var(--faint);font-size:.7rem;user-select:none}
.nav-signin{font-size:.8rem;color:var(--muted);font-weight:550;padding:4px 2px;transition:color .2s;text-decoration:none;white-space:nowrap}
.nav-signin:hover{color:var(--accent)}
body.lp5-body .nav-cta{padding:7px 13px 7px 14px;font-size:.8rem;border-radius:9px;box-shadow:0 8px 20px -10px var(--glow);gap:5px}
body.lp5-body .nav-cta:hover{transform:translateY(-1px)}
body.lp5-body .nav-cta .nav-cta-arrow{width:13px;height:13px;flex:none;transition:transform .2s ease}
body.lp5-body .nav-cta:hover .nav-cta-arrow{transform:translateX(2px)}

.hamb{display:none;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);flex:none;transition:border-color .2s,background .2s}
.hamb:hover{border-color:var(--accent);background:var(--accent-soft)}
.hamb-lines{display:grid;gap:5px;width:16px}
.hamb-lines i{display:block;height:2px;border-radius:99px;background:currentColor;transition:transform .25s,opacity .25s}
header.nav.is-menu-open .hamb-lines i:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav.is-menu-open .hamb-lines i:nth-child(2){opacity:0}
header.nav.is-menu-open .hamb-lines i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Explore links — scroll sub-nav only */
.nav-sub{
  border-top:1px solid color-mix(in srgb,var(--accent) 10%,var(--line));
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,color-mix(in srgb,var(--accent-soft) 38%,#fff) 100%);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 10px 24px -20px rgba(40,28,110,.18);
  animation:navSubIn .35s cubic-bezier(.2,.7,.2,1)
}
.nav-sub[hidden]{display:none!important}
.nav-sub-in{
  max-width:var(--maxw);margin:0 auto;padding:4px 16px;
  display:flex;justify-content:center;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none
}
.nav-sub-in::-webkit-scrollbar{display:none}
.nav-sub-track{
  display:inline-flex;align-items:center;gap:3px;flex-wrap:nowrap;
  padding:3px;border-radius:999px;
  background:color-mix(in srgb,var(--accent-soft) 55%,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85)
}
.nav-sub-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;
  font-size:.74rem;font-weight:650;letter-spacing:-.01em;
  color:var(--muted);text-decoration:none;white-space:nowrap;
  transition:color .22s,background .22s,box-shadow .22s,transform .22s
}
.nav-sub-icon{width:13px;height:13px;flex:none;opacity:.72;transition:opacity .22s,transform .22s}
.nav-sub-chip:hover{
  color:var(--accent-ink);background:rgba(255,255,255,.72);
  transform:translateY(-1px)
}
.nav-sub-chip:hover .nav-sub-icon{opacity:1}
.nav-sub-chip.is-active{
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 18px -10px var(--glow)
}
.nav-sub-chip.is-active .nav-sub-icon{opacity:1;color:#fff}
.nav-sub-link{padding:6px 12px;font-size:.8rem;font-weight:550;color:var(--muted);border-radius:8px;text-decoration:none;transition:color .2s,background .2s}
.nav-sub-link:hover{color:var(--accent-ink);background:var(--accent-soft)}
.nav-sub-sep{width:1px;height:12px;background:var(--line);flex:none;margin:0 2px}
@keyframes navSubIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Mobile drawer */
.nav-drawer{position:fixed;inset:0;z-index:200;pointer-events:none}
.nav-drawer[hidden]{display:none!important}
.nav-drawer.is-open{pointer-events:auto}
.nav-drawer-backdrop{position:absolute;inset:0;border:none;background:rgba(22,20,46,.42);opacity:0;transition:opacity .28s ease;cursor:pointer}
.nav-drawer.is-open .nav-drawer-backdrop{opacity:1}
.nav-drawer-panel{
  position:absolute;top:0;right:0;width:min(340px,92vw);height:100%;
  max-height:100dvh;
  background:#fff;border-left:1px solid var(--line);
  box-shadow:-20px 0 50px -20px rgba(40,28,110,.22);
  padding:max(16px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(104%);transition:transform .32s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;gap:16px
}
.brand-mark{width:24px;height:24px;flex:none;object-fit:contain}
.nav-drawer.is-open .nav-drawer-panel{transform:none}
.nav-drawer-head{display:flex;align-items:center;gap:10px}
.nav-drawer-title{font-family:"Bricolage Grotesque","Inter",sans-serif;font-weight:700;font-size:1rem;color:var(--ink);flex:1}
.nav-drawer-close{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:1.3rem;line-height:1;color:var(--muted);margin-left:auto}
.nav-drawer-label{font-size:.74rem;font-weight:600;color:var(--faint);margin:0;text-transform:uppercase;letter-spacing:.06em}
.nav-drawer-lang{display:flex;gap:8px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.nav-drawer-lang .lang-opt{flex:1;text-align:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:.82rem;font-weight:600;color:var(--muted);text-decoration:none;background:var(--soft)}
.nav-drawer-lang .lang-opt.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.nav-drawer-roles{display:grid;gap:7px}
.drawer-role{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--soft);text-decoration:none;color:var(--muted);transition:border-color .2s,background .2s}
.drawer-role span{display:grid;line-height:1.2}
.drawer-role b{font-family:"Bricolage Grotesque","Inter",sans-serif;font-size:.88rem;font-weight:700;color:var(--ink)}
.drawer-role small{font-size:.72rem;font-weight:500;color:var(--muted)}
.drawer-role.on,.drawer-role:hover{border-color:var(--accent);background:var(--accent-soft)}
.drawer-role.on b{color:var(--accent-ink)}
.drawer-role-icon{width:18px;height:18px;flex:none;opacity:.85}
.drawer-role.on .drawer-role-icon,.drawer-role:hover .drawer-role-icon{opacity:1}
.nav-drawer-links{display:grid;gap:2px;padding-top:4px}
.nav-drawer-links a{padding:10px 12px;border-radius:9px;font-size:.88rem;font-weight:550;color:var(--ink);text-decoration:none}
.nav-drawer-links a:hover{background:var(--soft);color:var(--accent-ink)}
.nav-drawer-foot{margin-top:auto;display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.nav-drawer-foot .nav-signin{text-align:center;padding:6px}
.nav-drawer-cta{justify-content:center;width:100%;padding:12px 18px}
body.nav-menu-open{overflow:hidden}

body.lp5-body .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.9rem;border-radius:11px;padding:11px 19px;transition:transform .2s,box-shadow .25s,background .25s,color .25s,border-color .25s;cursor:pointer;line-height:1.2;text-decoration:none}
body.lp5-body .btn:active{transform:translateY(1px)}
body.lp5-body .btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px -10px var(--glow)}
body.lp5-body .btn-primary:hover{background:var(--accent-ink);box-shadow:0 16px 30px -10px var(--glow);color:#fff}
body.lp5-body .btn-ghost{color:var(--ink);border:1px solid var(--line);background:#fff}
body.lp5-body .btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:#fff}
body.lp5-body .btn-sm{padding:9px 16px;font-size:.85rem}
body.lp5-body .btn-white{background:#fff;color:var(--accent-ink)}
body.lp5-body .btn-white:hover{background:#fff;color:var(--accent-ink)}

.page{display:none}
.page.active{display:block;animation:pageIn .55s ease}
.page.active.page-return{display:block;animation:none}
#lp5-pages{transition:opacity .2s ease}
#lp5-pages.lp5-role-loading{opacity:.72;pointer-events:none}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
section{padding:var(--lp5-section-y) var(--lp5-section-x)}
.in{max-width:var(--maxw);margin:0 auto}
.how-section .in,
.why-section .in,
.vis-section .in,
.coming-soon-section .in{
  padding-left:var(--lp5-section-x);
  padding-right:var(--lp5-section-x)
}

/* ============ HERO ============ */
.hero{background:var(--hero);padding:38px var(--lp5-section-x) calc(var(--lp5-section-y) * .85);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:520px;height:520px;right:-120px;top:-160px;background:radial-gradient(circle,var(--glow),transparent 68%);opacity:.22;pointer-events:none}
.hero-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;position:relative}
.reveal{opacity:0;transform:translateY(16px)}
.page.active .reveal{animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero-visual-slot.reveal,
.page.active .hero-visual-slot.reveal{
  opacity:1;transform:none;animation:none!important
}
.r1{animation-delay:.02s}.r2{animation-delay:.1s}.r3{animation-delay:.18s}.r4{animation-delay:.26s}.r5{animation-delay:.34s}.r5b{animation-delay:.38s}.r6{animation-delay:.46s}
@keyframes rise{to{opacity:1;transform:none}}

.hero-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg);overflow:hidden}
.hc-media{height:152px;background:linear-gradient(135deg,var(--accent-soft),#fff);position:relative}
.hc-pill{position:absolute;top:13px;left:13px;background:#fff;border:1px solid var(--line);color:var(--accent-ink);font-size:.72rem;font-weight:600;padding:5px 11px;border-radius:8px;box-shadow:var(--shadow-sm)}
.hc-body{padding:20px}
.hc-price{font-family:"Bricolage Grotesque";font-weight:700;font-size:1.55rem;color:var(--ink)}
.hc-title{font-weight:600;margin:2px 0 9px;color:var(--ink)}
.hc-meta{display:flex;gap:16px;color:var(--muted);font-size:.85rem}
.hc-div{height:1px;background:var(--line);margin:15px 0}
.hc-row{display:flex;justify-content:space-between;align-items:center;font-size:.86rem;gap:12px}
.hc-row .k{color:var(--faint)}
.hc-row .v{font-weight:600;color:var(--accent-ink);text-align:right}
.hc-bar{height:8px;border-radius:99px;background:var(--accent-soft);overflow:hidden;margin:10px 0 15px}
.hc-bar span{display:block;height:100%;border-radius:99px;background:var(--accent)}
.hc-browser{display:flex;align-items:center;gap:9px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.72rem;color:var(--muted);margin-bottom:14px;overflow:hidden;white-space:nowrap}
.hc-dot3{display:flex;gap:4px;flex:none}
.hc-dot3 i{width:8px;height:8px;border-radius:50%;background:var(--line);display:inline-block}
.hc-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:15px}
.hc-thumb{height:78px;border-radius:13px;background:linear-gradient(135deg,var(--accent-soft),#fff);border:1px solid var(--line);position:relative}
.hc-thumb b{position:absolute;bottom:9px;left:11px;font-size:.8rem;color:var(--ink)}
.hc-live{color:var(--accent);font-weight:700}

/* ============ SIGNAL BAND (full-width stats + integrations) ============ */
.signal-band{width:100%;margin:0;padding:0}

.sb-in{max-width:var(--maxw);margin:0 auto;padding:0 26px;width:100%}

.sb-stats-band{
  position:relative;width:100%;padding:28px 0;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 72%,#e4e2f4) 0%,color-mix(in srgb,var(--accent) 10%,#f3f2fa) 52%,color-mix(in srgb,var(--accent-soft) 58%,#eeeaf8) 100%);
  border-top:1px solid color-mix(in srgb,var(--accent) 10%,var(--line));
  border-bottom:1px solid color-mix(in srgb,var(--accent) 14%,var(--line))
}
.sb-stats-band::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));
  box-shadow:0 0 16px -4px var(--glow)
}
.sb-band-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 90% at 8% 50%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 68%),
    radial-gradient(ellipse 45% 80% at 92% 40%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 70%)
}
.sb-band-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 0);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)
}
.sb-band-orb{
  position:absolute;border-radius:50%;pointer-events:none;filter:blur(42px);opacity:.55
}
.sb-band-orb-1{width:220px;height:220px;left:-70px;top:-90px;background:color-mix(in srgb,var(--accent) 35%,transparent)}
.sb-band-orb-2{width:180px;height:180px;right:8%;bottom:-100px;background:color-mix(in srgb,var(--accent2) 30%,transparent)}
.sb-band-graphic{
  position:absolute;right:0;top:0;width:min(48%,520px);height:100%;pointer-events:none;
  color:var(--accent);opacity:.9
}

.sb-stats{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%
}
.sb-stat{
  position:relative;display:grid;justify-items:center;gap:6px;text-align:center;
  padding:10px clamp(10px,2vw,24px)
}
.sb-stat:not(:last-child)::after{
  content:"";position:absolute;right:0;top:18%;height:64%;width:1px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 22%,var(--line)),transparent)
}

.sb-stat-icon{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:1px solid color-mix(in srgb,var(--accent) 20%,#fff);
  box-shadow:0 8px 20px -10px var(--glow)
}
.sb-stat-icon svg{width:18px;height:18px}
.sb-stat-val{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(1.35rem,2.4vw,1.75rem);
  line-height:1;letter-spacing:-.03em;color:var(--ink)
}
.sb-stat-label{
  font-size:.8rem;line-height:1.35;color:var(--muted);max-width:16ch;margin:0 auto
}

.sb-integ-band{
  position:relative;width:100%;padding:10px 0 12px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface) 0%,color-mix(in srgb,var(--accent-soft) 14%,#fff) 100%);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 8%,var(--line))
}
.sb-integ-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--accent) 7%,transparent) 1px,transparent 0);
  background-size:18px 18px
}
.sb-integ-wrap{
  position:relative;z-index:1;display:flex;align-items:center;gap:10px;flex-wrap:nowrap
}
.sb-integ-badge{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--accent-soft) 45%,#fff));
  border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  box-shadow:0 6px 16px -14px var(--glow)
}
.sb-integ-badge-pulse{
  width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 35%,transparent);
  animation:howLivePulse 2.2s ease-out infinite
}
.sb-integ-badge-text{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.58rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-ink);font-weight:700;line-height:1
}
.sb-integ-list{
  list-style:none;flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;
  margin:0;padding:0;min-width:0
}
.sb-integ-card{
  position:relative;display:flex;align-items:center;gap:8px;min-height:0;padding:6px 9px 6px 7px;
  border-radius:11px;text-align:left;overflow:hidden;
  background:linear-gradient(160deg,#fff 0%,color-mix(in srgb,var(--accent-soft) 18%,#fff) 100%);
  border:1px solid color-mix(in srgb,var(--accent) 9%,var(--line));
  box-shadow:0 4px 14px -12px rgba(40,28,110,.12);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease
}
.sb-integ-card:hover{
  border-color:color-mix(in srgb,var(--accent) 22%,var(--line));
  box-shadow:0 8px 20px -14px var(--glow);
  transform:translateY(-1px)
}
.sb-integ-icon{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  color:#fff;background:linear-gradient(145deg,var(--accent),var(--accent2));
  box-shadow:0 4px 12px -8px var(--glow)
}
.sb-integ-icon svg{width:16px;height:16px;stroke:currentColor}
.sb-integ-text{
  font-size:.76rem;font-weight:600;color:var(--ink);line-height:1.2;
  letter-spacing:-.01em
}

/* Legacy aliases (unused markup) */
.proof,.integ{display:none}

@media(max-width:900px){
  .sb-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .sb-stat:nth-child(2)::after{display:none}
  .sb-integ-wrap{flex-wrap:wrap;align-items:center;gap:8px}
  .sb-integ-list{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
}
@media(max-width:640px){
  .sb-in{padding:0 20px}
  .sb-stats-band{padding:24px 0 22px}
  .sb-stats-card{border-radius:18px;padding:24px 14px}
  .sb-stat-icon{width:44px;height:44px}
  .sb-stat-icon svg{width:18px;height:18px}
  .sb-band-graphic{width:min(62%,280px);opacity:.65}
  .sb-band-orb-1{width:160px;height:160px}
  .sb-band-orb-2{width:130px;height:130px}
  .sb-integ-band{padding:8px 0 10px}
  .sb-integ-list{grid-template-columns:1fr 1fr;gap:6px}
  .sb-integ-card{padding:6px 8px 6px 6px;gap:7px}
  .sb-integ-icon{width:28px;height:28px;border-radius:8px}
  .sb-integ-icon svg{width:15px;height:15px}
  .sb-integ-text{font-size:.74rem}
}
@media(max-width:480px){
  .sb-stats{grid-template-columns:1fr;gap:14px}
  .sb-stat::after{display:none!important}
  .sb-integ-list{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .sb-integ-card{transition:none}
  .sb-integ-card:hover{transform:none}
  .sb-integ-badge-pulse{animation:none}
}

/* ============ SECTIONS ============ */
.shead{max-width:680px;margin-bottom:var(--lp5-section-head-space)}
.shead .display,
.shead h2.display{
  font-family:"DM Sans","Inter",sans-serif;
  font-weight:800;
  font-size:clamp(1.85rem,3.4vw,2.5rem);
  letter-spacing:-.032em;
  line-height:1.12;
  margin:12px 0 14px;
  color:#0F172A
}
.shead p{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:1rem;
  line-height:1.65;
  color:#64748B;
  max-width:52ch;
  margin:0 auto
}
.center{margin-left:auto;margin-right:auto;text-align:center}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;position:relative;transition:transform .25s,box-shadow .25s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.step .n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.78rem;color:var(--accent);font-weight:500;border:1px solid var(--accent-soft);background:var(--accent-soft);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px}
.step h3{font-size:1.06rem;margin-bottom:7px;font-weight:600}
.step p{font-size:.92rem;color:var(--muted)}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:transform .25s,box-shadow .25s,border-color .25s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent-soft)}
.feat .ic{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);display:grid;place-items:center;font-size:1.4rem;margin-bottom:16px}
.feat h3{font-size:1.05rem;margin-bottom:8px;font-weight:600}
.feat p{font-size:.93rem;color:var(--muted)}
.feat .chip{display:inline-block;margin-top:13px;font-size:.78rem;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);padding:5px 11px;border-radius:8px}

/* ============================================================
   FEATURES — Agent capability grid
   ============================================================ */
.features-section{
  position:relative;padding:var(--lp5-section-y) var(--lp5-section-x);overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--soft) 55%,#fff) 48%,#fff 100%);
  border-top:1px solid color-mix(in srgb,var(--accent) 5%,var(--line))
}
.feat-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.feat-bg-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 55% 60% at 50% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),
    radial-gradient(ellipse 40% 50% at 92% 88%,color-mix(in srgb,var(--accent2) 7%,transparent),transparent 72%)
}
.feat-bg-grid{
  position:absolute;inset:0;opacity:.32;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 0);
  background-size:24px 24px;
  mask-image:linear-gradient(180deg,#000 8%,transparent 94%);
  -webkit-mask-image:linear-gradient(180deg,#000 8%,transparent 94%)
}
.feat-bg-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35}
.feat-bg-orb-1{width:min(280px,38vw);height:min(280px,38vw);left:-8%;top:12%;background:color-mix(in srgb,var(--accent) 24%,transparent)}
.feat-bg-orb-2{width:min(220px,30vw);height:min(220px,30vw);right:-4%;bottom:8%;background:color-mix(in srgb,var(--accent2) 18%,transparent)}
.features-section .in{position:relative;z-index:1}

.feat-head{max-width:720px;margin:0 auto var(--lp5-section-head-space);text-align:center}
.feat-head .display{margin:12px 0 14px;font-size:clamp(1.85rem,3.6vw,2.75rem);letter-spacing:-.02em;line-height:1.12}
.feat-lede{font-size:1.04rem;color:var(--muted);line-height:1.65;max-width:580px;margin:0 auto}

.feat-band{position:relative}
.feat-band--spotlight{margin-bottom:36px}
.feat-band--core{
  padding-top:36px;
  border-top:1px solid color-mix(in srgb,var(--accent) 8%,var(--line))
}
.feat-band--core::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:min(120px,24vw);height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)
}

.feat-grid--spotlight,.feat-grid--core{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat-grid--spotlight{gap:22px;margin-bottom:4px}

.features-section .feat{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;
  background:rgba(255,255,255,.92);
  border:1px solid color-mix(in srgb,var(--accent) 9%,var(--line));
  box-shadow:0 1px 2px rgba(28,22,70,.04),0 16px 40px -28px rgba(40,28,110,.18);
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,border-color .32s,background .32s;
  will-change:transform
}
.features-section .feat:hover{
  transform:translateY(-8px);
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line));
  box-shadow:0 4px 10px rgba(28,22,70,.07),0 32px 64px -18px var(--glow)
}

.features-section .feat.feat--spotlight{
  min-height:100%;
  padding:24px 28px 26px;
  background:linear-gradient(165deg,#fff 0%,color-mix(in srgb,var(--accent-soft) 28%,#fff) 100%);
  border-color:color-mix(in srgb,var(--accent) 14%,var(--line))
}
.features-section .feat.feat--spotlight::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,transparent 42%);
  opacity:.7;transition:opacity .32s
}
.features-section .feat.feat--spotlight:hover{
  background:linear-gradient(165deg,#fff 0%,color-mix(in srgb,var(--accent-soft) 42%,#fff) 100%)
}
.features-section .feat.feat--spotlight:hover::after{opacity:.45}

.features-section .feat.feat--core{
  padding:28px 26px 26px;
  background:rgba(255,255,255,.86)
}
.features-section .feat.feat--core:hover{background:#fff}

.features-section .feat-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:20px;position:relative;z-index:1
}
.features-section .feat .ic{
  width:52px;height:52px;border-radius:15px;margin-bottom:0;flex:none;
  color:#fff;
  background:linear-gradient(145deg,var(--accent),var(--accent2));
  box-shadow:0 10px 24px -12px var(--glow),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s
}
.features-section .feat:hover .ic{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 16px 32px -12px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)
}
.features-section .feat .ic svg{width:24px;height:24px;stroke:currentColor}
.features-section .feat .ic svg[data-lp5-filled="true"],
.features-section .feat .ic svg.lp5-svg-filled{width:22px;height:22px;stroke:none;display:block}
.features-section .feat .ic svg[data-lp5-filled="true"] path,
.features-section .feat .ic svg.lp5-svg-filled path{fill:currentColor}
.features-section .feat .ic svg[data-lp5-stroke="true"] path{fill:none;stroke:currentColor}
.features-section .feat .ic--soft svg{width:21px;height:21px}
.features-section .feat .ic--soft svg[data-lp5-filled="true"],
.features-section .feat .ic--soft svg.lp5-svg-filled{width:20px;height:20px}
.features-section .feat .ic--soft{
  width:46px;height:46px;border-radius:13px;
  color:var(--accent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent-soft) 90%,#fff),var(--accent-soft));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 16px -12px var(--glow)
}
.features-section .feat .ic--soft svg{width:21px;height:21px}

.features-section .feat-eyebrow{
  font-size:.72rem;font-weight:600;color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em;
  flex-shrink:0;text-align:right;line-height:1.35;
  padding-top:6px;max-width:42%
}

.features-section .feat h3{
  position:relative;z-index:1;
  font-family:"Bricolage Grotesque",sans-serif;font-size:1.12rem;font-weight:700;
  letter-spacing:-.01em;margin:0 0 12px;color:var(--ink);
  transition:color .25s
}
.features-section .feat.feat--spotlight h3{font-size:1.22rem;margin-bottom:14px}
.features-section .feat:hover h3{color:var(--accent-ink)}
.features-section .feat p{
  position:relative;z-index:1;margin:0;
  font-size:.93rem;line-height:1.62;color:var(--muted)
}
.features-section .feat.feat--spotlight p{font-size:.95rem;line-height:1.65}

/* Feature Spotlight Visuals */
.feat-visual {
  height: 125px;
  background: rgba(244, 245, 253, 0.45);
  border-radius: 14px;
  border: 1px solid rgba(80, 80, 188, 0.05);
  overflow: hidden;
  position: relative;
  margin: 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.features-section .feat:hover .feat-visual {
  background: rgba(244, 245, 253, 0.8);
  border-color: rgba(80, 80, 188, 0.12);
}

/* 1. Acquisition Visual */
.mini-kanban {
  display: flex;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 10px;
}
.kb-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(80, 80, 188, 0.03);
  padding: 6px;
  border-radius: 8px;
}
.kb-col-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.52rem;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.kb-card {
  background: #fff;
  border-radius: 6px;
  padding: 5px 6px;
  border: 1px solid rgba(80, 80, 188, 0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.01);
  position: relative;
}
.kb-card-bar {
  height: 3px;
  width: 12px;
  border-radius: 1.5px;
}
.kb-card-bar.yellow { background: #eab308; }
.kb-card-bar.purple { background: #5050bc; }
.kb-card-bar.green { background: #10b981; }

.kb-card-title {
  font-size: 0.56rem;
  font-weight: 600;
  color: #1c1646;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-check {
  position: absolute;
  right: 6px;
  bottom: 3px;
  color: #10b981;
  font-size: 0.62rem;
  font-weight: 800;
}

.kb-card.drag-anim {
  animation: feat-drag-loop 4s infinite ease-in-out;
}
.kb-card.success-fade {
  animation: feat-success-loop 4s infinite ease-in-out;
}
@keyframes feat-drag-loop {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(14px, -2px) rotate(1.5deg); box-shadow: 0 6px 12px rgba(80,80,188,0.1); border-color: #5050bc; }
}
@keyframes feat-success-loop {
  0%, 100% { background: #fff; border-color: rgba(80, 80, 188, 0.06); }
  50% { background: #f0fdf4; border-color: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.12); }
}

/* Developer & affiliate spotlight visuals */
.feat-bulk,.feat-realinmo,.feat-units,.feat-referral,.feat-inbox{width:100%;padding:10px 12px}
.feat-realinmo{display:grid;gap:8px}
.feat-realinmo-portal{padding:8px 10px;border-radius:10px;background:linear-gradient(135deg,#1c155c 0%,#383192 55%,#5b52c4 100%);color:#fff;box-shadow:0 8px 18px -10px rgba(56,49,146,.45)}
.feat-realinmo-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.feat-realinmo-brand{font-family:"Bricolage Grotesque",sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.01em}
.feat-realinmo-url{font-family:"JetBrains Mono",monospace;font-size:.5rem;opacity:.78}
.feat-realinmo-listing{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.feat-realinmo-unit{font-size:.58rem;font-weight:700;line-height:1.3}
.feat-realinmo-views{font-family:"JetBrains Mono",monospace;font-size:.5rem;font-weight:700;color:#c4b5fd;white-space:nowrap}
.feat-realinmo-loop{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.feat-realinmo-loop span{padding:5px 4px;border-radius:999px;text-align:center;font-size:.48rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:#fff;border:1px solid rgba(80,80,188,.08);color:#6b7280}
.feat-realinmo-loop span.is-done{background:#f0fdf4;color:#059669;border-color:rgba(16,185,129,.18)}
.feat-realinmo-loop span.is-on{background:rgba(80,80,188,.08);color:#383192;border-color:rgba(80,80,188,.18);animation:featRealinmoPulse 2s ease-in-out infinite}
@keyframes featRealinmoPulse{0%,100%{box-shadow:0 0 0 0 rgba(80,80,188,0)}50%{box-shadow:0 0 0 3px rgba(80,80,188,.12)}}
.feat-realinmo-lead{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;background:#fff;border:1px solid rgba(80,80,188,.08)}
.feat-realinmo-lead-dot{width:7px;height:7px;border-radius:50%;background:#10b981;flex:none;box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.feat-realinmo-lead-copy{flex:1;font-size:.58rem;font-weight:600;color:#1c1646}
.feat-realinmo-lead small{font-family:"JetBrains Mono",monospace;font-size:.48rem;font-weight:700;color:#5050bc;text-transform:uppercase}
.feat-bulk{display:grid;gap:8px}
.feat-bulk-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:#fff;border:1px solid rgba(80,80,188,.06)}
.feat-bulk-tag{font-family:"JetBrains Mono",monospace;font-size:.56rem;font-weight:700;color:#5050bc;text-transform:uppercase}
.feat-bulk-val{font-size:.62rem;font-weight:600;color:#1c1646}
.feat-bulk-progress{display:flex;justify-content:space-between;align-items:center;font-size:.58rem;color:#6b7280}
.feat-bulk-progress b{font-family:"JetBrains Mono",monospace;color:#5050bc}
.feat-bulk-bar{height:6px;border-radius:999px;background:rgba(80,80,188,.08);overflow:hidden}
.feat-bulk-bar span{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#5050bc,#7c6ee8);animation:featBulkFill 2.4s ease-in-out infinite alternate}
@keyframes featBulkFill{from{transform:scaleX(.72);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
.feat-units{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.feat-unit{display:grid;gap:4px;padding:8px 6px;border-radius:10px;background:#fff;border:1px solid rgba(80,80,188,.08);text-align:center}
.feat-unit span{font-size:.72rem;font-weight:800;color:#1c1646}
.feat-unit small{font-size:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.feat-unit.is-available small{color:#10b981}
.feat-unit.is-reserved small{color:#f59e0b}
.feat-unit.is-sold small{color:#5050bc}
.feat-referral{display:grid;gap:8px;width:100%}
.feat-referral .hw-v3-referral{width:100%}
.feat-referral .hw-v3-payout{margin:0}
.feat-inbox{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.feat-inbox li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;background:#fff;border:1px solid rgba(80,80,188,.06);font-size:.58rem;font-weight:600;color:#1c1646}
.feat-inbox li small{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:.5rem;color:#5050bc;text-transform:uppercase}
.feat-inbox-dot{width:7px;height:7px;border-radius:50%;background:#10b981;flex:none}
.feat-inbox-dot.is-warm{background:#f59e0b}

/* 2. Pipeline Visual */
.mini-pipeline-panel {
  width: 90%;
  height: 90%;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(80, 80, 188, 0.08);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(80, 80, 188, 0.02);
  text-align: left;
}
.pl-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pl-panel-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: #1c1646;
}
.pl-panel-progress {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.48rem;
  font-weight: 600;
  color: #5050bc;
}
.pl-progress-bar-container {
  height: 4px;
  background: #f3f4f6;
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}
.pl-progress-fill {
  height: 100%;
  width: 65%;
  background: #5050bc;
  border-radius: 2px;
}
.pl-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pl-task-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.52rem;
  padding: 3px 5px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.pl-task-row.completed {
  background: rgba(16, 185, 129, 0.04);
  color: #047857;
}
.pl-task-row.completed .pl-task-check {
  font-size: 0.55rem;
  font-weight: 800;
  color: #10b981;
}
.pl-task-row.active {
  background: rgba(80, 80, 188, 0.04);
  color: #3b3be6;
  border-color: rgba(80, 80, 188, 0.15);
  animation: pl-row-pulse 2s infinite ease-in-out;
}
@keyframes pl-row-pulse {
  0%, 100% { border-color: rgba(80, 80, 188, 0.15); background: rgba(80, 80, 188, 0.04); }
  50% { border-color: rgba(80, 80, 188, 0.45); background: rgba(80, 80, 188, 0.08); }
}
.pl-task-row.active .pl-task-bullet {
  width: 5px;
  height: 5px;
  background-color: #5050bc;
  border-radius: 50%;
  animation: pl-active-dot 1.5s infinite ease-in-out;
}
@keyframes pl-active-dot {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
}
.pl-task-row.pending {
  color: #9ca3af;
}
.pl-task-row.pending .pl-task-bullet {
  width: 5px;
  height: 5px;
  background-color: #d1d5db;
  border-radius: 50%;
}

/* 3. Portfolio Showcase Browser Visual */
/* (Replaced by clean, modern pre-existing .hw-v3 layout) */

.features-section .feat-checklist {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.features-section .feat-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.25s ease;
}
.features-section .feat:hover .feat-check-item {
  color: var(--accent-ink);
}
.features-section .feat-check-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}
.features-section .feat:hover .feat-check-icon {
  background: #10b981;
  color: #fff;
  transform: scale(1.08);
}
.features-section .feat-check-text {
  line-height: 1.3;
}

/* Agent features — very light warm wash, minimal orange accents */
body[data-theme="agent"] .features-section[data-feat-scene="agent"]{
  background:linear-gradient(180deg,#fff 0%,#FFFEFC 42%,#FFFCF8 58%,#fff 100%);
  border-top-color:color-mix(in srgb,var(--agent-orange) 6%,var(--line))
}
body[data-theme="agent"] .features-section[data-feat-scene="agent"] .feat-bg-glow{
  background:
    radial-gradient(ellipse 55% 60% at 50% 0%,rgba(251,191,36,.03),transparent 70%),
    radial-gradient(ellipse 40% 50% at 92% 88%,rgba(245,158,11,.025),transparent 72%)
}
body[data-theme="agent"] .features-section[data-feat-scene="agent"] .feat-bg-grid{
  opacity:.18;
  background-image:radial-gradient(circle at 1px 1px,rgba(245,158,11,.04) 1px,transparent 0)
}
body[data-theme="agent"] .features-section[data-feat-scene="agent"] .feat-bg-orb-1{
  opacity:.22;
  background:rgba(251,191,36,.08)
}
body[data-theme="agent"] .features-section[data-feat-scene="agent"] .feat-bg-orb-2{
  opacity:.2;
  background:rgba(245,158,11,.06)
}
body[data-theme="agent"] .features-section[data-feat-scene="agent"] .feat-band--core::before{
  background:var(--agent-orange);
  opacity:.35
}

@media(max-width:968px){
  .feat-grid--spotlight,.feat-grid--core{grid-template-columns:repeat(2,1fr);gap:18px}
  .features-section .feat.feat--spotlight h3{font-size:1.12rem}
}
@media(max-width:640px){
  .how-section .in,
  .why-section .in,
  .vis-section .in,
  .coming-soon-section .in{
    padding-left:20px;
    padding-right:20px
  }
  .features-section{padding:var(--lp5-section-y) 20px}
  .feat-head{margin-bottom:calc(var(--lp5-section-head-space) * .85)}
  .feat-grid--spotlight,.feat-grid--core{grid-template-columns:1fr;gap:16px}
  .feat-band--spotlight{margin-bottom:24px}
  .feat-band--core{padding-top:24px}
  .features-section .feat.feat--spotlight{padding:22px 22px 22px}
  .features-section .feat.feat--core{padding:24px 22px 22px}
  .features-section .feat .ic{width:48px;height:48px;border-radius:14px}
  .features-section .feat .ic svg{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){
  .features-section .feat,.features-section .feat .ic,.features-section .feat-check-item, .features-section .feat-check-icon{transition:none!important}
  .features-section .feat:hover,.features-section .feat:hover .ic,.features-section .feat:hover .feat-check-item, .features-section .feat:hover .feat-check-icon{transform:none}
  .kb-card.drag-anim, .kb-card.success-fade, .pl-icon.pulse, .share-bubble {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============ REALINMO VISIBILITY SECTION ============ */
.vis-section{
  position:relative;
  padding:var(--lp5-section-y) 0;
  background:#fff;
  overflow:hidden
}
.vis-section .in{position:relative;z-index:1}

.vis-head{
  max-width:760px;
  margin:0 auto var(--lp5-section-head-space);
  text-align:center
}
.vis-head .display{
  font-size:clamp(2rem,3.8vw,2.85rem);
  letter-spacing:-.02em;
  line-height:1.08;
  margin:0 0 18px
}
.vis-accent{
  font-family:inherit;
  font-style:normal;
  font-weight:inherit;
  color:#F59E0B
}
.vis-lede{
  display:grid;gap:12px;
  max-width:700px;margin:0 auto
}
.vis-lede p{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:1rem;line-height:1.65;
  color:#64748B;margin:0
}

.vis-card{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(24px,3.5vw,40px);
  align-items:center;
  padding:48px 44px;
  border-radius:40px;
  background:#fff;
  border:1.5px solid #C7D2FE;
  box-shadow:0 24px 56px -32px rgba(88,86,214,.14);
  overflow:visible
}
.vis-card-copy{
  display:flex;flex-direction:column;
  align-items:flex-start;
  max-width:400px;
  padding-right:8px
}
.vis-card-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px 5px 10px;margin-bottom:18px;
  border-radius:999px;
  background:#EEF2FF;
  border:1px solid #E0E7FF
}
.vis-card-eyebrow-dot{
  width:6px;height:6px;flex:none;border-radius:50%;
  background:#5856D6
}
.vis-card-eyebrow span:last-child{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.625rem;font-weight:700;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;
  color:#4338CA
}
.vis-card-title{
  font-family:"DM Sans","Inter",sans-serif;
  font-weight:800;
  font-size:clamp(1.55rem,2.4vw,2rem);
  letter-spacing:-.028em;
  line-height:1.12;
  color:#0F172A;
  margin:0 0 22px
}
.vis-checklist{
  list-style:none;
  display:grid;gap:14px;
  margin:0;padding:0
}
.vis-check-item{
  display:flex;align-items:flex-start;gap:12px;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.9375rem;line-height:1.55;
  color:#64748B
}
.vis-check-icon{
  flex:none;width:18px;height:18px;margin-top:2px;
  color:#5856D6
}
.vis-check-icon svg{display:block;width:18px;height:18px}

.vis-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width:0
}
.vis-visual-frame{
  position:relative;
  width:100%;
  max-width:620px;
  margin:0;
  line-height:0
}
.vis-visual-frame--svg{
  aspect-ratio:730 / 291
}
.vis-visual-svg,
.vis-visual-frame img{
  display:block;
  width:100%;
  height:auto
}
.vis-visual-svg{
  border:0;
  pointer-events:none
}

#page-developer .vis-accent{color:#059669}
#page-developer .vis-card{
  background:#fff;
  border-color:#A7F3D0;
  box-shadow:0 24px 56px -32px rgba(6,95,70,.12)
}
#page-developer .vis-card-eyebrow{background:#ECFDF5;border-color:#D1FAE5}
#page-developer .vis-card-eyebrow-dot{background:#059669}
#page-developer .vis-card-eyebrow span:last-child{color:#047857}
#page-developer .vis-check-icon{color:#059669}

@media(max-width:968px){
  .vis-card{
    grid-template-columns:1fr;
    gap:28px;
    padding:28px 24px 32px;
    border-radius:28px
  }
  .vis-card-copy{
    max-width:none;
    padding-right:0
  }
  .vis-visual{
    justify-content:center
  }
  .vis-visual-frame{max-width:580px}
}
@media(max-width:640px){
  .vis-section{padding:var(--lp5-section-y) 0}
  .vis-head{margin-bottom:calc(var(--lp5-section-head-space) * .85)}
  .vis-card{padding:24px 18px 28px;border-radius:24px}
  .vis-card-title{margin-bottom:18px}
  .vis-check-item{font-size:.9rem}
  .vis-visual-frame{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  .vis-section .reveal{transition:none!important}
}

/* ============ COMING SOON SECTION ============ */
.coming-soon-section {
  position: relative;
  padding: var(--lp5-section-y) 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #f8f8ff 50%, #fff 100%);
}

/* Background layers */
.cs-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cs-bg-glow {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 60% 50% at 50% 10%, rgba(80, 80, 188, 0.05), transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 90%, rgba(80, 80, 188, 0.06), transparent 60%);
}
.cs-bg-grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image: radial-gradient(var(--accent-ink, #5050bc) 1px, transparent 1px);
  background-size: 24px 24px;
}
.cs-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.1;
}
.cs-bg-orb-1 {
  width: 300px;
  height: 300px;
  background: rgba(80, 80, 188, 0.3);
  top: 10%;
  left: -5%;
}
.cs-bg-orb-2 {
  width: 400px;
  height: 400px;
  background: rgba(88, 88, 200, 0.25);
  bottom: -10%;
  right: -5%;
}

.coming-soon-section .in {
  position: relative;
  z-index: 1;
}

/* Head */
.cs-head {
  text-align: center;
  margin-bottom: var(--lp5-section-head-space);
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}
.cs-head h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink, #1c1646);
  margin-top: 12px;
  margin-bottom: 20px;
}
.cs-lede {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--muted, #5f6388);
}

/* Grid */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Card */
.cs-card {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, #5050bc 12%, var(--line, #e2e8f0));
  border-radius: 24px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s ease, 
              box-shadow 0.4s ease;
  overflow: hidden;
}
.cs-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, #5050bc 35%, var(--line, #e2e8f0));
  box-shadow: 
    0 10px 30px rgba(80, 80, 188, 0.04), 
    0 30px 60px -12px rgba(80, 80, 188, 0.08);
}

/* Header & Badge */
.cs-card-header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 24px;
}
.cs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(80, 80, 188, 0.08), rgba(80, 80, 188, 0.03));
  border: 1px solid rgba(80, 80, 188, 0.15);
  color: #5050bc;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: "JetBrains Mono", monospace;
  animation: cs-pulse 2s infinite ease-in-out;
}
@keyframes cs-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(80, 80, 188, 0.15);
    background-color: rgba(80, 80, 188, 0.08);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(80, 80, 188, 0.03);
    background-color: rgba(80, 80, 188, 0.14);
  }
}

/* Visual container */
.cs-visual {
  height: 220px;
  background: linear-gradient(145deg, #fbfbfe, #f5f5fc);
  border: 1px solid rgba(80, 80, 188, 0.06);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 28px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Info & details */
.cs-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cs-info h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: #1c1646;
  margin-bottom: 12px;
}
.cs-info p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #5f6388;
  margin-bottom: 24px;
  flex: 1;
}
.cs-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding: 0;
}
.cs-chips .chip {
  font-size: 0.76rem;
  font-weight: 500;
  color: #4a4d70;
  background: rgba(240, 241, 249, 0.8);
  padding: 6px 12px;
  border-radius: 30px;
  border: 1px solid rgba(80, 80, 188, 0.06);
  transition: transform 0.25s ease, background 0.25s ease;
}
.cs-card:hover .cs-chips .chip {
  background: color-mix(in srgb, rgba(80, 80, 188, 0.06) 70%, #fff);
  transform: translateY(-1px);
}

/* ────────────────────────────────────────────────────────── */
/* MOCKUP 1: AI Chat Styling */
/* ────────────────────────────────────────────────────────── */
.mockup-ai-chat {
  width: 90%;
  height: 90%;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(80, 80, 188, 0.1);
  box-shadow: 0 12px 24px rgba(80, 80, 188, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}
.mockup-ai-chat .chat-header {
  padding: 10px 14px;
  background: #fdfdfd;
  border-bottom: 1px solid rgba(80, 80, 188, 0.06);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mockup-ai-chat .chat-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5050bc, #7b7be4);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mockup-ai-chat .chat-header-text {
  display: flex;
  flex-direction: column;
}
.mockup-ai-chat .chat-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: #1c1646;
}
.mockup-ai-chat .chat-status {
  font-size: 0.58rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 3px;
}
.mockup-ai-chat .pulse-dot {
  width: 5px;
  height: 5px;
  background-color: #10b981;
  border-radius: 50%;
  display: inline-block;
  animation: cs-online-pulse 1.5s infinite;
}
@keyframes cs-online-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.mockup-ai-chat .chat-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow: hidden;
}
.mockup-ai-chat .chat-msg {
  max-width: 85%;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  line-height: 1.4;
}
.mockup-ai-chat .chat-msg p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.mockup-ai-chat .chat-msg--user {
  background: #f3f4f6;
  color: #1f2937;
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}
.mockup-ai-chat .chat-msg--ai {
  background: #eef0ff;
  color: #3b3be6;
  align-self: flex-start;
  border-bottom-left-radius: 2px;
  border: 1px solid rgba(80, 80, 188, 0.1);
}

/* Typing indicator */
.mockup-ai-chat .typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
}
.mockup-ai-chat .typing-dots span {
  width: 5px;
  height: 5px;
  background: #5050bc;
  border-radius: 50%;
  display: inline-block;
  animation: cs-typing-bounce 1.4s infinite ease-in-out both;
}
.mockup-ai-chat .typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.mockup-ai-chat .typing-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes cs-typing-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

/* Property card visual inside chat */
.mockup-ai-chat .mini-property-card {
  margin-top: 6px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(80, 80, 188, 0.08);
  padding: 5px;
  display: flex;
  gap: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.mockup-ai-chat .mini-prop-img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  position: relative;
}
.mockup-ai-chat .mini-prop-img::after {
  content: "🏡";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.mockup-ai-chat .mini-prop-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.mockup-ai-chat .mini-prop-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: #1c1646;
}
.mockup-ai-chat .mini-prop-price {
  font-size: 0.6rem;
  font-weight: 600;
  color: #4b5563;
}
.mockup-ai-chat .mini-prop-badge {
  align-self: flex-start;
  font-size: 0.5rem;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  padding: 1px 4px;
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
}

.mockup-ai-chat .chat-actions {
  margin-top: 6px;
  display: flex;
}
.mockup-ai-chat .chat-action-btn {
  font-size: 0.55rem;
  font-weight: 600;
  color: #fff;
  background: #5050bc;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(80,80,188,0.15);
}

/* LOOPING ANIMATION STATE FOR AI CHAT */
.coming-soon-section[data-coming-soon].in-view .mockup-ai-chat .typing-indicator-wrapper {
  animation: cs-ai-typing-loop 6s infinite;
}
.coming-soon-section[data-coming-soon].in-view .mockup-ai-chat .response-wrapper {
  animation: cs-ai-response-loop 6s infinite;
}

@keyframes cs-ai-typing-loop {
  0%, 40%, 100% { display: flex; opacity: 1; visibility: visible; height: auto; padding: 7px 10px; margin-top: 0; }
  45%, 95% { display: none; opacity: 0; visibility: hidden; height: 0; padding: 0; margin-top: 0; overflow: hidden; }
}
@keyframes cs-ai-response-loop {
  0%, 42% { opacity: 0; visibility: hidden; transform: translateY(5px); height: 0; padding: 0; overflow: hidden; margin-top: 0; border-width: 0; }
  47%, 95% { opacity: 1; visibility: visible; transform: translateY(0); height: auto; padding: 7px 10px; margin-top: 0; border-width: 1px; }
  98%, 100% { opacity: 0; visibility: hidden; transform: translateY(-5px); height: 0; padding: 0; overflow: hidden; margin-top: 0; border-width: 0; }
}


/* ────────────────────────────────────────────────────────── */
/* MOCKUP 2: Mobile Phone Styling */
/* ────────────────────────────────────────────────────────── */
.mockup-phone-container {
  width: 140px;
  height: 200px;
  position: relative;
  perspective: 600px;
}
.phone-frame {
  width: 130px;
  height: 200px;
  background: #111827;
  border: 4px solid #374151;
  border-radius: 20px;
  position: relative;
  box-shadow: 
    0 15px 35px rgba(0,0,0,0.15), 
    0 5px 15px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-speaker {
  width: 28px;
  height: 3px;
  background: #4b5563;
  border-radius: 2px;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.phone-camera {
  width: 4px;
  height: 4px;
  background: #1f2937;
  border-radius: 50%;
  position: absolute;
  top: 4px;
  left: calc(50% + 20px);
  z-index: 10;
}
.phone-home-indicator {
  width: 40px;
  height: 2.5px;
  background: #9ca3af;
  border-radius: 1px;
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.phone-screen {
  position: absolute;
  inset: 0;
  padding: 12px 8px 8px;
  display: flex;
  flex-direction: column;
  background: #fcfbfe;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 1;
  text-align: left;
}
.phone-screen.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* App layouts inside phone */
.phone-screen .app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(80, 80, 188, 0.08);
  padding-bottom: 4px;
  margin-bottom: 6px;
}
.phone-screen .app-logo {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 0.55rem;
  color: #5050bc;
}
.phone-screen .app-screen-title {
  font-weight: 700;
  font-size: 0.55rem;
  color: #1c1646;
}
.phone-screen .app-user-avatar {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
}

.phone-screen .app-welcome {
  margin-bottom: 6px;
}
.phone-screen .app-welcome span {
  font-weight: 700;
  font-size: 0.6rem;
  color: #1c1646;
}
.phone-screen .app-welcome p {
  font-size: 0.45rem;
  color: #6b7280;
  margin: 0;
}

.phone-screen .app-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 6px;
}
.phone-screen .app-stat-card {
  background: #f5f4fc;
  border: 1px solid rgba(80,80,188,0.06);
  border-radius: 6px;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.phone-screen .app-stat-card .label {
  font-size: 0.38rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.phone-screen .app-stat-card .value {
  font-weight: 700;
  font-size: 0.58rem;
  color: #5050bc;
}

.phone-screen .app-activity {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.phone-screen .app-activity .title {
  font-weight: 600;
  font-size: 0.46rem;
  color: #4b5563;
}
.phone-screen .activity-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid #f3f4f6;
  padding: 3px;
  border-radius: 4px;
}
.phone-screen .activity-item .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
.phone-screen .activity-item .dot.yellow { background: #f59e0b; }
.phone-screen .activity-item .dot.green { background: #10b981; }
.phone-screen .activity-item p {
  font-size: 0.4rem;
  color: #374151;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Screen 2: Pipeline */
.phone-screen--pipeline .pipeline-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.phone-screen--pipeline .col-title {
  font-size: 0.45rem;
  font-weight: 700;
  color: #4b5563;
  margin-bottom: 2px;
}
.phone-screen--pipeline .pipeline-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  padding: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.phone-screen--pipeline .pipeline-card.active-drag {
  border-color: #5050bc;
  background: #f5f5fc;
  box-shadow: 0 4px 8px rgba(80,80,188,0.1);
  transform: scale(0.96);
}
.phone-screen--pipeline .card-p-title {
  font-weight: 600;
  font-size: 0.48rem;
  color: #1f2937;
}
.phone-screen--pipeline .card-p-meta {
  font-size: 0.38rem;
  color: #9ca3af;
}

/* Screen 3: Notification Lock screen */
.phone-screen--notifications {
  background: linear-gradient(180deg, #1f1b2e 0%, #11131a 100%);
  color: #fff;
}
.phone-screen--notifications .lock-clock {
  font-family: "Inter", sans-serif;
  font-size: 1.4rem;
  font-weight: 200;
  text-align: center;
  margin-top: 6px;
  line-height: 1;
}
.phone-screen--notifications .lock-date {
  font-size: 0.4rem;
  text-align: center;
  color: #9ca3af;
  margin-bottom: 12px;
}
.phone-screen--notifications .push-notification {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 6px;
  text-align: left;
}
.phone-screen--notifications .push-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.36rem;
  color: #d1d5db;
  margin-bottom: 2px;
}
.phone-screen--notifications .push-app-name {
  font-weight: 600;
}
.phone-screen--notifications .push-title {
  font-size: 0.44rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1px;
}
.phone-screen--notifications .push-body {
  font-size: 0.38rem;
  color: #e5e7eb;
  line-height: 1.2;
}

/* Float Animation on Phone Frame */
.coming-soon-section[data-coming-soon].in-view .phone-frame {
  animation: cs-phone-float 4s infinite ease-in-out;
}
@keyframes cs-phone-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(1deg); }
}


/* ────────────────────────────────────────────────────────── */
/* MOCKUP 3: Newsletter Email Styling */
/* ────────────────────────────────────────────────────────── */
.mockup-newsletter {
  width: 90%;
  height: 90%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mockup-newsletter .email-envelope-icon {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
  z-index: 5;
}
.mockup-newsletter .email-envelope-icon svg {
  width: 14px;
  height: 14px;
}

.coming-soon-section[data-coming-soon].in-view .email-envelope-icon {
  animation: cs-envelope-pulse 2s infinite ease-in-out;
}
@keyframes cs-envelope-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); }
  50% { transform: scale(1.1); box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5); }
}

.mockup-newsletter .email-client {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(80, 80, 188, 0.1);
  box-shadow: 0 12px 24px rgba(80, 80, 188, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}
.mockup-newsletter .email-header {
  background: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mockup-newsletter .email-header-row {
  display: flex;
  gap: 4px;
  font-size: 0.62rem;
}
.mockup-newsletter .email-header-row .label {
  color: #9ca3af;
  width: 44px;
}
.mockup-newsletter .email-header-row .value {
  color: #4b5563;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup-newsletter .email-header-row .value.highlight {
  color: #111827;
  font-weight: 600;
}

.mockup-newsletter .email-canvas {
  flex: 1;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  overflow: hidden;
  border-bottom: 1px solid #f3f4f6;
}
.mockup-newsletter .newsletter-header {
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 3px;
  text-align: center;
}
.mockup-newsletter .logo-text {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 0.52rem;
  color: #5050bc;
}
.mockup-newsletter .newsletter-hero {
  background: #fafafc;
  border: 1px dashed rgba(80, 80, 188, 0.12);
  border-radius: 6px;
  padding: 4px;
  text-align: center;
}
.mockup-newsletter .newsletter-hero-img {
  height: 32px;
  border-radius: 4px;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  margin-bottom: 3px;
  position: relative;
}
.mockup-newsletter .newsletter-hero-img::after {
  content: "🌴";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
.mockup-newsletter .newsletter-hero-title {
  font-size: 0.5rem;
  font-weight: 700;
  color: #1c1646;
}
.mockup-newsletter .newsletter-hero-subtitle {
  font-size: 0.38rem;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup-newsletter .newsletter-cta-row {
  text-align: center;
  margin-top: 2px;
}
.mockup-newsletter .newsletter-cta-btn {
  font-size: 0.44rem;
  font-weight: 600;
  color: #fff;
  background: #5050bc;
  padding: 3px 10px;
  border-radius: 4px;
  display: inline-block;
  animation: cs-btn-pulse 3s infinite ease-in-out;
}
@keyframes cs-btn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.mockup-newsletter .email-analytics {
  background: #fafbfc;
  padding: 4px 12px;
  display: flex;
  justify-content: space-between;
}
.mockup-newsletter .analytic-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mockup-newsletter .analytic-stat .stat-value {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
}
.mockup-newsletter .analytic-stat .stat-value.text-sent { color: #4b5563; }
.mockup-newsletter .analytic-stat .stat-value.text-opens { color: #5050bc; }
.mockup-newsletter .analytic-stat .stat-value.text-clicks { color: #10b981; }

.mockup-newsletter .analytic-stat .stat-label {
  font-size: 0.38rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Sequential Analytics fade in */
.coming-soon-section[data-coming-soon] .analytic-stat {
  opacity: 0.15;
  transform: translateY(2px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.coming-soon-section[data-coming-soon].in-view .analytic-stat:nth-child(1) {
  opacity: 1; transform: translateY(0); transition-delay: 0.3s;
}
.coming-soon-section[data-coming-soon].in-view .analytic-stat:nth-child(2) {
  opacity: 1; transform: translateY(0); transition-delay: 0.6s;
}
.coming-soon-section[data-coming-soon].in-view .analytic-stat:nth-child(3) {
  opacity: 1; transform: translateY(0); transition-delay: 0.9s;
}

/* ────────────────────────────────────────────────────────── */
/* RESPONSIVE DESIGN */
/* ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 768px) {
  .coming-soon-section {
    padding: var(--lp5-section-y) 0;
  }
  .cs-head {
    margin-bottom: calc(var(--lp5-section-head-space) * .85);
  }
  .cs-head h2 {
    font-size: 2rem;
  }
  .cs-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cs-card {
    padding: 24px 22px;
  }
}

/* ────────────────────────────────────────────────────────── */
/* REDUCED MOTION */
/* ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cs-card, .phone-frame, .email-envelope-icon, .newsletter-cta-btn, .cs-badge {
    transition: none !important;
    animation: none !important;
  }
  .cs-card:hover {
    transform: none !important;
  }
  .coming-soon-section[data-coming-soon] .analytic-stat {
    opacity: 1 !important;
    transform: none !important;
  }
  .coming-soon-section[data-coming-soon].in-view .mockup-ai-chat .typing-indicator-wrapper {
    display: none !important;
  }
  .coming-soon-section[data-coming-soon].in-view .mockup-ai-chat .response-wrapper {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    padding: 7px 10px !important;
  }
}

.bridge{background:var(--soft)}
.bridge-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.xcard{
  position:relative;border-radius:18px;padding:24px 26px 22px;
  background:var(--surface);border:1px solid var(--line);overflow:hidden;
  transition:transform .3s,box-shadow .3s,border-color .3s;cursor:pointer;
  text-align:left;display:block;width:100%;
  font-family:"DM Sans","Inter",sans-serif;color:inherit
}
.xcard::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;border-radius:18px;pointer-events:none}
.xcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px var(--glow);border-color:color-mix(in srgb,var(--accent) 18%,var(--line))}
.xcard:hover::before{opacity:1}
.xcard .role-tag{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px 5px 10px;border-radius:999px;margin-bottom:14px
}
.xcard h3{
  font-family:"DM Sans","Inter",sans-serif;font-weight:700;
  font-size:1.2rem;letter-spacing:-.025em;line-height:1.3;
  margin-bottom:10px;color:#0F172A
}
.xcard p{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.9375rem;line-height:1.62;color:#64748B;max-width:36ch
}
.xcard .go{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:"DM Sans","Inter",sans-serif;font-weight:600;font-size:.9rem
}
.xcard .go .arr{transition:transform .3s}
.xcard:hover .go .arr{transform:translateX(5px)}
.xcard .glyph{position:absolute;right:-10px;bottom:-18px;font-size:6rem;opacity:.07;line-height:1;pointer-events:none}
.xcard.to-agent .role-tag{color:#4338CA;background:#EEF2FF;border:1px solid #E0E7FF}
.xcard.to-agent .go{color:#4338CA}
.xcard.to-agent::before{box-shadow:inset 0 0 0 2px #4338CA}
.xcard.to-developer .role-tag{color:#047857;background:#ECFDF5;border:1px solid #D1FAE5}
.xcard.to-developer .go{color:#047857}
.xcard.to-developer::before{box-shadow:inset 0 0 0 2px #047857}
.xcard.to-affiliate .role-tag{color:#1D4ED8;background:#EFF6FF;border:1px solid #DBEAFE}
.xcard.to-affiliate .go{color:#2563EB}
.xcard.to-affiliate::before{box-shadow:inset 0 0 0 2px #2563EB}
.dotmark{width:6px;height:6px;border-radius:50%;display:inline-block;flex:none}
.to-agent .dotmark{background:#5856D6}.to-developer .dotmark{background:#059669}.to-affiliate .dotmark{background:#2563EB}

/* ============ PRICING ============ */
.price-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan.feat-plan{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow);position:relative}
.plan.feat-plan .ribbon{position:absolute;top:-12px;left:22px;background:var(--accent);color:#fff;font-size:.68rem;font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:7px}
.plan h3{font-family:"Bricolage Grotesque";font-weight:700;font-size:1.2rem;margin-bottom:4px}
.plan .pfor{font-size:.82rem;color:var(--faint);min-height:34px;margin-bottom:12px}
.plan .pprice{font-family:"Bricolage Grotesque";font-weight:700;font-size:2rem;color:var(--ink)}
.plan .pprice small{font-size:.82rem;font-weight:500;color:var(--faint);font-family:"Inter"}
.plan ul{list-style:none;margin:18px 0;display:flex;flex-direction:column;gap:9px;flex:1}
.plan li{font-size:.88rem;color:var(--muted);display:flex;gap:9px;align-items:flex-start}
.plan li::before{content:"\2713";color:var(--accent);font-weight:700;flex:none}
.plan li.soon::before{content:"\25CB";color:var(--faint)}
.plan .yearly{font-size:.78rem;color:var(--faint);margin-top:6px}
.price-note{text-align:center;color:var(--faint);font-size:.84rem;margin-top:22px}

/* ============ FAQ ============ */
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.qa{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.qa summary{padding:19px 22px;font-weight:600;font-size:1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:1.4rem;color:var(--accent);font-weight:400;transition:transform .25s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa .ans{padding:0 22px 20px;color:var(--muted);font-size:.95rem}

/* ============ FAQ ============ */
.faq-band{
  position:relative;padding:var(--lp5-section-y) var(--lp5-section-x);overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,var(--soft) 100%)
}
.faq-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.faq-bg-grid{
  position:absolute;inset:0;opacity:.4;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--accent) 12%,transparent) 1px,transparent 0);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 80% 70% at 30% 40%,#000 10%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 40%,#000 10%,transparent 75%)
}
.faq-bg-orb{position:absolute;border-radius:50%;filter:blur(52px);opacity:.45}
.faq-bg-orb-1{width:320px;height:320px;left:-6%;top:10%;background:color-mix(in srgb,var(--accent) 28%,transparent)}
.faq-bg-orb-2{width:280px;height:280px;right:-4%;bottom:5%;background:color-mix(in srgb,var(--accent2) 24%,transparent)}
.faq-bg-bubbles{
  position:absolute;left:4%;bottom:8%;width:min(280px,32vw);height:auto;opacity:.55
}
.faq-layout{
  position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(32px,5vw,56px);align-items:start
}
.faq-aside{position:sticky;top:96px}
.faq-aside h2{font-size:clamp(1.65rem,3vw,2.35rem);margin:12px 0 14px;line-height:1.08}
.faq-lede{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0 0 22px;max-width:36ch}
.faq-cta{
  display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:11px;
  font-size:.88rem;font-weight:650;color:var(--accent-ink);text-decoration:none;
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  transition:background .2s,border-color .2s,transform .2s
}
.faq-cta svg{width:16px;height:16px;flex:none;transition:transform .2s}
.faq-cta:hover{background:#fff;border-color:var(--accent);transform:translateY(-1px)}
.faq-cta:hover svg{transform:translateX(2px)}
.faq-band .faq-list{max-width:none;margin:0;display:flex;flex-direction:column;gap:10px}
.faq-item{
  border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;
  transition:border-color .22s ease,box-shadow .22s ease
}
.faq-item[open]{
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line));
  box-shadow:0 12px 32px -20px rgba(40,28,110,.18)
}
.faq-item summary{
  padding:18px 20px;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:14px;list-style:none;font-weight:600;font-size:.96rem;color:var(--ink);line-height:1.35
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item-num{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.72rem;font-weight:500;
  color:var(--accent);background:var(--accent-soft);border-radius:8px;
  padding:5px 7px;line-height:1;flex:none
}
.faq-item-q{padding-right:4px}
.faq-item-icon{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;
  color:var(--accent);background:var(--accent-soft);transition:transform .25s ease,background .25s ease
}
.faq-item-icon svg{width:14px;height:14px;display:block;transition:transform .25s ease}
.faq-item[open] .faq-item-icon{background:var(--accent);color:#fff}
.faq-item[open] .faq-item-icon svg{transform:rotate(45deg)}
.faq-ans{
  padding:0 20px 18px 52px;color:var(--muted);font-size:.94rem;line-height:1.6;
  border-top:1px solid transparent
}
.faq-item[open] .faq-ans{border-top-color:color-mix(in srgb,var(--accent) 8%,var(--line));padding-top:14px}
@media(max-width:920px){
  .faq-layout{grid-template-columns:1fr;gap:28px}
  .faq-aside{position:static;text-align:center}
  .faq-lede{margin-left:auto;margin-right:auto}
  .faq-bg-bubbles{opacity:.35;left:-2%;bottom:2%}
  .faq-ans{padding-left:20px}
}
@media(max-width:640px){
  .faq-band{padding:var(--lp5-section-y) 20px}
  .faq-item summary{grid-template-columns:auto 1fr auto;gap:10px;padding:16px}
  .faq-ans{padding:0 16px 16px}
  .faq-item[open] .faq-ans{padding-top:12px}
}

/* ============ FAQ ============ */
.faq-band{
  position:relative;padding:var(--lp5-section-y) var(--lp5-section-x);overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,var(--soft) 100%)
}
.faq-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.faq-bg-grid{
  position:absolute;inset:0;opacity:.4;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--accent) 12%,transparent) 1px,transparent 0);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 80% 70% at 30% 40%,#000 10%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 40%,#000 10%,transparent 75%)
}
.faq-bg-orb{position:absolute;border-radius:50%;filter:blur(52px);opacity:.45}
.faq-bg-orb-1{width:320px;height:320px;left:-6%;top:10%;background:color-mix(in srgb,var(--accent) 28%,transparent)}
.faq-bg-orb-2{width:280px;height:280px;right:-4%;bottom:5%;background:color-mix(in srgb,var(--accent2) 24%,transparent)}
.faq-bg-bubbles{
  position:absolute;left:4%;bottom:8%;width:min(280px,32vw);height:auto;opacity:.55
}
.faq-layout{
  position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(32px,5vw,56px);align-items:start
}
.faq-aside{position:sticky;top:96px}
.faq-aside h2{font-size:clamp(1.65rem,3vw,2.35rem);margin:12px 0 14px;line-height:1.08}
.faq-lede{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0 0 22px;max-width:36ch}
.faq-cta{
  display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:11px;
  font-size:.88rem;font-weight:650;color:var(--accent-ink);text-decoration:none;
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  transition:background .2s,border-color .2s,transform .2s
}
.faq-cta svg{width:16px;height:16px;flex:none;transition:transform .2s}
.faq-cta:hover{background:#fff;border-color:var(--accent);transform:translateY(-1px)}
.faq-cta:hover svg{transform:translateX(2px)}
.faq-band .faq-list{max-width:none;margin:0;display:flex;flex-direction:column;gap:10px}
.faq-item{
  border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;
  transition:border-color .22s ease,box-shadow .22s ease
}
.faq-item[open]{
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line));
  box-shadow:0 12px 32px -20px rgba(40,28,110,.18)
}
.faq-item summary{
  padding:18px 20px;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:14px;list-style:none;font-weight:600;font-size:.96rem;color:var(--ink);line-height:1.35
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item-num{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.72rem;font-weight:500;
  color:var(--accent);background:var(--accent-soft);border-radius:8px;
  padding:5px 7px;line-height:1;flex:none
}
.faq-item-q{padding-right:4px}
.faq-item-icon{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;
  color:var(--accent);background:var(--accent-soft);transition:transform .25s ease,background .25s ease
}
.faq-item-icon svg{width:14px;height:14px;display:block;transition:transform .25s ease}
.faq-item[open] .faq-item-icon{background:var(--accent);color:#fff}
.faq-item[open] .faq-item-icon svg{transform:rotate(45deg)}
.faq-ans{
  padding:0 20px 18px 52px;color:var(--muted);font-size:.94rem;line-height:1.6;
  border-top:1px solid transparent
}
.faq-item[open] .faq-ans{border-top-color:color-mix(in srgb,var(--accent) 8%,var(--line));padding-top:14px}
@media(max-width:920px){
  .faq-layout{grid-template-columns:1fr;gap:28px}
  .faq-aside{position:static;text-align:center}
  .faq-lede{margin-left:auto;margin-right:auto}
  .faq-bg-bubbles{opacity:.35;left:-2%;bottom:2%}
  .faq-ans{padding-left:20px}
}
@media(max-width:640px){
  .faq-band{padding:var(--lp5-section-y) 20px}
  .faq-item summary{grid-template-columns:auto 1fr auto;gap:10px;padding:16px}
  .faq-ans{padding:0 16px 16px}
  .faq-item[open] .faq-ans{padding-top:12px}
}

/* ============ CONTACT ============ */
.contact-band{
  position:relative;padding:var(--lp5-section-y) var(--lp5-section-x);overflow:hidden;
  background:linear-gradient(180deg,var(--soft) 0%,#fff 48%,var(--soft) 100%)
}
.contact-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.contact-bg-grid{
  position:absolute;inset:0;opacity:.35;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--accent) 12%,transparent) 1px,transparent 0);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 20%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 20%,#000 10%,transparent 72%)
}
.contact-bg-orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.45}
.contact-bg-orb-1{width:420px;height:420px;left:-10%;top:-18%;background:color-mix(in srgb,var(--accent) 28%,transparent)}
.contact-bg-orb-2{width:360px;height:360px;right:-8%;bottom:-16%;background:color-mix(in srgb,var(--accent2) 24%,transparent)}
.contact-bg-glow{
  position:absolute;left:50%;top:42%;width:min(680px,90vw);height:280px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 10%,transparent) 0%,transparent 68%);
  opacity:.8
}
.contact-in{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,56px);align-items:start
}
.contact-title{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:clamp(1.85rem,3.4vw,2.55rem);
  font-weight:800;letter-spacing:-.028em;line-height:1.08;
  margin:0 0 14px;color:var(--ink)
}
.contact-lede{
  color:var(--muted);font-size:1.02rem;max-width:42ch;
  margin:0 0 24px;line-height:1.65
}
.contact-benefits{
  list-style:none;display:flex;flex-direction:column;gap:10px;
  margin:0 0 24px;padding:0
}
.contact-benefits li{
  display:flex;align-items:flex-start;gap:12px;
  padding:11px 12px;border-radius:12px;
  background:color-mix(in srgb,var(--accent-soft) 42%,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 10%,var(--line));
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.9rem;font-weight:500;color:var(--ink);line-height:1.45
}
.contact-benefit-icon{
  width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px;
  display:grid;place-items:center;
  background:var(--accent);color:#fff;
  box-shadow:0 4px 10px -6px color-mix(in srgb,var(--accent) 55%,transparent)
}
.contact-benefit-icon svg{width:11px;height:11px;display:block}
.contact-channels{
  display:grid;gap:10px;margin-bottom:18px
}
.contact-channel{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:14px;background:#fff;
  border:1px solid var(--line);
  box-shadow:0 2px 8px -4px rgba(15,23,42,.06);
  text-decoration:none;color:inherit;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease
}
.contact-channel:hover{
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line));
  box-shadow:0 10px 24px -14px color-mix(in srgb,var(--accent) 28%,transparent);
  transform:translateY(-1px)
}
.contact-channel-icon{
  width:40px;height:40px;border-radius:12px;flex:none;
  display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent)
}
.contact-channel-icon svg{width:18px;height:18px;display:block}
.contact-channel-text{display:grid;gap:2px;min-width:0}
.contact-channel-label{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);line-height:1.2
}
.contact-channel-value{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.35;
  word-break:break-word
}
.contact-trust-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.78rem;font-weight:600;color:var(--accent-ink);
  box-shadow:0 2px 8px -4px rgba(15,23,42,.05)
}
.contact-trust-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:#10B981;box-shadow:0 0 0 4px rgba(16,185,129,.16)
}
.contact-card{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:24px;
  padding:28px 28px 26px;
  box-shadow:
    0 24px 56px -28px color-mix(in srgb,var(--accent) 24%,transparent),
    0 2px 8px -2px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.95)
}
.contact-card-accent{
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));
  opacity:.95
}
.contact-card-head{
  position:relative;z-index:1;margin-bottom:22px;padding-top:4px
}
.contact-card-title{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:1.2rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 6px;line-height:1.25
}
.contact-card-sub{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.88rem;color:var(--muted);margin:0;line-height:1.5
}
.contact-card form{position:relative;z-index:1}
.contact-card .form-group{margin-bottom:16px}
.contact-card label{
  display:block;font-family:"DM Sans","Inter",sans-serif;
  font-size:.78rem;font-weight:600;color:var(--ink);margin-bottom:7px
}
.contact-card label .req{color:#EF4444}
.contact-card .form-control,.contact-card textarea,.contact-card select{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:#fff;font-family:"DM Sans","Inter",sans-serif;
  font-size:.92rem;color:var(--ink);
  transition:border-color .2s,box-shadow .2s,background .2s;font-weight:450
}
.contact-card .form-control::placeholder,.contact-card textarea::placeholder{color:color-mix(in srgb,var(--muted) 78%,#fff)}
.contact-card .form-control:focus,.contact-card textarea:focus,.contact-card select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-soft) 85%,#fff);
  background:#fff
}
.contact-card textarea{resize:vertical;min-height:112px}
.contact-card .invalid-feedback{display:none;color:#EF4444;font-size:.82rem;margin-top:6px;font-weight:500}
.contact-card .invalid-feedback.error,.contact-card .invalid-feedback:not(:empty){display:block}
.contact-card .valid-feedback{color:#059669;font-size:.88rem;margin-top:8px;font-weight:600}
.contact-card .lp5-checkbox{
  display:flex;gap:10px;align-items:flex-start;margin:14px 0 12px;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.84rem;color:var(--muted);line-height:1.5
}
.contact-card .lp5-checkbox input[type="checkbox"]{margin-top:3px;flex:none;accent-color:var(--accent);width:15px;height:15px}
.contact-card .lp5-checkbox a{color:var(--accent);font-weight:600}
.contact-card .lp5-checkbox a:hover{text-decoration:underline}
.contact-card .g-recaptcha{margin:12px 0 4px}
.contact-card .submit-row{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.contact-card button[type="submit"],.contact-card .lp5-submit{
  width:100%;padding:13px 22px;border-radius:12px;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.94rem;font-weight:600;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 12px 28px -12px color-mix(in srgb,var(--accent) 45%,transparent)
}
.contact-card button[type="submit"]:disabled,.contact-card .lp5-submit:disabled{opacity:.7;cursor:wait}
.contact-card .btn-icon{width:18px;height:18px;flex:none}
.contact-card .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:920px){
  .contact-in{grid-template-columns:1fr;gap:34px}
}
@media(max-width:640px){
  .contact-band{padding:var(--lp5-section-y) 20px}
  .contact-card{padding:22px 18px 20px;border-radius:20px}
  .contact-card .form-row{grid-template-columns:1fr}
  .contact-benefits li{padding:10px 11px}
}

/* ============ CTA BAND ============ */
.cta-band{
  margin:var(--lp5-section-y) clamp(16px,3vw,26px) var(--lp5-section-y)
}
.contact-band:has(+ .cta-band){
  padding-bottom:0
}
.cta-band + footer.lp5-footer{
  padding-top:clamp(40px,5vw,56px)
}
.cta-in{
  max-width:var(--maxw);margin:0 auto;position:relative;overflow:hidden;
  border-radius:32px;
  padding-block:clamp(56px,6vw,72px);
  padding-inline:clamp(28px,5vw,56px);
  display:grid;place-items:center;
  color:#fff;text-align:center;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 45%,color-mix(in srgb,var(--accent) 82%,#000) 100%);
  background-size:200% 200%;
  animation:ctaGradientShift 12s ease infinite;
  box-shadow:
    0 32px 64px -24px color-mix(in srgb,var(--accent) 42%,transparent),
    0 0 0 1px color-mix(in srgb,#fff 14%,transparent) inset;
  isolation:isolate
}
.cta-bg-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.09) 1px,transparent 0);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 88% 78% at 50% 42%,#000 18%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 88% 78% at 50% 42%,#000 18%,transparent 76%)
}
.cta-glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(64px)}
.cta-glow-1{
  width:min(440px,58vw);height:min(440px,58vw);top:-38%;left:-14%;
  background:radial-gradient(circle,rgba(255,255,255,.24),transparent 68%);
  animation:ctaGlowDrift 13s ease-in-out infinite alternate
}
.cta-glow-2{
  width:min(380px,50vw);height:min(380px,50vw);right:-12%;bottom:-42%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 72%);
  animation:ctaGlowDrift 15s ease-in-out infinite alternate-reverse
}
.cta-shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(108deg,transparent 38%,rgba(255,255,255,.07) 50%,transparent 62%)
}
.cta-content{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  width:100%
}
.cta-title{
  font-family:"DM Serif Display","Instrument Serif",Georgia,serif;
  font-weight:400;font-size:clamp(2rem,4.2vw,3.15rem);
  letter-spacing:-.025em;line-height:1.08;
  margin:0 auto 18px;max-width:18ch;text-wrap:balance;
  text-shadow:0 2px 28px rgba(0,0,0,.14)
}
.cta-lede{
  margin:0 auto 32px;max-width:44ch;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.62;
  color:rgba(255,255,255,.88);text-wrap:balance
}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cta-in .btn-cta{
  display:inline-flex;align-items:center;gap:12px;
  padding:6px 6px 6px 24px;border-radius:999px;
  background:#fff;color:var(--cta-btn-ink,var(--accent-ink));
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.95rem;font-weight:650;letter-spacing:-.015em;line-height:1.2;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 10px 28px -8px rgba(15,23,42,.28);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
  max-width:100%
}
.cta-in .btn-cta-label{display:block;padding:6px 0}
.cta-in .btn-cta-icon{
  display:grid;place-items:center;flex:none;
  width:38px;height:38px;border-radius:50%;
  background:color-mix(in srgb,var(--cta-btn-ink,var(--accent-ink)) 10%,#fff);
  color:var(--cta-btn-ink,var(--accent-ink));
  transition:background .22s ease,transform .22s ease
}
.cta-in .btn-cta-icon svg{width:16px;height:16px;display:block}
.cta-in .btn-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(15,23,42,.07),0 16px 36px -10px rgba(15,23,42,.32);
  background:#fff;color:var(--cta-btn-ink,var(--accent-ink))
}
.cta-in .btn-cta:hover .btn-cta-icon{
  background:color-mix(in srgb,var(--cta-btn-ink,var(--accent-ink)) 16%,#fff);
  transform:translateX(2px)
}
.cta-in .btn-cta:active{transform:translateY(0)}
body[data-theme="agent"]{--cta-btn-ink:#4338CA}
body[data-theme="developer"]{--cta-btn-ink:#065F46}
body[data-theme="affiliate"]{--cta-btn-ink:#1E40AF}
.cta-micro{
  margin:22px 0 0;font-family:"DM Sans","Inter",sans-serif;
  font-size:.88rem;color:rgba(255,255,255,.78);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px
}
.cta-micro-link{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 15px;border-radius:99px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  color:#fff;font-weight:600;text-decoration:none!important;
  transition:background .2s,border-color .2s,transform .2s;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.cta-micro-link:hover{
  background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.38);
  transform:translateY(-1px);color:#fff
}
body[data-theme="agent"] .cta-in{
  background:linear-gradient(135deg,#4338CA 0%,#5856D6 38%,#6B69E8 72%,#4338CA 100%);
  box-shadow:0 32px 64px -24px rgba(88,86,214,.38),0 0 0 1px rgba(255,255,255,.14) inset
}
body[data-theme="developer"] .cta-in{
  background:linear-gradient(135deg,#065F46 0%,#059669 42%,#10B981 78%,#047857 100%);
  box-shadow:0 32px 64px -24px rgba(5,150,105,.32),0 0 0 1px rgba(255,255,255,.14) inset
}
body[data-theme="affiliate"] .cta-in{
  background:linear-gradient(135deg,#1E3A8A 0%,#1E40AF 35%,#2563EB 68%,#3B82F6 100%);
  box-shadow:0 32px 64px -24px rgba(37,99,235,.34),0 0 0 1px rgba(255,255,255,.14) inset
}
@keyframes ctaGradientShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes ctaGlowDrift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(4%,3%) scale(1.06)}
}
body[data-theme="affiliate"] .btn-primary{box-shadow:0 10px 22px -12px rgba(37,99,235,.28)}
body[data-theme="affiliate"] .nav-cta{box-shadow:0 8px 18px -10px rgba(37,99,235,.26)}

/* ============ FOOTER ============ */
footer.lp5-footer{
  --footer-text:rgba(255,255,255,.94);
  --footer-muted:rgba(255,255,255,.72);
  --footer-line:rgba(255,255,255,.18);
  --footer-surface:rgba(255,255,255,.1);
  --footer-surface-hover:rgba(255,255,255,.16);
  position:relative;overflow:hidden;
  padding:72px 26px 0;
  color:var(--footer-text)
}
footer.lp5-footer[data-footer-role="agent"]{
  --footer-accent:#fff;--footer-accent2:#EEF2FF;--footer-ink:#4338CA;--footer-glow:rgba(88,86,214,.35);
  background:linear-gradient(165deg,#4338CA 0%,#5856D6 45%,#6B69E8 100%)
}
footer.lp5-footer[data-footer-role="developer"]{
  --footer-accent:#fff;--footer-accent2:#D1FAE5;--footer-ink:#065F46;--footer-glow:rgba(4,120,87,.35);
  background:linear-gradient(165deg,#065F46 0%,#047857 45%,#059669 100%)
}
footer.lp5-footer[data-footer-role="affiliate"]{
  --footer-accent:#fff;--footer-accent2:#DBEAFE;--footer-ink:#1E3A8A;--footer-glow:rgba(37,99,235,.35);
  background:linear-gradient(165deg,#1E40AF 0%,#2563EB 45%,#3B82F6 78%,#06B6D4 100%)
}
.lp5-footer-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.lp5-footer-mesh{
  position:absolute;inset:0;opacity:.4;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.22),transparent 40%),
    radial-gradient(circle at 85% 80%,rgba(255,255,255,.12),transparent 42%)
}
.lp5-footer-grid{
  position:absolute;inset:0;opacity:.25;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.45) 1px,transparent 0);
  background-size:24px 24px;
  mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%)
}
.lp5-footer-orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.5}
.lp5-footer-orb-1{width:400px;height:400px;left:-10%;top:-20%;background:rgba(255,255,255,.22)}
.lp5-footer-orb-2{width:340px;height:340px;right:-8%;bottom:-15%;background:rgba(255,255,255,.14)}
.lp5-footer-wave{position:absolute;left:0;right:0;top:0;height:72px;width:100%}
.lp5-footer-shell{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto
}
.lp5-footer-in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.35fr 1fr 1fr 1.22fr;
  gap:clamp(28px,3.5vw,40px);padding:0 0 40px
}
.lp5-footer-col[data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)
}
.lp5-footer.is-visible .lp5-footer-col[data-reveal],
.lp5-footer.is-visible .lp5-footer-bot[data-reveal]{opacity:1;transform:none}
.lp5-footer.is-visible .lp5-footer-col[data-reveal]:nth-child(1){transition-delay:.05s}
.lp5-footer.is-visible .lp5-footer-col[data-reveal]:nth-child(2){transition-delay:.11s}
.lp5-footer.is-visible .lp5-footer-col[data-reveal]:nth-child(3){transition-delay:.17s}
.lp5-footer.is-visible .lp5-footer-col[data-reveal]:nth-child(4){transition-delay:.23s}
.lp5-footer.is-visible .lp5-footer-bot[data-reveal]{transition-delay:.3s}
.lp5-footer-eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.92)
}
.lp5-footer-eyebrow::before{
  content:"";width:18px;height:2px;border-radius:99px;
  background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.45))
}
.lp5-footer-logo{display:inline-block;margin-bottom:12px}
.lp5-footer-logo img{
  display:block;height:28px;width:auto;max-width:180px;
  filter:brightness(0) invert(1);opacity:.96
}
.lp5-footer-tag{
  font-size:.98rem;color:rgba(255,255,255,.84);line-height:1.65;max-width:36ch;margin:0 0 20px;
  font-weight:450;letter-spacing:-.01em
}
.lp5-footer-social{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.lp5-footer-social-btn{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  color:rgba(255,255,255,.92);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  transition:color .22s,background .22s,border-color .22s,transform .22s,box-shadow .22s
}
.lp5-footer-social-btn svg{width:17px;height:17px;display:block}
.lp5-footer-social-btn:hover{
  color:var(--footer-ink);background:#fff;border-color:#fff;
  transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.28)
}
footer.lp5-footer a.lp5-footer-cta-card{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px;border-radius:14px;
  font-size:.9rem;font-weight:650;text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 24px -14px rgba(0,0,0,.22);
  transition:transform .22s,background .22s,border-color .22s,color .22s,box-shadow .22s
}
footer.lp5-footer a.lp5-footer-cta-card .lp5-footer-cta-label{color:inherit}
.lp5-footer-cta-glow{display:none}
.lp5-footer-cta-label{position:relative;white-space:nowrap}
footer.lp5-footer a.lp5-footer-cta-card svg{width:16px;height:16px;flex:none;transition:transform .22s}
footer.lp5-footer a.lp5-footer-cta-card:hover{
  color:var(--footer-ink);background:#fff;border-color:#fff;
  transform:translateY(-2px);box-shadow:0 14px 32px -14px rgba(0,0,0,.32)
}
footer.lp5-footer a.lp5-footer-cta-card:hover svg{transform:translateX(3px)}
.lp5-footer-nav{padding:0}
.lp5-footer-heading{
  display:flex;align-items:center;gap:10px;
  color:#fff;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;margin:0 0 18px
}
.lp5-footer-heading::after{
  content:"";flex:1;height:1px;border-radius:99px;
  background:linear-gradient(90deg,rgba(255,255,255,.4),transparent)
}
footer.lp5-footer a.lp5-footer-link{
  display:flex;align-items:center;gap:8px;font-size:.93rem;font-weight:500;
  color:rgba(255,255,255,.78);padding:8px 0;text-decoration:none;
  transition:color .2s,transform .2s
}
footer.lp5-footer a.lp5-footer-link:hover{color:#fff;transform:translateX(4px)}
footer.lp5-footer a.lp5-footer-rolepick{
  display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.78);
  font-size:.93rem;font-weight:500;padding:9px 14px;margin:0 -14px;border-radius:12px;
  transition:color .2s,background .2s,border-color .2s,transform .2s;
  border:1px solid transparent;text-decoration:none
}
footer.lp5-footer a.lp5-footer-rolepick:hover{
  color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);transform:translateX(2px)
}
footer.lp5-footer a.lp5-footer-rolepick.is-active{
  color:#fff;font-weight:650;
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);
  box-shadow:0 4px 16px -10px rgba(0,0,0,.2)
}
.lp5-footer-dotmark{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.2)}
footer.lp5-footer a.lp5-footer-contact{font-weight:550;color:rgba(255,255,255,.88)}
footer.lp5-footer a.lp5-footer-contact:hover{color:#fff}
.lp5-footer-contact svg{
  width:16px;height:16px;flex:none;padding:7px;border-radius:9px;
  background:rgba(255,255,255,.1);color:#fff;box-sizing:content-box;
  border:1px solid rgba(255,255,255,.15)
}
.lp5-footer-connect .lp5-footer-link{align-items:flex-start;gap:12px}
.lp5-footer-newsletter{margin-top:22px}
.lp5-footer-newsletter-card{
  padding:18px;border-radius:16px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)
}
.lp5-footer-newsletter-title{
  font-family:"Bricolage Grotesque","Inter",sans-serif;font-size:1rem;font-weight:700;
  color:#fff;margin:0 0 6px;letter-spacing:-.02em
}
.lp5-footer-newsletter-lede{font-size:.84rem;color:rgba(255,255,255,.75);line-height:1.55;margin:0 0 14px}
.lp5-footer-newsletter-row{display:flex;gap:10px;flex-wrap:wrap}
.lp5-footer-newsletter-input{
  flex:1 1 150px;min-width:0;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.35);background:#fff;
  color:var(--footer-ink);font-size:.9rem;font-family:inherit;font-weight:500;
  transition:border-color .2s,box-shadow .2s
}
.lp5-footer-newsletter-input::placeholder{color:color-mix(in srgb,var(--footer-ink) 42%,#94a3b8)}
.lp5-footer-newsletter-input:focus{
  outline:none;border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.28)
}
footer.lp5-footer .lp5-footer-newsletter-btn{
  flex:none;padding:12px 18px;border-radius:12px;cursor:pointer;
  font-size:.88rem;font-weight:650;font-family:inherit;
  color:#fff;background:rgba(255,255,255,.16);
  border:1.5px solid rgba(255,255,255,.45);
  box-shadow:0 6px 18px -12px rgba(0,0,0,.25);
  transition:transform .2s,background .2s,color .2s,border-color .2s,box-shadow .2s
}
footer.lp5-footer .lp5-footer-newsletter-btn:hover:not(:disabled){
  color:var(--footer-ink);background:#fff;border-color:#fff;
  transform:translateY(-1px);box-shadow:0 10px 26px -12px rgba(0,0,0,.3)
}
.lp5-footer-newsletter-btn:disabled{opacity:.65;cursor:not-allowed}
.lp5-footer-newsletter-err,
.lp5-footer-newsletter-ok{font-size:.82rem;margin-top:8px;display:none;line-height:1.4}
.lp5-footer-newsletter-err{color:#fecaca}
.lp5-footer-newsletter-err.error{display:block}
.lp5-footer-newsletter-ok{color:#bbf7d0;display:none}
.lp5-footer-newsletter-ok:not(:empty){display:block}
.lp5-footer-bot{
  position:relative;z-index:1;
  margin:0;padding:24px 0 30px;
  border-top:1px solid rgba(255,255,255,.2);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  font-size:.84rem;color:rgba(255,255,255,.68)
}
.lp5-footer-bot[data-reveal]{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)
}
.lp5-footer-legal{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
footer.lp5-footer .lp5-footer-bot a{color:rgba(255,255,255,.68);text-decoration:none;transition:color .2s}
footer.lp5-footer .lp5-footer-bot a:hover{color:#fff}
footer.lp5-footer .lp5-footer-powered{color:rgba(255,255,255,.68)}
footer.lp5-footer .lp5-footer-powered span{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1024px){
  .lp5-footer-in{grid-template-columns:1fr 1fr}
  .lp5-footer-brand{grid-column:1/-1}
  .lp5-footer-connect{grid-column:1/-1}
}
@media(max-width:640px){
  footer.lp5-footer{padding:56px 20px 0}
  .lp5-footer-in{grid-template-columns:1fr;gap:28px;padding-bottom:32px}
  .lp5-footer-tag{max-width:none}
  .lp5-footer-bot{flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:24px}
  .lp5-footer-newsletter-row{flex-direction:column}
  .lp5-footer-newsletter-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .lp5-footer-col[data-reveal],
  .lp5-footer-bot[data-reveal]{opacity:1;transform:none;transition:none}
  .lp5-footer-link:hover,
  .lp5-footer-rolepick:hover,
  .lp5-footer-social-btn:hover,
  footer.lp5-footer a.lp5-footer-cta-card:hover,
  footer.lp5-footer .lp5-footer-newsletter-btn:hover:not(:disabled){transform:none}
}

/* ============ SCROLL TO TOP ============ */
.lp5-scroll-top{
  position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:70;
  width:48px;height:48px;border-radius:15px;border:1px solid color-mix(in srgb,var(--accent) 22%,#fff);
  background:linear-gradient(155deg,var(--accent2) 0%,var(--accent) 58%,color-mix(in srgb,var(--accent) 78%,#000) 100%);
  color:#fff;overflow:visible;
  box-shadow:0 10px 26px -12px var(--glow),0 2px 0 rgba(255,255,255,.24) inset,0 -1px 0 rgba(0,0,0,.08) inset;
  display:grid;place-items:center;cursor:pointer;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(14px) scale(.94);
  transition:
    opacity .28s ease,transform .32s cubic-bezier(.2,.7,.2,1),visibility .28s ease,
    background .28s ease,box-shadow .32s ease,border-color .28s ease,width .32s cubic-bezier(.2,.7,.2,1),padding .32s cubic-bezier(.2,.7,.2,1)
}
.lp5-scroll-top::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.04) 42%,transparent 100%);
  opacity:.9;transition:opacity .28s ease
}
.lp5-scroll-top-ring{
  position:absolute;inset:-5px;border-radius:19px;pointer-events:none;
  border:1.5px solid color-mix(in srgb,var(--accent) 34%,transparent);
  opacity:0;transform:scale(.88);
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.2,1),border-color .28s ease
}
.lp5-scroll-top-icon{
  position:relative;z-index:1;width:20px;height:20px;display:block;
  transition:transform .32s cubic-bezier(.2,.7,.2,1),filter .28s ease
}
.lp5-scroll-top-label{
  position:absolute;right:calc(100% + 12px);top:50%;z-index:2;
  padding:8px 12px;border-radius:10px;white-space:nowrap;pointer-events:none;
  font-family:"Bricolage Grotesque","Inter",sans-serif;font-size:.78rem;font-weight:650;letter-spacing:-.02em;
  color:var(--accent-ink);background:#fff;border:1px solid var(--line);
  box-shadow:0 14px 34px -16px rgba(40,28,110,.24),0 4px 12px -8px rgba(28,22,70,.1);
  opacity:0;visibility:hidden;transform:translate(8px,-50%) scale(.96);
  transition:opacity .24s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility .24s ease
}
.lp5-scroll-top-label::after{
  content:"";position:absolute;right:-5px;top:50%;width:9px;height:9px;
  background:#fff;border-right:1px solid var(--line);border-top:1px solid var(--line);
  transform:translateY(-50%) rotate(45deg);border-radius:1px 0 0 0
}
.lp5-scroll-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.lp5-scroll-top:hover{
  background:linear-gradient(155deg,color-mix(in srgb,var(--accent2) 88%,#fff) 0%,var(--accent) 52%,var(--accent-ink) 100%);
  border-color:color-mix(in srgb,var(--accent) 42%,#fff);
  box-shadow:0 18px 40px -14px var(--glow),0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent),0 2px 0 rgba(255,255,255,.3) inset;
  transform:translateY(-4px) scale(1.04)
}
.lp5-scroll-top:hover::before{opacity:1}
.lp5-scroll-top:hover .lp5-scroll-top-ring{opacity:1;transform:scale(1);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.lp5-scroll-top:hover .lp5-scroll-top-icon{transform:translateY(-2px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.12))}
.lp5-scroll-top:hover .lp5-scroll-top-label{opacity:1;visibility:visible;transform:translate(0,-50%) scale(1)}
.lp5-scroll-top:active{
  transform:translateY(-1px) scale(1);
  box-shadow:0 10px 24px -12px var(--glow),0 1px 0 rgba(255,255,255,.2) inset
}
.lp5-scroll-top:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lp5-scroll-top:focus-visible .lp5-scroll-top-label{opacity:1;visibility:visible;transform:translate(0,-50%) scale(1)}
body.nav-menu-open .lp5-scroll-top{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
@media(hover:none){
  .lp5-scroll-top-label{display:none}
}
@media(prefers-reduced-motion:reduce){
  .lp5-scroll-top,.lp5-scroll-top-icon,.lp5-scroll-top-ring,.lp5-scroll-top-label{transition:opacity .2s ease,visibility .2s ease,background .2s ease,box-shadow .2s ease}
  .lp5-scroll-top:hover,.lp5-scroll-top:active{transform:none}
  .lp5-scroll-top:hover .lp5-scroll-top-icon{transform:none}
  .lp5-scroll-top:hover .lp5-scroll-top-ring{transform:none}
}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .nav-in{gap:10px;padding:0 16px;height:54px}
  .brand-logo{height:22px;max-width:min(132px,34vw)}
  .nav-explore{display:none}
  .switcher-item{padding:6px 11px;font-size:.8rem;gap:6px}
  .switcher-icon{width:15px;height:15px}
}
@media(max-width:860px){
  .nav-mid{display:none}
  .switcher{display:none}
  .hamb{display:grid}
  .nav-signin{display:none}
  .brand{flex:1;min-width:0}
  .brand-logo{max-width:min(140px,48vw)}
  .nav-right{gap:6px;margin-left:0}
  body.lp5-body .nav-cta .nav-cta-text{max-width:9.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:920px){
  .hero-in{grid-template-columns:1fr;gap:32px}
  .hero-visual.hv-scene-agent,.hero-visual.hv-scene-developer,.hero-visual.hv-scene-affiliate{max-width:440px;margin:0 auto;width:100%}
  .steps{grid-template-columns:1fr 1fr}
  .feat-grid{grid-template-columns:1fr 1fr}
  .bridge-cards{grid-template-columns:1fr}
  .price-wrap{grid-template-columns:1fr 1fr}
  .contact-in{grid-template-columns:1fr;gap:34px}
}
@media(max-width:560px){
  section{padding:var(--lp5-section-y) 20px}
  .hero{padding:28px 20px calc(var(--lp5-section-y) * .85)}
  .nav-in{padding:0 14px;height:52px;gap:8px}
  .nav-lang{display:none}
  .brand-logo{height:21px;max-width:min(124px,42vw)}
  body.lp5-body .nav-cta{padding:7px 10px;font-size:.76rem;gap:4px}
  .nav-sub-in{padding:3px 12px}
  .nav-sub-chip{padding:4px 9px;font-size:.72rem}
  .nav-sub-icon{width:12px;height:12px}
  .hero-copy-glow{left:-32px;top:-36px;width:220px;height:220px}
  .hero-eyebrow{padding:4px 14px 4px 5px;gap:9px}
  .hero-eyebrow-mark{width:26px;height:26px;border-radius:8px}
  .hero-eyebrow-text{font-size:.8rem}
  .hero h1{font-size:clamp(2.05rem,9vw,2.65rem);margin:8px 0 10px}
  .hero .lede{font-size:1rem;max-width:none;margin-bottom:14px}
  .hero-value-chips{padding:10px 10px 8px;margin-bottom:14px}
  .hero-value-chips li{grid-template-columns:28px 1fr;gap:9px;padding:7px 2px}
  .hvc-step{width:28px;height:28px;border-radius:9px}
  .hvc-copy{font-size:.84rem;padding-top:3px}
  body.lp5-body .btn-hero{flex:1;min-width:calc(50% - 6px);justify-content:center;padding:10px 12px;font-size:.84rem}
  .hero-trust-card{width:100%;max-width:100%;padding:6px 8px;margin-top:10px;border-radius:14px;justify-content:flex-start}
  .hero-trust-signals{flex-wrap:wrap;row-gap:2px}
  .hero-trust-signals .hts-chip{padding:3px 6px}
  .hero-trust-signals .hts-chip:not(:last-child)::after{display:none}
  .hero-trust-sep{display:none}
  .live-counter{margin-left:0;width:100%;justify-content:flex-start;margin-top:2px;border-radius:10px;padding:5px 10px}
  .steps,.feat-grid,.price-wrap{grid-template-columns:1fr}
  .cta-band{margin-top:var(--lp5-section-y);margin-bottom:var(--lp5-section-y)}
  .cta-in{
    padding-block:clamp(48px,8vw,56px);
    padding-inline:22px;
    border-radius:26px
  }
  .cta-title{font-size:clamp(1.75rem,7vw,2.35rem);max-width:none}
  .cta-lede{margin-bottom:26px;font-size:.98rem}
  .cta-in .btn-cta{
    padding:5px 5px 5px 18px;font-size:.88rem;gap:10px;
    white-space:normal;text-align:left
  }
  .cta-in .btn-cta-label{padding:4px 0;line-height:1.3}
  .cta-in .btn-cta-icon{width:34px;height:34px}
  .cta-in .btn-cta-icon svg{width:14px;height:14px}
  .cta-micro{flex-direction:column;gap:10px}
  .contact-band{padding:var(--lp5-section-y) 20px}
  .contact-card{padding:22px 18px}
  .contact-card .form-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .reveal,.story-stage.in-view .story-step,.hero-hub .hub-core,.hero-hub .hub-ring,.live-counter .pulse::after,.hero::before,.hero::after,.hero h1 .hero-accent,.hero h1 .hero-accent::after,.hero-eyebrow-pulse::after,.htw-marquee-track,.htw-progress-fill,.flow-step-card,.fsc-orbit,.fsc-line::after,.fsc-dot,.cta-in,.cta-glow-1,.cta-glow-2{animation:none!important}
  .reveal{opacity:1;transform:none}
  .flow-step-card{opacity:1;transform:none}
  .story-step{opacity:1;transform:none}
  .hero h1 .hero-accent::after{transform:scaleX(1)}
  .nav-drawer-panel,.nav-drawer-backdrop,.nav-sub{animation:none!important;transition:none!important}
}

/* ============================================================
   HERO STAGE - role-specific story sections
   ============================================================ */

/* Hero background depth */
.hero{background:var(--hero);position:relative}
.hero::before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-200px;background:radial-gradient(circle,var(--glow),transparent 68%);opacity:.28;pointer-events:none;filter:blur(8px);animation:auroraDrift 18s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;width:420px;height:420px;left:-160px;bottom:-160px;background:radial-gradient(circle,var(--glow),transparent 70%);opacity:.18;pointer-events:none;filter:blur(20px);animation:auroraDrift 22s ease-in-out infinite alternate-reverse}
.hero-grid{position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(40,28,110,.07) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);pointer-events:none;z-index:0}
.hero-in{position:relative;z-index:1}

@keyframes auroraDrift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(40px,30px) scale(1.08)}
}

/* Headline upgrades */
.hero-copy{position:relative;max-width:34rem;isolation:isolate}
.hero-copy-glow{position:absolute;top:-48px;left:-72px;width:280px;height:280px;background:radial-gradient(circle,var(--accent-soft) 0%,transparent 68%);opacity:.75;filter:blur(16px);pointer-events:none;z-index:-1}
.hero-copy::after{content:"";position:absolute;inset:auto -40px -48px 40%;height:140px;background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.55),transparent 72%);pointer-events:none;z-index:-1}

.hero-eyebrow{position:relative;display:inline-flex;align-items:center;gap:11px;padding:5px 18px 5px 6px;margin-bottom:2px;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.72) 100%);box-shadow:0 10px 28px -18px var(--glow),0 1px 0 rgba(255,255,255,.95) inset;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);isolation:isolate}
.hero-eyebrow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 42%,rgba(255,255,255,.55) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.9}
.hero-eyebrow::after{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.65) 50%,transparent 62%);opacity:.55;pointer-events:none}
.hero-eyebrow-mark{position:relative;z-index:1;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent-soft) 0%,#fff 100%);box-shadow:0 4px 12px -6px var(--glow),0 1px 0 rgba(255,255,255,.9) inset;flex:none}
.hero-eyebrow-pulse{position:relative;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.85)}
.hero-eyebrow-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--accent);opacity:.4;animation:pulseRing 2.4s ease-out infinite}
.hero-eyebrow-text{position:relative;z-index:1;font-family:"Bricolage Grotesque","Inter",sans-serif;font-size:.86rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;background:linear-gradient(92deg,var(--ink) 8%,var(--accent-ink) 55%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

.hero h1{font-size:clamp(2.45rem,5vw,4.1rem);letter-spacing:-.025em;line-height:1.02;margin:10px 0 12px}
.hero .lede{font-size:1.08rem;line-height:1.58;color:var(--muted);max-width:38ch;margin-bottom:16px}
.serif-italic{font-family:"Instrument Serif","Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.005em;color:var(--accent-ink)}

/* Hero headline accent — gradient word, matches brand per theme */
.hero h1 .hero-accent{
  font-family:"Bricolage Grotesque","Inter",sans-serif;
  font-style:normal;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(115deg,var(--accent) 0%,var(--accent2) 52%,var(--accent) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  display:inline;position:relative;padding:0 .02em;
  animation:heroAccentShift 7s ease-in-out infinite
}
.hero h1 .hero-accent::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  opacity:.28;z-index:-1;transform:scaleX(0);transform-origin:left;
  animation:heroAccentLine .9s cubic-bezier(.2,.7,.2,1) .45s forwards
}
@keyframes heroAccentShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes heroAccentLine{
  to{transform:scaleX(1)}
}

/* Value chips — 3-step scannable story, mirrors right visual */
.hero-value-chips{list-style:none;margin:0 0 18px;padding:12px 14px 10px;background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.58) 100%);border:1px solid rgba(255,255,255,.85);border-radius:16px;box-shadow:0 18px 40px -28px var(--glow),0 1px 0 rgba(255,255,255,.9) inset;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;gap:0}
.hero-value-chips li{display:grid;grid-template-columns:32px 1fr;gap:11px;align-items:start;padding:8px 3px;position:relative}
.hero-value-chips li:not(:last-child)::after{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent) 0%,var(--accent-soft) 100%);border-radius:99px;opacity:.32;z-index:0}
.hvc-step{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px -10px var(--glow);flex:none;position:relative;z-index:1}
.hvc-step i{font-family:"Bricolage Grotesque","Inter",sans-serif;font-style:normal;font-weight:700;font-size:.84rem;line-height:1}
.hvc-copy{font-size:.88rem;line-height:1.42;color:var(--muted);padding-top:4px}
.hvc-copy strong{color:var(--ink);font-weight:650}

/* Hero trust wall — compact verified partner strip */
.hero-trust-wall{width:100%;max-width:100%;margin:0}
.htw-shell{
  position:relative;padding:11px 13px 12px 16px;border-radius:17px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse 120% 90% at 0% 0%,color-mix(in srgb,var(--accent-soft) 55%,#fff) 0%,transparent 52%),
    linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 38%,#fff) 0%,rgba(255,255,255,.94) 55%,rgba(255,255,255,.88) 100%);
  border:1px solid color-mix(in srgb,var(--accent) 16%,#fff);
  box-shadow:0 22px 44px -26px var(--glow),0 0 0 1px rgba(255,255,255,.7) inset;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .3s ease,box-shadow .3s ease
}
.hero-trust-wall:hover .htw-shell{transform:translateY(-1px);box-shadow:0 26px 48px -24px var(--glow),0 0 0 1px rgba(255,255,255,.8) inset}

.htw-accent-bar{
  position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 99px 99px 0;
  background:linear-gradient(180deg,var(--accent),var(--accent2));box-shadow:0 0 18px -4px var(--glow)
}
.htw-ambient{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse 70% 80% at 0% 50%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 58%)
}

.htw-shell::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 65%,#fff) 0%,transparent 42%,color-mix(in srgb,var(--accent2) 50%,#fff) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55
}

.htw-top{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--accent) 14%,var(--line))
}
.htw-head-brand{display:flex;align-items:flex-start;gap:10px;min-width:0;flex:1}
.htw-head-icon{
  flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 18px -10px var(--glow)
}
.htw-head-icon svg{width:18px;height:18px}
.htw-head-copy{display:grid;gap:1px;min-width:0}
.htw-head-eyebrow{
  margin:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.56rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);font-weight:600;line-height:1.3
}
.htw-head-title{
  margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:.92rem;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);line-height:1.25
}
.htw-head-sub{margin:0;font-size:.72rem;color:var(--muted);line-height:1.35}

.htw-head-metric{
  flex:none;display:grid;gap:1px;min-width:72px;padding:8px 11px;border-radius:12px;text-align:center;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--accent-soft) 50%,#fff));
  border:1px solid color-mix(in srgb,var(--accent) 18%,#fff);
  box-shadow:0 10px 22px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.95)
}
.htw-metric-val{
  font-family:"Bricolage Grotesque",sans-serif;font-size:1.12rem;font-weight:800;line-height:1;
  letter-spacing:-.03em;background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.htw-metric-label{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.54rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);font-weight:600
}

.htw-strip{
  position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:center
}

.htw-spot{
  width:132px;flex:none;padding:8px 10px 7px;border-radius:13px;position:relative;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--accent-soft) 55%,#fff));
  border:1px solid color-mix(in srgb,var(--accent) 22%,#fff);
  box-shadow:0 10px 22px -14px var(--glow),0 0 0 1px rgba(255,255,255,.9) inset
}
.htw-spot-label{
  display:block;margin-bottom:5px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.5rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:700;text-align:center
}
.htw-spot-stage{position:relative;display:grid;place-items:center;height:50px;overflow:hidden}
.htw-spot-slide{
  grid-area:1/1;opacity:0;transform:scale(.92);
  transition:opacity .45s ease,transform .45s ease;pointer-events:none;display:grid;place-items:center;width:100%;height:100%
}
.htw-spot-slide.is-on{opacity:1;transform:none;pointer-events:auto}
.htw-spot-slide img{
  display:block;width:auto;height:44px;max-width:118px;object-fit:contain;object-position:center;
  filter:drop-shadow(0 4px 10px rgba(40,28,110,.1));
  transform:scale(1.12);transform-origin:center center
}

.htw-progress{height:3px;border-radius:99px;background:color-mix(in srgb,var(--accent) 14%,#fff);overflow:hidden;margin-top:6px}
.htw-progress-fill{
  display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  animation:htwProgressFill 3.2s linear infinite
}
.htw-spot.is-paused .htw-progress-fill{animation-play-state:paused}

.htw-connector{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;
  color:var(--accent);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 18%,#fff)
}
.htw-connector svg{width:12px;height:12px}

.htw-marquee{
  position:relative;overflow:hidden;border-radius:12px;min-width:0;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.58));
  border:1px solid color-mix(in srgb,var(--accent) 14%,#fff);padding:8px 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)
}
.htw-marquee-fade{position:absolute;top:0;bottom:0;width:32px;z-index:2;pointer-events:none}
.htw-marquee-fade-left{left:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent-soft) 80%,#fff),transparent)}
.htw-marquee-fade-right{right:0;background:linear-gradient(270deg,color-mix(in srgb,var(--accent-soft) 80%,#fff),transparent)}
.htw-marquee-track{display:flex;align-items:center;gap:10px;width:max-content;animation:htwMarqueeL 34s linear infinite;will-change:transform}
.htw-marquee.is-paused .htw-marquee-track{animation-play-state:paused}

.htw-logo-chip{
  flex:none;display:grid;place-items:center;width:118px;height:58px;padding:4px 8px;border-radius:11px;
  background:#fff;border:1px solid rgba(255,255,255,.98);box-shadow:0 8px 16px -12px rgba(40,28,110,.2);
  transition:transform .25s,border-color .25s,box-shadow .25s;overflow:hidden
}
.htw-logo-chip img{
  display:block;width:auto;height:40px;max-width:104px;object-fit:contain;object-position:center;
  filter:grayscale(.12);opacity:.96;
  transform:scale(1.14);transform-origin:center center;
  transition:filter .25s,opacity .25s,transform .25s
}
.htw-logo-chip:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 28%,#fff);box-shadow:0 12px 20px -10px var(--glow)}
.htw-logo-chip:hover img{filter:none;opacity:1;transform:scale(1.22)}

@keyframes htwMarqueeL{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes htwProgressFill{0%{width:0}100%{width:100%}}

@media(max-width:640px){
  .htw-top{align-items:stretch;flex-direction:column;gap:8px;padding-bottom:9px;margin-bottom:9px}
  .htw-head-brand{align-items:center}
  .htw-head-metric{align-self:flex-start;min-width:64px;padding:7px 10px}
  .htw-strip{grid-template-columns:1fr;gap:7px}
  .htw-connector{display:none}
  .htw-spot{width:100%;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:0 10px;padding:8px 10px}
  .htw-spot-label{grid-column:1;text-align:left;margin-bottom:2px}
  .htw-spot-stage{grid-column:1;height:46px}
  .htw-spot-slide img{height:40px;transform:scale(1.1)}
  .htw-progress{grid-column:2;grid-row:1/span 2;margin-top:0;width:52px;align-self:center}
  .htw-logo-chip{width:104px;height:54px;padding:4px 7px}
  .htw-logo-chip img{height:36px;transform:scale(1.1)}
  .htw-logo-chip:hover img{transform:scale(1.16)}
}

@media(max-width:560px){
  .htw-shell{padding:10px 11px 11px 14px}
  .htw-marquee-track{animation-duration:42s}
}

@media(prefers-reduced-motion:reduce){
  .hero-trust-wall:hover .htw-shell{transform:none}
  .htw-progress-fill{animation:none!important}
  .htw-marquee-track{animation:none!important;flex-wrap:wrap;width:100%;justify-content:center;padding:0 6px}
  .htw-marquee-fade{display:none}
  .htw-spot-slide{transition:none}
  .htw-progress-fill{width:100%}
}

/* Hero CTAs */
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
body.lp5-body .btn-hero{padding:11px 18px;font-size:.9rem;border-radius:12px}
body.lp5-body .btn-hero.btn-primary{box-shadow:0 12px 28px -12px var(--glow)}
body.lp5-body .btn-hero.btn-primary:hover{transform:translateY(-1px)}
body.lp5-body .btn-hero.btn-ghost{background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.lp5-body .btn-hero .btn-icon{width:16px;height:16px;flex:none;transition:transform .25s ease}
body.lp5-body .btn-hero.btn-primary:hover .btn-icon{transform:translateX(2px)}
body.lp5-body .btn-hero.btn-ghost:hover .btn-icon{transform:translateX(2px)}

/* Hero trust card — compact pill strip */
.hero-trust-card{
  margin-top:12px;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:100%;
  padding:5px 6px 5px 8px;border-radius:999px;
  background:rgba(255,255,255,.78);border:1px solid color-mix(in srgb,var(--accent) 10%,#fff);
  box-shadow:0 10px 28px -18px var(--glow),0 1px 0 rgba(255,255,255,.95) inset;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.hero-trust-signals{
  display:flex;align-items:center;gap:0;flex-wrap:nowrap;list-style:none;margin:0;padding:0;min-width:0
}
.hero-trust-signals .hts-chip{
  display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;
  color:var(--accent-ink);white-space:nowrap;
  transition:background .2s ease
}
.hero-trust-signals .hts-chip:hover{background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
.hero-trust-signals .hts-chip:not(:last-child){
  position:relative;margin-right:2px
}
.hero-trust-signals .hts-chip:not(:last-child)::after{
  content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:color-mix(in srgb,var(--accent) 16%,var(--line));opacity:.85
}
.hts-icon{
  flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(145deg,var(--accent),var(--accent2));
  box-shadow:0 4px 10px -8px var(--glow)
}
.hts-icon svg{width:11px;height:11px;display:block}
.hts-label{font-size:.71rem;font-weight:650;letter-spacing:-.01em;color:var(--ink);line-height:1}
.hero-trust-sep{
  width:1px;height:18px;flex:none;margin:0 2px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 18%,var(--line)),transparent)
}
.live-counter{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:4px 10px 4px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--accent-soft) 72%,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));
  font-size:.71rem;color:var(--muted);font-weight:500;line-height:1
}
.live-counter .pulse{position:relative;width:7px;height:7px;border-radius:50%;background:#16b97f;flex:none}
.live-counter .pulse::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid #16b97f;
  animation:pulseRing 2s ease-out infinite
}
.live-counter b{
  color:var(--accent-ink);font-weight:700;font-family:"Bricolage Grotesque",sans-serif;
  font-size:.76rem;white-space:nowrap;letter-spacing:-.02em
}
.live-counter-desc{color:var(--muted);font-weight:550;font-size:.68rem;white-space:nowrap}
.hero-trust-row{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.avatar-stack{display:flex;align-items:center}
.avatar-stack .av{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;font-size:.74rem;font-weight:700;color:#fff;font-family:"Inter",sans-serif;margin-left:-9px;background:var(--accent)}
.avatar-stack .av:first-child{margin-left:0}
.avatar-stack .av.av-1{background:linear-gradient(135deg,#7c6dff,#4f46e5)}
.avatar-stack .av.av-2{background:linear-gradient(135deg,#22c3a6,#0e9f6e)}
.avatar-stack .av.av-3{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.avatar-stack .av.av-4{background:linear-gradient(135deg,#9333ea,#db2777)}
.avatar-stack .av.more{background:#fff;color:var(--accent-ink);border-color:var(--line);font-weight:600;font-size:.7rem}
@keyframes pulseRing{
  0%{transform:scale(.6);opacity:1}
  100%{transform:scale(2.2);opacity:0}
}

/* ============================================================
   FLOW STEPS BAND — animated 3-step journey (agent / developer)
   ============================================================ */
.flow-steps-band{
  padding:0 26px 8px;margin-top:-18px;position:relative;z-index:2
}
.flow-steps-in{
  max-width:var(--maxw);margin:0 auto;
  padding:20px 22px 18px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 28px 56px -36px var(--glow),0 1px 0 rgba(255,255,255,.95) inset;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  overflow:hidden;position:relative
}
.flow-steps-in::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--accent-soft),transparent 40%,var(--accent-soft));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.65;pointer-events:none
}

.flow-steps-track{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0;align-items:stretch
}

.flow-step-card{
  position:relative;padding:14px 12px 12px;border-radius:16px;
  background:rgba(255,255,255,.55);border:1px solid transparent;
  opacity:0;transform:translateY(18px) scale(.96);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s,background .4s
}
.flow-steps-band.in-view .flow-step-card{
  animation:flowStepIn .65s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(.08s + (var(--step-i) * .14s))
}
.flow-step-card.is-active{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.85));
  border-color:var(--accent-soft);
  box-shadow:0 16px 34px -22px var(--glow);
  transform:translateY(-2px) scale(1.02)
}
.flow-steps-band.in-view .flow-step-card.is-active{animation:none;opacity:1;transform:translateY(-2px) scale(1.02)}

.fsc-num-wrap{
  position:relative;width:44px;height:44px;margin-bottom:10px;display:grid;place-items:center
}
.fsc-orbit{
  position:absolute;inset:0;border-radius:14px;
  background:conic-gradient(from 200deg,var(--accent),var(--accent2),var(--accent-soft),var(--accent));
  opacity:.22;animation:fscOrbitSpin 8s linear infinite
}
.flow-step-card.is-active .fsc-orbit{opacity:.38;animation-duration:4s}

.fsc-num{
  position:relative;z-index:1;width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;
  font-family:"Bricolage Grotesque","Inter",sans-serif;font-weight:800;font-size:.95rem;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 10px 22px -12px var(--glow);
  transition:transform .35s cubic-bezier(.2,.7,.2,1)
}
.flow-step-card.is-active .fsc-num{transform:scale(1.08)}

.fsc-title{
  font-family:"Bricolage Grotesque","Inter",sans-serif;font-size:.98rem;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:5px;line-height:1.2
}
.fsc-desc{font-size:.8rem;line-height:1.45;color:var(--muted)}

.flow-step-connector{
  position:relative;display:grid;place-items:center;width:36px;align-self:center;padding-top:8px
}
.fsc-line{
  display:block;width:2px;height:100%;min-height:48px;border-radius:99px;
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent-soft) 100%);
  opacity:.25;position:relative;overflow:hidden
}
.fsc-line::after{
  content:"";position:absolute;left:0;top:-100%;width:100%;height:40%;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);
  animation:fscLineFlow 2.2s ease-in-out infinite;
  animation-delay:calc(var(--step-i, 0) * .3s)
}
.flow-step-connector:nth-of-type(2) .fsc-line::after{animation-delay:.6s}

.fsc-dot{
  position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);
  opacity:0;transform:scale(.5)
}
.flow-steps-band.in-view .fsc-dot{animation:fscDotPop .65s cubic-bezier(.2,.7,.2,1) forwards}
.flow-step-connector:nth-of-type(1) .fsc-dot{animation-delay:.35s}
.flow-step-connector:nth-of-type(2) .fsc-dot{animation-delay:.55s}

@keyframes flowStepIn{
  from{opacity:0;transform:translateY(18px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fscOrbitSpin{to{transform:rotate(360deg)}}
@keyframes fscLineFlow{
  0%{top:-40%;opacity:0}
  30%{opacity:1}
  100%{top:120%;opacity:0}
}
@keyframes fscDotPop{
  0%{opacity:0;transform:scale(.5)}
  70%{transform:scale(1.15)}
  100%{opacity:1;transform:scale(1)}
}

@media(max-width:860px){
  .flow-steps-band{padding:0 20px 6px;margin-top:-12px}
  .flow-steps-in{padding:16px 14px 14px}
  .flow-steps-track{grid-template-columns:1fr;gap:10px}
  .flow-step-connector{
    width:100%;height:28px;padding:0;grid-template-columns:1fr;justify-items:center
  }
  .fsc-line{width:2px;min-height:28px;height:28px}
  .fsc-dot{top:50%}
  .flow-step-card{padding:12px 14px;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center}
  .fsc-num-wrap{margin:0}
  .fsc-title,.fsc-desc{grid-column:2}
  .fsc-title{margin-bottom:2px}
}

@media(prefers-reduced-motion:reduce){
  .flow-step-card,.fsc-orbit,.fsc-line::after,.fsc-dot{animation:none!important;transition:none!important}
  .flow-step-card{opacity:1;transform:none}
  .fsc-dot{opacity:1;transform:none}
}

/* ============================================================
   STORY STAGE - 3-step vertical narrative per role
   ============================================================ */
.story-stage{position:relative;width:100%;max-width:480px;margin:0 auto;padding:22px 14px;isolation:isolate}
.story-stage::before{content:"";position:absolute;inset:6px;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.28));border:1px solid rgba(255,255,255,.55);box-shadow:0 35px 70px -38px var(--glow);backdrop-filter:blur(12px);pointer-events:none;z-index:0}
.story-stage::after{content:"";position:absolute;inset:26px 20px auto 20px;height:60%;border-radius:28px;background:radial-gradient(circle at 50% 0%,var(--accent-soft),transparent 68%);opacity:.8;filter:blur(8px);pointer-events:none;z-index:0}
.story-track{list-style:none;display:grid;grid-template-columns:1fr;gap:24px;position:relative;z-index:2;margin:0;padding:0}
.story-step{position:relative;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.96) 100%);border:1px solid rgba(255,255,255,.75);border-radius:20px;padding:22px 22px 22px 78px;box-shadow:0 18px 42px -24px rgba(40,28,110,.28),0 1px 0 rgba(255,255,255,.85) inset;opacity:0;transform:translateY(14px);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;will-change:transform,opacity;overflow:hidden}
.story-step::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,var(--accent-soft),transparent 82%);pointer-events:none}
.story-step::after{content:"";position:absolute;inset:auto -25% -45% 35%;height:90px;background:radial-gradient(circle,var(--accent-soft),transparent 65%);opacity:.6;pointer-events:none;filter:blur(12px)}
.story-step:hover{transform:translateY(-4px);box-shadow:0 26px 60px -28px rgba(40,28,110,.34),0 1px 0 rgba(255,255,255,.85) inset}
.story-stage.in-view .story-step{animation:stepReveal .65s cubic-bezier(.2,.7,.2,1) forwards}
.story-stage.in-view .story-step:nth-child(1){animation-delay:.05s}
.story-stage.in-view .story-step:nth-child(2){animation-delay:.30s}
.story-stage.in-view .story-step:nth-child(3){animation-delay:.55s}

.story-step .step-num{position:absolute;top:22px;left:22px;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:grid;place-items:center;font-family:"Bricolage Grotesque","Inter",sans-serif;font-weight:700;font-size:.94rem;letter-spacing:.02em;box-shadow:0 10px 24px -10px var(--glow);z-index:2}
.story-step .step-head{display:flex;align-items:flex-start;gap:14px}
.story-step .step-copy{flex:1;min-width:0}
.story-step h3{font-family:"Bricolage Grotesque","Inter",sans-serif;font-weight:700;font-size:1.12rem;color:var(--ink);margin:0 0 5px 0;letter-spacing:-.01em}
.story-step .step-desc{font-size:.92rem;color:var(--muted);line-height:1.5;margin:0}
.story-step .step-proof{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:8px 12px;background:var(--accent-soft);color:var(--accent-ink);border-radius:10px;font-size:.82rem;font-weight:500;box-shadow:0 8px 22px -18px var(--glow)}
.story-step .step-proof b{font-family:"Bricolage Grotesque","Inter",sans-serif;font-weight:700;color:var(--accent-ink)}
.story-step .step-proof .pdot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* Richer mini visuals inside each step */
.step-mini{margin-top:14px;padding:12px 13px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.72));border:1px solid var(--line);box-shadow:0 14px 30px -24px rgba(40,28,110,.22)}
.step-mini .mini-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.step-mini .mini-row+.mini-row{margin-top:8px}
.step-mini .mini-label{font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-family:"JetBrains Mono",ui-monospace,monospace}
.step-mini .mini-value{font-size:.86rem;color:var(--ink);font-weight:600}
.step-mini .mini-chip-row{display:flex;flex-wrap:wrap;gap:7px}
.step-mini .mini-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:.74rem;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--muted);box-shadow:var(--shadow-sm)}
.step-mini .mini-chip.soft{background:var(--soft)}
.step-mini .mini-chip.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.step-mini .mini-chip.success{background:#e8f8f0;border-color:#cbeedd;color:#0a7d57}
.step-mini .mini-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);font-size:.72rem;font-weight:700}
.step-mini .mini-badge.dark{background:var(--ink);color:#fff}
.step-mini .mini-bars{display:grid;gap:7px}
.step-mini .mini-bar{height:7px;border-radius:999px;background:rgba(79,70,229,.12);overflow:hidden}
.step-mini .mini-bar>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left center}
.story-stage.in-view .mini-bar>span{animation:miniBarFill 1.1s ease-out forwards}
.story-stage.in-view .story-step:nth-child(2) .mini-bar>span{animation-delay:.45s}
.story-stage.in-view .story-step:nth-child(3) .mini-bar>span{animation-delay:.75s}
.step-mini .mini-avatars{display:flex;align-items:center}
.step-mini .mini-avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.64rem;font-weight:700;color:#fff;margin-left:-6px;border:2px solid #fff;box-shadow:var(--shadow-sm)}
.step-mini .mini-avatar:first-child{margin-left:0}
.step-mini .mini-avatar.a1{background:linear-gradient(135deg,#7c6dff,#4f46e5)}
.step-mini .mini-avatar.a2{background:linear-gradient(135deg,#22c3a6,#0e9f6e)}
.step-mini .mini-avatar.a3{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.step-mini .mini-avatar.a4{background:linear-gradient(135deg,#9333ea,#db2777)}
.step-mini .mini-browser{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid var(--line);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.72rem;color:var(--muted)}
.step-mini .mini-browser .dots{display:flex;gap:4px}
.step-mini .mini-browser .dots i{width:7px;height:7px;border-radius:50%;background:var(--line);display:inline-block}
.step-mini .mini-browser .url{color:var(--accent-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Featured (middle) step */
.story-step.is-feature{border-color:transparent;box-shadow:0 0 0 1.5px var(--accent),0 30px 60px -28px var(--glow)}
.story-step.is-feature .step-num{background:var(--accent);box-shadow:0 12px 28px -10px var(--glow)}
.story-step.is-feature .step-mini{box-shadow:0 18px 40px -26px var(--glow)}

/* Connecting arrow column */
.story-arrows{position:absolute;left:43px;top:0;bottom:0;width:4px;z-index:1;pointer-events:none}
.story-arrows::before{content:"";position:absolute;top:64px;bottom:64px;left:50%;transform:translateX(-50%);width:2px;background:linear-gradient(180deg,var(--accent-soft) 0%,var(--accent) 50%,var(--accent-soft) 100%);opacity:.45;border-radius:2px}
.story-arrows::after{content:"";position:absolute;left:50%;top:72px;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(79,70,229,.35);opacity:0;z-index:2}
.story-arrows .arrow-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.story-arrow{stroke:var(--accent);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120}
.story-stage.in-view .story-arrow{animation:drawOnce 1.4s cubic-bezier(.55,.05,.35,1) forwards}
.story-stage.in-view .story-arrow.a1{animation-delay:.45s}
.story-stage.in-view .story-arrow.a2{animation-delay:.95s}
.story-stage.in-view .story-arrows::after{animation:flowDot 2.2s ease-in-out .5s infinite}

/* Subtle background glow behind the stage */
.story-stage::before{content:"";position:absolute;inset:-20px;background:radial-gradient(circle at 60% 50%,var(--accent-soft) 0%,transparent 65%);z-index:0;opacity:.65;pointer-events:none;border-radius:32px}

/* Floating role tags */
.story-float{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);box-shadow:0 16px 30px -22px rgba(40,28,110,.28);font-size:.74rem;font-weight:700;color:var(--ink);z-index:3;backdrop-filter:blur(10px);white-space:nowrap}
.story-float .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.story-stage.in-view .story-float{animation:floatTag 5.4s ease-in-out infinite}
.story-stage.in-view .story-float.f2{animation-delay:1.1s}
.story-stage[data-scene="agent"] .story-float.f1{top:0;right:-4px}
.story-stage[data-scene="agent"] .story-float.f2{bottom:8px;right:-8px}
.story-stage[data-scene="developer"] .story-float.f1{top:0;right:-8px}
.story-stage[data-scene="developer"] .story-float.f2{bottom:18px;left:-10px}
.story-stage[data-scene="affiliate"] .story-float.f1{top:0;right:-6px}
.story-stage[data-scene="affiliate"] .story-float.f2{bottom:10px;right:-10px}

@keyframes stepReveal{
  to{opacity:1;transform:translateY(0)}
}
@keyframes drawOnce{
  to{stroke-dashoffset:0}
}
@keyframes floatTag{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@keyframes flowDot{
  0%{top:72px;opacity:0;box-shadow:0 0 0 0 rgba(79,70,229,.35)}
  12%{opacity:1}
  50%{top:50%;opacity:1;box-shadow:0 0 0 10px rgba(79,70,229,0)}
  100%{top:calc(100% - 72px);opacity:0}
}
@keyframes miniBarFill{
  from{transform:scaleX(.25);opacity:.4}
  to{transform:scaleX(1);opacity:1}
}

/* Inline icon styling */
.story-step .step-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none}
.story-step .step-icon svg{width:22px;height:22px;stroke:currentColor}

/* Shared role tints */
.story-stage[data-scene="agent"] .step-icon{background:#EEF2FF;color:#4338CA}
.story-stage[data-scene="developer"] .step-icon{background:#F0FDF4;color:#047857}
.story-stage[data-scene="affiliate"] .step-icon{background:var(--accent-soft);color:var(--accent)}

/* ============================================================
   RESPONSIVE - story stage
   ============================================================ */
@media(max-width:920px){
  .hero-copy{max-width:none}
  .hero-trust-card,.hero-trust-row{justify-content:flex-start}
  .story-stage{max-width:440px}
  .story-float{font-size:.7rem;padding:6px 10px}
}
@media(max-width:560px){
  .story-stage{max-width:340px}
  .story-step{padding:18px 18px 18px 72px}
  .story-step .step-num{top:18px;left:18px;width:38px;height:38px}
  .story-step .step-icon{width:40px;height:40px;border-radius:12px}
  .story-arrows{left:37px}
  .story-float{display:none}
  .step-mini{padding:10px 11px}
  .step-mini .mini-chip-row{gap:6px}
}

/* ============================================================
   REDUCED MOTION - freeze story stage
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after{animation:none}
  .story-stage *{animation:none!important;transition:none!important}
  .story-stage .story-step{opacity:1!important;transform:none!important}
  .story-stage .story-arrow{stroke-dashoffset:0}
  .hero-hub *{animation:none!important}
}

/* ============================================================
   HERO HUB - Premium Live Product Dashboard & Ecosystem Hub
   ============================================================ */
:root {
  --glow-rgb: 79, 70, 229;
}
body[data-theme="agent"] {
  --glow-rgb: 88, 86, 214;
}
body[data-theme="developer"] {
  --glow-rgb: 4, 120, 87;
}
body[data-theme="affiliate"] {
  --glow-rgb: 37, 99, 235;
}
body[data-theme="affiliate"] .avatar-stack .av.av-1{background:linear-gradient(135deg,#3B82F6,#2563EB)}
body[data-theme="affiliate"] .avatar-stack .av.av-4{background:linear-gradient(135deg,#06B6D4,#3B82F6)}
body[data-theme="affiliate"] .step-mini .mini-avatar.a1{background:linear-gradient(135deg,#3B82F6,#2563EB)}

.hero-hub {
  position: relative;
  width: 100%;
  aspect-ratio: 1.1 / 1;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

/* Premium background glow */
.hero-hub::before {
  content: "";
  position: absolute;
  width: 130%;
  height: 130%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--glow-rgb), 0.15) 0%, transparent 65%);
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
  filter: blur(20px);
}

/* Central Core - Glowing Glassmorphic Hub */
.hub-core {
  position: relative;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  box-shadow: 0 25px 50px -12px rgba(var(--glow-rgb), 0.25), 
              0 0 0 1px rgba(255, 255, 255, 0.4),
              0 0 40px 5px rgba(var(--glow-rgb), 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  animation: hubCoreFloat 8s ease-in-out infinite;
}

.hub-core-logo {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 12px rgba(var(--glow-rgb), 0.3));
}

.hub-core-logo img {
  width: 100%;
  height: 100%;
}

.hub-core-ring {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--glow-rgb), 0.4);
  opacity: 0.4;
  animation: hubRingPulse 4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.hub-core-ring.r2 {
  inset: -45px;
  border-color: rgba(var(--glow-rgb), 0.25);
  animation-delay: 1.3s;
}

.hub-core-ring.r3 {
  inset: -70px;
  border-color: rgba(var(--glow-rgb), 0.12);
  animation-delay: 2.6s;
}

@keyframes hubCoreFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

@keyframes hubRingPulse {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* Ultra-Premium Glassmorphic Floating Hub Cards */
.hub-card {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  padding: 16px 18px;
  box-shadow: 0 25px 50px -15px rgba(40, 28, 110, 0.15), 
              0 1px 0 rgba(255, 255, 255, 0.9) inset,
              0 0 2px rgba(var(--glow-rgb), 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 4;
  width: 220px;
  will-change: transform, opacity;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.hub-card:hover {
  transform: scale(1.04) translateY(-4px) !important;
  border-color: rgba(var(--glow-rgb), 0.4);
  box-shadow: 0 30px 60px -12px rgba(var(--glow-rgb), 0.22), 
              0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* Asynchronous Floating Animations */
.hub-card.hc-1 {
  top: 6%;
  left: -4%;
  animation: floatCard1 7s ease-in-out infinite;
}

.hub-card.hc-2 {
  top: 10%;
  right: -4%;
  width: 230px;
  animation: floatCard2 8s ease-in-out infinite;
}

.hub-card.hc-3 {
  bottom: 6%;
  left: 12%;
  width: 290px;
  animation: floatCard3 9s ease-in-out infinite;
}

@keyframes floatCard1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-4px, -10px) rotate(-1deg); }
}

@keyframes floatCard2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(4px, -8px) rotate(1.5deg); }
}

@keyframes floatCard3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(2px, -6px) rotate(-0.8deg); }
}

/* Hub Card Elements */
.hc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.hc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 8px 16px -4px rgba(var(--glow-rgb), 0.3);
}

.hub-card.agent-theme .hc-icon { background: linear-gradient(135deg, #7c6dff, #4f46e5); }
.hub-card.developer-theme .hc-icon { background: linear-gradient(135deg, #059669, #047857); }
.hub-card.affiliate-theme .hc-icon { background: linear-gradient(135deg, #3B82F6, #2563EB); }

.hc-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.hc-subtitle {
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 500;
}

.hc-body {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.hc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  box-shadow: 0 4px 10px -4px rgba(var(--glow-rgb), 0.15);
}

.hc-badge.collab { background: #eef0fe; color: #4f46e5; }
.hc-badge.live { background: #e8f8f0; color: #0e9f6e; }
.hc-badge.payout { background: var(--accent-soft); color: var(--accent-ink); }

.hc-progress-track {
  height: 7px;
  background: var(--soft);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 10px;
  position: relative;
}

.hc-progress-bar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform-origin: left center;
  animation: hcBarFill 4s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}

@keyframes hcBarFill {
  0% { transform: scaleX(0.15); }
  100% { transform: scaleX(1); }
}

/* Connecting Laser Streams */
.hub-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.hub-laser {
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 10 10;
  animation: laserFlow 20s linear infinite;
  opacity: 0.35;
}

@keyframes laserFlow {
  to { stroke-dashoffset: -400; }
}

.hub-pulse-dot {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
  animation: pulseDotFlow 4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

/* Extra Premium Visual Accents */
.hc-mini-graph {
  height: 35px;
  margin-top: 10px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.hc-mini-bar {
  flex: 1;
  background: var(--accent-soft);
  border-radius: 3px 3px 0 0;
  height: 20%;
  transform-origin: bottom center;
  animation: hcMiniBarGrow 3s ease-in-out infinite alternate;
}

.hc-mini-bar:nth-child(1) { height: 40%; animation-delay: 0.1s; }
.hc-mini-bar:nth-child(2) { height: 75%; animation-delay: 0.3s; }
.hc-mini-bar:nth-child(3) { height: 50%; animation-delay: 0.2s; }
.hc-mini-bar:nth-child(4) { height: 90%; animation-delay: 0.5s; }
.hc-mini-bar:nth-child(5) { height: 60%; animation-delay: 0.4s; }

@keyframes hcMiniBarGrow {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}

.hc-avatars-row {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.hc-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent-ink);
  margin-left: -8px;
  box-shadow: var(--shadow-sm);
}

.hc-avatar:first-child { margin-left: 0; }

/* Premium Interactive Visual Elements */
.agent-node {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 10px 25px -5px rgba(var(--glow-rgb), 0.4), 0 0 0 1px rgba(var(--glow-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  z-index: 4;
  will-change: transform;
}

.agent-node.an-1 {
  top: 15%;
  left: 10%;
  background: linear-gradient(135deg, #7c6dff, #4f46e5);
  animation: floatCard1 8s ease-in-out infinite;
}

.agent-node.an-2 {
  bottom: 15%;
  right: 10%;
  background: linear-gradient(135deg, #22c3a6, #0e9f6e);
  animation: floatCard2 7s ease-in-out infinite;
}

.agent-node::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(var(--glow-rgb), 0.3);
  animation: hubRingPulse 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.agreement-badge {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(var(--glow-rgb), 0.3);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 20px 40px -10px rgba(var(--glow-rgb), 0.25), 0 0 0 1px rgba(255,255,255,0.8) inset;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--accent-ink);
  animation: agreementBadgePop 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}

@keyframes agreementBadgePop {
  0%, 100% { transform: translate(-50%, -50%) rotate(-5deg) scale(0.95); }
  50% { transform: translate(-50%, -50%) rotate(-3deg) scale(1.05); }
}

.agreement-badge svg {
  width: 16px;
  height: 16px;
  stroke: var(--accent);
}

.signature-line {
  position: relative;
  height: 2px;
  background: var(--accent-soft);
  margin-top: 6px;
  overflow: hidden;
}

.signature-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background: var(--accent);
  animation: signatureDraw 2s ease-in-out infinite alternate;
}

@keyframes signatureDraw {
  0% { left: -10%; width: 30%; }
  100% { left: 80%; width: 40%; }
}

/* Developer Console elements */
.dev-console {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 4;
  animation: hubCoreFloat 7s ease-in-out infinite;
}

.dev-progress-circle {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto 0;
}

.dev-progress-svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.dev-progress-bg {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 4;
}

.dev-progress-val {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  animation: devProgressFill 4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes devProgressFill {
  0% { stroke-dashoffset: 157; }
  100% { stroke-dashoffset: 39.25; } /* 75% fill */
}

.dev-progress-text {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--accent-ink);
}

.dev-channel-node {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  z-index: 4;
  animation: hubCardFloat 6s ease-in-out infinite;
}

.dev-channel-node.cn-1 { top: 48%; left: -2%; animation-delay: 0.5s; }
.dev-channel-node.cn-2 { top: 52%; right: -2%; animation-delay: 1.5s; }
.dev-channel-node.cn-3 { bottom: 12%; left: 15%; animation-delay: 2.5s; }
.dev-channel-node.cn-4 { bottom: 16%; right: 15%; animation-delay: 3.5s; }

/* Affiliate Storefront Browser mockup */
.affiliate-browser {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  z-index: 4;
  overflow: hidden;
  animation: hubCoreFloat 8s ease-in-out infinite;
}

.affiliate-browser .br-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}

.affiliate-browser .br-dots {
  display: flex;
  gap: 4px;
}

.affiliate-browser .br-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  display: inline-block;
}

.affiliate-browser .br-url {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  color: var(--muted);
  overflow: hidden;
  white-space: nowrap;
}

.affiliate-browser .br-url .typed {
  color: var(--accent-ink);
  font-weight: 600;
}

.affiliate-browser .br-body {
  padding: 10px;
}

.affiliate-browser .br-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.affiliate-browser .br-card {
  height: 48px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-soft), #fff);
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: 4px 6px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ink);
}

.affiliate-browser .br-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: var(--muted);
}

.affiliate-browser .br-row .v {
  font-weight: 600;
  color: var(--accent-ink);
}

.affiliate-buyer {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: var(--shadow);
  z-index: 5;
  animation: hubCardFloat 5s ease-in-out infinite;
}

.affiliate-buyer.ab-1 { top: 12%; left: 4%; animation-delay: 0.2s; background: linear-gradient(135deg, #3B82F6, #2563EB); }
.affiliate-buyer.ab-2 { top: 18%; right: 4%; animation-delay: 1.2s; background: linear-gradient(135deg, #2563EB, #1E40AF); }
.affiliate-buyer.ab-3 { bottom: 12%; left: 8%; animation-delay: 2.2s; background: linear-gradient(135deg, #06B6D4, #3B82F6); }

.affiliate-buyer::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--glow-rgb), 0.3);
  animation: hubRingPulse 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.affiliate-buyer.ab-2::after { animation-delay: 1s; }
.affiliate-buyer.ab-3::after { animation-delay: 2s; }

/* Responsive adjustments for Hero Hub */
@media (max-width: 920px) {
  .hero-hub {
    max-width: 440px;
    margin-top: 24px;
  }
  .hub-card {
    width: 190px;
    padding: 12px 14px;
  }
  .hub-card.hc-2 { width: 200px; }
  .hub-card.hc-3 { width: 250px; }
  .hub-core {
    width: 100px;
    height: 100px;
  }
  .hub-core-logo {
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 560px) {
  .hero-hub {
    max-width: 320px;
    aspect-ratio: 1 / 1.1;
  }
  .hub-card {
    width: 140px;
    padding: 10px 12px;
    border-radius: 14px;
  }
  .hub-card.hc-1 { top: 4%; left: -2%; }
  .hub-card.hc-2 { top: 8%; right: -2%; width: 150px; }
  .hub-card.hc-3 { bottom: 4%; left: 5%; width: 200px; }
  .hc-title { font-size: 0.8rem; }
  .hc-subtitle { font-size: 0.68rem; }
  .hc-icon { width: 28px; height: 28px; font-size: 0.9rem; }
  .hub-core {
    width: 80px;
    height: 80px;
  }
  .hub-core-logo {
    width: 38px;
    height: 38px;
  }
  .hc-mini-graph { display: none; }
}

/* ============================================================
   HOW IT WORKS — Interactive stepper + sticky visual
   ============================================================ */
.how-section{
  position:relative;width:100%;padding:var(--lp5-section-y) 0;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--accent-soft) 28%,#faf9fe) 42%,#fff 100%);
  border-top:1px solid color-mix(in srgb,var(--accent) 8%,var(--line));
  border-bottom:1px solid color-mix(in srgb,var(--accent) 6%,var(--line))
}
.how-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;color:var(--accent)}
.how-bg-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 70% at 12% 30%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 68%),
    radial-gradient(ellipse 42% 60% at 88% 65%,color-mix(in srgb,var(--accent2) 10%,transparent),transparent 72%)
}
.how-bg-grid{
  position:absolute;inset:0;opacity:.45;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--accent) 12%,transparent) 1px,transparent 0);
  background-size:24px 24px;
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)
}
.how-bg-orb{position:absolute;border-radius:50%;filter:blur(48px);opacity:.5}
.how-bg-orb-1{width:min(320px,42vw);height:min(320px,42vw);left:-8%;top:-12%;background:color-mix(in srgb,var(--accent) 32%,transparent)}
.how-bg-orb-2{width:min(260px,36vw);height:min(260px,36vw);right:4%;bottom:-18%;background:color-mix(in srgb,var(--accent2) 26%,transparent)}
.how-bg-curve{position:absolute;right:0;bottom:0;width:min(55%,480px);height:min(40%,220px);opacity:.55}

.how-section .in{position:relative;z-index:1}
.how-head{max-width:720px;margin:0 auto var(--lp5-section-head-space);text-align:center}
.how-head .display{margin-bottom:14px}
.how-lead{font-size:1.06rem;color:var(--muted);line-height:1.6;max-width:580px;margin:0 auto}

.how-scenario{
  display:flex;align-items:flex-start;gap:18px;max-width:820px;margin:0 auto;
  padding:22px 24px;border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.92),color-mix(in srgb,var(--accent-soft) 40%,#fff));
  border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));
  box-shadow:0 24px 50px -36px var(--glow),0 1px 0 rgba(255,255,255,.9) inset
}
.how-scenario-mark{
  width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:0 12px 28px -12px var(--glow)
}
.how-scenario-mark svg{width:22px;height:22px;stroke:currentColor}
.how-scenario-label{
  display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent);margin-bottom:6px;font-family:"JetBrains Mono",ui-monospace,monospace
}
.how-scenario-body p{margin:0;font-size:1rem;line-height:1.65;color:var(--ink)}
.how-scenario-body strong{color:var(--accent-ink);font-weight:700}

.how-day1{
  display:flex;align-items:center;gap:14px;max-width:820px;margin:18px auto 0;
  padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.72);
  border:1px dashed color-mix(in srgb,var(--accent) 22%,var(--line))
}
.how-day1-badge{
  display:inline-flex;align-items:center;gap:7px;flex:none;padding:7px 12px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);font-size:.78rem;font-weight:800;
  font-family:"Bricolage Grotesque",sans-serif;white-space:nowrap
}
.how-day1-badge svg{width:15px;height:15px;stroke:currentColor}
.how-day1 p{margin:0;font-size:.94rem;color:var(--muted);line-height:1.5}

/* Live stat banner (agent) */
.how-live-stat{
  display:flex;align-items:center;gap:14px;max-width:820px;margin:16px auto 0;
  padding:14px 20px;border-radius:16px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 70%,#fff),#fff);
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  box-shadow:0 16px 40px -28px var(--glow)
}
.how-live-pulse{
  width:10px;height:10px;border-radius:50%;flex:none;background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent);
  animation:howLivePulse 2s ease-out infinite
}
.how-live-stat-body{display:grid;gap:2px;min-width:0}
.how-live-stat-num{
  font-size:1rem;color:var(--ink);line-height:1.35;font-weight:500
}
.how-live-stat-num b{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.35rem;
  color:var(--accent-ink);margin-right:4px
}
.how-live-stat-sub{font-size:.8rem;color:var(--muted)}
@keyframes howLivePulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}
  70%{box-shadow:0 0 0 10px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* Compact scenario / day1 */
.how-scenario--compact{margin-top:28px;padding:16px 18px;gap:14px}
.how-scenario--compact .how-scenario-body p{font-size:.94rem;line-height:1.55}
.how-scenario--compact .how-scenario-mark{width:40px;height:40px;border-radius:12px}
.how-day1--compact{margin-top:12px;padding:11px 14px}
.how-day1--compact p{font-size:.88rem}

/* Compact workspace — steps + visual always in one view */
.how-workspace--compact{
  display:block;margin-top:28px;
  padding:20px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),color-mix(in srgb,var(--accent-soft) 22%,#fff));
  border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));
  box-shadow:0 24px 50px -36px var(--glow)
}
.how-strip{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.how-strip::-webkit-scrollbar{display:none}
.how-strip-btn{
  flex:1;min-width:max(120px,22%);display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.75);cursor:pointer;font:inherit;color:inherit;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease,opacity .25s ease;
  text-align:left;white-space:nowrap
}
.how-strip-btn:not(.is-active){opacity:.7}
.how-strip-btn.is-active{
  opacity:1;background:#fff;border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
  box-shadow:0 10px 28px -18px var(--glow)
}
.how-strip-btn.is-magic.is-active{
  border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 12px 30px -16px var(--glow)
}
.how-strip-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.how-strip-num{
  width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.82rem;
  background:var(--soft);color:var(--accent)
}
.how-strip-btn.is-active .how-strip-num{background:var(--accent);color:#fff}
.how-strip-label{
  font-size:.78rem;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis
}

.how-compact-main{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:20px;align-items:start
}
.how-detail-stack{position:relative;min-height:220px}
.how-detail-panel{
  display:none;padding:4px 2px 0
}
.how-detail-panel.is-active{display:block;animation:howDetailIn .35s ease
}
.how-detail-badge{
  display:inline-block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:4px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);margin-bottom:8px
}
.how-detail-title{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.12rem;
  color:var(--ink);margin:0 0 8px;letter-spacing:-.01em
}
.how-detail-desc{font-size:.88rem;color:var(--muted);line-height:1.5;margin:0 0 10px}
.how-detail-outcome{
  display:inline-flex;align-items:flex-start;gap:7px;font-size:.8rem;font-weight:600;
  color:var(--accent-ink);padding:8px 11px;border-radius:10px;background:var(--accent-soft);margin:0
}
.how-detail-outcome svg{width:14px;height:14px;stroke:var(--accent);flex:none;margin-top:2px}
@keyframes howDetailIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

.how-workspace--compact .how-stage-col{position:relative}
.how-workspace--compact .how-stage{
  position:relative;top:auto;min-height:0;max-width:none;padding:12px 8px 4px;margin:0
}
.how-workspace--compact .how-stage::before{inset:0;border-radius:20px}
.how-workspace--compact .how-stage::after{inset:12px 10px auto 10px;height:45%;border-radius:18px}
.how-workspace--compact .how-panel{inset:12px 8px}
.how-workspace--compact .how-panel.is-active{inset:auto}
.how-workspace--compact .how-stage-nav{margin-top:10px}
.how-section[data-how-scene="agent"] .how-workspace--compact .how-stage{min-height:0;max-width:none}
.how-section[data-how-scene="agent"] .how-workspace--compact .hw-app-body{padding:12px}
.how-section[data-how-scene="agent"] .how-workspace--compact .hw-app-bar{padding:10px 12px}
.how-section[data-how-scene="agent"] .how-workspace--compact .how-panel .step-proof{margin-top:10px;font-size:.76rem}
.how-section[data-how-scene="agent"] .how-workspace--compact .how-float{font-size:.68rem;padding:5px 9px}

.how-workspace{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,54px);
  align-items:start;margin-top:40px
}

/* Timeline (left) */
.how-timeline{display:flex;flex-direction:column;gap:0;position:relative}
.how-tl-item{
  display:flex;gap:18px;width:100%;text-align:left;background:transparent;border:0;
  padding:0 0 20px;cursor:pointer;transition:opacity .25s ease,border-color .25s ease;font:inherit;color:inherit
}
.how-tl-item:last-child{padding-bottom:0}
.how-tl-item:not(.is-active){opacity:.58}
.how-tl-item:not(.is-active):hover,.how-tl-item:not(.is-active):focus-visible{opacity:.85}
.how-tl-item.is-active{opacity:1}
.how-tl-item:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}

.how-tl-rail{position:relative;width:28px;flex:none;display:flex;justify-content:center}
.how-tl-line{
  position:absolute;top:14px;bottom:-14px;left:50%;transform:translateX(-50%);width:2px;
  background:linear-gradient(180deg,var(--accent-soft),color-mix(in srgb,var(--accent) 35%,var(--line)));
  border-radius:2px
}
.how-tl-item:last-child .how-tl-line{display:none}
.how-tl-dot{
  position:relative;z-index:1;width:14px;height:14px;border-radius:50%;margin-top:8px;
  background:#fff;border:2.5px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease
}
.how-tl-item.is-active .how-tl-dot{
  transform:scale(1.15);border-color:var(--accent);background:var(--accent);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent)
}
.how-tl-item.is-magic.is-active .how-tl-dot{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 22%,transparent),0 8px 20px -6px var(--glow)}

.how-tl-body{
  flex:1;min-width:0;padding:14px 18px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.62));
  border:1px solid var(--line);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease
}
.how-tl-item.is-active .how-tl-body{
  background:#fff;border-color:color-mix(in srgb,var(--accent) 28%,var(--line));
  box-shadow:0 20px 44px -32px var(--glow),0 1px 0 rgba(255,255,255,.9) inset
}
.how-tl-item.is-magic.is-active .how-tl-body{
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent),0 24px 50px -28px var(--glow)
}
.how-tl-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.how-tl-num{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.1rem;
  color:var(--accent);line-height:1
}
.how-tl-magic{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:4px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink)
}
.how-tl-title{
  display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.18rem;
  color:var(--ink);margin-bottom:6px;letter-spacing:-.01em
}
.how-tl-desc{display:block;font-size:.92rem;color:var(--muted);line-height:1.55;margin-bottom:10px}
.how-tl-outcome{
  display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;
  color:var(--accent-ink);padding:7px 11px;border-radius:10px;background:var(--accent-soft)
}
.how-tl-outcome svg{width:14px;height:14px;stroke:var(--accent);flex:none}

/* Sticky visual (right) */
.how-stage-col{position:relative;align-self:stretch;display:flex;flex-direction:column}
.how-stage{
  position:sticky;top:clamp(88px,12vh,120px);
  width:100%;max-width:500px;margin:0 auto;min-height:400px;
  padding:24px 16px;isolation:isolate;align-self:flex-start
}

/* All roles: pinned right visual + compact left steps */
.how-section[data-how-scene] .how-workspace{align-items:start}
.how-section[data-how-scene] .how-stage-col{
  position:sticky;top:clamp(88px,11vh,112px);align-self:start
}
.how-section[data-how-scene] .how-stage{
  position:relative;top:auto;height:400px;min-height:400px;max-width:480px;
  padding:12px 10px;margin:0 auto
}
.how-section[data-how-scene="agent"] .how-stage{
  height:380px;min-height:380px
}
.how-section[data-how-scene] .how-panel{
  position:absolute;inset:12px 10px;transform:none;
  transition:opacity .35s ease,visibility .35s
}
.how-section[data-how-scene] .how-panel.is-active{
  position:absolute;inset:12px 10px;transform:none
}
.how-section[data-how-scene] .how-panel.is-active .hw-v3-progress-bar>span,
.how-section[data-how-scene] .how-panel.is-active .hw-v3-pipeline-track>span{
  animation:hwV3BarFill 1s ease-out forwards
}

/* All roles how visuals — premium v3 */
.hw-v3{
  position:relative;height:100%;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:linear-gradient(165deg,#fff 0%,rgba(255,255,255,.96) 55%,color-mix(in srgb,var(--accent-soft) 28%,#fff) 100%);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 24px 56px -32px rgba(40,28,110,.35),0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent),inset 0 1px 0 rgba(255,255,255,.95)
}
.hw-v3.is-feature{
  box-shadow:0 0 0 1.5px var(--accent),0 28px 60px -28px var(--glow),inset 0 1px 0 rgba(255,255,255,.95)
}
.hw-v3-glow{
  position:absolute;top:-30%;right:-20%;width:70%;height:70%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 68%);
  pointer-events:none;filter:blur(8px)
}
.hw-v3-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-bottom:1px solid color-mix(in srgb,var(--accent) 10%,var(--line));
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.55));position:relative;z-index:1;
  flex-shrink:0
}
.hw-v3-dots{display:flex;gap:5px}
.hw-v3-dots i{width:8px;height:8px;border-radius:50%;display:block}
.hw-v3-dots i:nth-child(1){background:#ff6b6b}
.hw-v3-dots i:nth-child(2){background:#ffd166}
.hw-v3-dots i:nth-child(3){background:#06d6a0}
.hw-v3-badge{
  font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--accent-ink);
  font-family:"JetBrains Mono",ui-monospace,monospace
}
.hw-v3-badge.is-key{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 6px 18px -8px var(--glow)}
.hw-v3-main{flex:1;min-height:0;padding:12px 14px 10px;display:grid;align-content:start;gap:9px;position:relative;z-index:1;overflow:hidden}
.hw-v3-title{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.05rem;
  color:var(--ink);margin:0;letter-spacing:-.02em;line-height:1.25
}
.hw-v3-sub{font-size:.78rem;color:var(--muted);line-height:1.4;margin:0}
.hw-v3-foot{
  display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:.74rem;font-weight:600;
  color:var(--accent-ink);background:linear-gradient(90deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 40%,#fff));
  border-top:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));position:relative;z-index:1;
  flex-shrink:0
}
.hw-v3-foot b{font-weight:800}
.hw-v3-pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent);animation:howLivePulse 2s ease-out infinite}

.hw-v3-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hw-v3-tile{
  position:relative;padding:10px;border-radius:12px;background:rgba(255,255,255,.85);
  border:1px solid var(--line);display:grid;gap:3px;transition:border-color .25s ease,box-shadow .25s ease
}
.hw-v3-tile.is-live{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 8px 24px -16px var(--glow)}
.hw-v3-tile-icon{width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.hw-v3-tile-icon svg{width:15px;height:15px;stroke:currentColor}
.hw-v3-tile-label{font-size:.72rem;font-weight:700;color:var(--ink)}
.hw-v3-tile-val{font-size:.68rem;color:var(--muted)}
.hw-v3-tile-check{
  position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:.62rem;font-weight:800;display:grid;place-items:center
}
.hw-v3-tile-check svg{width:10px;height:10px;display:block}
.hw-v3-progress{display:grid;gap:5px}
.hw-v3-progress-head{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted)}
.hw-v3-progress-head b{color:var(--accent-ink);font-weight:800}
.hw-v3-progress-bar{height:6px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);overflow:hidden}
.hw-v3-progress-bar>span{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left;transform:scaleX(.2)}
.hw-v3-network,.hw-v3-meta{display:flex;align-items:center;gap:10px;font-size:.72rem;color:var(--muted);padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.7);border:1px solid var(--line)}
.hw-v3-meta b,.hw-v3-network b{color:var(--accent-ink);font-weight:700}
.hw-v3-pill{
  padding:4px 8px;border-radius:7px;font-size:.66rem;font-weight:700;
  background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap
}
.hw-v3-orbit{position:relative;width:22px;height:22px;flex:none}
.hw-v3-orbit span{position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent) 30%,transparent);animation:hwV3Orbit 3s ease-in-out infinite}
.hw-v3-orbit span:nth-child(2){inset:4px;animation-delay:.4s}
.hw-v3-orbit span:nth-child(3){inset:8px;background:color-mix(in srgb,var(--accent) 25%,transparent);border:none;animation:none}

.hw-v3-search{
  display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:10px;
  background:#fff;border:1px solid var(--line);font-size:.76rem;color:var(--muted);
  box-shadow:0 6px 18px -14px rgba(40,28,110,.2)
}
.hw-v3-search svg{width:14px;height:14px;stroke:var(--accent);flex:none}
.hw-v3-listing,.hw-v3-property{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 10px 28px -20px rgba(40,28,110,.25)}
.hw-v3-listing .hw-v3-property-img{height:88px}
.hw-v3 .mini-avatars{display:flex;align-items:center;flex:none}
.hw-v3 .mini-avatar{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.64rem;font-weight:700;color:#fff;
  margin-left:-6px;border:2px solid #fff;box-shadow:var(--shadow-sm)
}
.hw-v3 .mini-avatar:first-child{margin-left:0}
.hw-v3 .mini-avatar.a1{background:linear-gradient(135deg,#7c6dff,#4f46e5)}
.hw-v3 .mini-avatar.a2{background:linear-gradient(135deg,#22c3a6,#0e9f6e)}
.hw-v3 .mini-avatar.a3{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.hw-v3 .mini-avatar.a4{background:linear-gradient(135deg,#9333ea,#db2777)}
body[data-theme="developer"] .hw-v3 .mini-avatar.a1{background:linear-gradient(135deg,#059669,#047857)}
body[data-theme="developer"] .hw-v3 .mini-avatar.a2{background:linear-gradient(135deg,#047857,#065F46)}
body[data-theme="developer"] .hw-v3 .mini-avatar.a3{background:linear-gradient(135deg,#059669,#047857)}
body[data-theme="affiliate"] .hw-v3 .mini-avatar.a1{background:linear-gradient(135deg,#3B82F6,#2563EB)}
body[data-theme="affiliate"] .hw-v3 .mini-avatar.a2{background:linear-gradient(135deg,#2563EB,#1E40AF)}
body[data-theme="affiliate"] .hw-v3 .mini-avatar.a3{background:linear-gradient(135deg,#06B6D4,#3B82F6)}
.hw-v3-property-img{position:relative;height:72px;overflow:hidden}
.hw-v3-property-img img{width:100%;height:100%;object-fit:cover;display:block}
.hw-v3-property-tag{
  position:absolute;top:8px;left:8px;padding:4px 8px;border-radius:7px;font-size:.64rem;font-weight:700;
  background:rgba(255,255,255,.94);color:var(--accent-ink);border:1px solid var(--line)
}
.hw-v3-property-body{padding:8px 10px;display:grid;gap:2px}
.hw-v3-property-body strong{font-size:.8rem;color:var(--ink)}
.hw-v3-property-body span{font-size:.68rem;color:var(--muted)}
.hw-v3-commission{display:flex;align-items:center;gap:8px}
.hw-v3-comm-box{
  flex:1;text-align:center;padding:9px 8px;border-radius:11px;background:var(--soft);
  border:1px solid var(--line)
}
.hw-v3-comm-box em{display:block;font-size:.6rem;font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-bottom:3px}
.hw-v3-comm-box strong{font-family:"Bricolage Grotesque",sans-serif;font-size:1.1rem;color:var(--accent-ink)}
.hw-v3-comm-box.is-you{background:linear-gradient(180deg,var(--accent-soft),#fff);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:0 8px 22px -16px var(--glow)}
.hw-v3-comm-plus{font-weight:700;color:var(--muted)}

.hw-v3-handshake{display:flex;align-items:center;justify-content:center;gap:14px}
.hw-v3-party{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.7rem;color:var(--muted);font-weight:600}
.hw-v3-party .mini-avatar{width:34px;height:34px;font-size:.7rem;margin:0}
.hw-v3-handshake-icon{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);box-shadow:0 8px 20px -12px var(--glow)
}
.hw-v3-handshake-icon svg{width:20px;height:12px;display:block;stroke:none}
.hw-v3-handshake-icon svg[data-lp5-filled="true"] path,
.hw-v3-handshake-icon svg.lp5-svg-filled path{fill:currentColor}
.hw-v3-contract{
  padding:12px;border-radius:12px;
  background:linear-gradient(145deg,var(--accent-soft),rgba(255,255,255,.9));
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))
}
.hw-v3-contract-head{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--muted);margin-bottom:6px}
.hw-v3-stamp{padding:3px 8px;border-radius:6px;background:var(--accent);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.08em}
.hw-v3-contract-split{
  text-align:center;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.45rem;color:var(--accent-ink)
}
.hw-v3-contract-split span{color:var(--muted);font-weight:600}
.hw-v3-contract-lines{display:grid;gap:5px;margin-top:8px}
.hw-v3-contract-lines span{height:4px;border-radius:999px;background:rgba(79,70,229,.14)}
.hw-v3-contract-lines span:first-child{width:85%}
.hw-v3-contract-lines span:nth-child(2){width:60%}
.hw-v3-lock{
  display:flex;align-items:center;gap:8px;justify-content:center;font-size:.72rem;color:var(--ink);
  padding:7px 10px;border-radius:10px;background:#fff;border:1px dashed color-mix(in srgb,var(--accent) 25%,var(--line))
}
.hw-v3-lock svg{width:14px;height:14px;stroke:var(--accent);flex:none}

.hw-v3-pipeline{display:grid;gap:8px}
.hw-v3-pipeline-track{height:5px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent);overflow:hidden}
.hw-v3-pipeline-track>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left;transform:scaleX(.15)}
.hw-v3-pipeline-steps{list-style:none;margin:0;padding:0;display:flex;gap:5px}
.hw-v3-pipeline-steps li{
  flex:1;text-align:center;padding:7px 3px;border-radius:9px;font-size:.64rem;font-weight:600;
  background:var(--soft);border:1px solid var(--line);color:var(--muted)
}
.hw-v3-pipeline-steps li span{
  display:block;width:16px;height:16px;margin:0 auto 4px;border-radius:50%;font-size:.58rem;line-height:16px;
  background:#fff;border:1.5px solid var(--line);font-weight:800
}
.hw-v3-pipeline-steps li.is-done{color:var(--ink);background:#fff}
.hw-v3-pipeline-steps li.is-done span{background:var(--accent);border-color:var(--accent);color:#fff}
.hw-v3-pipeline-steps li.is-on{color:var(--accent-ink);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
.hw-v3-pipeline-steps li.is-on span{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.hw-v3-deal{padding:9px 11px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.hw-v3-deal-title{font-size:.8rem;font-weight:700;color:var(--ink)}
.hw-v3-deal-meta{font-size:.68rem;color:var(--muted);margin-top:2px}
.hw-v3-tools{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.hw-v3-tools span{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;
  font-size:.66rem;font-weight:600;background:#fff;border:1px solid var(--line);color:var(--muted)
}
.hw-v3-tools svg{width:12px;height:12px;stroke:var(--accent)}

/* Developer-specific v3 blocks */
.hw-v3-rate{
  text-align:center;padding:12px;border-radius:12px;
  background:linear-gradient(145deg,var(--accent-soft),#fff);
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line))
}
.hw-v3-rate-num{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.6rem;color:var(--accent-ink);line-height:1}
.hw-v3-rate-meta{display:block;font-size:.68rem;color:var(--muted);margin-top:4px}
.hw-v3-reach{display:flex;gap:8px}
.hw-v3-reach-opt{
  flex:1;text-align:center;padding:8px;border-radius:10px;font-size:.72rem;font-weight:600;
  background:var(--soft);border:1px solid var(--line);color:var(--muted)
}
.hw-v3-reach-opt.is-on{background:#fff;color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:0 8px 20px -14px var(--glow)}
.hw-v3-inbox{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hw-v3-inbox li{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;
  font-size:.72rem;color:var(--muted);background:var(--soft);border:1px solid var(--line)
}
.hw-v3-inbox li.is-new{background:#fff;color:var(--ink);border-color:color-mix(in srgb,var(--accent) 18%,var(--line))}
.hw-v3-inbox li strong{color:var(--ink);font-weight:700}
.hw-v3-inbox-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--line)}
.hw-v3-inbox li.is-new .hw-v3-inbox-dot{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}

/* Affiliate-specific v3 blocks */
.hw-v3-browser{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;
  background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px -14px rgba(40,28,110,.18)
}
.hw-v3-browser-dots{display:flex;gap:4px;flex:none}
.hw-v3-browser-dots i{width:7px;height:7px;border-radius:50%;display:block}
.hw-v3-browser-dots i:nth-child(1){background:#ff6b6b}
.hw-v3-browser-dots i:nth-child(2){background:#ffd166}
.hw-v3-browser-dots i:nth-child(3){background:#06d6a0}
.hw-v3-browser-url{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;color:var(--accent-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.hw-v3-preview-card{
  padding:12px;border-radius:12px;background:var(--soft);border:1px solid var(--line);display:grid;gap:8px
}
.hw-v3-preview-logo{
  font-size:.76rem;font-weight:700;color:var(--accent-ink);padding:6px 10px;border-radius:8px;
  background:#fff;border:1px dashed color-mix(in srgb,var(--accent) 25%,var(--line));text-align:center
}
.hw-v3-preview-lines{display:grid;gap:5px}
.hw-v3-preview-lines span{height:5px;border-radius:999px;background:rgba(79,70,229,.12)}
.hw-v3-preview-lines span:first-child{width:88%}
.hw-v3-preview-lines span:nth-child(2){width:72%}
.hw-v3-preview-lines span:nth-child(3){width:56%}
.hw-v3-share{display:flex;flex-wrap:wrap;gap:6px}
.hw-v3-share span{
  padding:6px 10px;border-radius:999px;font-size:.68rem;font-weight:600;
  background:#fff;border:1px solid var(--line);color:var(--muted)
}
.hw-v3-share span.is-on{background:var(--accent-soft);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
.hw-v3-referral{display:flex;align-items:center;justify-content:center;gap:6px}
.hw-v3-referral-step{
  flex:1;text-align:center;padding:8px 6px;border-radius:10px;font-size:.66rem;font-weight:600;
  background:var(--soft);border:1px solid var(--line);color:var(--muted)
}
.hw-v3-referral-step i{display:block;font-style:normal;font-size:.72rem;font-weight:800;margin-top:4px;color:var(--accent)}
.hw-v3-referral-step.is-done{background:#fff;color:var(--ink)}
.hw-v3-referral-step.is-on{background:var(--accent-soft);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}
.hw-v3-referral-arrow{font-size:.9rem;color:var(--muted);flex:none}
.hw-v3-payout{
  padding:10px 12px;border-radius:11px;background:#fff;border:1px solid var(--line);display:grid;gap:5px
}
.hw-v3-payout-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.hw-v3-payout-num{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.1rem;color:var(--accent-ink)}

/* Step 3 — denser layout so footer line stays fully visible */
.how-panel[data-how-panel="3"] .hw-v3-main{gap:7px;padding-bottom:8px}
.how-panel[data-how-panel="3"] .hw-v3-inbox{gap:5px}
.how-panel[data-how-panel="3"] .hw-v3-inbox li{padding:7px 9px}
.how-panel[data-how-panel="3"] .hw-v3-pipeline{gap:6px}
.how-panel[data-how-panel="3"] .hw-v3-referral-step{padding:7px 5px}
.how-panel[data-how-panel="3"] .hw-v3-payout{padding:8px 10px}
.how-panel[data-how-panel="3"] .hw-v3-lock{padding:6px 9px;font-size:.7rem}

@keyframes hwV3BarFill{to{transform:scaleX(1)}}
@keyframes hwV3Orbit{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.08);opacity:1}}

@media(max-width:920px){
  .how-section[data-how-scene] .how-stage{height:auto;min-height:320px}
}

@media(max-width:560px){
  .hw-v3-tiles{grid-template-columns:1fr}
  .hw-v3-pipeline-steps{flex-wrap:wrap}
  .hw-v3-pipeline-steps li{flex:1 1 40%}
  .hw-v3-referral{flex-wrap:wrap}
  .hw-v3-reach{flex-direction:column}
}

.how-section[data-how-scene] .how-tl-item{padding-bottom:10px}
.how-section[data-how-scene] .how-tl-item.is-active,
.how-section[data-how-scene] .how-tl-item.is-preview{padding-bottom:14px}
.how-section[data-how-scene] .how-tl-item:not(.is-active):not(.is-preview) .how-tl-desc,
.how-section[data-how-scene] .how-tl-item:not(.is-active):not(.is-preview) .how-tl-outcome,
.how-section[data-how-scene] .how-tl-item:not(.is-active):not(.is-preview) .how-tl-magic{display:none}
.how-section[data-how-scene] .how-tl-item:not(.is-active):not(.is-preview) .how-tl-body{padding:10px 14px}
.how-section[data-how-scene] .how-tl-item:not(.is-active):not(.is-preview) .how-tl-title{margin-bottom:0;font-size:1rem}
.how-section[data-how-scene] .how-tl-item.is-preview{opacity:1}
.how-section[data-how-scene] .how-tl-item.is-preview .how-tl-body{
  background:#fff;border-color:color-mix(in srgb,var(--accent) 24%,var(--line));
  box-shadow:0 14px 36px -26px var(--glow)
}
.how-section[data-how-scene] .how-tl-item.is-preview .how-tl-dot{
  border-color:var(--accent);background:color-mix(in srgb,var(--accent) 55%,#fff);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 14%,transparent)
}

.how-stage::before{
  content:"";position:absolute;inset:4px;border-radius:32px;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.32));
  border:1px solid rgba(255,255,255,.65);box-shadow:0 40px 80px -42px var(--glow);
  backdrop-filter:blur(14px);pointer-events:none;z-index:0
}
.how-stage::after{
  content:"";position:absolute;inset:20px 16px auto 16px;height:55%;border-radius:26px;
  background:radial-gradient(circle at 50% 0%,var(--accent-soft),transparent 70%);
  opacity:.75;filter:blur(10px);pointer-events:none;z-index:0
}

.how-panel{
  position:absolute;inset:24px 16px;z-index:2;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(16px) scale(.98);
  transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1),visibility .45s
}
.how-panel.is-active{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0) scale(1)
}
.how-section:not([data-how-scene]) .how-panel.is-active{
  position:relative;inset:auto
}

.how-panel-card{
  position:relative;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.97) 100%);
  border:1px solid rgba(255,255,255,.8);border-radius:22px;padding:24px;
  box-shadow:0 22px 48px -28px rgba(40,28,110,.3),0 1px 0 rgba(255,255,255,.9) inset;overflow:hidden
}
.how-panel-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,var(--accent-soft),transparent 80%);pointer-events:none
}
.how-panel-card.is-feature{
  border-color:transparent;box-shadow:0 0 0 1.5px var(--accent),0 30px 60px -28px var(--glow)
}

.how-panel-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.how-panel-head h3{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.14rem;
  color:var(--ink);margin:0 0 5px;letter-spacing:-.01em
}
.how-panel-head p{font-size:.9rem;color:var(--muted);line-height:1.5;margin:0}
.how-panel-icon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none
}
.how-panel-icon svg{width:22px;height:22px;stroke:currentColor}
.how-section[data-how-scene="agent"] .how-panel-icon{background:#EEF2FF;color:#4338CA}
.how-section[data-how-scene="developer"] .how-panel-icon{background:#F0FDF4;color:#047857}
.how-section[data-how-scene="affiliate"] .how-panel-icon{background:var(--accent-soft);color:var(--accent)}

.how-panel .step-proof{margin-top:14px}
.how-panel.is-active .mini-bar>span{animation:miniBarFill 1.1s ease-out forwards}

.how-float{
  position:absolute;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.92);
  box-shadow:0 16px 30px -22px rgba(40,28,110,.28);font-size:.74rem;font-weight:700;
  color:var(--ink);z-index:3;backdrop-filter:blur(10px);white-space:nowrap;
  animation:floatTag 5.4s ease-in-out infinite
}
.how-float .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.how-float.f2{animation-delay:1.1s}
.how-section[data-how-scene="agent"] .how-float.f1{top:-6px;right:-2px}
.how-section[data-how-scene="agent"] .how-float.f2{bottom:4px;right:-6px}
.how-section[data-how-scene="developer"] .how-float.f1{top:-6px;right:-6px}
.how-section[data-how-scene="developer"] .how-float.f2{bottom:12px;left:-8px}
.how-section[data-how-scene="affiliate"] .how-float.f1{top:-6px;right:-4px}
.how-section[data-how-scene="affiliate"] .how-float.f2{bottom:6px;right:-8px}

.how-stage-nav{display:flex;justify-content:center;gap:8px;margin-top:18px}
.how-stage-dot{
  width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--accent) 22%,var(--line));
  transition:transform .3s ease,background .3s ease,width .3s ease
}
.how-stage-dot.is-on{width:22px;border-radius:999px;background:var(--accent)}

.how-foot-cta{margin-top:48px;text-align:center}
.how-foot-cta .btn{margin:0 auto}
.how-foot-micro{margin-top:14px;font-size:.86rem;color:var(--faint)}

@media(max-width:920px){
  .how-section[data-how-scene] .how-stage-col{position:relative;top:auto}
  .how-section[data-how-scene] .how-stage{height:auto;min-height:320px}
  .how-section[data-how-scene] .how-panel.is-active{position:relative;inset:auto}
  .how-workspace{grid-template-columns:1fr;gap:32px}
  .how-stage{position:relative;top:auto;min-height:0;padding:20px 12px 8px}
  .how-panel{position:relative;inset:auto}
  .how-scenario,.how-day1{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .how-scenario{padding:18px}
  .how-scenario--compact{padding:14px}
  .how-live-stat{padding:12px 14px}
  .how-live-stat-num{font-size:.92rem}
  .how-live-stat-num b{font-size:1.15rem}
  .how-workspace--compact{padding:14px}
  .how-strip-btn{min-width:112px;padding:8px 10px}
  .how-strip-label{font-size:.72rem}
  .how-tl-body{padding:12px 14px}
  .how-panel-card{padding:18px}
  .how-float{display:none}
  .how-stage{max-width:100%}
}

@media(prefers-reduced-motion:reduce){
  .how-panel,.how-tl-dot,.how-tl-body{transition:none!important}
  .how-float,.how-panel.is-active .mini-bar>span,.how-live-pulse{animation:none!important}
  .how-detail-panel.is-active{animation:none}
}

/* ============================================================
   WHY SWITCH — Platform pillars + proof
   ============================================================ */
.why-section{
  position:relative;padding:var(--lp5-section-y) 0;overflow:hidden;
  background:linear-gradient(180deg,var(--soft) 0%,color-mix(in srgb,var(--accent-soft) 22%,#fff) 50%,var(--soft) 100%);
  border-top:1px solid color-mix(in srgb,var(--accent) 6%,var(--line))
}
.why-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.why-bg-glow{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 70% at 15% 20%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 68%),
    radial-gradient(ellipse 42% 55% at 88% 75%,color-mix(in srgb,var(--accent2) 8%,transparent),transparent 72%)
}
.why-bg-grid{
  position:absolute;inset:0;opacity:.38;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--accent) 10%,transparent) 1px,transparent 0);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000 15%,transparent 92%);
  -webkit-mask-image:linear-gradient(180deg,#000 15%,transparent 92%)
}
.why-bg-orb{position:absolute;border-radius:50%;filter:blur(52px);opacity:.45}
.why-bg-orb-1{width:min(240px,34vw);height:min(240px,34vw);left:-6%;top:8%;background:color-mix(in srgb,var(--accent) 28%,transparent)}
.why-bg-orb-2{width:min(200px,28vw);height:min(200px,28vw);right:2%;bottom:6%;background:color-mix(in srgb,var(--accent2) 22%,transparent)}
.why-section .in{position:relative;z-index:1}
.why-head{max-width:680px;margin:0 auto var(--lp5-section-head-space);text-align:center}
.why-head .display{margin-bottom:12px}
.why-lead{font-size:1.02rem;color:var(--muted);line-height:1.6;max-width:560px;margin:0 auto}
.why-head .why-lead + .why-lead{margin-top:12px}

.why-quote{
  display:flex;align-items:flex-start;gap:16px;max-width:780px;margin:26px auto 0;border:none;
  background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--accent-soft) 35%,#fff));
  border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));border-radius:18px;
  padding:18px 20px;box-shadow:0 20px 44px -32px var(--glow),inset 0 1px 0 rgba(255,255,255,.9)
}
.why-quote-mark{
  width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:0 10px 24px -12px var(--glow)
}
.why-quote-mark svg{width:20px;height:20px;stroke:currentColor}
.why-quote-body{min-width:0}
.why-quote-text{margin:0;font-size:.98rem;line-height:1.6;color:var(--ink);font-style:italic;font-weight:500}
.why-quote-sub{
  display:block;margin-top:8px;font-size:.76rem;font-style:normal;font-weight:600;
  color:var(--muted);letter-spacing:.01em
}
.why-quote--plain .why-quote-text{
  font-style:normal;font-weight:600;color:var(--ink);font-size:1rem;line-height:1.55
}
.why-quote--plain{
  max-width:680px;margin-top:20px
}

.why-platform{
  max-width:980px;margin:20px auto 0;padding:16px 16px 18px;border-radius:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.94),rgba(255,255,255,.78));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 28px 60px -38px var(--glow),0 0 0 1px color-mix(in srgb,var(--accent) 7%,transparent),inset 0 1px 0 rgba(255,255,255,.95)
}
.why-platform-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:12px;padding:0 2px 10px;border-bottom:1px solid color-mix(in srgb,var(--accent) 10%,var(--line))
}
.why-platform-label{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent)
}
.why-platform-hint{font-size:.76rem;font-weight:600;color:var(--muted)}

.why-shifts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.why-shift{
  position:relative;display:flex;flex-direction:column;gap:8px;padding:11px 11px 12px;border-radius:14px;
  background:rgba(255,255,255,.88);border:1px solid color-mix(in srgb,var(--accent) 8%,var(--line));
  box-shadow:0 14px 32px -26px rgba(40,28,110,.18);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease
}
.why-shift:hover{
  transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 22%,var(--line));
  box-shadow:0 18px 40px -24px var(--glow)
}
.why-shift-head{display:flex;align-items:center;gap:8px}
.why-shift-ico{
  width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--accent-soft),#fff);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line))
}
.why-shift-ico svg{width:15px;height:15px;stroke:currentColor;display:block}
.why-shift-ico svg[data-lp5-filled="true"],
.why-shift-ico svg.lp5-svg-filled{width:16px;height:16px;stroke:none}
.why-shift-ico svg[data-lp5-filled="true"] path,
.why-shift-ico svg.lp5-svg-filled path{fill:currentColor;stroke:none}
.why-shift-ico svg[data-lp5-stroke="true"]{width:16px;height:16px}
.why-shift-ico svg[data-lp5-stroke="true"] path{fill:none;stroke:currentColor}
.why-shift-tag{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.62rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:6px;
  background:var(--accent-soft);color:var(--accent-ink)
}
.why-shift-rows{display:grid;gap:5px}
.why-shift-row{
  display:flex;align-items:flex-start;gap:8px;padding:8px 9px;border-radius:10px;border:1px solid var(--line)
}
.why-shift-row.is-before{background:color-mix(in srgb,var(--line) 38%,#fff)}
.why-shift-row.is-before .why-shift-k{color:var(--faint)}
.why-shift-row.is-before p{color:var(--muted)}
.why-shift-row.is-after{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 62%,#fff),#fff);
  border-color:color-mix(in srgb,var(--accent) 20%,var(--line));
  box-shadow:0 6px 16px -14px var(--glow)
}
.why-shift-row.is-after .why-shift-k{color:var(--accent)}
.why-shift-row.is-after p{color:var(--ink);font-weight:500}
.why-shift-icon{
  width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;margin-top:1px
}
.why-shift-row.is-before .why-shift-icon{
  background:color-mix(in srgb,#ef4444 12%,#fff);color:#dc2626;border:1px solid color-mix(in srgb,#ef4444 20%,transparent)
}
.why-shift-row.is-before .why-shift-icon svg{width:10px;height:10px;stroke:currentColor}
.why-shift-row.is-after .why-shift-icon{
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:0 3px 10px -6px var(--glow)
}
.why-shift-row.is-after .why-shift-icon svg{width:11px;height:11px;stroke:currentColor}
.why-shift-copy{min-width:0}
.why-shift-k{
  display:block;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px
}
.why-shift-copy p{margin:0;font-size:.72rem;line-height:1.4}
.why-shift-arrow{
  display:flex;justify-content:center;color:color-mix(in srgb,var(--accent) 42%,var(--muted));opacity:.9
}
.why-shift-arrow svg{width:14px;height:14px;stroke:currentColor}

.why-foot{
  max-width:980px;margin:18px auto 0;padding:16px 18px;border-radius:18px;
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.92));
  border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));
  box-shadow:0 20px 48px -34px var(--glow);display:grid;gap:14px
}
.why-outcome{
  display:flex;align-items:center;gap:12px;padding-bottom:12px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 10%,var(--line))
}
.why-outcome-mark{
  width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent)
}
.why-outcome-mark svg{width:18px;height:18px;stroke:currentColor}
.why-outcome-text{
  margin:0;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(1rem,2.2vw,1.12rem);
  color:var(--ink);line-height:1.35;letter-spacing:-.02em
}
.why-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.why-chips li{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;
  background:var(--soft);border:1px solid var(--line);font-size:.76rem;color:var(--muted)
}
.why-chips li strong{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.88rem;color:var(--accent-ink)
}

.why-proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.why-proof{
  display:flex;flex-direction:column;gap:10px;margin:0;padding:12px 12px 13px;border-radius:14px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent-soft) 38%,#fff),#fff);
  border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));
  box-shadow:0 12px 28px -22px var(--glow);transition:transform .22s ease,box-shadow .22s ease
}
.why-proof:hover{transform:translateY(-2px);box-shadow:0 16px 34px -20px var(--glow)}
.why-proof-avatar{
  width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.68rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 16px -10px var(--glow)
}
.why-proof blockquote{margin:0;min-width:0;flex:1;display:flex;flex-direction:column}
.why-proof blockquote p{
  margin:0 0 8px;font-size:.8rem;line-height:1.48;color:var(--ink);font-style:italic;flex:1
}
.why-proof figcaption{display:grid;gap:1px;font-size:.72rem;line-height:1.3}
.why-proof figcaption strong{color:var(--ink);font-weight:700}
.why-proof figcaption span{color:var(--muted)}

@media(max-width:920px){
  .why-shifts{grid-template-columns:repeat(2,1fr)}
  .why-proofs{grid-template-columns:1fr;gap:8px}
  .why-quote{flex-direction:column;gap:12px}
  .why-foot{padding:14px}
  .why-platform{padding:14px}
}
@media(max-width:560px){
  .why-section{padding:var(--lp5-section-y) 0}
  .why-quote{padding:16px}
  .why-shifts{grid-template-columns:1fr}
  .why-shift-copy p{font-size:.7rem}
  .why-chips li{font-size:.72rem;padding:6px 10px}
  .why-outcome{align-items:flex-start}
  .why-platform-head{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ============================================================
   AGENT HERO VISUAL - 3-step guided story (one beat at a time)
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-visual-slot{display:flex;justify-content:center;align-items:center;perspective:1200px;padding:10px 12px}

.hero-visual.hv-scene-agent,.hero-visual.hv-scene-developer,.hero-visual.hv-scene-affiliate{
  position:relative;width:100%;aspect-ratio:1/1.05;max-width:540px;margin:0 auto;isolation:isolate;min-height:480px;
  border-radius:28px;overflow:visible;
  transform:rotateX(var(--hv-tilt-x,0deg)) rotateY(var(--hv-tilt-y,0deg));
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  will-change:transform
}

/* Scene frame + mesh backdrop */
.hv-scene-agent .hv-scene-frame{
  position:absolute;inset:-8px;border-radius:28px;pointer-events:none;z-index:0;
  background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 40px 80px -36px rgba(79,70,229,.28),0 0 0 1px rgba(79,70,229,.06) inset
}
.hv-scene-agent .hv-scene-mesh{
  position:absolute;inset:4%;border-radius:22px;pointer-events:none;z-index:1;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%,rgba(109,99,255,.18),transparent 55%),
    radial-gradient(ellipse 60% 50% at 20% 80%,rgba(79,70,229,.12),transparent 50%),
    linear-gradient(180deg,rgba(246,245,255,.9),rgba(255,255,255,.4));
  animation:hvMeshShift 12s ease-in-out infinite alternate
}
.hv-scene-agent .hv-scene-glow{
  position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  width:300px;height:300px;top:6%;right:0;
  background:radial-gradient(circle,rgba(109,99,255,.28),transparent 68%);
  filter:blur(20px);animation:hvGlowDrift 14s ease-in-out infinite alternate
}
.hv-scene-agent .hv-scene-glow.g2{
  width:240px;height:240px;bottom:8%;left:-2%;top:auto;right:auto;
  background:radial-gradient(circle,rgba(79,70,229,.2),transparent 70%);
  animation-delay:2s;animation-duration:18s
}

/* Cards */
.hv-scene-agent .hv-card{
  position:absolute;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.88));
  border:1px solid rgba(255,255,255,.95);border-radius:18px;
  box-shadow:0 32px 64px -20px rgba(40,28,110,.24),0 0 0 1px rgba(79,70,229,.08),0 1px 0 rgba(255,255,255,.95) inset;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:4;overflow:hidden;
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,top .55s cubic-bezier(.2,.7,.2,1),left .55s cubic-bezier(.2,.7,.2,1),right .55s cubic-bezier(.2,.7,.2,1),width .55s cubic-bezier(.2,.7,.2,1)
}

.hv-scene-agent .hv-card-title{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.96rem;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.hv-scene-agent .hv-card-meta{font-size:.77rem;color:var(--muted);margin-top:4px;line-height:1.4}
.hv-scene-agent .hv-card-body{padding:13px 15px 15px}
.hv-scene-agent .hv-label{font-size:.67rem;color:var(--faint);text-transform:uppercase;letter-spacing:.07em;font-family:"JetBrains Mono",ui-monospace,monospace}
.hv-scene-agent .hv-value{font-size:.84rem;font-weight:600;color:var(--ink)}
.hv-scene-agent .hv-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;font-size:.69rem;font-weight:700;white-space:nowrap}
.hv-scene-agent .hv-badge-collab{background:rgba(255,255,255,.95);border:1px solid var(--line);color:var(--accent-ink);box-shadow:0 4px 14px -6px rgba(79,70,229,.25)}
.hv-scene-agent .hv-badge-dot{width:6px;height:6px;border-radius:50%;background:#16b97f;box-shadow:0 0 0 0 rgba(22,185,127,.5);animation:hvBadgePulse 2s ease-out infinite}
.hv-scene-agent .hv-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:700;color:#fff;border:2px solid #fff;box-shadow:0 4px 12px -4px rgba(40,28,110,.25);flex:none;letter-spacing:-.02em}
.hv-scene-agent .hv-avatar.av-1{background:linear-gradient(135deg,#7c6dff,#4f46e5)}
.hv-scene-agent .hv-avatar.av-2{background:linear-gradient(135deg,#22c3a6,#0e9f6e)}
.hv-scene-agent .hv-value-you{color:var(--accent-ink)}

/* Stepper — top control band */
.hv-scene-agent .hv-stepper{
  position:absolute;top:2%;left:3%;right:3%;z-index:9;
  display:flex;flex-direction:column;align-items:center;gap:8px
}
.hv-scene-agent .hv-caption-strip{
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:nowrap;
  width:100%;padding:8px 12px;border-radius:14px;
  background:rgba(255,255,255,.94);border:1px solid rgba(79,70,229,.14);
  box-shadow:0 12px 28px -14px rgba(40,28,110,.22);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
.hv-scene-agent .hv-caption-step{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.64rem;font-weight:600;color:var(--muted);white-space:nowrap;
  background:none;border:none;padding:2px 4px;border-radius:8px;cursor:pointer;
  font-family:inherit;transition:color .4s ease,transform .35s ease
}
.hv-scene-agent .hv-caption-step:hover{color:var(--ink)}
.hv-scene-agent .hv-caption-step i{
  width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:.6rem;font-weight:700;
  background:rgba(79,70,229,.1);color:var(--accent-ink);
  transition:background .4s ease,color .4s ease,transform .4s ease,box-shadow .4s ease
}
.hv-scene-agent .hv-caption-step.is-on{color:var(--ink)}
.hv-scene-agent .hv-caption-step.is-on i{
  background:linear-gradient(135deg,#7c6dff,#4f46e5);color:#fff;
  box-shadow:0 4px 12px -4px rgba(79,70,229,.55);transform:scale(1.08)
}
.hv-scene-agent .hv-caption-arrow{font-size:.58rem;color:var(--faint);opacity:.55;flex:none}

.hv-scene-agent .hv-step-progress{
  width:100%;height:3px;border-radius:999px;background:rgba(79,70,229,.1);overflow:hidden
}
.hv-scene-agent .hv-step-progress-fill{
  display:block;height:100%;width:33.33%;border-radius:999px;
  background:linear-gradient(90deg,#7c6dff,#4f46e5);
  transition:width .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)
}
.hv-scene-agent.is-current-2 .hv-step-progress-fill{width:66.66%}
.hv-scene-agent.is-current-3 .hv-step-progress-fill{width:100%}

/* Step dots — all viewports */
.hv-scene-agent .hv-step-dots{
  display:flex;position:absolute;bottom:2.5%;left:50%;transform:translateX(-50%);z-index:8;
  gap:7px;align-items:center;padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.9);border:1px solid rgba(79,70,229,.1);
  box-shadow:0 8px 20px -12px rgba(40,28,110,.25)
}
.hv-scene-agent .hv-step-dots button{
  width:7px;height:7px;border-radius:50%;padding:0;border:none;background:rgba(79,70,229,.22);cursor:pointer;
  transition:transform .3s ease,background .3s ease
}
.hv-scene-agent .hv-step-dots button.is-on{background:var(--accent);transform:scale(1.25)}

/* Step mode — exit first, then enter (no overlap between beats) */
.hv-scene-agent.is-step-mode [data-beat]{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(10px) scale(.98);
  transition:opacity .2s ease-in,transform .2s ease-in,visibility 0s linear .2s
}
.hv-scene-agent.is-step-mode [data-beat].is-beat-active{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .38s ease-out .16s,transform .38s cubic-bezier(.2,.7,.2,1) .16s,visibility 0s linear .16s
}
.hv-scene-agent.is-step-exiting [data-beat]{
  transition:opacity .2s ease-in,transform .2s ease-in,visibility 0s linear .2s!important
}
.hv-scene-agent.is-step-exiting .hv-card,
.hv-scene-agent.is-step-exiting .hv-handshake,
.hv-scene-agent.is-step-exiting .hv-svg{
  transition:opacity .2s ease-in,transform .2s ease-in!important
}
.hv-scene-agent.is-step-exiting.is-idle .hv-card,
.hv-scene-agent.is-step-exiting.is-idle .hv-handshake{animation:none!important;margin-top:0!important}
.hv-scene-agent .hv-step-hint{
  margin:0;font-size:.68rem;font-weight:500;color:var(--accent-ink);text-align:center;
  line-height:1.35;max-width:92%;opacity:0;visibility:hidden;height:0;overflow:hidden;
  transition:opacity .2s ease-in,visibility 0s linear .2s,height .2s ease
}
.hv-scene-agent .hv-step-hint.is-on{
  opacity:1;visibility:visible;height:auto;
  transition:opacity .3s ease-out .12s,visibility 0s linear .12s,height .3s ease
}
.hv-scene-agent.is-step-exiting .hv-step-hint.is-on{
  transition:opacity .18s ease-in,visibility 0s linear .18s,height .18s ease!important
}
.hv-scene-agent.is-step-mode.is-idle .hv-card.is-beat-active{animation:hvCardFloatSoft 5.5s ease-in-out infinite}
.hv-scene-agent.is-step-mode.is-idle.is-current-2 .hv-buyer.is-beat-active{animation:hvCardFloatSoft 6s ease-in-out infinite;animation-delay:.6s}
.hv-scene-agent.is-step-mode.is-idle.is-current-3 .hv-agreement.is-beat-active{animation:hvCardFloatSoft 6.5s ease-in-out infinite;animation-delay:.3s}

/* SVG connections — beat 2 only */
.hv-scene-agent .hv-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.hv-scene-agent .hv-path{stroke:url(#hv-agent-line);stroke-width:6;fill:none;stroke-linecap:round;opacity:.78;stroke-dasharray:420;stroke-dashoffset:420}
.hero-visual.hv-scene-agent.is-live.is-current-2 .hv-path,.hero-visual.hv-scene-agent.is-idle.is-current-2 .hv-path{stroke-dashoffset:0}
.hero-visual.hv-scene-agent.is-idle.is-current-2 .hv-path{animation:hvPathPulse 3s ease-in-out infinite}
.hero-visual.hv-scene-agent.is-idle.is-current-2 .hv-path-2{animation-delay:1.5s}
.hv-scene-agent .hv-flow-dot{opacity:0;filter:drop-shadow(0 0 8px rgba(109,99,255,.9))}
.hero-visual.hv-scene-agent.is-idle.is-current-2 .hv-flow-dot{animation:hvDotFade 2.4s ease-in-out infinite}
.hero-visual.hv-scene-agent.is-idle.is-current-2 .hv-flow-dot.d2{animation-delay:1.2s}

/* Listing card */
.hv-scene-agent .hv-listing{padding:0}
.hv-scene-agent .hv-listing-media{
  height:96px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#8ec5ff 0%,#b8d4f8 40%,#dce8f5 100%)
}
.hv-scene-agent .hv-listing-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;
  transform:scale(1.02);transition:transform .6s ease
}
.hv-scene-agent.is-current-1 .hv-listing.is-beat-active .hv-listing-photo{transform:scale(1.04)}
.hv-scene-agent .hv-media-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(40,28,110,.04) 0%,transparent 45%,rgba(40,28,110,.18) 100%)
}
.hv-scene-agent .hv-media-shimmer{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-120%);animation:hvShimmer 3.8s ease-in-out infinite
}
.hv-scene-agent .hv-listing-media .hv-badge{position:absolute;top:11px;left:11px;z-index:3}
.hv-scene-agent .hv-listed-by{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:.77rem;color:var(--muted);font-weight:500}
.hv-scene-agent .hv-listing-stats{
  display:flex;margin-top:10px;padding-top:10px;border-top:1px solid rgba(79,70,229,.1);
  flex-direction:column;gap:4px
}
.hv-scene-agent .hv-stats-main{font-size:.72rem;color:var(--muted)}
.hv-scene-agent .hv-stats-main b{font-family:"Bricolage Grotesque",sans-serif;color:var(--accent-ink);font-size:.82rem}
.hv-scene-agent .hv-chip-today{
  display:inline-flex;align-items:center;gap:5px;font-size:.62rem;font-weight:600;color:#0a7d57;line-height:1.2
}
.hv-scene-agent .hv-pulse-dot{width:7px;height:7px;border-radius:50%;background:#16b97f;flex:none;animation:hvBadgePulse 2s ease-out infinite}

/* Beat 1 — single centered listing */
.hv-scene-agent.is-step-mode.is-current-1 .hv-listing{
  top:24%;left:50%;right:auto;width:82%;max-width:360px;
  transform:translateX(-50%)!important
}
.hv-scene-agent.is-step-mode.is-current-1 .hv-listing-media{height:110px}

/* Beat 2 — listing + buyer + handshake bridge */
.hv-scene-agent.is-step-mode.is-current-2 .hv-listing{
  top:22%;left:2%;right:auto;width:46%;transform:none!important
}
.hv-scene-agent.is-step-mode.is-current-2 .hv-listing-media{height:78px}
.hv-scene-agent.is-step-mode.is-current-2 .hv-listing-stats{display:none}
.hv-scene-agent.is-step-mode.is-current-2 .hv-buyer{
  top:22%;right:2%;left:auto;width:46%;padding:12px
}
.hv-scene-agent.is-step-mode.is-current-2 .hv-buyer-head{margin-bottom:8px}
.hv-scene-agent.is-step-mode.is-current-2 .hv-buyer-row{margin-top:5px}
.hv-scene-agent.is-step-mode.is-current-2 .hv-handshake{
  top:62%;left:50%;transform:translate(-50%,-50%)!important;
  width:64px;height:64px
}
.hv-scene-agent.is-step-mode.is-current-2 .hv-collab-label{
  display:none
}

/* Beat 3 — agreement centered */
.hv-scene-agent.is-step-mode.is-current-3 .hv-agreement{
  top:26%;left:50%;right:auto;bottom:auto;width:86%;max-width:380px;padding:18px 20px;
  transform:translateX(-50%)!important
}

/* Buyer card base */
.hv-scene-agent .hv-buyer{padding:14px}
.hv-scene-agent .hv-buyer-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hv-scene-agent .hv-buyer-row{display:flex;justify-content:space-between;align-items:center;margin-top:7px}

/* Handshake hub */
.hv-scene-agent .hv-handshake{
  position:absolute;width:70px;height:70px;border-radius:50%;
  background:linear-gradient(145deg,#7c6dff,#4f46e5);
  display:grid;place-items:center;z-index:5;
  box-shadow:0 24px 52px -12px rgba(79,70,229,.6),0 0 0 10px rgba(109,99,255,.14),0 0 40px rgba(109,99,255,.25)
}
.hv-scene-agent .hv-handshake svg{width:36px;height:36px;color:#fff;position:relative;z-index:2}
.hv-scene-agent.is-idle.is-current-2 .hv-handshake.is-beat-active svg{animation:hvHandshakeWiggle 4s ease-in-out infinite}
.hv-scene-agent .hv-ring{
  position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(109,99,255,.5);opacity:.65;
  animation:hvRingExpand 2.8s cubic-bezier(.2,.7,.2,1) infinite
}
.hv-scene-agent .hv-ring.r2{inset:-24px;border-color:rgba(109,99,255,.32);animation-delay:.9s}
.hv-scene-agent .hv-ring.r3{inset:-40px;border-color:rgba(109,99,255,.16);animation-delay:1.8s}
.hv-scene-agent.is-idle.is-current-2 .hv-handshake.is-beat-active{animation:hvHubBreathe 3.5s ease-in-out infinite}
.hv-scene-agent .hv-collab-label{display:none}

/* Agreement bar */
.hv-scene-agent .hv-agreement{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(246,245,255,.94));
  border:1px solid rgba(79,70,229,.12);z-index:4
}
.hv-scene-agent .hv-agreement-text{display:flex;flex-direction:column;gap:3px;font-size:.78rem;color:var(--muted)}
.hv-scene-agent .hv-agreement-text strong{font-family:"Bricolage Grotesque",sans-serif;font-size:1.1rem;color:var(--ink)}
.hv-scene-agent .hv-status{font-size:.7rem;color:var(--faint)}
.hv-scene-agent .hv-status em{font-style:normal;color:var(--accent-ink);font-weight:600}
.hv-scene-agent .hv-stamp{
  background:linear-gradient(135deg,#4f46e5,#7c6dff);color:#fff;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.05em;
  padding:10px 15px;border-radius:9px;transform:rotate(-10deg) scale(.85);opacity:0;
  box-shadow:0 16px 32px -8px rgba(79,70,229,.65);white-space:nowrap;flex:none
}
.hv-scene-agent.is-idle.is-current-3 .hv-stamp{animation:hvStampGlow 3s ease-in-out infinite}
.hv-scene-agent.is-current-3 .hv-agreement.is-beat-active .hv-stamp{
  opacity:1;transform:rotate(-10deg) scale(1);
  animation:hvStampPop .65s cubic-bezier(.34,1.6,.64,1) forwards,hvStampGlow 3s ease-in-out 1s infinite
}

/* Entrance sequence */
.hv-scene-agent .hv-enter{opacity:0}
.hv-scene-agent .hv-enter.hv-stepper{transform:translateY(-12px) scale(.96)}
.hv-scene-agent .hv-enter.hv-listing,.hv-scene-agent .hv-enter.hv-buyer,.hv-scene-agent .hv-enter.hv-agreement{transform:translateY(28px) scale(.94)}
.hv-scene-agent .hv-enter.hv-handshake{transform:translate(-50%,calc(-50% + 24px)) scale(.65)}
.hv-scene-agent .hv-enter.hv-step-dots{transform:translateX(-50%) translateY(8px);opacity:0}

.hero-visual.hv-scene-agent.is-live .hv-enter.hv-stepper{animation:hvPillIn .55s cubic-bezier(.2,.7,.2,1) .05s forwards}
.hero-visual.hv-scene-agent.is-live .hv-enter.hv-listing{animation:hvCardIn .75s cubic-bezier(.2,.7,.2,1) .18s forwards}
.hero-visual.hv-scene-agent.is-live .hv-enter.hv-buyer{animation:hvCardIn .75s cubic-bezier(.2,.7,.2,1) .34s forwards}
.hero-visual.hv-scene-agent.is-live.is-current-2 .hv-path{animation:hvPathDraw 1.35s cubic-bezier(.4,0,.2,1) .46s forwards}
.hero-visual.hv-scene-agent.is-live.is-current-2 .hv-path-2{animation:hvPathDraw 1.35s cubic-bezier(.4,0,.2,1) .58s forwards}
.hero-visual.hv-scene-agent.is-live .hv-enter.hv-handshake{animation:hvHubIn .7s cubic-bezier(.34,1.5,.64,1) .72s forwards}
.hero-visual.hv-scene-agent.is-live .hv-enter.hv-agreement{animation:hvCardIn .75s cubic-bezier(.2,.7,.2,1) 1.02s forwards}
.hero-visual.hv-scene-agent.is-live .hv-stamp{animation:hvStampPop .65s cubic-bezier(.34,1.6,.64,1) 1.32s forwards}
.hero-visual.hv-scene-agent.is-live .hv-enter.hv-step-dots{animation:hvPillIn .45s cubic-bezier(.2,.7,.2,1) 1.1s forwards}

@keyframes hvSpotStampFlash{
  0%,100%{transform:rotate(-10deg) scale(1)}
  45%{transform:rotate(-7deg) scale(1.14);box-shadow:0 24px 48px -6px rgba(79,70,229,.9),0 0 24px rgba(109,99,255,.4)}
}
@keyframes hvMeshShift{0%{opacity:.85;transform:scale(1)}100%{opacity:1;transform:scale(1.03) translate(4px,-3px)}}
@keyframes hvGlowDrift{0%{transform:translate(0,0)}100%{transform:translate(14px,-12px) scale(1.08)}}
@keyframes hvCardIn{to{opacity:1;transform:none}}
@keyframes hvPathDraw{to{stroke-dashoffset:0}}
@keyframes hvPathPulse{0%,100%{opacity:.72;stroke-width:6}50%{opacity:1;stroke-width:7}}
@keyframes hvHubIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes hvPillIn{to{opacity:1;transform:none}}
@keyframes hvStampPop{0%{opacity:0;transform:rotate(-18deg) scale(.45)}65%{transform:rotate(-6deg) scale(1.1)}100%{opacity:1;transform:rotate(-10deg) scale(1)}}
@keyframes hvStampGlow{0%,100%{box-shadow:0 16px 32px -8px rgba(79,70,229,.65)}50%{box-shadow:0 20px 40px -6px rgba(79,70,229,.8),0 0 20px rgba(109,99,255,.35)}}
@keyframes hvRingExpand{0%{transform:scale(.8);opacity:.75}100%{transform:scale(1.35);opacity:0}}
@keyframes hvHubBreathe{0%,100%{box-shadow:0 24px 52px -12px rgba(79,70,229,.6),0 0 0 10px rgba(109,99,255,.14),0 0 40px rgba(109,99,255,.25)}50%{box-shadow:0 30px 60px -10px rgba(79,70,229,.72),0 0 0 16px rgba(109,99,255,.1),0 0 56px rgba(109,99,255,.35)}}
@keyframes hvHandshakeWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes hvCardFloatSoft{0%,100%{margin-top:0}33%{margin-top:-8px}66%{margin-top:-4px}}
@keyframes hvCardFloat{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-10px) rotate(.4deg)}66%{transform:translateY(-5px) rotate(-.3deg)}}
@keyframes hvPillFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hvShimmer{0%,100%{transform:translateX(-120%)}42%,58%{transform:translateX(130%)}}
@keyframes hvBadgePulse{0%{box-shadow:0 0 0 0 rgba(22,185,127,.55)}70%{box-shadow:0 0 0 10px rgba(22,185,127,0)}100%{box-shadow:0 0 0 0 rgba(22,185,127,0)}}
@keyframes hvDotFade{0%,6%,100%{opacity:0}18%,82%{opacity:1}}

@media(max-width:920px){
  .hero-visual.hv-scene-agent,.hero-visual.hv-scene-developer,.hero-visual.hv-scene-affiliate{max-width:440px;margin-top:20px;min-height:440px}
  .hero-visual-slot{width:100%;padding:8px 10px}
  .hv-scene-agent.is-step-mode.is-current-1 .hv-listing{width:88%}
  .hv-scene-agent.is-step-mode.is-current-2 .hv-listing{width:48%}
  .hv-scene-agent.is-step-mode.is-current-2 .hv-buyer{width:48%}
}
@media(max-width:640px){
  .hero-visual.hv-scene-agent{min-height:420px;aspect-ratio:1/1.08}
  .hv-scene-agent .hv-svg{display:none}
  .hv-scene-agent .hv-caption-step{font-size:.54rem}
  .hv-scene-agent .hv-caption-step i{width:15px;height:15px;font-size:.53rem}
  .hv-scene-agent .hv-caption-arrow{display:none}
  .hv-scene-agent .hv-step-hint{font-size:.62rem}
  .hv-scene-agent.is-step-mode.is-current-1 .hv-listing{top:22%;width:92%;max-width:300px}
  .hv-scene-agent.is-step-mode.is-current-1 .hv-listing-media{height:100px}
  .hv-scene-agent.is-step-mode.is-current-2 .hv-listing{display:none!important}
  .hv-scene-agent.is-step-mode.is-current-2 .hv-buyer{
    top:20%;left:50%;right:auto;width:92%;max-width:290px;
    transform:translateX(-50%)!important
  }
  .hv-scene-agent.is-step-mode.is-current-2 .hv-handshake{top:58%;width:56px;height:56px}
  .hv-scene-agent.is-step-mode.is-current-2 .hv-handshake svg{width:26px;height:26px}
  .hv-scene-agent.is-step-mode.is-current-2 .hv-collab-label{
    display:block;position:absolute;top:70%;left:50%;transform:translateX(-50%);
    font-size:.62rem;font-weight:600;color:var(--accent-ink);letter-spacing:.02em;white-space:nowrap;z-index:5
  }
  .hv-scene-agent.is-step-mode.is-current-2 .hv-handshake .hv-ring{display:none}
  .hv-scene-agent.is-step-mode.is-current-3 .hv-agreement{top:22%;width:92%;max-width:300px;padding:14px 16px}
}
@media(max-width:560px){
  .hero-visual.hv-scene-agent{min-height:400px}
}
@media(prefers-reduced-motion:reduce){
  .hv-scene-agent .hv-enter,.hv-scene-agent .hv-stamp{opacity:1!important;transform:none!important}
  .hv-scene-agent .hv-handshake{transform:translate(-50%,-50%)!important}
  .hv-scene-agent .hv-path{stroke-dashoffset:0!important}
  .hv-scene-agent .hv-stamp{transform:rotate(-10deg) scale(1)!important;opacity:1!important}
  .hv-scene-agent .hv-flow-dot,.hv-scene-agent .hv-media-shimmer,.hv-scene-agent .hv-ring,.hv-scene-agent .hv-scene-glow{display:none}
  .hero-visual.hv-scene-agent.is-idle .hv-card,.hero-visual.hv-scene-agent.is-idle .hv-handshake{animation:none!important}
  .hv-scene-agent.is-step-mode [data-beat]{opacity:1!important;visibility:visible!important;transform:none!important}
}

/* ============================================================
   DEVELOPER HERO VISUAL - XML upload → units → agent network
   ============================================================ */
.hv-scene-developer .hv-scene-frame{
  position:absolute;inset:-8px;border-radius:28px;pointer-events:none;z-index:0;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.24));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 40px 80px -36px rgba(5,150,105,.18),0 0 0 1px rgba(5,150,105,.05) inset
}
.hv-scene-developer .hv-scene-mesh{
  position:absolute;inset:4%;border-radius:22px;pointer-events:none;z-index:1;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%,rgba(5,150,105,.1),transparent 55%),
    radial-gradient(ellipse 60% 50% at 20% 80%,rgba(4,120,87,.08),transparent 50%),
    linear-gradient(180deg,rgba(240,253,244,.92),rgba(255,255,255,.45));
  animation:hvMeshShift 12s ease-in-out infinite alternate
}
.hv-scene-developer .hv-scene-glow{
  position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  width:280px;height:280px;top:8%;right:0;
  background:radial-gradient(circle,rgba(5,150,105,.14),transparent 68%);
  filter:blur(20px);animation:hvGlowDrift 14s ease-in-out infinite alternate
}
.hv-scene-developer .hv-scene-glow.g2{
  width:220px;height:220px;bottom:10%;left:-2%;top:auto;right:auto;
  background:radial-gradient(circle,rgba(5,150,105,.14),transparent 70%);
  animation-delay:2s;animation-duration:18s
}

.hv-scene-developer .hv-card{
  position:absolute;background:linear-gradient(145deg,#FFFFFF,rgba(255,255,255,.94));
  border:1px solid #E2E8F0;border-radius:18px;
  box-shadow:0 32px 64px -20px rgba(15,23,42,.08),0 0 0 1px rgba(5,150,105,.05),0 1px 0 rgba(255,255,255,.95) inset;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:4;overflow:hidden
}
.hv-scene-developer .hv-card-title{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.94rem;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.hv-scene-developer .hv-card-meta{font-size:.76rem;color:var(--muted);margin-top:3px;line-height:1.4;display:flex;align-items:center;gap:6px}
.hv-scene-developer .hv-agreement-text{display:flex;flex-direction:column;gap:3px;font-size:.78rem;color:var(--muted)}
.hv-scene-developer .hv-agreement-text strong{font-family:"Bricolage Grotesque",sans-serif;font-size:1.06rem;color:var(--ink)}
.hv-scene-developer .hv-status{font-size:.7rem;color:var(--faint)}
.hv-scene-developer .hv-status em{font-style:normal;color:#047857;font-weight:600}
.hv-scene-developer .hv-badge-dot{width:6px;height:6px;border-radius:50%;background:#059669;box-shadow:0 0 0 0 rgba(4,120,87,.4);animation:hvBadgePulse 2s ease-out infinite;flex:none}
.hv-scene-developer .hv-xml-icon,.hv-scene-developer .hv-dev-icon{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#F0FDF4,#D1FAE5);color:#047857
}
.hv-scene-developer .hv-xml-icon svg,.hv-scene-developer .hv-dev-icon svg{width:18px;height:18px}

.hv-scene-developer .hv-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.hv-scene-developer .hv-orbit{fill:none;stroke:rgba(5,150,105,.12);stroke-width:1.5;stroke-dasharray:6 8}
.hero-visual.hv-scene-developer.is-idle .hv-orbit{animation:hvOrbitPulse 4s ease-in-out infinite}
.hv-scene-developer .hv-path{stroke:url(#hv-dev-line);stroke-width:6;fill:none;stroke-linecap:round;opacity:.78;stroke-dasharray:380;stroke-dashoffset:380}
.hero-visual.hv-scene-developer.is-idle .hv-path{stroke-dashoffset:0;animation:hvPathPulseDev 3s ease-in-out infinite}
.hero-visual.hv-scene-developer.is-idle .hv-path-2{animation-delay:.4s}
.hero-visual.hv-scene-developer.is-idle .hv-path-3{animation-delay:.8s}
.hero-visual.hv-scene-developer.is-idle .hv-path-4{animation-delay:1.2s}
.hv-scene-developer .hv-flow-dot{opacity:0;filter:drop-shadow(0 0 8px rgba(4,120,87,.55))}
.hero-visual.hv-scene-developer.is-live .hv-flow-dot,.hero-visual.hv-scene-developer.is-idle .hv-flow-dot{animation:hvDotFade 2.4s ease-in-out infinite}
.hero-visual.hv-scene-developer.is-idle .hv-flow-dot.d2{animation-delay:1.2s}

.hv-scene-developer .hv-xml-feed{top:0;right:0;width:42%;padding:12px 14px;display:flex;align-items:center;gap:10px;z-index:5}
.hv-scene-developer .hv-project{top:0;left:0;width:54%;padding:14px 15px}
.hv-scene-developer .hv-project-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.hv-scene-developer .hv-bar{height:7px;border-radius:99px;background:rgba(5,150,105,.1);overflow:hidden;margin-top:4px}
.hv-scene-developer .hv-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#047857,#059669);animation:hvBarGrow 1.2s ease-out forwards}

.hv-scene-developer .hv-units{
  top:27%;left:6%;width:50%;display:grid;grid-template-columns:1fr 1fr;gap:8px;z-index:4
}
.hv-scene-developer .hv-unit-card{
  position:relative;background:linear-gradient(180deg,#FFFFFF,rgba(248,250,252,.96));
  border:1px solid #E2E8F0;border-radius:12px;padding:10px 11px;
  box-shadow:0 12px 28px -16px rgba(15,23,42,.08)
}
.hv-scene-developer .hv-unit-num{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.hv-scene-developer .hv-badge-status{display:inline-flex;margin-top:5px;padding:3px 8px;border-radius:6px;font-size:.64rem;font-weight:700}
.hv-scene-developer .hv-badge-sold{background:#fee2e2;color:#b91c1c}
.hv-scene-developer .hv-badge-reserved{background:#fef3c7;color:#b45309}
.hv-scene-developer .hv-badge-available{background:#F0FDF4;color:#065F46}
.hv-scene-developer .hv-badge-offer{background:#eef0fe;color:#4f46e5}
.hv-scene-developer .hv-unit-avatar{position:absolute;top:8px;right:8px;width:22px;height:22px;font-size:.58rem}
.hv-scene-developer .hv-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:700;color:#fff;border:2px solid #fff;box-shadow:0 4px 12px -4px rgba(14,80,60,.25)}
.hv-scene-developer .hv-avatar.av-3{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.hv-scene-developer .hv-avatar.av-4{background:linear-gradient(135deg,#9333ea,#db2777)}

.hv-scene-developer .hv-distrib-hub{
  position:absolute;top:33%;left:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(145deg,#047857,#059669);
  display:grid;place-items:center;z-index:5;
  box-shadow:0 22px 48px -12px rgba(4,120,87,.36),0 0 0 8px rgba(4,120,87,.08),0 0 36px rgba(5,150,105,.12)
}
.hv-scene-developer .hv-distrib-hub svg{width:30px;height:30px;color:#fff;position:relative;z-index:2}
.hv-scene-developer .hv-ring{position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(4,120,87,.32);animation:hvRingExpand 2.8s cubic-bezier(.2,.7,.2,1) infinite}
.hv-scene-developer .hv-ring.r2{inset:-24px;border-color:rgba(4,120,87,.18);animation-delay:.9s}
.hero-visual.hv-scene-developer.is-idle .hv-distrib-hub{animation:hvHubBreatheDev 3.5s ease-in-out infinite}

.hv-scene-developer .hv-float{
  position:absolute;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 16px 32px -14px rgba(14,80,60,.25);font-size:.72rem;font-weight:700;color:var(--ink);z-index:6;white-space:nowrap
}
.hv-scene-developer .hv-agents-pill{top:24%;left:36%}
.hv-scene-developer .hv-pulse-dot{width:7px;height:7px;border-radius:50%;background:#059669;flex:none;animation:hvBadgePulse 2s ease-out infinite}
.hero-visual.hv-scene-developer.is-idle .hv-agents-pill{animation:hvPillFloat 4.5s ease-in-out infinite}

.hv-scene-developer .hv-network-node{
  position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 10px;border-radius:14px;
  background:linear-gradient(145deg,#FFFFFF,rgba(248,250,252,.96));
  border:1px solid #E2E8F0;box-shadow:0 14px 30px -14px rgba(15,23,42,.08);z-index:4;min-width:58px
}
.hv-scene-developer .hv-flag{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;font-weight:700;color:#047857;background:#F0FDF4;padding:4px 7px;border-radius:6px}
.hv-scene-developer .hv-node-name{font-size:.68rem;color:var(--muted);font-weight:600}
.hv-scene-developer .hv-node-1{bottom:20%;left:1%}
.hv-scene-developer .hv-node-2{bottom:7%;left:20%}
.hv-scene-developer .hv-node-3{bottom:7%;right:20%}
.hv-scene-developer .hv-node-4{bottom:20%;right:1%}
.hero-visual.hv-scene-developer.is-idle .hv-network-node{animation:hvCardFloat 6s ease-in-out infinite}
.hero-visual.hv-scene-developer.is-idle .hv-node-2{animation-delay:.8s}
.hero-visual.hv-scene-developer.is-idle .hv-node-3{animation-delay:1.6s}
.hero-visual.hv-scene-developer.is-idle .hv-node-4{animation-delay:2.4s}

.hv-scene-developer .hv-commission-lock{
  bottom:0;right:0;left:2%;padding:15px 17px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:4
}
.hv-scene-developer .hv-stamp{
  background:linear-gradient(135deg,#047857,#059669);color:#fff;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.76rem;letter-spacing:.05em;
  padding:9px 14px;border-radius:9px;transform:rotate(-10deg) scale(.85);opacity:0;
  box-shadow:0 14px 28px -8px rgba(4,120,87,.4);white-space:nowrap;flex:none
}
.hero-visual.hv-scene-developer.is-idle .hv-stamp-lock{animation:hvStampGlowDev 3s ease-in-out infinite}

.hv-scene-developer .hv-enter{opacity:0}
.hv-scene-developer .hv-enter.hv-xml-feed,.hv-scene-developer .hv-enter.hv-project,.hv-scene-developer .hv-enter.hv-commission-lock{transform:translateY(24px) scale(.94)}
.hv-scene-developer .hv-enter.hv-units{transform:translateY(18px) scale(.96)}
.hv-scene-developer .hv-enter.hv-distrib-hub{transform:translate(-50%,calc(-50% + 20px)) scale(.7)}
.hv-scene-developer .hv-enter.hv-agents-pill{transform:translateY(12px) scale(.9)}
.hv-scene-developer .hv-enter.hv-network-node{transform:translateY(16px) scale(.92)}

.hero-visual.hv-scene-developer.is-live .hv-enter.hv-xml-feed{animation:hvCardIn .7s cubic-bezier(.2,.7,.2,1) .08s forwards}
.hero-visual.hv-scene-developer.is-live .hv-enter.hv-project{animation:hvCardIn .7s cubic-bezier(.2,.7,.2,1) .22s forwards}
.hero-visual.hv-scene-developer.is-live .hv-enter.hv-units{animation:hvCardIn .75s cubic-bezier(.2,.7,.2,1) .38s forwards}
.hero-visual.hv-scene-developer.is-live .hv-path{animation:hvPathDraw 1.2s cubic-bezier(.4,0,.2,1) .45s forwards}
.hero-visual.hv-scene-developer.is-live .hv-path-2{animation:hvPathDraw 1.2s cubic-bezier(.4,0,.2,1) .55s forwards}
.hero-visual.hv-scene-developer.is-live .hv-path-3{animation:hvPathDraw 1.2s cubic-bezier(.4,0,.2,1) .65s forwards}
.hero-visual.hv-scene-developer.is-live .hv-path-4{animation:hvPathDraw 1.2s cubic-bezier(.4,0,.2,1) .75s forwards}
.hero-visual.hv-scene-developer.is-live .hv-enter.hv-distrib-hub{animation:hvHubIn .65s cubic-bezier(.34,1.5,.64,1) .82s forwards}
.hero-visual.hv-scene-developer.is-live .hv-enter.hv-agents-pill{animation:hvPillIn .55s cubic-bezier(.2,.7,.2,1) .95s forwards}
.hero-visual.hv-scene-developer.is-live .hv-enter.hv-node-1{animation:hvCardIn .6s cubic-bezier(.2,.7,.2,1) 1.05s forwards}
.hero-visual.hv-scene-developer.is-live .hv-enter.hv-node-2{animation:hvCardIn .6s cubic-bezier(.2,.7,.2,1) 1.12s forwards}
.hero-visual.hv-scene-developer.is-live .hv-enter.hv-node-3{animation:hvCardIn .6s cubic-bezier(.2,.7,.2,1) 1.19s forwards}
.hero-visual.hv-scene-developer.is-live .hv-enter.hv-node-4{animation:hvCardIn .6s cubic-bezier(.2,.7,.2,1) 1.26s forwards}
.hero-visual.hv-scene-developer.is-live .hv-enter.hv-commission-lock{animation:hvCardIn .7s cubic-bezier(.2,.7,.2,1) 1.32s forwards}
.hero-visual.hv-scene-developer.is-live .hv-stamp-lock{animation:hvStampPop .6s cubic-bezier(.34,1.6,.64,1) 1.55s forwards}
.hero-visual.hv-scene-developer.is-idle .hv-xml-feed{animation:hvCardFloat 6s ease-in-out infinite}
.hero-visual.hv-scene-developer.is-idle .hv-project{animation:hvCardFloat 6.5s ease-in-out infinite;animation-delay:.7s}
.hero-visual.hv-scene-developer.is-idle .hv-commission-lock{animation:hvCardFloat 7s ease-in-out infinite;animation-delay:1.4s}

@keyframes hvPathPulseDev{0%,100%{opacity:.68;stroke-width:6}50%{opacity:1;stroke-width:7}}
@keyframes hvHubBreatheDev{0%,100%{box-shadow:0 22px 48px -12px rgba(4,120,87,.36),0 0 0 8px rgba(4,120,87,.08),0 0 36px rgba(5,150,105,.12)}50%{box-shadow:0 28px 56px -10px rgba(4,120,87,.45),0 0 0 14px rgba(4,120,87,.05),0 0 48px rgba(5,150,105,.16)}}
@keyframes hvStampGlowDev{0%,100%{box-shadow:0 14px 28px -8px rgba(4,120,87,.4)}50%{box-shadow:0 18px 36px -6px rgba(4,120,87,.48),0 0 18px rgba(5,150,105,.18)}}
@keyframes hvOrbitPulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes hvBarGrow{from{width:0!important}}

/* ============================================================
   AFFILIATE HERO VISUAL - Portfolio browser → leads → earnings
   ============================================================ */
.hv-scene-affiliate .hv-scene-frame{
  position:absolute;inset:-8px;border-radius:28px;pointer-events:none;z-index:0;
  background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 40px 80px -36px rgba(37,99,235,.14),0 0 0 1px rgba(37,99,235,.05) inset
}
.hv-scene-affiliate .hv-scene-mesh{
  position:absolute;inset:4%;border-radius:22px;pointer-events:none;z-index:1;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%,rgba(59,130,246,.1),transparent 55%),
    radial-gradient(ellipse 60% 50% at 20% 80%,rgba(37,99,235,.07),transparent 50%),
    linear-gradient(180deg,rgba(245,249,255,.94),rgba(255,255,255,.42));
  animation:hvMeshShift 12s ease-in-out infinite alternate
}
.hv-scene-affiliate .hv-scene-glow{
  position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  width:280px;height:280px;top:6%;right:0;
  background:radial-gradient(circle,rgba(59,130,246,.14),transparent 68%);
  filter:blur(20px);animation:hvGlowDrift 14s ease-in-out infinite alternate
}
.hv-scene-affiliate .hv-scene-glow.g2{
  width:220px;height:220px;bottom:10%;left:-2%;top:auto;right:auto;
  background:radial-gradient(circle,rgba(6,182,212,.16),transparent 70%);
  animation-delay:2s;animation-duration:18s
}

.hv-scene-affiliate .hv-card{
  position:absolute;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.88));
  border:1px solid rgba(255,255,255,.95);border-radius:18px;
  box-shadow:0 32px 64px -20px rgba(15,23,42,.12),0 0 0 1px rgba(37,99,235,.06),0 1px 0 rgba(255,255,255,.95) inset;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:4;overflow:hidden
}
.hv-scene-affiliate .hv-card-title{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.92rem;color:var(--ink)}
.hv-scene-affiliate .hv-card-meta{font-size:.75rem;color:var(--muted);margin-top:3px}

.hv-scene-affiliate .hv-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.hv-scene-affiliate .hv-path{stroke:url(#hv-aff-line);stroke-width:6;fill:none;stroke-linecap:round;opacity:.78;stroke-dasharray:360;stroke-dashoffset:360}
.hero-visual.hv-scene-affiliate.is-idle .hv-path{stroke-dashoffset:0;animation:hvPathPulseAff 3s ease-in-out infinite}
.hero-visual.hv-scene-affiliate.is-idle .hv-path-2{animation-delay:.5s}
.hero-visual.hv-scene-affiliate.is-idle .hv-path-3{animation-delay:1s}
.hv-scene-affiliate .hv-flow-dot{opacity:0;filter:drop-shadow(0 0 6px rgba(37,99,235,.4))}
.hero-visual.hv-scene-affiliate.is-live .hv-flow-dot,.hero-visual.hv-scene-affiliate.is-idle .hv-flow-dot{animation:hvDotFade 2.4s ease-in-out infinite}
.hero-visual.hv-scene-affiliate.is-idle .hv-flow-dot.d2{animation-delay:.8s}
.hero-visual.hv-scene-affiliate.is-idle .hv-flow-dot.d3{animation-delay:1.6s}

.hv-scene-affiliate .hv-browser{top:0;left:0;width:62%;padding:0;z-index:4}
.hv-scene-affiliate .hv-br-bar{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:linear-gradient(180deg,#F5F9FF,#EFF6FF);border-bottom:1px solid rgba(37,99,235,.08)
}
.hv-scene-affiliate .hv-br-dots{display:flex;gap:5px;flex:none}
.hv-scene-affiliate .hv-br-dots i{width:8px;height:8px;border-radius:50%;background:#FDE68A;display:block}
.hv-scene-affiliate .hv-br-dots i:nth-child(1){background:#fca5a5}
.hv-scene-affiliate .hv-br-dots i:nth-child(2){background:#fde68a}
.hv-scene-affiliate .hv-br-dots i:nth-child(3){background:#86efac}
.hv-scene-affiliate .hv-br-url{
  flex:1;min-width:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.62rem;color:var(--muted);
  background:#fff;border:1px solid rgba(37,99,235,.1);border-radius:7px;padding:5px 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis
}
.hv-scene-affiliate .hv-typed{color:#2563EB;font-weight:600;border-right:2px solid #2563EB;padding-right:2px;animation:hvCursorBlinkAff 1s step-end infinite}
.hv-scene-affiliate .hv-br-body{padding:12px}
.hv-scene-affiliate .hv-br-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.hv-scene-affiliate .hv-br-thumb{
  position:relative;border-radius:11px;overflow:hidden;border:1px solid rgba(37,99,235,.08);
  background:linear-gradient(180deg,#F5F9FF,#fff);min-height:72px;padding:8px
}
.hv-scene-affiliate .hv-thumb-img{
  display:block;height:36px;border-radius:7px;margin-bottom:6px;
  background:linear-gradient(135deg,#8ec5ff,#b8d4f8 50%,#dce8f5)
}
.hv-scene-affiliate .hv-thumb-img.img-2{background:linear-gradient(135deg,#93C5FD,#3B82F6 50%,#EFF6FF)}
.hv-scene-affiliate .hv-thumb-price{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.78rem;color:var(--ink)}
.hv-scene-affiliate .hv-thumb-loc{display:block;font-size:.66rem;color:var(--muted);margin-top:2px}
.hv-scene-affiliate .hv-br-leads{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;color:var(--muted);padding-top:8px;border-top:1px solid rgba(37,99,235,.06)}
.hv-scene-affiliate .hv-br-leads b{font-family:"Bricolage Grotesque",sans-serif;font-size:1rem;color:#2563EB}

.hv-scene-affiliate .hv-float{
  position:absolute;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.95);
  box-shadow:0 16px 32px -14px rgba(15,23,42,.14);font-size:.72rem;font-weight:700;color:var(--ink);z-index:6;white-space:nowrap
}
.hv-scene-affiliate .hv-float svg{width:14px;height:14px;color:#2563EB;flex:none}
.hv-scene-affiliate .hv-share-pill{top:3%;right:1%}
.hero-visual.hv-scene-affiliate.is-idle .hv-share-pill{animation:hvPillFloat 4.5s ease-in-out infinite}

.hv-scene-affiliate .hv-lead-node{
  position:absolute;display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,255,255,.9));
  border:1px solid rgba(37,99,235,.08);box-shadow:0 14px 28px -14px rgba(15,23,42,.12);z-index:5
}
.hv-scene-affiliate .hv-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.68rem;font-weight:700;color:#fff;border:2px solid #fff;flex:none}
.hv-scene-affiliate .hv-avatar.av-1{background:linear-gradient(135deg,#3B82F6,#2563EB)}
.hv-scene-affiliate .hv-avatar.av-3{background:linear-gradient(135deg,#2563EB,#1E40AF)}
.hv-scene-affiliate .hv-avatar.av-5{background:linear-gradient(135deg,#06B6D4,#3B82F6)}
.hv-scene-affiliate .hv-lead-meta{font-size:.68rem;color:var(--muted);font-weight:600;white-space:nowrap}
.hv-scene-affiliate .hv-lead-sk{top:1%;right:0}
.hv-scene-affiliate .hv-lead-rm{top:20%;right:-1%}
.hv-scene-affiliate .hv-lead-pj{bottom:34%;left:0}
.hero-visual.hv-scene-affiliate.is-idle .hv-lead-node{animation:hvCardFloat 5.5s ease-in-out infinite}
.hero-visual.hv-scene-affiliate.is-idle .hv-lead-rm{animation-delay:.9s}
.hero-visual.hv-scene-affiliate.is-idle .hv-lead-pj{animation-delay:1.8s}

.hv-scene-affiliate .hv-lead-capture{
  top:36%;right:0;width:38%;padding:12px 14px;display:flex;align-items:center;gap:10px;z-index:5
}
.hv-scene-affiliate .hv-capture-dot{width:8px;height:8px;border-radius:50%;background:#16b97f;flex:none;animation:hvBadgePulse 2s ease-out infinite}

.hv-scene-affiliate .hv-earnings{
  bottom:0;right:0;left:6%;padding:16px 18px;z-index:4;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(245,249,255,.96));
  border:1px solid rgba(37,99,235,.1)
}
.hv-scene-affiliate .hv-earnings-label{font-size:.7rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-family:"JetBrains Mono",ui-monospace,monospace}
.hv-scene-affiliate .hv-earnings-amount{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.65rem;color:#2563EB;line-height:1.1;margin:4px 0 8px}
.hv-scene-affiliate .hv-earnings-bars{display:flex;align-items:flex-end;gap:5px;height:28px;margin-bottom:8px}
.hv-scene-affiliate .hv-earnings-bars span{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#3B82F6,#2563EB);animation:hvBarRise 1.2s ease-out forwards;transform-origin:bottom}
.hero-visual.hv-scene-affiliate.is-idle .hv-earnings-bars span{animation:hvBarPulse 2.5s ease-in-out infinite}
.hero-visual.hv-scene-affiliate.is-idle .hv-earnings-bars span:nth-child(2){animation-delay:.2s}
.hero-visual.hv-scene-affiliate.is-idle .hv-earnings-bars span:nth-child(3){animation-delay:.4s}
.hero-visual.hv-scene-affiliate.is-idle .hv-earnings-bars span:nth-child(4){animation-delay:.6s}
.hero-visual.hv-scene-affiliate.is-idle .hv-earnings-bars span:nth-child(5){animation-delay:.8s}
.hv-scene-affiliate .hv-earnings-note{font-size:.72rem;color:var(--muted)}

.hv-scene-affiliate .hv-enter{opacity:0}
.hv-scene-affiliate .hv-enter.hv-browser,.hv-scene-affiliate .hv-enter.hv-earnings,.hv-scene-affiliate .hv-enter.hv-lead-capture{transform:translateY(24px) scale(.94)}
.hv-scene-affiliate .hv-enter.hv-share-pill{transform:translateY(12px) scale(.9)}
.hv-scene-affiliate .hv-enter.hv-lead-node{transform:translateY(16px) scale(.92)}

.hero-visual.hv-scene-affiliate.is-live .hv-enter.hv-browser{animation:hvCardIn .75s cubic-bezier(.2,.7,.2,1) .1s forwards}
.hero-visual.hv-scene-affiliate.is-live .hv-enter.hv-share-pill{animation:hvPillIn .55s cubic-bezier(.2,.7,.2,1) .25s forwards}
.hero-visual.hv-scene-affiliate.is-live .hv-path{animation:hvPathDraw 1.3s cubic-bezier(.4,0,.2,1) .38s forwards}
.hero-visual.hv-scene-affiliate.is-live .hv-path-2{animation:hvPathDraw 1.3s cubic-bezier(.4,0,.2,1) .5s forwards}
.hero-visual.hv-scene-affiliate.is-live .hv-path-3{animation:hvPathDraw 1.3s cubic-bezier(.4,0,.2,1) .62s forwards}
.hero-visual.hv-scene-affiliate.is-live .hv-enter.hv-lead-sk{animation:hvCardIn .6s cubic-bezier(.2,.7,.2,1) .72s forwards}
.hero-visual.hv-scene-affiliate.is-live .hv-enter.hv-lead-rm{animation:hvCardIn .6s cubic-bezier(.2,.7,.2,1) .85s forwards}
.hero-visual.hv-scene-affiliate.is-live .hv-enter.hv-lead-pj{animation:hvCardIn .6s cubic-bezier(.2,.7,.2,1) .98s forwards}
.hero-visual.hv-scene-affiliate.is-live .hv-enter.hv-lead-capture{animation:hvCardIn .65s cubic-bezier(.2,.7,.2,1) 1.1s forwards}
.hero-visual.hv-scene-affiliate.is-live .hv-enter.hv-earnings{animation:hvCardIn .75s cubic-bezier(.2,.7,.2,1) 1.22s forwards}
.hero-visual.hv-scene-affiliate.is-idle .hv-browser{animation:hvCardFloat 6s ease-in-out infinite}
.hero-visual.hv-scene-affiliate.is-idle .hv-earnings{animation:hvCardFloat 7s ease-in-out infinite;animation-delay:1.2s}

@keyframes hvPathPulseAff{0%,100%{opacity:.68;stroke-width:6}50%{opacity:1;stroke-width:7}}
@keyframes hvCursorBlinkAff{0%,100%{border-color:#2563EB}50%{border-color:transparent}}
@keyframes hvBarRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hvBarPulse{0%,100%{opacity:.75}50%{opacity:1}}

@media(max-width:920px){
  .hero-visual.hv-scene-developer,.hero-visual.hv-scene-affiliate{max-width:440px;margin-top:20px;min-height:400px}
  .hv-scene-developer .hv-units{width:52%}
  .hv-scene-affiliate .hv-browser{width:64%}
}
@media(max-width:560px){
  .hero-visual.hv-scene-developer,.hero-visual.hv-scene-affiliate{max-width:320px;min-height:340px}
  .hv-scene-developer .hv-xml-feed{width:46%;font-size:.9em}
  .hv-scene-developer .hv-project{width:52%}
  .hv-scene-affiliate .hv-browser{width:68%}
  .hv-scene-affiliate .hv-earnings-amount{font-size:1.35rem}
  .hv-scene-affiliate .hv-lead-meta{display:none}
}
/* ============ PAGE PRELOADER ============ */
.lp5-preloader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--hero);
  color:var(--accent);
  overflow:hidden;
  transition:opacity .42s cubic-bezier(.4,0,.2,1),visibility .42s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.4,0,.2,1);
}
.lp5-preloader.is-done{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(1.015);
}
.lp5-preloader__bg{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
}
.lp5-preloader__blob{
  position:absolute;border-radius:50%;
  filter:blur(72px);opacity:.52;
  animation:lp5PreloaderFloat 9s ease-in-out infinite;
}
.lp5-preloader__blob--1{
  width:min(52vw,420px);height:min(52vw,420px);
  top:-12%;left:-8%;background:var(--accent);
}
.lp5-preloader__blob--2{
  width:min(44vw,360px);height:min(44vw,360px);
  right:-10%;bottom:-14%;background:var(--accent2);
  animation-delay:-3s;
}
.lp5-preloader__blob--3{
  width:min(34vw,280px);height:min(34vw,280px);
  left:38%;top:58%;background:var(--glow);
  opacity:.38;animation-delay:-5.5s;
}
.lp5-preloader__center{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.lp5-preloader__mark-wrap{
  position:relative;width:92px;height:92px;
  display:grid;place-items:center;
}
.lp5-preloader__ring{
  position:absolute;inset:0;width:100%;height:100%;
  color:var(--accent);
  animation:lp5PreloaderSpin 1.35s linear infinite;
}
.lp5-preloader__ring circle{
  stroke-dasharray:72 192;
  stroke-dashoffset:0;
  opacity:.82;
}
.lp5-preloader__pulse{
  position:absolute;inset:14px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  animation:lp5PreloaderPulse 2.1s ease-in-out infinite;
}
.lp5-preloader__mark{
  position:relative;z-index:2;
  width:42px;height:42px;object-fit:contain;
  animation:lp5PreloaderMark 2.4s ease-in-out infinite;
}
.lp5-preloader__label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);
}
.lp5-preloader__dots{display:inline-flex;align-items:center;gap:4px}
.lp5-preloader__dots i{
  display:block;width:4px;height:4px;border-radius:50%;
  background:var(--accent);
  animation:lp5PreloaderDot 1.15s ease-in-out infinite;
}
.lp5-preloader__dots i:nth-child(2){animation-delay:.16s}
.lp5-preloader__dots i:nth-child(3){animation-delay:.32s}
.lp5-preloader__track{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  overflow:hidden;
}
.lp5-preloader__track-fill{
  display:block;height:100%;width:36%;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);
  animation:lp5PreloaderTrack 1.35s ease-in-out infinite;
}
.lp5-preloader.is-done .lp5-preloader__track-fill{
  width:100%;animation:none;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .38s cubic-bezier(.4,0,.2,1);
}
@keyframes lp5PreloaderSpin{to{transform:rotate(360deg)}}
@keyframes lp5PreloaderPulse{
  0%,100%{transform:scale(.92);opacity:.45}
  50%{transform:scale(1.06);opacity:.9}
}
@keyframes lp5PreloaderMark{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes lp5PreloaderDot{
  0%,80%,100%{transform:translateY(0);opacity:.35}
  40%{transform:translateY(-4px);opacity:1}
}
@keyframes lp5PreloaderFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(18px,-14px) scale(1.04)}
  66%{transform:translate(-12px,10px) scale(.96)}
}
@keyframes lp5PreloaderTrack{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(320%)}
}
@media(prefers-reduced-motion:reduce){
  .lp5-preloader,.lp5-preloader *{animation:none!important;transition-duration:.01ms!important}
  .lp5-preloader__center{opacity:1;transform:none}
}

/* ============ PAGE PRELOADER ============ */
.lp5-preloader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--hero);
  color:var(--accent);
  overflow:hidden;
  transition:opacity .42s cubic-bezier(.4,0,.2,1),visibility .42s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.4,0,.2,1);
}
.lp5-preloader.is-done{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(1.015);
}
.lp5-preloader__bg{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
}
.lp5-preloader__blob{
  position:absolute;border-radius:50%;
  filter:blur(72px);opacity:.52;
  animation:lp5PreloaderFloat 9s ease-in-out infinite;
}
.lp5-preloader__blob--1{
  width:min(52vw,420px);height:min(52vw,420px);
  top:-12%;left:-8%;background:var(--accent);
}
.lp5-preloader__blob--2{
  width:min(44vw,360px);height:min(44vw,360px);
  right:-10%;bottom:-14%;background:var(--accent2);
  animation-delay:-3s;
}
.lp5-preloader__blob--3{
  width:min(34vw,280px);height:min(34vw,280px);
  left:38%;top:58%;background:var(--glow);
  opacity:.38;animation-delay:-5.5s;
}
.lp5-preloader__center{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.lp5-preloader__mark-wrap{
  position:relative;width:92px;height:92px;
  display:grid;place-items:center;
}
.lp5-preloader__ring{
  position:absolute;inset:0;width:100%;height:100%;
  color:var(--accent);
  animation:lp5PreloaderSpin 1.35s linear infinite;
}
.lp5-preloader__ring circle{
  stroke-dasharray:72 192;
  stroke-dashoffset:0;
  opacity:.82;
}
.lp5-preloader__pulse{
  position:absolute;inset:14px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  animation:lp5PreloaderPulse 2.1s ease-in-out infinite;
}
.lp5-preloader__mark{
  position:relative;z-index:2;
  width:42px;height:42px;object-fit:contain;
  animation:lp5PreloaderMark 2.4s ease-in-out infinite;
}
.lp5-preloader__label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);
}
.lp5-preloader__dots{display:inline-flex;align-items:center;gap:4px}
.lp5-preloader__dots i{
  display:block;width:4px;height:4px;border-radius:50%;
  background:var(--accent);
  animation:lp5PreloaderDot 1.15s ease-in-out infinite;
}
.lp5-preloader__dots i:nth-child(2){animation-delay:.16s}
.lp5-preloader__dots i:nth-child(3){animation-delay:.32s}
.lp5-preloader__track{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  overflow:hidden;
}
.lp5-preloader__track-fill{
  display:block;height:100%;width:36%;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);
  animation:lp5PreloaderTrack 1.35s ease-in-out infinite;
}
.lp5-preloader.is-done .lp5-preloader__track-fill{
  width:100%;animation:none;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .38s cubic-bezier(.4,0,.2,1);
}
@keyframes lp5PreloaderSpin{to{transform:rotate(360deg)}}
@keyframes lp5PreloaderPulse{
  0%,100%{transform:scale(.92);opacity:.45}
  50%{transform:scale(1.06);opacity:.9}
}
@keyframes lp5PreloaderMark{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes lp5PreloaderDot{
  0%,80%,100%{transform:translateY(0);opacity:.35}
  40%{transform:translateY(-4px);opacity:1}
}
@keyframes lp5PreloaderFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(18px,-14px) scale(1.04)}
  66%{transform:translate(-12px,10px) scale(.96)}
}
@keyframes lp5PreloaderTrack{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(320%)}
}
@media(prefers-reduced-motion:reduce){
  .lp5-preloader,.lp5-preloader *{animation:none!important;transition-duration:.01ms!important}
  .lp5-preloader__center{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .hv-scene-developer .hv-enter,.hv-scene-developer .hv-stamp,.hv-scene-affiliate .hv-enter{opacity:1!important;transform:none!important}
  .hv-scene-developer .hv-distrib-hub{transform:translate(-50%,-50%)!important}
  .hv-scene-developer .hv-path,.hv-scene-affiliate .hv-path{stroke-dashoffset:0!important}
  .hv-scene-developer .hv-stamp,.hv-scene-developer .hv-stamp-lock{transform:rotate(-10deg) scale(1)!important;opacity:1!important}
  .hv-scene-developer .hv-flow-dot,.hv-scene-developer .hv-ring,.hv-scene-developer .hv-scene-glow,
  .hv-scene-affiliate .hv-flow-dot,.hv-scene-affiliate .hv-scene-glow,.hv-scene-affiliate .hv-typed{border:none!important}
  .hero-visual.hv-scene-developer.is-idle .hv-card,.hero-visual.hv-scene-developer.is-idle .hv-network-node,.hero-visual.hv-scene-developer.is-idle .hv-distrib-hub,.hero-visual.hv-scene-developer.is-idle .hv-agents-pill,
  .hero-visual.hv-scene-affiliate.is-idle .hv-card,.hero-visual.hv-scene-affiliate.is-idle .hv-lead-node,.hero-visual.hv-scene-affiliate.is-idle .hv-share-pill{animation:none!important}
  #page-agent .hva-node,#page-agent .hva-node-ring{animation:none!important}
  #page-agent .hva-node.is-active .hva-node-ring{opacity:.7!important}
}

/* ============================================================
   Agent hero — Indigo + Orange (Portfolio Studio reference)
   Scoped to #page-agent hero; nav uses body[data-theme="agent"]
   ============================================================ */

#page-agent{
  background:var(--page);
  color:var(--ink);
  --accent:#5856D6;
  --accent2:#6B69E8;
  --accent-soft:#EEF2FF;
  --accent-ink:#4338CA;
  --agent-orange:#F59E0B;
  --agent-orange-hover:#D97706;
  --soft:#F5F7FF;
  --line:#E0E7FF;
  --hero:linear-gradient(180deg,#F5F7FF 0%,#FFFFFF 100%);
  --glow:rgba(88,86,214,.18);
  --hva-panel:#5856D6;
  --hva-panel-deep:#4338CA;
  --agent-shadow-xs:0 1px 2px rgba(15,23,42,.05),0 3px 10px -2px rgba(88,86,214,.1);
  --agent-shadow-sm:0 2px 6px rgba(15,23,42,.06),0 8px 20px -6px rgba(88,86,214,.12);
  --agent-shadow-md:0 4px 10px rgba(15,23,42,.06),0 14px 34px -10px rgba(88,86,214,.15);
}

#page-agent .hero::before{
  content:"";display:block;position:absolute;width:480px;height:480px;
  right:-100px;top:-140px;
  background:radial-gradient(circle,rgba(88,86,214,.14),transparent 68%);
  opacity:1;pointer-events:none;filter:blur(12px);
  animation:auroraDrift 18s ease-in-out infinite alternate
}
#page-agent .hero::after{
  content:"";display:block;position:absolute;width:380px;height:380px;
  left:-120px;bottom:-120px;
  background:radial-gradient(circle,rgba(88,86,214,.1),transparent 70%);
  opacity:1;pointer-events:none;filter:blur(20px);
  animation:auroraDrift 22s ease-in-out infinite alternate-reverse
}
#page-agent .hero-grid{
  display:block;opacity:.4;
  background-image:radial-gradient(circle at 1px 1px,rgba(88,86,214,.1) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 92%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 92%);
}

#page-agent .hero{background:var(--hero);padding:36px var(--lp5-section-x) calc(var(--lp5-section-y) * .75)}

#page-agent .hero-copy-glow{
  display:block;opacity:.55;
  background:radial-gradient(circle,var(--accent-soft) 0%,transparent 68%);
}

#page-agent .hero-eyebrow--editorial{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 11px 4px 9px;margin-bottom:18px;
  border-radius:999px;
  background:#EEF2FF;
  border:1px solid #E0E7FF;
  box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  isolation:isolate
}
#page-agent .hero-eyebrow--editorial::before,
#page-agent .hero-eyebrow--editorial::after{display:none!important}
#page-agent .hero-eyebrow-dot{
  width:6px;height:6px;flex:none;border-radius:50%;
  background:#6B69E8
}
#page-agent .hero-eyebrow-text{
  display:inline;font-family:"DM Sans","Inter",sans-serif;
  font-size:.625rem;font-weight:700;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;
  color:#4338CA!important;-webkit-text-fill-color:#4338CA!important;
  background:none!important
}

#page-agent .hero-copy{
  max-width:34rem;
  align-self:start;
  margin-top:-14px
}
#page-agent .hero-trust-wall--agent{
  grid-column:1 / -1;
  margin:8px 0 0;
  padding-top:0
}

#page-agent .hero h1,
#page-agent .hero .display{
  font-family:"DM Sans","Inter",sans-serif;
  font-weight:800;
  font-size:clamp(2.15rem,3.8vw,3.05rem);
  letter-spacing:-.032em;
  line-height:1.08;
  margin:10px 0 16px;
  color:#0F172A
}

#page-agent .hero h1 .hero-subline{
  display:block;
  margin-top:.35em;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.02em;
  color:#5856D6
}

#page-agent .hero h1 .hero-accent{
  font-family:inherit;
  font-style:normal;
  font-weight:800;
  background:none;
  -webkit-text-fill-color:#F59E0B;
  color:#F59E0B;
  animation:none;
  padding:0;
  position:relative
}
#page-agent .hero h1 .hero-accent::after{display:none}

#page-agent .hero .lede{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:1rem;
  line-height:1.65;
  max-width:40ch;
  margin-bottom:22px;
  color:#64748B
}

#page-agent .hero-cta{margin:0 0 24px;gap:12px}
#page-agent .btn-primary.btn-hero{
  background:#5856D6;color:#fff;border:1px solid transparent;
  border-radius:8px;padding:12px 18px;
  font-family:"DM Sans","Inter",sans-serif;font-size:.92rem;font-weight:600;
  box-shadow:0 10px 24px -12px rgba(88,86,214,.32)
}
#page-agent .btn-primary.btn-hero:hover{
  background:#4338CA;box-shadow:0 14px 28px -10px rgba(88,86,214,.38)
}
#page-agent .btn-ghost.btn-hero{
  border:1px solid #E2E8F0;color:#0F172A;background:#fff;
  border-radius:8px;padding:11px 16px;gap:10px;
  font-family:"DM Sans","Inter",sans-serif;font-size:.92rem;font-weight:600;
  box-shadow:0 1px 2px rgba(15,23,42,.04)
}
#page-agent .btn-ghost.btn-hero:hover{
  border-color:#CBD5E1;color:#0F172A;background:#fff
}
#page-agent .btn-hero-play .btn-play-icon{
  width:24px;height:24px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:#EEF2FF;color:#5856D6;margin-left:2px
}
#page-agent .btn-hero-play .btn-play-icon svg{width:16px;height:16px;display:block}

#page-agent .hero-trust-stats{
  margin-top:6px;margin-bottom:4px;padding:0;border:none
}
#page-agent .dev-hero-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;width:100%;max-width:100%;
  list-style:none;margin:0;padding:0;row-gap:16px;column-gap:20px
}
#page-agent .dev-hero-stat{
  display:flex;align-items:center;gap:14px;
  min-width:0;margin:0;padding:0
}
#page-agent .dev-hero-stat-icon{
  flex:none;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(88,86,214,.1);color:#5856D6;
  border:none
}
#page-agent .dev-hero-stat-icon svg{
  width:23px;height:23px;display:block;
  stroke-width:1.5
}
#page-agent .dev-hero-stat-icon svg[data-lp5-filled="true"]:not([data-lp5-gradient]) path,
#page-agent .dev-hero-stat-icon svg.lp5-svg-filled:not([data-lp5-gradient]) path{fill:currentColor}
#page-developer .dev-hero-stat-icon svg[data-lp5-filled="true"]:not([data-lp5-gradient]) path,
#page-developer .dev-hero-stat-icon svg.lp5-svg-filled:not([data-lp5-gradient]) path{fill:currentColor}
#page-affiliate .dev-hero-stat-icon svg[data-lp5-filled="true"]:not([data-lp5-gradient]) path,
#page-affiliate .dev-hero-stat-icon svg.lp5-svg-filled:not([data-lp5-gradient]) path{fill:currentColor}
#page-developer .dev-hero-stat-icon svg[data-lp5-stroke="true"],
#page-agent .dev-hero-stat-icon svg[data-lp5-stroke="true"],
#page-affiliate .dev-hero-stat-icon svg[data-lp5-stroke="true"]{
  width:23px;height:23px;display:block;color:inherit
}
#page-developer .dev-hero-stat-icon svg[data-lp5-stroke="true"] path,
#page-developer .dev-hero-stat-icon svg[data-lp5-stroke="true"] circle,
#page-agent .dev-hero-stat-icon svg[data-lp5-stroke="true"] path,
#page-agent .dev-hero-stat-icon svg[data-lp5-stroke="true"] circle,
#page-affiliate .dev-hero-stat-icon svg[data-lp5-stroke="true"] path,
#page-affiliate .dev-hero-stat-icon svg[data-lp5-stroke="true"] circle{
  stroke:currentColor;fill:none
}
#page-developer .dev-hero-stat-icon svg[data-lp5-gradient="true"],
#page-agent .dev-hero-stat-icon svg[data-lp5-gradient="true"],
#page-affiliate .dev-hero-stat-icon svg[data-lp5-gradient="true"]{
  width:23px;height:23px;display:block
}
.lp5-footer-social-btn svg[data-lp5-filled="true"] path,
.lp5-footer-social-btn svg.lp5-svg-filled path,
.lp5-footer-contact svg[data-lp5-filled="true"] path,
.lp5-footer-contact svg.lp5-svg-filled path,
.contact-channel-icon svg[data-lp5-filled="true"] path,
.contact-channel-icon svg.lp5-svg-filled path{fill:currentColor}
.contact-channel-icon svg[data-lp5-filled="true"],
.contact-channel-icon svg.lp5-svg-filled{width:18px;height:18px;display:block}
#page-agent .dev-hero-stat-text{
  display:flex;flex-direction:column;justify-content:center;
  gap:0;min-width:0;line-height:1
}
#page-agent .dev-hero-stat-value{
  display:block;margin:0;padding:0;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.875rem;font-weight:700;line-height:1.15;
  letter-spacing:-.015em;color:#0F172A;
  font-variant-numeric:tabular-nums
}
#page-agent .dev-hero-stat-label{
  display:block;margin:2px 0 0;padding:0;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.6875rem;font-weight:400;line-height:1.2;
  letter-spacing:0;color:#64748B
}
@media (max-width:520px){
  #page-agent .dev-hero-stats{grid-template-columns:1fr;row-gap:12px}
  #page-agent .dev-hero-stat-icon{width:40px;height:40px;border-radius:11px}
}

#page-agent .htw-shell--developer-premium{
  padding:0;border-radius:14px;background:#fff;border:1px solid #E2E8F0;
  box-shadow:0 14px 34px -18px rgba(88,86,214,.12),0 2px 8px -4px rgba(15,23,42,.04);
  backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden
}
#page-agent .hero-trust-wall--agent:hover .htw-shell--developer-premium{transform:none}
#page-agent .htw-shell--developer-premium::before{display:none}
#page-agent .htw-dev-grid{
  display:grid;
  grid-template-columns:minmax(170px,.88fr) 1px minmax(0,1.62fr) 1px minmax(118px,.7fr);
  gap:0 22px;align-items:center;padding:20px 24px
}
#page-agent .htw-dev-divider{
  width:1px;height:92px;background:#E2E8F0;justify-self:center
}
#page-agent .htw-dev-eyebrow{
  display:flex;align-items:center;gap:7px;margin:0 0 8px;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:#6B69E8;font-weight:700;line-height:1.2
}
#page-agent .htw-dev-shield{
  width:16px;height:16px;color:#6B69E8;flex:none;display:grid;place-items:center
}
#page-agent .htw-dev-shield svg{width:14px;height:14px;display:block}
#page-agent .htw-dev-title{
  margin:0;font-family:"DM Sans","Inter",sans-serif;font-size:1rem;
  font-weight:700;letter-spacing:-.025em;color:#0F172A;line-height:1.25
}
#page-agent .htw-dev-title-accent{color:#0F172A;margin-top:2px}
#page-agent .htw-dev-title-accent-word{color:#F59E0B}
#page-agent .htw-dev-logos{
  min-width:0;overflow:hidden;padding:0 2px
}
#page-agent .htw-marquee--developer-premium{
  position:relative;overflow:hidden;min-width:0;
  background:transparent;border:none;box-shadow:none;
  padding:10px 0;border-radius:0
}
#page-agent .htw-marquee--developer-premium .htw-marquee-fade{width:28px}
#page-agent .htw-marquee--developer-premium .htw-marquee-fade-left{
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 35%,transparent 100%)
}
#page-agent .htw-marquee--developer-premium .htw-marquee-fade-right{
  background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,.92) 35%,transparent 100%)
}
#page-agent .htw-marquee--developer-premium .htw-marquee-track{
  display:flex;align-items:center;gap:40px;width:max-content;
  animation:htwMarqueeL 36s linear infinite;will-change:transform
}
#page-agent .htw-marquee--developer-premium.is-paused .htw-marquee-track{
  animation-play-state:paused
}
#page-agent .htw-dev-logo img{
  display:block;height:78px;width:auto;max-width:252px;
  object-fit:contain;object-position:center;
  filter:none;opacity:1;transform:none
}
#page-agent .htw-dev-metric{
  display:grid;gap:3px;text-align:right;justify-self:end;padding-left:4px
}
#page-agent .htw-dev-metric-val{
  font-family:"DM Sans","Inter",sans-serif;font-size:1.75rem;
  font-weight:800;line-height:1;letter-spacing:-.03em;color:#5856D6
}
#page-agent .htw-dev-metric-label{
  display:grid;gap:0;font-size:.72rem;line-height:1.2;color:#64748B;
  font-weight:500;max-width:11ch;margin-left:auto;text-align:right
}
@media (max-width:980px){
  #page-agent .hero-copy{margin-top:0;align-self:auto}
  #page-agent .hero-trust-wall--agent{margin-top:12px;padding-top:0}
  #page-agent .htw-dev-grid{
    grid-template-columns:1fr;gap:14px;padding:14px 16px 16px
  }
  #page-agent .htw-dev-divider{display:none}
  #page-agent .htw-dev-metric{
    text-align:left;justify-self:start;padding-left:0
  }
  #page-agent .htw-dev-metric-label{margin-left:0;text-align:left}
}
@media(max-width:640px){
  #page-agent .hero-eyebrow--editorial{margin-bottom:12px;padding:3px 8px;gap:6px}
  #page-agent .hero-cta{margin-bottom:12px}
}

/* Agent flow panel — orbit visual */
.hero-visual.hv-agent-flow{
  position:relative;width:100%;max-width:480px;margin:0 auto
}
.hva-panel{
  position:relative;min-height:430px;padding:36px 22px 24px;border-radius:22px;overflow:hidden;
  background:var(--hva-panel,#5050bc);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 56px -24px rgba(36,36,112,.55),0 0 0 1px rgba(255,255,255,.06) inset
}
.hva-panel-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:20px 20px;opacity:.55
}
.hva-panel-glow{
  position:absolute;width:240px;height:240px;right:-30px;top:-50px;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%);filter:blur(6px)
}
.hva-panel-header{
  position:absolute;top:14px;left:0;right:0;z-index:6;margin:0;padding:0 16px;
  font-family:"DM Sans","Inter",sans-serif;font-size:.58rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-align:center;line-height:1.3;
  color:rgba(255,255,255,.72)
}
.hva-orbit{
  position:absolute;left:50%;top:44%;border:1.5px dashed rgba(255,255,255,.22);border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none
}
.hva-orbit-1{width:min(78%,300px);height:min(78%,300px);aspect-ratio:1}
.hva-orbit-2{width:min(58%,220px);height:min(58%,220px);aspect-ratio:1;opacity:.65}

.hva-hub{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:3;
  width:118px;height:118px;border-radius:50%;padding:4px;
  background:linear-gradient(145deg,#fff,rgba(255,255,255,.88));
  box-shadow:0 16px 40px -16px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.12)
}
.hva-hub-photo{width:100%;height:100%;border-radius:50%;overflow:hidden}
.hva-hub-photo img,.hva-hub-photo .hva-photo{width:100%;height:100%;object-fit:cover;display:block}
.hva-hub-badge{
  position:absolute;left:50%;top:-10px;bottom:auto;transform:translateX(-50%);
  padding:3px 9px;border-radius:999px;background:var(--agent-orange,#D97706);color:#fff;
  font-family:"DM Sans","Inter",sans-serif;font-size:.54rem;font-weight:700;white-space:nowrap;
  letter-spacing:.04em;text-transform:uppercase;line-height:1.2;
  box-shadow:0 6px 16px -8px rgba(217,119,6,.45);z-index:2
}

.hva-node{
  position:absolute;z-index:4;display:grid;justify-items:center;text-align:center;gap:4px;
  width:108px;color:#fff;font-family:"DM Sans","Inter",sans-serif
}
.hva-node-icon{
  position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--accent,#5050bc);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.35);
  transition:box-shadow .35s ease,transform .35s ease
}
.hva-node.is-active .hva-node-icon{
  transform:scale(1.06);
  box-shadow:0 14px 28px -10px rgba(0,0,0,.42),0 0 0 3px rgba(255,255,255,.3),0 0 18px -2px rgba(217,119,6,.4)
}
.hva-node-icon svg{width:20px;height:20px;display:block}
.hva-node-ring{
  position:absolute;top:0;left:50%;width:44px;height:44px;margin-left:-22px;border-radius:50%;
  border:2px solid var(--agent-orange,#D97706);opacity:0;
  transition:opacity .35s ease
}
.hva-node.is-active .hva-node-ring{
  opacity:1;animation:hvaNodePulse 2.4s ease-in-out infinite
}
.hva-node-num{
  position:absolute;right:-3px;bottom:-3px;
  width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  font-size:.56rem;font-weight:800;background:var(--agent-orange,#D97706);color:#fff;line-height:1;
  border:2px solid #fff;box-shadow:0 2px 8px -2px rgba(217,119,6,.4)
}
.hva-node-label{
  font-size:.72rem;font-weight:700;line-height:1.2;letter-spacing:-.01em;
  transition:color .35s ease
}
.hva-node.is-active .hva-node-label{color:#fff}
.hva-node.is-active .hva-node-label::after{
  content:"";display:block;width:18px;height:2px;margin:3px auto 0;border-radius:99px;
  background:var(--agent-orange,#D97706)
}
.hva-node-hint{font-size:.58rem;line-height:1.25;color:rgba(255,255,255,.78);max-width:100px}

.hva-node-1{left:4%;top:20%}
.hva-node-2{right:2%;top:18%}
.hva-node-3{left:50%;bottom:22%;transform:translateX(-50%)}
.hva-node-3.is-active{transform:translateX(-50%)}

.hva-float-card{
  position:absolute;z-index:5;padding:8px 11px;border-radius:11px;
  background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.85);
  box-shadow:0 14px 28px -16px rgba(0,0,0,.35);
  font-family:"DM Sans","Inter",sans-serif;display:grid;gap:1px;min-width:0
}
.hva-float-kicker{font-size:.56rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted,#5c5c7a);font-weight:700}
.hva-float-card strong{font-size:.82rem;color:var(--ink,#12122e);line-height:1.2}
.hva-float-card span:not(.hva-float-kicker):not(.hva-float-signed){font-size:.68rem;color:var(--muted,#5c5c7a)}
.hva-float-signed{font-size:.62rem;font-weight:700;color:#0e9f6e}
.hva-float-listing{left:16px;bottom:16px;max-width:140px}
.hva-float-split{right:16px;bottom:16px;text-align:center;min-width:96px}

@keyframes hvaNodePulse{
  0%,100%{opacity:.55;transform:scale(.96)}
  50%{opacity:1;transform:scale(1.06)}
}

@media(max-width:900px){
  .hero-visual.hv-agent-flow{max-width:100%}
  .hva-panel{min-height:400px}
  .hva-node-hint{display:none}
  .hva-node{width:92px}
  .hva-node-1{left:2%;top:16%}
  .hva-node-2{right:0;top:16%}
  .hva-node-3{bottom:20%}
}

@media(max-width:520px){
  .hva-panel{min-height:370px;padding:32px 16px 18px}
  .hva-panel-header{font-size:.54rem;top:12px}
  .hva-hub{width:100px;height:100px}
  .hva-float-listing{left:10px;bottom:12px;max-width:120px}
  .hva-float-split{right:10px;bottom:12px}
}

@media(prefers-reduced-motion:reduce){
  #page-agent .hero h1 .hero-accent{animation:none!important}
  .hva-node-ring{animation:none!important;opacity:0!important}
  .hva-node.is-active .hva-node-ring{opacity:.85!important}
  .hva-node.is-active .hva-node-icon{transform:none!important}
}

/* ============================================================
   AGENT HERO — Collaboration pipeline dashboard (pixel spec)
   ============================================================ */
.hero-visual.hv-agent-dashboard{
  --hvad-purple:#5856D6;
  --hvad-purple-2:#6B69E8;
  --hvad-purple-soft:#E0E7FF;
  --hvad-purple-muted:#C7D2FE;
  --hvad-green:#10B981;
  --hvad-orange:#F59E0B;
  --hvad-orange-soft:#FFF7ED;
  --hvad-orange-line:#FFEDD5;
  --hvad-bg:#F5F7FF;
  --hvad-card:#FFFFFF;
  --hvad-ink:#0F172A;
  --hvad-muted:#64748B;
  --hvad-line:#E9E5FF;
  position:relative;width:100%;max-width:760px;margin:0 auto;min-height:0
}
#page-agent .hero-in{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:0 44px;
  align-items:start
}
#page-agent .hero-visual.hv-agent-dashboard{
  max-width:760px;
  min-height:520px;
  align-self:start
}
#page-agent .hero-visual-slot{
  align-self:start;
  min-width:0;
  justify-self:stretch
}

.hvad-shell{
  position:relative;width:100%;padding:6px;
  background:var(--hvad-bg);
  border-radius:22px;
  box-shadow:0 0 0 1px rgba(88,86,214,.04),0 24px 48px -20px rgba(88,86,214,.12)
}
.hvad-board{
  position:relative;z-index:2;overflow:hidden;
  background:var(--hvad-card);
  border:1px solid var(--hvad-line);
  border-radius:20px;
  padding:0 18px 18px;
  box-shadow:0 1px 2px rgba(15,23,42,.03),0 16px 40px -18px rgba(88,86,214,.1)
}
.hvad-bg-glow{
  position:absolute;border-radius:50%;pointer-events:none;filter:blur(40px);z-index:0
}
.hvad-bg-glow--a{
  width:280px;height:280px;left:28%;top:34%;
  background:radial-gradient(circle,rgba(107,105,232,.12) 0%,transparent 68%)
}
.hvad-bg-glow--b{
  width:220px;height:220px;right:8%;top:18%;
  background:radial-gradient(circle,rgba(88,86,214,.08) 0%,transparent 70%)
}

.hvad-board-head{
  margin:0 0 20px;padding:14px 0 14px;
  border-bottom:1px solid rgba(37,99,235,.08)
}
.hvad-board-title{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.08em;
  color:#1E3A8A;text-align:center;text-transform:uppercase;
  margin:0;line-height:1.2
}

.hvad-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 18px 200px 18px minmax(0,1fr);
  gap:0;align-items:start;position:relative;z-index:2
}

.hvad-col-left{min-width:0;padding-right:2px}
.hvad-pipeline-wrap{position:relative}
.hvad-pipeline-spine{
  position:absolute;top:0;right:4px;width:28px;height:100%;pointer-events:none;z-index:2
}
.hvad-spine-line{
  stroke:#6B69E8;stroke-width:1.75;stroke-dasharray:4 4;fill:none;stroke-linecap:round
}
.hvad-spine-arrow{
  stroke:#6B69E8;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round
}
.hvad-pipeline-list{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:8px
}
.hvad-pipeline-step{
  display:flex;align-items:flex-start;gap:10px;min-height:52px;box-sizing:border-box;
  background:var(--hvad-card);border:1px solid #E0E7FF;border-radius:12px;
  padding:10px 12px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 16px -10px rgba(88,86,214,.07)
}
.hvad-pipeline-icon{
  width:36px;height:36px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--hvad-purple-soft);color:var(--hvad-purple);margin-top:1px
}
.hvad-pipeline-icon svg{width:17px;height:17px;display:block}
.hvad-pipeline-text{min-width:0;flex:1}
.hvad-pipeline-title{
  font-family:"DM Sans","Inter",sans-serif;font-size:12px;font-weight:700;
  color:var(--hvad-ink);margin:0 0 3px;line-height:1.25;letter-spacing:-.01em
}
.hvad-pipeline-desc{
  font-family:"DM Sans","Inter",sans-serif;font-size:10px;font-weight:500;
  color:var(--hvad-muted);line-height:1.4;margin:0
}

.hvad-connector-col{
  min-width:0;align-self:start;display:flex;align-items:stretch;justify-content:center
}
.hvad-connector-col--left,.hvad-connector-col--right{height:auto;min-height:0}
.hvad-conn-left,.hvad-conn-right{width:16px;height:100%;min-height:0;display:block;overflow:visible}
.hvad-conn-paths path{stroke:#6B69E8;stroke-width:1.5;stroke-dasharray:4 4;fill:none}

.hvad-col-center{min-width:0;width:200px;max-width:200px}
.hvad-center-stack{
  position:relative;width:200px;display:flex;flex-direction:column;align-items:center
}
.hvad-center-rings{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:240px;height:240px;border-radius:50%;pointer-events:none;z-index:0;
  border:1px dashed rgba(107,105,232,.16)
}
.hvad-center-rings::before,
.hvad-center-rings::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  border:1px dashed rgba(107,105,232,.12)
}
.hvad-center-rings::before{inset:22px}
.hvad-center-rings::after{inset:44px;border-color:rgba(107,105,232,.08)}
.hero-visual.hv-agent-dashboard.is-idle .hvad-center-rings{
  animation:hvadRingPulse 4.2s ease-in-out infinite
}

.hvad-property-card{
  position:relative;z-index:2;width:200px;box-sizing:border-box;
  background:var(--hvad-card);border:1px solid #E0E7FF;border-radius:16px;
  overflow:hidden;box-shadow:0 10px 28px -10px rgba(88,86,214,.16),0 2px 8px rgba(15,23,42,.04);
  transition:transform .25s ease
}
.hvad-property-card:hover{transform:translateY(-2px)}
.hvad-property-photo{position:relative;height:122px;overflow:hidden;background:#E0E7FF}
.hvad-property-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hvad-property-badge{
  position:absolute;top:7px;left:7px;z-index:2;
  padding:3px 8px;border-radius:999px;background:var(--hvad-purple);color:#fff;
  font-family:"DM Sans","Inter",sans-serif;font-size:8px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;line-height:1.2
}
.hvad-property-fav{
  position:absolute;top:7px;right:7px;z-index:2;
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;color:var(--hvad-purple);
  box-shadow:0 2px 8px rgba(15,23,42,.08)
}
.hvad-property-fav svg{width:12px;height:12px;display:block}
.hvad-property-body{padding:12px 13px 13px}
.hvad-property-name{
  font-family:"DM Sans","Inter",sans-serif;font-size:13px;font-weight:700;
  color:var(--hvad-ink);margin:0 0 3px;line-height:1.25;letter-spacing:-.015em
}
.hvad-property-loc{
  font-family:"DM Sans","Inter",sans-serif;font-size:11px;font-weight:500;
  color:var(--hvad-muted);margin:0 0 6px;line-height:1.2
}
.hvad-property-price{
  font-family:"DM Sans","Inter",sans-serif;font-size:18px;font-weight:800;
  color:var(--hvad-ink);margin:0 0 7px;line-height:1;letter-spacing:-.03em
}
.hvad-property-specs{
  display:flex;align-items:center;gap:10px;margin-bottom:9px;
  color:var(--hvad-muted);font-family:"DM Sans","Inter",sans-serif;
  font-size:10px;font-weight:600;line-height:1
}
.hvad-property-specs svg{width:12px;height:12px;flex:none;opacity:.85}
.hvad-property-cta{
  display:block;width:100%;box-sizing:border-box;text-align:center;
  padding:7px 10px;border-radius:999px;border:1px solid var(--hvad-purple-muted);
  background:var(--hvad-purple-soft);color:var(--hvad-purple);
  font-family:"DM Sans","Inter",sans-serif;font-size:10px;font-weight:700;line-height:1.25
}
.hvad-property-agents{
  display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:8px
}
.hvad-property-agents-label{
  font-family:"DM Sans","Inter",sans-serif;font-size:9px;font-weight:600;
  color:var(--hvad-muted);line-height:1.2;min-width:0
}
.hvad-property-avatars{display:flex;align-items:center;flex:none}
.hvad-pav{
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  font-family:"DM Sans","Inter",sans-serif;font-size:8px;font-weight:700;color:#fff;
  border:1.5px solid #fff;margin-left:-5px;box-shadow:0 1px 4px rgba(15,23,42,.1)
}
.hvad-pav:first-child{margin-left:0}
.hvad-pav-1{background:linear-gradient(135deg,#6B69E8,#5856D6)}
.hvad-pav-2{background:linear-gradient(135deg,#F59E0B,#D97706)}
.hvad-pav-3{background:linear-gradient(135deg,#10B981,#059669)}
.hvad-pav-more{background:#F1F5F9;color:#64748B;font-size:8px}

.hvad-agents-hub{
  position:relative;z-index:3;
  width:128px;height:128px;border-radius:50%;box-sizing:border-box;
  background:var(--hvad-card);border:2px solid var(--hvad-purple-muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:14px 12px 22px;margin:0 auto;
  box-shadow:0 12px 32px -12px rgba(88,86,214,.18),0 2px 8px rgba(15,23,42,.04)
}
.hvad-agents-hub--side{
  margin:0 auto 10px;width:100%;max-width:148px;height:148px;padding:16px 14px 24px
}
.hvad-agents-hub-ring{
  position:absolute;inset:-10px;border-radius:50%;
  border:1.5px solid rgba(88,86,214,.14);pointer-events:none
}
.hero-visual.hv-agent-dashboard.is-idle .hvad-agents-hub-ring{
  animation:hvadHubRing 3.2s ease-in-out infinite
}
.hvad-agents-count{
  font-family:"DM Sans","Inter",sans-serif;font-size:24px;font-weight:800;
  letter-spacing:-.035em;color:var(--hvad-ink);line-height:1;margin:0
}
.hvad-agents-hub--side .hvad-agents-count{font-size:26px}
.hvad-agents-label{
  font-family:"DM Sans","Inter",sans-serif;font-size:10px;font-weight:600;
  color:var(--hvad-muted);line-height:1.2;margin:3px 0 6px;max-width:12ch
}
.hvad-agents-hub--side .hvad-agents-label{font-size:11px}
.hvad-agents-avatars{display:flex;align-items:center;justify-content:center}
.hvad-av{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-family:"DM Sans","Inter",sans-serif;font-size:8px;font-weight:700;color:#fff;
  border:1.5px solid #fff;margin-left:-6px;box-shadow:0 2px 6px rgba(15,23,42,.1)
}
.hvad-agents-hub--side .hvad-av{width:22px;height:22px;font-size:8px}
.hvad-av:first-child{margin-left:0}
.hvad-av-1{background:linear-gradient(135deg,#6B69E8,#5856D6)}
.hvad-av-2{background:linear-gradient(135deg,#F59E0B,#D97706)}
.hvad-av-3{background:linear-gradient(135deg,#10B981,#059669)}
.hvad-agents-check{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50%;background:var(--hvad-purple);color:#fff;
  display:grid;place-items:center;border:2px solid #fff;
  box-shadow:0 4px 10px -4px rgba(88,86,214,.35)
}
.hvad-agents-check svg{width:10px;height:10px;display:block}

.hvad-col-right{
  min-width:0;display:flex;flex-direction:column;gap:10px;padding-left:2px;
  align-items:center;justify-content:flex-start
}
.hvad-earnings-card{
  position:relative;overflow:hidden;width:100%;
  background:linear-gradient(180deg,var(--hvad-orange-soft) 0%,#FFFFFF 100%);
  border:1px solid #FED7AA;border-radius:14px;padding:11px 12px 10px;
  box-shadow:0 8px 22px -12px rgba(245,158,11,.18),0 1px 2px rgba(15,23,42,.04)
}
.hvad-earnings-head{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.hvad-earnings-icon{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--hvad-orange-line);color:var(--hvad-orange)
}
.hvad-earnings-icon svg{width:15px;height:15px;display:block}
.hvad-earnings-label{
  font-family:"DM Sans","Inter",sans-serif;font-size:11px;font-weight:600;
  color:#9A3412;line-height:1.2
}
.hvad-earnings-val{
  font-family:"DM Sans","Inter",sans-serif;font-size:22px;font-weight:800;
  color:var(--hvad-ink);margin:0 0 3px;line-height:1;letter-spacing:-.03em
}
.hvad-earnings-sub{
  font-family:"DM Sans","Inter",sans-serif;font-size:10px;font-weight:600;
  color:var(--hvad-muted);margin:0 0 4px;line-height:1.2
}
.hvad-earnings-growth{
  display:inline-flex;align-items:center;gap:2px;margin:0 0 6px;
  font-family:"DM Sans","Inter",sans-serif;font-size:10px;font-weight:700;
  color:var(--hvad-green);line-height:1.2
}
.hvad-earnings-growth svg{width:11px;height:11px;flex:none}
.hvad-earnings-spark{width:100%;height:22px;display:block;color:var(--hvad-orange)}
.hero-visual.hv-agent-dashboard.is-idle .hvad-earnings-spark path{
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:hvadSparkDraw 2.4s ease-in-out infinite alternate
}

.hvad-flow-bg{
  position:absolute;inset:22% 1% 6%;width:98%;height:72%;
  pointer-events:none;z-index:1;overflow:visible
}
.hvad-flow-path{
  fill:none;stroke:#C4B5FD;stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:480;stroke-dashoffset:480
}
.hvad-flow-node{opacity:.85}
.hero-visual.hv-agent-dashboard.is-live .hvad-flow-path{
  animation:hvadPathDraw 1.1s cubic-bezier(.4,0,.2,1) forwards
}
.hero-visual.hv-agent-dashboard.is-live .hvad-flow-path-d{animation-delay:.05s}
.hero-visual.hv-agent-dashboard.is-live .hvad-flow-path-e{animation-delay:.15s}
.hero-visual.hv-agent-dashboard.is-live .hvad-flow-path-f{animation-delay:.25s}

.hv-agent-dashboard .hv-enter{opacity:0;transform:translateY(12px) scale(.985)}
.hero-visual.hv-agent-dashboard.is-live .hv-enter{
  animation:hvadCardIn .6s cubic-bezier(.2,.7,.2,1) forwards
}
.hero-visual.hv-agent-dashboard.is-live .hv-enter[data-delay="2"]{animation-delay:.05s}
.hero-visual.hv-agent-dashboard.is-live .hv-enter[data-delay="3"]{animation-delay:.14s}
.hero-visual.hv-agent-dashboard.is-live .hv-enter[data-delay="4"]{animation-delay:.2s}
.hero-visual.hv-agent-dashboard.is-live .hv-enter[data-delay="5"]{animation-delay:.28s}
.hero-visual.hv-agent-dashboard.is-live .hv-enter[data-delay="6"]{animation-delay:.36s}
.hero-visual.hv-agent-dashboard.is-idle .hv-enter{opacity:1}
.hero-visual.hv-agent-dashboard.is-idle .hvad-board{animation:hvadFloat 7s ease-in-out infinite}
.hero-visual.hv-agent-dashboard.is-idle .hvad-property-card{animation:hvadFloat 6.5s ease-in-out infinite;animation-delay:.45s}
.hero-visual.hv-agent-dashboard.is-idle .hvad-earnings-card{animation:hvadFloat 6.8s ease-in-out infinite;animation-delay:.75s}

@keyframes hvadCardIn{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hvadPathDraw{to{stroke-dashoffset:0}}
@keyframes hvadHubRing{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.05);opacity:.9}
}
@keyframes hvadRingPulse{
  0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.8;transform:translate(-50%,-50%) scale(1.02)}
}
@keyframes hvadSparkDraw{to{stroke-dashoffset:0}}
@keyframes hvadFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

@media(max-width:900px){
  #page-agent .hero-in{grid-template-columns:1fr;gap:0}
  .hero-visual.hv-agent-dashboard{max-width:100%}
  .hvad-main-grid{grid-template-columns:1fr;gap:10px}
  .hvad-col-left,.hvad-col-right,.hvad-connector-col{display:none}
  .hvad-col-center{width:100%;max-width:100%}
  .hvad-center-stack,.hvad-property-card{width:100%;max-width:240px;margin:0 auto}
  .hvad-agents-hub--side{max-width:180px;height:160px}
  .hvad-flow-bg{display:none}
}
@media(max-width:560px){
  .hvad-shell{padding:4px;border-radius:18px}
  .hvad-board{padding:0 12px 12px;border-radius:16px}
}
@media(prefers-reduced-motion:reduce){
  .hero-visual.hv-agent-dashboard.is-idle .hvad-board,
  .hero-visual.hv-agent-dashboard.is-idle .hvad-property-card,
  .hero-visual.hv-agent-dashboard.is-idle .hvad-earnings-card,
  .hero-visual.hv-agent-dashboard.is-idle .hvad-agents-hub-ring,
  .hero-visual.hv-agent-dashboard.is-idle .hvad-center-rings,
  .hero-visual.hv-agent-dashboard.is-idle .hvad-earnings-spark path{animation:none!important}
  .hv-agent-dashboard .hv-enter{opacity:1;transform:none}
}

/* ============================================================
   Agent theme — indigo palette (#5856D6 / #F5F7FF)
   ============================================================ */

body[data-theme="agent"] .sb-stats-band{
  background:linear-gradient(135deg,#F5F7FF 0%,color-mix(in srgb,var(--accent-soft) 35%,#F5F7FF) 52%,#F5F7FF 100%);
  border-color:var(--line)
}
body[data-theme="agent"] .sb-stats-band::before{
  background:linear-gradient(90deg,#4338CA,#5856D6,#6B69E8);
  box-shadow:none
}
body[data-theme="agent"] .sb-band-glow{
  background:radial-gradient(ellipse 55% 90% at 8% 50%,rgba(88,86,214,.07),transparent 68%)
}
body[data-theme="agent"] .sb-band-orb-1,
body[data-theme="agent"] .sb-band-orb-2{
  background:color-mix(in srgb,var(--accent) 22%,transparent)
}
body[data-theme="agent"] .sb-stat-icon,
body[data-theme="agent"] .sb-integ-icon{
  background:var(--accent);
  box-shadow:0 8px 18px -10px rgba(88,86,214,.28)
}

body[data-theme="agent"] .nav-sub-chip.is-active{
  background:var(--accent);
  box-shadow:0 8px 18px -10px rgba(88,86,214,.28)
}

body[data-theme="agent"] .how-section{
  background:linear-gradient(180deg,#FFFFFF 0%,color-mix(in srgb,var(--accent-soft) 24%,#F5F7FF) 42%,#F5F7FF 100%);
  border-color:var(--line)
}
body[data-theme="agent"] .how-bg-glow{
  background:radial-gradient(ellipse 50% 70% at 12% 30%,rgba(88,86,214,.07),transparent 68%)
}
body[data-theme="agent"] .how-bg-orb-2{
  background:color-mix(in srgb,var(--accent) 16%,transparent)
}
body[data-theme="agent"] .how-scenario{
  background:linear-gradient(135deg,#FFFFFF,color-mix(in srgb,var(--accent-soft) 32%,#FFFFFF));
  border-color:var(--line);
  box-shadow:var(--agent-shadow-md),inset 0 1px 0 rgba(255,255,255,.95)
}
body[data-theme="agent"] .how-scenario-mark{
  background:var(--accent);
  box-shadow:0 10px 22px -12px rgba(88,86,214,.28)
}
body[data-theme="agent"] .how-section[data-how-scene="agent"] .how-panel-icon{
  background:var(--accent-soft);
  color:var(--accent-ink)
}

body[data-theme="agent"] .flow-steps-band .fsc-num{
  background:var(--accent)
}
body[data-theme="agent"] .flow-steps-band .fsc-orbit{
  background:var(--accent-soft);
  opacity:.4
}
body[data-theme="agent"] .flow-steps-band .fsc-line::after{
  background:var(--accent)
}

body[data-theme="agent"] .why-section{
  background:linear-gradient(180deg,#F5F7FF 0%,color-mix(in srgb,var(--accent-soft) 18%,#FFFFFF) 50%,#F5F7FF 100%);
  border-color:var(--line)
}
body[data-theme="agent"] .why-bg-glow{
  background:radial-gradient(ellipse 50% 70% at 15% 20%,rgba(88,86,214,.07),transparent 68%)
}
body[data-theme="agent"] .why-bg-orb-2{
  background:color-mix(in srgb,var(--accent) 14%,transparent)
}
body[data-theme="agent"] .why-quote-mark{
  background:var(--accent);
  box-shadow:0 10px 22px -12px rgba(88,86,214,.28)
}
body[data-theme="agent"] .why-shift-row.is-after .why-shift-icon{
  background:var(--accent);
  box-shadow:0 3px 10px -6px rgba(88,86,214,.25)
}
body[data-theme="agent"] .why-shift-row.is-after{
  background:#fff;
  border-color:color-mix(in srgb,var(--accent) 14%,var(--line))
}

body[data-theme="agent"] .story-stage[data-scene="agent"] .step-icon{
  background:var(--accent-soft);
  color:var(--accent-ink)
}
body[data-theme="agent"] .story-stage[data-scene="agent"] .story-step .step-num{
  background:var(--accent)
}
body[data-theme="agent"] .xcard.to-agent .role-tag{
  color:var(--accent-ink);background:var(--accent-soft);border-color:var(--line)
}
body[data-theme="agent"] .xcard.to-agent .go{color:var(--accent-ink)}
body[data-theme="agent"] .xcard.to-agent::before{box-shadow:inset 0 0 0 2px var(--accent-ink)}
body[data-theme="agent"] .to-agent .dotmark{background:var(--accent-ink)}

body[data-theme="agent"] .lp5-scroll-top{
  background:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 22%,#fff)
}
body[data-theme="agent"] .lp5-scroll-top:hover{
  background:var(--accent-ink)
}

body[data-theme="agent"] .htw-metric-val{
  color:var(--accent-ink);
  background:none;
  -webkit-text-fill-color:var(--accent-ink)
}
body[data-theme="agent"] .htw-head-icon{
  background:var(--accent)
}
body[data-theme="agent"] .htw-accent-bar{
  background:var(--accent)
}

body[data-theme="agent"] .hw-v3-badge.is-key{
  background:var(--accent)
}
body[data-theme="agent"] .how-strip-btn.is-active,
body[data-theme="agent"] .how-tl-dot.is-on{
  background:var(--accent)
}
body[data-theme="agent"] .how-panel-card.is-feature{
  box-shadow:0 0 0 1.5px var(--accent-ink),0 30px 60px -28px rgba(88,86,214,.18)
}

body[data-theme="agent"] .hero-trust-signals .hts-icon{
  background:var(--accent)
}

body[data-theme="agent"] .sb-integ-band{
  background:var(--page);
  border-top:1px solid var(--line)
}

body[data-theme="agent"] .how-section[data-how-scene] .hw-v3-progress-bar>span,
body[data-theme="agent"] .how-section[data-how-scene] .hw-v3-pipeline-track>span,
body[data-theme="agent"] .story-stage.in-view .mini-bar>span{
  background:var(--accent)
}

body[data-theme="agent"] .how-section[data-how-scene] .how-panel-head .how-panel-icon,
body[data-theme="agent"] .how-workspace .how-panel-icon{
  background:var(--accent-soft);
  color:var(--accent-ink)
}

body[data-theme="agent"] .how-live-stat{
  background:#fff;
  border-color:var(--line)
}

body[data-theme="agent"] .why-quote,
body[data-theme="agent"] .why-platform,
body[data-theme="agent"] .why-shift{
  background:var(--surface);
  border-color:var(--line)
}
body[data-theme="agent"] .why-shift-row.is-after{
  background:#fff
}
body[data-theme="agent"] .why-proof-avatar{
  background:var(--accent);
  box-shadow:0 6px 16px -10px rgba(88,86,214,.25)
}
body[data-theme="agent"] .why-proof{
  background:#fff
}

body[data-theme="agent"] .faq-bg-orb-2,
body[data-theme="agent"] .contact-bg-orb-2{
  background:color-mix(in srgb,var(--accent) 16%,transparent)
}
body[data-theme="agent"] .faq-band{
  background:linear-gradient(180deg,#FFFFFF 0%,#F5F7FF 100%)
}
body[data-theme="agent"] .contact-band{
  background:linear-gradient(180deg,#F5F7FF 0%,#fff 52%,#F5F7FF 100%)
}
body[data-theme="agent"] .contact-channel,
body[data-theme="agent"] .contact-trust-pill{
  background:var(--surface)
}
body[data-theme="agent"] .contact-card-accent{
  background:linear-gradient(90deg,#5856D6,#6B69E8,#4338CA)
}

body[data-theme="agent"] .sb-integ-badge,
body[data-theme="agent"] .sb-integ-card{
  background:#fff
}

body[data-theme="agent"] .btn-primary:not(.btn-hero):not(.nav-cta){
  background:var(--accent)
}
body[data-theme="agent"] .btn-primary:not(.btn-hero):not(.nav-cta):hover{
  background:var(--accent-ink)
}

body[data-theme="agent"] .plan.feat-plan .ribbon{
  background:var(--accent)
}

body[data-theme="agent"] .cs-bg-glow{
  background:
    radial-gradient(ellipse 60% 50% at 50% 10%, rgba(109, 40, 217, 0.05), transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 90%, rgba(109, 40, 217, 0.06), transparent 60%);
}
body[data-theme="agent"] .cs-bg-orb-1{background:rgba(88,86,214,.3)}
body[data-theme="agent"] .cs-bg-orb-2{background:rgba(107,105,232,.25)}

body[data-theme="agent"] .kb-card-bar.purple{background:var(--accent)}
body[data-theme="agent"] .feat-realinmo-lead small,
body[data-theme="agent"] .feat-bulk-tag,
body[data-theme="agent"] .feat-bulk-progress b,
body[data-theme="agent"] .feat-inbox li small,
body[data-theme="agent"] .feat-unit.is-sold small{color:var(--accent)}
body[data-theme="agent"] .feat-bulk-bar span{background:linear-gradient(90deg,var(--accent),var(--accent2))}

body[data-theme="agent"] .cs-card-badge,
body[data-theme="agent"] .cs-card-icon,
body[data-theme="agent"] .cs-pill,
body[data-theme="agent"] .cs-stat-val,
body[data-theme="agent"] .cs-mini-tag{color:var(--accent)}
body[data-theme="agent"] .cs-card-badge,
body[data-theme="agent"] .cs-pill{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 18%,var(--line))}
body[data-theme="agent"] .cs-card-icon{background:linear-gradient(135deg,var(--accent),var(--accent2))}
body[data-theme="agent"] .cs-card:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
body[data-theme="agent"] .cs-card-glow{background:linear-gradient(135deg,rgba(88,86,214,.12),rgba(107,105,232,.08))}
body[data-theme="agent"] .feat-card .feat-icon{background:var(--accent-soft);color:var(--accent-ink)}
body[data-theme="agent"] .feat-card.is-spotlight{border-color:color-mix(in srgb,var(--accent) 28%,var(--line));box-shadow:0 24px 48px -28px rgba(88,86,214,.2)}
body[data-theme="agent"] .feat-card .feat-chip{background:var(--accent-soft);color:var(--accent-ink)}
body[data-theme="agent"] .btn-primary{box-shadow:0 10px 22px -12px rgba(88,86,214,.28)}
body[data-theme="agent"] .hw-v3 .mini-avatar.a2{background:linear-gradient(135deg,#5856D6,#4338CA)}
body[data-theme="agent"] .hw-v3 .mini-avatar.a3{background:linear-gradient(135deg,#818CF8,#6B69E8)}

#page-agent .bridge{background:var(--soft)}
#page-agent .xcard{background:var(--surface);border-color:var(--line)}
#page-agent .contact-card,
#page-agent .qa{background:var(--surface);border-color:var(--line)}
#page-agent .feat-section{background:var(--page)}
#page-agent .feat-card{background:var(--surface);border-color:var(--line)}

#page-agent .hva-panel{
  background:var(--hva-panel,#5856D6)
}

/* ============================================================
   DEVELOPER PAGE — Premium PropTech palette (#047857 / #F8FAFC)
   ============================================================ */
#page-developer{
  background:var(--page);
  color:var(--ink);
  --dev-shadow-xs:0 1px 2px rgba(15,23,42,.05),0 3px 10px -2px rgba(4,120,87,.1);
  --dev-shadow-sm:0 2px 6px rgba(15,23,42,.06),0 8px 20px -6px rgba(4,120,87,.12);
  --dev-shadow-md:0 4px 10px rgba(15,23,42,.06),0 14px 34px -10px rgba(4,120,87,.15);
  --dev-shadow-lg:0 8px 16px rgba(15,23,42,.07),0 22px 48px -14px rgba(4,120,87,.18)
}
#page-developer .hero{
  background:var(--hero);
  overflow:hidden;
  padding:36px var(--lp5-section-x) calc(var(--lp5-section-y) * .75)
}
#page-developer .hero::before{
  width:560px;height:560px;right:-120px;top:-220px;
  background:radial-gradient(circle,rgba(5,150,105,.14),transparent 68%);
  opacity:.5
}
#page-developer .hero::after{
  width:480px;height:480px;left:-140px;bottom:-180px;
  background:radial-gradient(circle,rgba(4,120,87,.1),transparent 70%);
  opacity:.4
}
#page-developer .hero-in{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:0 44px;
  align-items:center
}
#page-developer .hero-copy{
  max-width:34rem;
  align-self:start;
  margin-top:-14px
}
#page-developer .hero-copy-glow{
  display:block;opacity:.45;
  background:radial-gradient(circle,rgba(240,253,244,.95) 0%,transparent 68%)
}
#page-developer .hero-visual-slot{
  align-self:center;
  min-width:0;
  justify-self:stretch
}
#page-developer .hero-trust-wall--developer{
  grid-column:1 / -1;
  margin:20px 0 0;
  padding-top:0
}
#page-developer .hero-grid{
  background-image:radial-gradient(circle at 1px 1px,rgba(100,116,139,.07) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 80% 70% at 78% 42%,#000 18%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 78% 42%,#000 18%,transparent 72%)
}
#page-developer .hero h1,
#page-developer .hero .display{
  font-family:"DM Sans","Inter",sans-serif;
  font-weight:800;
  font-size:clamp(2.15rem,3.8vw,3.05rem);
  letter-spacing:-.032em;
  line-height:1.08;
  margin:10px 0 16px;
  color:#0F172A
}
#page-developer .hero .lede{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:1rem;
  line-height:1.65;
  max-width:40ch;
  margin-bottom:22px;
  color:#64748B
}
#page-developer .hero h1 .hero-subline{
  display:block;
  margin-top:.35em;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.02em;
  color:#047857
}
#page-developer .hero .hero-free-line{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.9375rem;
  font-weight:600;
  line-height:1.5;
  max-width:40ch;
  margin:-10px 0 22px;
  color:#0F172A
}
#page-developer .hero h1 .hero-accent{
  font-family:inherit;
  font-style:normal;
  font-weight:800;
  background:none;
  -webkit-text-fill-color:#047857;
  color:#047857;
  animation:none;
  padding:0;
  position:relative
}
#page-developer .hero h1 .hero-accent::after{display:none}
#page-developer .hero-eyebrow--editorial{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 11px 4px 9px;margin-bottom:18px;
  border-radius:999px;
  background:#F0FDF4;
  border:1px solid #DCFCE7;
  box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  isolation:isolate
}
#page-developer .hero-eyebrow--editorial::before,
#page-developer .hero-eyebrow--editorial::after{display:none!important}
#page-developer .hero-eyebrow-dot{
  width:6px;height:6px;flex:none;border-radius:50%;
  background:#059669
}
#page-developer .hero-eyebrow-text{
  display:inline;font-family:"DM Sans","Inter",sans-serif;
  font-size:.625rem;font-weight:700;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;
  color:#065F46!important;-webkit-text-fill-color:#065F46!important;
  background:none!important
}
#page-developer .hero-cta{margin:0 0 24px;gap:12px}
#page-developer .btn-primary.btn-hero{
  background:#047857;color:#fff;border:1px solid transparent;
  border-radius:8px;padding:12px 18px;
  font-family:"DM Sans","Inter",sans-serif;font-size:.92rem;font-weight:600;
  box-shadow:0 10px 24px -12px rgba(4,120,87,.32)
}
#page-developer .btn-primary.btn-hero:hover{
  background:#065F46;box-shadow:0 14px 28px -10px rgba(4,120,87,.38)
}
#page-developer .btn-ghost.btn-hero{
  border:1px solid #E2E8F0;color:#0F172A;background:#fff;
  border-radius:8px;padding:11px 16px;gap:10px;
  font-family:"DM Sans","Inter",sans-serif;font-size:.92rem;font-weight:600;
  box-shadow:0 1px 2px rgba(15,23,42,.04)
}
#page-developer .btn-ghost.btn-hero:hover{
  border-color:#CBD5E1;color:#0F172A;background:#fff
}
#page-developer .btn-hero-play .btn-play-icon{
  width:24px;height:24px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:#F0FDF4;color:#047857;margin-left:2px
}
#page-developer .btn-hero-play .btn-play-icon svg{width:16px;height:16px;display:block}
#page-developer .hero-trust-stats{margin-top:6px;padding:0;border:none}
#page-developer .dev-hero-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;width:100%;max-width:100%;
  list-style:none;margin:0;padding:0;row-gap:16px;column-gap:20px
}
#page-developer .dev-hero-stat{
  display:flex;align-items:center;gap:14px;
  min-width:0;margin:0;padding:0
}
#page-developer .dev-hero-stat-icon{
  flex:none;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(4,120,87,.1);color:#047857;
  border:none
}
#page-developer .dev-hero-stat-icon svg{
  width:23px;height:23px;display:block;
  stroke-width:1.5
}
#page-developer .dev-hero-stat-text{
  display:flex;flex-direction:column;justify-content:center;
  gap:0;min-width:0;line-height:1
}
#page-developer .dev-hero-stat-value{
  display:block;margin:0;padding:0;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.875rem;font-weight:700;line-height:1.15;
  letter-spacing:-.015em;color:#0F172A;
  font-variant-numeric:tabular-nums
}
#page-developer .dev-hero-stat-label{
  display:block;margin:2px 0 0;padding:0;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.6875rem;font-weight:400;line-height:1.2;
  letter-spacing:0;color:#64748B
}
@media (max-width:520px){
  #page-developer .dev-hero-stats{grid-template-columns:1fr;row-gap:12px}
  #page-developer .dev-hero-stat-icon{width:40px;height:40px;border-radius:11px}
}
#page-developer .htw-shell--developer-premium{
  padding:0;border-radius:14px;background:#fff;border:1px solid #E2E8F0;
  box-shadow:0 14px 34px -18px rgba(15,23,42,.1),0 2px 8px -4px rgba(15,23,42,.04);
  backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden
}
#page-developer .hero-trust-wall--developer:hover .htw-shell--developer-premium{transform:none}
#page-developer .htw-shell--developer-premium::before{display:none}
#page-developer .htw-dev-grid{
  display:grid;
  grid-template-columns:minmax(170px,.95fr) 1px minmax(0,1.35fr) 1px minmax(118px,.75fr);
  gap:0 22px;align-items:center;padding:14px 24px
}
#page-developer .htw-dev-divider{
  width:1px;height:66px;background:#E2E8F0;justify-self:center
}
#page-developer .htw-dev-eyebrow{
  display:flex;align-items:center;gap:7px;margin:0 0 8px;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:#059669;font-weight:700;line-height:1.2
}
#page-developer .htw-dev-shield{
  width:16px;height:16px;color:#059669;flex:none;display:grid;place-items:center
}
#page-developer .htw-dev-shield svg{width:14px;height:14px;display:block}
#page-developer .htw-dev-title{
  margin:0;font-family:"DM Sans","Inter",sans-serif;font-size:1rem;
  font-weight:700;letter-spacing:-.025em;color:#0F172A;line-height:1.25
}
#page-developer .htw-dev-title-accent{color:#047857;margin-top:2px}
#page-developer .htw-dev-logos{
  min-width:0;overflow:hidden;padding:0 2px
}
#page-developer .htw-marquee--developer-premium{
  position:relative;overflow:hidden;min-width:0;
  background:transparent;border:none;box-shadow:none;
  padding:8px 0;border-radius:0
}
#page-developer .htw-marquee--developer-premium .htw-marquee-fade{
  width:28px
}
#page-developer .htw-marquee--developer-premium .htw-marquee-fade-left{
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 35%,transparent 100%)
}
#page-developer .htw-marquee--developer-premium .htw-marquee-fade-right{
  background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,.92) 35%,transparent 100%)
}
#page-developer .htw-marquee--developer-premium .htw-marquee-track{
  display:flex;align-items:center;gap:28px;width:max-content;
  animation:htwMarqueeL 36s linear infinite;will-change:transform
}
#page-developer .htw-marquee--developer-premium.is-paused .htw-marquee-track{
  animation-play-state:paused
}
#page-developer .htw-dev-logo{
  flex:none;margin:0;display:grid;place-items:center;
  background:none;border:none;box-shadow:none;padding:0
}
#page-developer .htw-dev-logo img{
  display:block;height:48px;width:auto;max-width:140px;
  object-fit:contain;object-position:center;
  filter:none;opacity:1;transform:none
}
@media (prefers-reduced-motion:reduce){
  #page-developer .htw-marquee--developer-premium .htw-marquee-track{
    animation:none!important;flex-wrap:wrap;width:100%;justify-content:center;gap:16px
  }
  #page-developer .htw-marquee--developer-premium .htw-marquee-fade{display:none}
}
#page-developer .htw-dev-metric{
  display:grid;gap:3px;text-align:right;justify-self:end;padding-left:4px
}
#page-developer .htw-dev-metric-val{
  font-family:"DM Sans","Inter",sans-serif;font-size:1.75rem;
  font-weight:800;line-height:1;letter-spacing:-.03em;color:#047857
}
#page-developer .htw-dev-metric-label{
  display:grid;gap:0;font-size:.72rem;line-height:1.2;color:#64748B;
  font-weight:500;max-width:11ch;margin-left:auto;text-align:right
}
@media (max-width:980px){
  #page-developer .hero-in{grid-template-columns:1fr;gap:0}
  #page-developer .hero-copy{margin-top:0;align-self:auto}
  #page-developer .hero-trust-wall--developer{margin-top:14px}
  #page-developer .htw-dev-grid{
    grid-template-columns:1fr;gap:14px;text-align:left;padding:12px 18px
  }
  #page-developer .htw-dev-divider{display:none}
  #page-developer .htw-dev-metric{text-align:left;justify-self:start}
  #page-developer .htw-dev-metric-label{margin-left:0;max-width:none;text-align:left}
}

#page-developer .sb-stats-band{
  background:linear-gradient(135deg,#F8FAFC 0%,color-mix(in srgb,var(--accent-soft) 35%,#F8FAFC) 52%,#F8FAFC 100%)
}
#page-developer .sb-stats-band::before{
  background:linear-gradient(90deg,#047857,#059669,#047857)
}
#page-developer .sb-integ-band{
  background:var(--page);
  border-top:1px solid var(--line)
}
#page-developer .sb-integ-card{
  background:var(--surface);
  border:1px solid var(--line)
}
#page-developer .sb-integ-badge{
  background:var(--surface);
  border:1px solid var(--line)
}

#page-developer .how-section{
  background:linear-gradient(180deg,#FFFFFF 0%,color-mix(in srgb,var(--accent-soft) 24%,#F8FAFC) 42%,#F8FAFC 100%)
}
#page-developer .why-section{
  background:linear-gradient(180deg,#F8FAFC 0%,color-mix(in srgb,var(--accent-soft) 18%,#FFFFFF) 50%,#F8FAFC 100%)
}
#page-developer .bridge{
  background:var(--page)
}
#page-developer .xcard{
  background:var(--surface);
  border-color:var(--line)
}
#page-developer .faq-band{
  background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%)
}
#page-developer .contact-band{
  background:linear-gradient(180deg,#F8FAFC 0%,#fff 52%,#F8FAFC 100%)
}
#page-developer .contact-channel,
#page-developer .contact-trust-pill{
  background:var(--surface)
}
#page-developer .contact-card-accent{
  background:linear-gradient(90deg,#047857,#059669,#065F46)
}

#page-developer .contact-card{
  background:var(--surface);
  border-color:var(--line)
}
#page-developer .qa{
  background:var(--surface);
  border-color:var(--line)
}
#page-developer .why-quote,
#page-developer .why-platform,
#page-developer .why-shift{
  background:var(--surface);
  border-color:var(--line)
}
#page-developer .how-scenario{
  background:linear-gradient(135deg,#FFFFFF,color-mix(in srgb,var(--accent-soft) 32%,#FFFFFF));
  box-shadow:var(--dev-shadow-md),inset 0 1px 0 rgba(255,255,255,.95)
}
#page-developer .how-scenario-mark{
  box-shadow:var(--dev-shadow-sm)
}
#page-developer .how-day1{
  box-shadow:var(--dev-shadow-xs)
}
#page-developer .how-day1-badge{
  box-shadow:var(--dev-shadow-xs)
}
#page-developer .how-tl-body{
  box-shadow:var(--dev-shadow-sm)
}
#page-developer .how-tl-item.is-active .how-tl-body{
  box-shadow:var(--dev-shadow-md),inset 0 1px 0 rgba(255,255,255,.95)
}
#page-developer .how-tl-item.is-magic.is-active .how-tl-body{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent),var(--dev-shadow-lg),inset 0 1px 0 rgba(255,255,255,.95)
}
#page-developer .how-tl-outcome,
#page-developer .how-tl-magic{
  box-shadow:var(--dev-shadow-xs)
}
#page-developer .hw-v3{
  box-shadow:var(--dev-shadow-lg),0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent),inset 0 1px 0 rgba(255,255,255,.95)
}
#page-developer .hw-v3.is-feature{
  box-shadow:0 0 0 1.5px var(--accent),var(--dev-shadow-lg),inset 0 1px 0 rgba(255,255,255,.95)
}
#page-developer .hw-v3-tile{
  box-shadow:var(--dev-shadow-xs)
}
#page-developer .hw-v3-tile.is-live{
  box-shadow:var(--dev-shadow-sm)
}
#page-developer .hw-v3-pill,
#page-developer .hw-v3-meta,
#page-developer .hw-v3-network,
#page-developer .hw-v3-search,
#page-developer .hw-v3-listing,
#page-developer .hw-v3-property{
  box-shadow:var(--dev-shadow-xs)
}
#page-developer .hw-v3-badge.is-key{
  box-shadow:var(--dev-shadow-sm)
}
#page-developer .htw-shell--developer-premium{
  box-shadow:var(--dev-shadow-md)
}
#page-developer .hvd-board,
#page-developer .hvd-property,
#page-developer .hvd-deals-card{
  box-shadow:var(--dev-shadow-md)
}
#page-developer .hvd-metric{
  box-shadow:var(--dev-shadow-xs)
}
#page-developer .hero-eyebrow--editorial{
  box-shadow:var(--dev-shadow-sm),inset 0 1px 0 rgba(255,255,255,.95)
}
#page-developer .features-section .feat{
  box-shadow:var(--dev-shadow-sm)
}
#page-developer .features-section .feat:hover{
  box-shadow:var(--dev-shadow-md)
}
#page-developer .why-quote{
  box-shadow:var(--dev-shadow-md),inset 0 1px 0 rgba(255,255,255,.95)
}
#page-developer .why-quote-mark{
  box-shadow:var(--dev-shadow-sm)
}
#page-developer .why-platform,
#page-developer .why-shift,
#page-developer .xcard{
  box-shadow:var(--dev-shadow-sm)
}
#page-developer .faq-item{
  box-shadow:var(--dev-shadow-xs)
}
#page-developer .faq-item[open]{
  box-shadow:var(--dev-shadow-sm)
}
#page-developer .contact-card{
  box-shadow:var(--dev-shadow-md)
}

body[data-theme="developer"] .contact-card .valid-feedback{
  color:#047857
}
body[data-theme="developer"] .btn-primary:hover{
  background:#065F46
}
body[data-theme="developer"] .hc-badge.live{
  background:#F0FDF4;
  color:#047857
}
body[data-theme="developer"] .step-mini .mini-chip.success{
  background:#F0FDF4;
  border-color:#BBF7D0;
  color:#065F46
}
body[data-theme="developer"] #page-developer .hw-v3 .mini-avatar.a2{
  background:linear-gradient(135deg,#059669,#047857)
}

/* ============================================================
   DEVELOPER HERO — Inventory dashboard visual
   ============================================================ */
#page-developer .hero-visual.hv-dev-dashboard{
  position:relative;width:100%;max-width:none;margin:0;
  min-height:540px;aspect-ratio:auto
}
.hero-visual.hv-dev-dashboard{
  position:relative;width:100%;max-width:520px;margin:0 auto;
  min-height:470px;aspect-ratio:auto
}
.hvd-shell{
  position:relative;width:100%;padding:0 0 96px
}
#page-developer .hvd-shell{padding:0 0 88px}
.hvd-board{
  position:relative;z-index:2;
  background:#FFFFFF;border:1px solid #E2E8F0;border-radius:16px;
  padding:20px 20px 22px;
  box-shadow:0 22px 48px -14px rgba(15,23,42,.1),0 6px 18px -8px rgba(15,23,42,.05)
}
#page-developer .hvd-board{padding:22px 22px 24px;border-radius:18px}
.hvd-board-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px
}
.hvd-board-title{
  font-family:"DM Sans","Inter",sans-serif;font-size:1.05rem;font-weight:700;
  letter-spacing:-.025em;color:#0F172A;margin:0
}
.hvd-upload-btn{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:8px 14px;border-radius:999px;
  background:#047857;color:#fff;
  font-family:"DM Sans","Inter",sans-serif;font-size:.72rem;font-weight:600;
  box-shadow:0 8px 18px -10px rgba(4,120,87,.4)
}
.hvd-upload-btn svg{width:14px;height:14px;flex:none}

.hvd-metrics{
  display:flex;align-items:stretch;gap:4px;margin-bottom:14px
}
.hvd-metric{
  flex:1;min-width:0;background:#FFFFFF;border:1px solid #E2E8F0;border-radius:12px;
  padding:10px 8px 11px;text-align:center;
  box-shadow:0 1px 2px rgba(15,23,42,.04)
}
.hvd-metric-label{
  display:block;font-size:.62rem;font-weight:600;color:#64748B;line-height:1.2;margin-bottom:4px
}
.hvd-metric-val{
  display:block;font-family:"DM Sans","Inter",sans-serif;font-size:1.15rem;font-weight:700;
  letter-spacing:-.025em;color:#0F172A;line-height:1
}
.hvd-metric-arrow{
  display:grid;place-items:center;flex:none;width:18px;color:#047857;opacity:1;align-self:center
}
.hvd-metric-arrow svg{width:16px;height:16px}

.hvd-flow{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr) minmax(0,1.25fr);
  align-items:center;gap:8px;min-height:172px;margin-top:6px
}
.hvd-flow-lines{
  position:absolute;inset:2% 1% 6%;width:98%;height:92%;
  pointer-events:none;z-index:0;overflow:visible
}
.hvd-flow-path{
  fill:none;stroke:#BBF7D0;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:480;stroke-dashoffset:480
}
.hero-visual.hv-dev-dashboard.is-live .hvd-flow-path{
  animation:hvdPathDraw 1.1s cubic-bezier(.4,0,.2,1) forwards
}
.hero-visual.hv-dev-dashboard.is-live .hvd-flow-path-b{animation-delay:.15s}
.hero-visual.hv-dev-dashboard.is-live .hvd-flow-path-c{animation-delay:.25s}
.hero-visual.hv-dev-dashboard.is-live .hvd-flow-path-d{animation-delay:.35s}

.hvd-inventory{
  position:relative;z-index:1;
  background:#FFFFFF;border:1px solid #E2E8F0;border-radius:12px;
  padding:10px 10px 11px;text-align:center;
  box-shadow:0 10px 24px -14px rgba(15,23,42,.1)
}
.hvd-inventory-icon{
  width:34px;height:34px;margin:0 auto 6px;border-radius:10px;
  display:grid;place-items:center;background:#F0FDF4;color:#047857
}
.hvd-inventory-icon svg{width:18px;height:18px}
.hvd-inventory-title{
  font-size:.62rem;font-weight:700;color:#0F172A;margin:0 0 2px;line-height:1.2
}
.hvd-inventory-sub{
  font-size:.58rem;color:#64748B;margin:0 0 7px;line-height:1.2
}
.hvd-inventory-sub span{font-weight:700;color:#0F172A}

.hvd-bar{
  height:5px;border-radius:99px;background:#E2E8F0;overflow:hidden
}
.hvd-bar span{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#047857,#059669)
}
.hvd-bar--thick{height:7px;margin:8px 0 10px}

.hvd-hub{
  position:relative;z-index:2;justify-self:center;
  width:118px;height:118px;border-radius:50%;
  background:#FFFFFF;border:2px solid #D1FAE5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:12px 10px 18px;
  box-shadow:0 18px 40px -14px rgba(4,120,87,.2)
}
.hvd-hub-ring{
  position:absolute;inset:-10px;border-radius:50%;
  border:1.5px solid rgba(4,120,87,.18);pointer-events:none
}
.hero-visual.hv-dev-dashboard.is-idle .hvd-hub-ring{
  animation:hvdHubRing 3.2s ease-in-out infinite
}
.hvd-hub-count{
  font-family:"DM Sans","Inter",sans-serif;font-size:1.5rem;font-weight:800;
  letter-spacing:-.03em;color:#0F172A;line-height:1;margin:0
}
.hvd-hub-label{
  font-size:.56rem;font-weight:600;color:#64748B;line-height:1.2;margin:3px 0 7px;max-width:9ch
}
.hvd-hub-avatars{
  display:flex;align-items:center;justify-content:center;margin-top:2px
}
.hvd-av{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:.62rem;font-weight:700;color:#fff;border:2px solid #fff;
  margin-left:-8px;box-shadow:0 2px 6px rgba(15,23,42,.12)
}
.hvd-av:first-child{margin-left:0}
.hvd-av-1{background:linear-gradient(135deg,#6366F1,#4F46E5)}
.hvd-av-2{background:linear-gradient(135deg,#F59E0B,#D97706)}
.hvd-av-3{background:linear-gradient(135deg,#059669,#047857)}
.hvd-hub-badge{
  position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  width:22px;height:22px;border-radius:50%;background:#047857;color:#fff;
  display:grid;place-items:center;border:2px solid #fff;
  box-shadow:0 4px 10px -4px rgba(4,120,87,.45)
}
.hvd-hub-badge svg{width:11px;height:11px}

.hvd-outcomes{
  position:relative;z-index:1;display:flex;flex-direction:column;gap:7px
}
.hvd-outcome{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;
  background:#FFFFFF;border:1px solid #E2E8F0;border-radius:10px;
  padding:7px 9px;box-shadow:0 8px 20px -14px rgba(15,23,42,.08)
}
.hvd-outcome-icon{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none
}
.hvd-outcome-icon svg{width:16px;height:16px}
.hvd-outcome-icon--doc{background:#F0FDF4;color:#047857}
.hvd-outcome-icon--cal{background:#FFF7ED;color:#D97706}
.hvd-outcome-icon--done{background:#F0FDF4;color:#047857}
.hvd-outcome-copy{min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hvd-outcome-label{font-size:.58rem;font-weight:600;color:#64748B;white-space:nowrap}
.hvd-outcome-val{
  font-family:"DM Sans","Inter",sans-serif;font-size:.92rem;font-weight:800;
  color:#0F172A;letter-spacing:-.02em
}
.hvd-outcome-check{
  width:18px;height:18px;border-radius:50%;background:#0F172A;color:#fff;
  display:grid;place-items:center;flex:none
}
.hvd-outcome-check svg{width:10px;height:10px}
.hvd-spark{color:#047857;flex:none}
.hvd-spark-sm{width:42px;height:18px}
.hvd-spark-lg{width:72px;height:34px}
.hero-visual.hv-dev-dashboard.is-idle .hvd-spark path{
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:hvdSparkDraw 2.4s ease-in-out infinite alternate
}

.hvd-property{
  position:absolute;z-index:4;left:0;bottom:0;width:min(100%,370px);
  display:flex;gap:12px;align-items:stretch;
  background:#FFFFFF;border:1px solid #E2E8F0;border-radius:14px;
  padding:10px;box-shadow:0 20px 44px -16px rgba(15,23,42,.12);
  transition:transform .25s ease
}
.hvd-property:hover{transform:translateY(-2px)}
.hvd-property-photo{
  flex:none;width:108px;border-radius:10px;overflow:hidden;background:#E2E8F0
}
.hvd-property-photo img{width:100%;height:100%;object-fit:cover;display:block;min-height:84px}
.hvd-property-body{min-width:0;flex:1;padding-top:2px}
.hvd-property-name{
  font-family:"DM Sans","Inter",sans-serif;font-size:.82rem;font-weight:700;
  color:#0F172A;margin:0 0 2px;letter-spacing:-.02em
}
.hvd-property-loc,.hvd-property-meta{
  font-size:.62rem;color:#64748B;margin:0 0 2px;line-height:1.35
}
.hvd-property-btn{
  display:inline-flex;margin-top:2px;padding:5px 10px;border-radius:8px;
  border:1px solid #CBD5E1;background:#FFFFFF;
  font-size:.6rem;font-weight:600;color:#0F172A
}

.hvd-deals-card{
  position:absolute;z-index:5;right:0;bottom:8px;width:min(48%,220px);
  background:#FFFFFF;border:1px solid #E2E8F0;border-radius:14px;
  padding:12px 12px 11px;
  box-shadow:0 18px 40px -14px rgba(15,23,42,.1);
  transition:transform .25s ease
}
.hvd-deals-card:hover{transform:translateY(-2px)}
.hvd-deals-label{
  font-size:.62rem;font-weight:600;color:#64748B;margin:0 0 4px
}
.hvd-deals-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px
}
.hvd-deals-val{
  font-family:"DM Sans","Inter",sans-serif;font-size:1.65rem;font-weight:800;
  letter-spacing:-.03em;color:#0F172A;line-height:1
}
.hvd-deals-growth{
  font-size:.58rem;font-weight:600;color:#047857;margin:0
}

.hv-dev-dashboard .hv-enter{opacity:0;transform:translateY(14px) scale(.98)}
.hero-visual.hv-dev-dashboard.is-live .hv-enter{
  animation:hvdCardIn .65s cubic-bezier(.2,.7,.2,1) forwards
}
.hero-visual.hv-dev-dashboard.is-live .hv-enter[data-delay="2"]{animation-delay:.08s}
.hero-visual.hv-dev-dashboard.is-live .hv-enter[data-delay="3"]{animation-delay:.14s}
.hero-visual.hv-dev-dashboard.is-live .hv-enter[data-delay="4"]{animation-delay:.2s}
.hero-visual.hv-dev-dashboard.is-live .hv-enter[data-delay="5"]{animation-delay:.26s}
.hero-visual.hv-dev-dashboard.is-live .hv-enter[data-delay="6"]{animation-delay:.34s}
.hero-visual.hv-dev-dashboard.is-live .hv-enter[data-delay="7"]{animation-delay:.44s}
.hero-visual.hv-dev-dashboard.is-live .hv-enter[data-delay="8"]{animation-delay:.52s}
.hero-visual.hv-dev-dashboard.is-live .hv-enter[data-delay="9"]{animation-delay:.58s}
.hero-visual.hv-dev-dashboard.is-live .hv-enter[data-delay="10"]{animation-delay:.64s}
.hero-visual.hv-dev-dashboard.is-live .hv-enter[data-delay="11"]{animation-delay:.78s}
.hero-visual.hv-dev-dashboard.is-live .hv-enter[data-delay="12"]{animation-delay:.9s}

.hero-visual.hv-dev-dashboard.is-idle .hv-enter{
  opacity:1
}

.hero-visual.hv-dev-dashboard.is-idle .hvd-board{
  animation:hvdFloat 7s ease-in-out infinite
}
.hero-visual.hv-dev-dashboard.is-idle .hvd-property{
  animation:hvdFloat 6.5s ease-in-out infinite;animation-delay:.6s
}
.hero-visual.hv-dev-dashboard.is-idle .hvd-deals-card{
  animation:hvdFloat 6.8s ease-in-out infinite;animation-delay:1s
}

@keyframes hvdCardIn{
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes hvdPathDraw{to{stroke-dashoffset:0}}
@keyframes hvdHubRing{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.06);opacity:.9}
}
@keyframes hvdSparkDraw{to{stroke-dashoffset:0}}
@keyframes hvdFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

@media(max-width:900px){
  .hero-visual.hv-dev-dashboard{max-width:440px;min-height:430px}
  .hvd-shell{padding-bottom:76px}
  .hvd-metrics{flex-wrap:wrap}
  .hvd-metric{flex:1 1 calc(25% - 12px);min-width:62px}
  .hvd-metric-arrow{display:none}
  .hvd-flow{grid-template-columns:1fr;gap:10px;min-height:auto}
  .hvd-flow-lines{display:none}
  .hvd-hub{justify-self:center;margin:4px auto}
  .hvd-property{position:relative;width:100%;margin-top:12px}
  .hvd-deals-card{position:relative;width:100%;margin-top:8px;bottom:auto;right:auto}
  .hvd-shell{padding-bottom:0}
}
@media(max-width:560px){
  .hero-visual.hv-dev-dashboard{min-height:0}
  .hvd-board{padding:14px}
  .hvd-upload-btn span{display:none}
  .hvd-upload-btn{padding:7px 9px}
}
@media(prefers-reduced-motion:reduce){
  .hero-visual.hv-dev-dashboard.is-idle .hvd-board,
  .hero-visual.hv-dev-dashboard.is-idle .hvd-property,
  .hero-visual.hv-dev-dashboard.is-idle .hvd-deals-card,
  .hero-visual.hv-dev-dashboard.is-idle .hvd-hub-ring,
  .hero-visual.hv-dev-dashboard.is-idle .hvd-spark path{animation:none!important}
  .hv-dev-dashboard .hv-enter{opacity:1;transform:none}
}

/* ============================================================
   AFFILIATE HERO — Reference dashboard visual (high-fidelity asset)
   ============================================================ */
#page-affiliate .hero-visual.hv-aff-dashboard{
  position:relative;width:100%;max-width:780px;margin:0 auto;min-height:0;aspect-ratio:auto
}
.hero-visual.hv-aff-dashboard{
  position:relative;width:100%;max-width:780px;margin:0 auto;min-height:0;aspect-ratio:auto
}
.haff-shell{
  position:relative;width:100%;padding:16px;border-radius:20px;
  background:linear-gradient(180deg,#F8FAFC 0%,#EFF6FF 100%);
  border:1px solid #DBEAFE;
  box-shadow:
    0 24px 52px -18px rgba(15,23,42,.12),
    0 8px 22px -10px rgba(37,99,235,.12),
    inset 0 1px 0 rgba(255,255,255,.95)
}

/* Top Section: Steps */
.haff-steps-header{
  margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(37,99,235,.08)
}
.haff-steps-title{
  font-family:"DM Sans","Inter",sans-serif;font-size:14px;font-weight:800;
  color:#1E3A8A;text-align:center;text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px
}
.haff-steps-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1fr);
  align-items:start;column-gap:2px
}
.haff-step-item{
  display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0
}
.haff-step-icon-wrap{
  width:32px;height:32px;border-radius:50%;background:#FFFFFF;border:2px solid #3B82F6;
  color:#2563EB;display:grid;place-items:center;margin-bottom:6px;
  box-shadow:0 4px 10px rgba(37,99,235,0.1);transition:all .3s ease
}
.haff-step-icon-wrap svg{
  width:16px;height:16px
}
.haff-step-content{
  min-width:0
}
.haff-step-num-title{
  font-family:"DM Sans","Inter",sans-serif;font-size:11px;font-weight:700;color:#0F172A;margin:0 0 3px;line-height:1.2
}
.haff-step-desc{
  font-size:10px;color:#64748B;line-height:1.25;margin:0;max-width:100%
}
.haff-step-arrow{
  flex:none;width:12px;color:#3B82F6;opacity:.5;display:grid;place-items:center;align-self:center
}
.haff-step-arrow svg{
  width:12px;height:12px
}

/* Main Grid Layout */
.haff-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 14px 158px 14px minmax(0,1fr);
  gap:0;align-items:start;position:relative
}

/* Left Column: Promote */
.haff-col-left{
  min-width:0;display:flex;flex-direction:column;justify-content:flex-start
}
.haff-col-title{
  font-family:"DM Sans","Inter",sans-serif;font-size:10px;font-weight:800;
  color:#475569;text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px;line-height:1.2
}
.haff-promo-list{
  display:flex;flex-direction:column;gap:7px
}
.haff-promo-card{
  background:#FFFFFF;border:1px solid #E2E8F0;border-radius:10px;
  padding:8px 10px;display:flex;align-items:flex-start;gap:8px;
  box-shadow:0 2px 8px rgba(15,23,42,0.04);transition:all .25s ease;
  min-height:0;height:auto;box-sizing:border-box
}
.haff-promo-card:hover{
  transform:translateY(-2px);border-color:#BFDBFE;box-shadow:0 6px 16px rgba(37,99,235,.08)
}
.haff-promo-icon-wrap{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;margin-top:1px
}
.haff-promo-icon-wrap svg{
  width:14px;height:14px
}
.haff-promo-card--blue .haff-promo-icon-wrap{background:#EFF6FF;color:#2563EB}
.haff-promo-card--green .haff-promo-icon-wrap{background:#ECFDF5;color:#059669}
.haff-promo-card--purple .haff-promo-icon-wrap{background:#F5F3FF;color:#7C3AED}
.haff-promo-card--orange .haff-promo-icon-wrap{background:#FFF7ED;color:#EA580C}

.haff-promo-text{
  min-width:0;flex:1
}
.haff-promo-title{
  font-family:"DM Sans","Inter",sans-serif;font-size:11px;font-weight:700;color:#0F172A;margin:0 0 3px;line-height:1.25
}
.haff-promo-desc{
  font-size:10px;color:#64748B;line-height:1.35;margin:0;
  white-space:normal;overflow:visible;text-overflow:unset
}

/* Connectors */
.haff-connector-col{
  min-width:0;align-self:start;display:flex;align-items:stretch;justify-content:center
}
.haff-connector-col--left,
.haff-connector-col--right{
  height:auto;min-height:0
}
.haff-conn-left, .haff-conn-right{
  width:14px;height:100%;min-height:0;display:block;overflow:visible
}
.haff-conn-paths path{
  stroke:#3B82F6;stroke-width:1.5;stroke-dasharray:3 3;fill:none
}

/* Center Column: Portfolio (compact) */
.haff-col-center{
  min-width:0;width:158px;max-width:158px;padding:0
}
.haff-portfolio-card{
  background:#FFFFFF;border:1px solid #D1E2FF;border-radius:10px;
  padding:8px;box-shadow:0 8px 24px -6px rgba(37,99,235,.1)
}
.haff-port-header{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:6px
}
.haff-port-title{
  font-family:"DM Sans","Inter",sans-serif;font-size:11px;font-weight:800;color:#0F172A;margin:0;line-height:1.2
}
.haff-port-url-bar{
  display:inline-flex;align-items:center;gap:3px;background:#F1F5F9;
  border-radius:4px;padding:2px 5px;border:1px solid #E2E8F0;width:100%;box-sizing:border-box
}
.haff-port-url-text{
  font-size:8px;font-weight:600;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0
}
.haff-port-url-icon{
  width:7px;height:7px;color:#64748B;flex:none
}

/* Profile Area — stacked compact */
.haff-profile-section{
  display:flex;flex-direction:column;gap:5px;margin-bottom:6px;
  background:linear-gradient(180deg,rgba(245,249,255,.9) 0%,rgba(255,255,255,0) 100%);
  padding:5px;border-radius:6px;border:1px solid rgba(37,99,235,.06)
}
.haff-profile-hero{
  border-radius:5px;overflow:hidden;border:1px solid #E2E8F0;height:42px;position:relative;width:100%
}
.haff-profile-hero img{
  width:100%;height:100%;object-fit:cover
}
.haff-profile-info{
  min-width:0
}
.haff-profile-avatar-row{
  display:flex;align-items:center;gap:5px;margin-bottom:4px
}
.haff-profile-avatar{
  width:22px;height:22px;border-radius:50%;overflow:hidden;border:1.5px solid #DBEAFE;flex:none
}
.haff-profile-avatar img{
  width:100%;height:100%;object-fit:cover
}
.haff-profile-meta{
  min-width:0;flex:1
}
.haff-profile-name{
  font-family:"DM Sans","Inter",sans-serif;font-size:9px;font-weight:700;color:#0F172A;margin:0;
  display:flex;align-items:center;gap:2px;line-height:1.2
}
.haff-verified-badge{
  color:#3B82F6;width:8px;height:8px;display:inline-block;flex:none
}
.haff-verified-badge svg{
  width:100%;height:100%
}
.haff-profile-title{
  font-size:8px;font-weight:600;color:#2563EB;margin:0;line-height:1.2
}
.haff-profile-socials{
  display:flex;align-items:center;gap:5px
}
.haff-social-icon{
  width:10px;height:10px;color:#64748B;display:inline-grid;place-items:center
}
.haff-social-icon svg{
  width:100%;height:100%
}

/* Featured Properties — thumbnail strip */
.haff-featured-section{
  margin-bottom:6px
}
.haff-featured-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:4px
}
.haff-featured-title{
  font-family:"DM Sans","Inter",sans-serif;font-size:9px;font-weight:800;color:#0F172A;margin:0
}
.haff-featured-view-all{
  font-size:8px;font-weight:700;color:#2563EB;cursor:pointer
}
.haff-properties-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px
}
.haff-prop-card{
  background:#FFFFFF;border:1px solid #E2E8F0;border-radius:5px;overflow:hidden;
  box-shadow:0 2px 6px rgba(15,23,42,0.03);transition:all .25s ease
}
.haff-prop-card:hover{
  transform:translateY(-1px);border-color:#BFDBFE;box-shadow:0 4px 12px rgba(37,99,235,.08)
}
.haff-prop-img-wrap{
  height:32px;width:100%;position:relative;background-size:cover;background-position:center
}
.haff-prop-tag{
  position:absolute;top:3px;left:3px;
  display:inline-block;font-size:6px;font-weight:800;text-transform:uppercase;
  padding:1px 3px;border-radius:2px;line-height:1
}
.haff-prop-tag--villa{background:rgba(239,246,255,.92);color:#2563EB}
.haff-prop-tag--apt{background:rgba(236,253,245,.92);color:#059669}
.haff-prop-tag--town{background:rgba(245,243,255,.92);color:#7C3AED}
.haff-prop-price{
  font-family:"DM Sans","Inter",sans-serif;font-size:8px;font-weight:800;color:#2563EB;
  margin:0;padding:3px 4px;line-height:1;text-align:center
}

/* Share Section */
.haff-share-section{
  border-top:1px solid #F1F5F9;padding-top:5px;margin-top:0
}
.haff-share-bar{
  display:flex;align-items:center;justify-content:space-between;background:#F8FAFC;
  border:1px solid #E2E8F0;border-radius:5px;padding:2px 4px;gap:4px
}
.haff-share-url{
  font-size:7px;font-weight:600;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0
}
.haff-copy-btn{
  background:#2563EB;color:#FFFFFF;border:none;border-radius:3px;
  font-family:"DM Sans","Inter",sans-serif;font-size:7px;font-weight:700;
  padding:3px 6px;cursor:pointer;box-shadow:0 2px 6px rgba(37,99,235,.2);
  transition:background .2s;white-space:nowrap;flex:none
}
.haff-copy-btn:hover{
  background:#1D4ED8
}

/* Right Column: Analytics */
.haff-col-right{
  min-width:0;display:flex;flex-direction:column;justify-content:flex-start
}
.haff-stats-list{
  display:flex;flex-direction:column;gap:6px
}
.haff-stat-card{
  background:#FFFFFF;border:1px solid #E2E8F0;border-radius:10px;
  padding:6px 8px;box-shadow:0 2px 8px rgba(15,23,42,0.04);
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:44px;height:auto;box-sizing:border-box;transition:all .25s ease
}
.haff-stat-card:hover{
  transform:translateY(-2px);border-color:#BFDBFE;box-shadow:0 6px 16px rgba(37,99,235,.08)
}
.haff-stat-card--has-note{
  min-height:50px
}
.haff-stat-header{
  display:flex;align-items:center;gap:5px;margin-bottom:3px
}
.haff-stat-icon-wrap{
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none
}
.haff-stat-icon-wrap svg{
  width:9px;height:9px
}
.haff-stat-card--green .haff-stat-icon-wrap{background:#ECFDF5;color:#059669}
.haff-stat-card--purple .haff-stat-icon-wrap{background:#F5F3FF;color:#7C3AED}
.haff-stat-card--blue .haff-stat-icon-wrap{background:#EFF6FF;color:#2563EB}

.haff-stat-label{
  font-size:10px;font-weight:700;color:#64748B;line-height:1.2;
  white-space:normal;overflow:visible;text-overflow:unset
}
.haff-stat-body{
  display:flex;align-items:center;justify-content:space-between;gap:4px
}
.haff-stat-numbers{
  display:flex;align-items:baseline;gap:3px;flex-wrap:wrap
}
.haff-stat-value{
  font-family:"DM Sans","Inter",sans-serif;font-size:13px;font-weight:800;color:#0F172A;line-height:1
}
.haff-stat-pct{
  font-size:9px;font-weight:700;color:#10B981;line-height:1
}
.haff-stat-chart{
  width:32px;height:12px;flex:none
}
.haff-stat-chart svg{
  width:100%;height:100%;display:block;overflow:visible
}
.haff-sparkline-path{
  stroke-dasharray:120;stroke-dashoffset:120
}
.hero-visual.hv-aff-dashboard.is-idle .haff-sparkline-path{
  animation:haffSparklineDraw 2.2s ease-in-out infinite alternate
}
.haff-sparkline-path--green{color:#10B981}
.haff-sparkline-path--purple{color:#8B5CF6}
.haff-sparkline-path--blue{color:#3B82F6}

.haff-stat-footer{
  border-top:1px dashed #F1F5F9;padding-top:2px;margin-top:2px
}
.haff-stat-note{
  font-size:8px;color:#64748B;line-height:1.2
}

/* Animations */
.hv-aff-dashboard .hv-enter{opacity:0;transform:translateY(14px) scale(.98)}
.hero-visual.hv-aff-dashboard.is-live .hv-enter{
  animation:haffReveal .8s cubic-bezier(.4,0,.2,1) forwards
}
.hero-visual.hv-aff-dashboard.is-live .hv-enter[data-delay="1"]{animation-delay:.05s}
.hero-visual.hv-aff-dashboard.is-live .hv-enter[data-delay="2"]{animation-delay:.12s}
.hero-visual.hv-aff-dashboard.is-live .hv-enter[data-delay="3"]{animation-delay:.22s}
.hero-visual.hv-aff-dashboard.is-live .hv-enter[data-delay="4"]{animation-delay:.32s}

.hero-visual.hv-aff-dashboard.is-idle .haff-shell{
  animation:haffFloat 6s ease-in-out infinite
}
.hero-visual.hv-aff-dashboard.is-idle .hv-enter{opacity:1;transform:none}

@keyframes haffReveal{to{opacity:1;transform:none}}
@keyframes haffFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes haffSparklineDraw{to{stroke-dashoffset:0}}

@media(max-width:560px){
  #page-affiliate .hero-visual.hv-aff-dashboard,
  .hero-visual.hv-aff-dashboard{
    min-height:0;max-width:100%
  }
  .haff-steps-grid{
    grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr);
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none
  }
  .haff-steps-grid::-webkit-scrollbar{display:none}
  .haff-step-item{
    min-width:72px
  }
  .haff-step-arrow{
    display:grid
  }
  .haff-main-grid{
    grid-template-columns:1fr;gap:12px
  }
  .haff-col-left, .haff-col-right, .haff-connector-col{
    display:none
  }
  .haff-col-center{
    width:100%;max-width:100%;padding:0
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-visual.hv-aff-dashboard.is-idle .haff-shell{animation:none!important}
  .hero-visual.hv-aff-dashboard.is-idle .haff-sparkline-path{animation:none!important;stroke-dashoffset:0!important}
  .hv-aff-dashboard .hv-enter{opacity:1;transform:none}
}

/* ============================================================
   AFFILIATE PAGE — Blue / cyan palette (#2563EB / #F8FAFC)
   ============================================================ */
#page-affiliate{
  background:var(--page);
  color:var(--ink);
  --aff-shadow-xs:0 1px 2px rgba(15,23,42,.05),0 3px 10px -2px rgba(37,99,235,.1);
  --aff-shadow-sm:0 2px 6px rgba(15,23,42,.06),0 8px 20px -6px rgba(37,99,235,.12);
  --aff-shadow-md:0 4px 10px rgba(15,23,42,.06),0 14px 34px -10px rgba(37,99,235,.15);
  --aff-shadow-lg:0 8px 16px rgba(15,23,42,.07),0 22px 48px -14px rgba(37,99,235,.18)
}
#page-affiliate .hero{
  background:var(--hero);
  overflow:hidden
}
#page-affiliate .hero-in{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:0 44px;
  align-items:center
}
#page-affiliate .hero-copy{
  max-width:34rem;
  align-self:start;
  margin-top:-14px
}
#page-affiliate .hero-visual-slot{
  align-self:center;
  min-width:0;
  justify-self:stretch
}
#page-affiliate .hero::before{
  width:560px;height:560px;right:-120px;top:-220px;
  background:radial-gradient(circle,rgba(59,130,246,.14),transparent 68%);
  opacity:.5
}
#page-affiliate .hero::after{
  width:480px;height:480px;left:-140px;bottom:-180px;
  background:radial-gradient(circle,rgba(6,182,212,.1),transparent 70%);
  opacity:.4
}
#page-affiliate .hero-grid{
  background-image:radial-gradient(circle at 1px 1px,rgba(100,116,139,.07) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 80% 70% at 78% 42%,#000 18%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 78% 42%,#000 18%,transparent 72%)
}
#page-affiliate .hero-copy-glow{
  display:block;opacity:.45;
  background:radial-gradient(circle,rgba(239,246,255,.95) 0%,transparent 68%)
}
#page-affiliate .hero h1,
#page-affiliate .hero .display{
  font-family:"DM Sans","Inter",sans-serif;
  font-weight:800;
  font-size:clamp(2.15rem,3.8vw,3.05rem);
  letter-spacing:-.032em;
  line-height:1.08;
  margin:10px 0 16px;
  color:#0F172A
}
#page-affiliate .hero .lede{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:1rem;
  line-height:1.65;
  max-width:40ch;
  margin-bottom:22px;
  color:#64748B
}
#page-affiliate .hero h1 .hero-subline{
  display:block;
  margin-top:.35em;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.02em;
  color:#2563EB
}
#page-affiliate .hero h1 .hero-accent{
  font-family:inherit;
  font-style:normal;
  font-weight:800;
  background:none;
  -webkit-text-fill-color:#2563EB;
  color:#2563EB;
  animation:none;
  padding:0;
  position:relative
}
#page-affiliate .hero h1 .hero-accent::after{display:none}
#page-affiliate .hero-eyebrow--editorial{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 11px 4px 9px;margin-bottom:18px;
  border-radius:999px;
  background:#EFF6FF;
  border:1px solid #BFDBFE;
  box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  isolation:isolate
}
#page-affiliate .hero-eyebrow--editorial::before,
#page-affiliate .hero-eyebrow--editorial::after{display:none!important}
#page-affiliate .hero-eyebrow-dot{
  width:6px;height:6px;flex:none;border-radius:50%;
  background:#2563EB
}
#page-affiliate .hero-eyebrow-text{
  display:inline;font-family:"DM Sans","Inter",sans-serif;
  font-size:.625rem;font-weight:700;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;
  color:#1E40AF!important;-webkit-text-fill-color:#1E40AF!important;
  background:none!important
}
#page-affiliate .hero-cta{margin:0 0 24px;gap:12px}
#page-affiliate .btn-primary.btn-hero{
  background:#2563EB;color:#fff;border:1px solid transparent;
  border-radius:8px;padding:12px 18px;
  font-family:"DM Sans","Inter",sans-serif;font-size:.92rem;font-weight:600;
  box-shadow:0 10px 24px -12px rgba(37,99,235,.32)
}
#page-affiliate .btn-primary.btn-hero:hover{
  background:#1E40AF;box-shadow:0 14px 28px -10px rgba(37,99,235,.38)
}
#page-affiliate .btn-ghost.btn-hero{
  border:1px solid #E2E8F0;color:#0F172A;background:#fff;
  border-radius:8px;padding:11px 16px;gap:10px;
  font-family:"DM Sans","Inter",sans-serif;font-size:.92rem;font-weight:600;
  box-shadow:0 1px 2px rgba(15,23,42,.04)
}
#page-affiliate .btn-ghost.btn-hero:hover{
  border-color:#CBD5E1;color:#0F172A;background:#fff
}
#page-affiliate .btn-hero-play .btn-play-icon{
  width:24px;height:24px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:#EFF6FF;color:#2563EB;margin-left:2px
}
#page-affiliate .btn-hero-play .btn-play-icon svg{width:16px;height:16px;display:block}
#page-affiliate .hero-trust-stats{margin-top:6px;padding:0;border:none}
#page-affiliate .dev-hero-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;width:100%;max-width:100%;
  list-style:none;margin:0;padding:0;row-gap:16px;column-gap:20px
}
#page-affiliate .dev-hero-stat{
  display:flex;align-items:center;gap:14px;
  min-width:0;margin:0;padding:0
}
#page-affiliate .dev-hero-stat-icon{
  flex:none;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(37,99,235,.1);color:#2563EB;
  border:none
}
#page-affiliate .dev-hero-stat-icon svg{
  width:23px;height:23px;display:block;
  stroke-width:1.5
}
#page-affiliate .dev-hero-stat-text{
  display:flex;flex-direction:column;justify-content:center;
  gap:0;min-width:0;line-height:1
}
#page-affiliate .dev-hero-stat-value{
  display:block;margin:0;padding:0;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.875rem;font-weight:700;line-height:1.15;
  letter-spacing:-.015em;color:#0F172A;
  font-variant-numeric:tabular-nums
}
#page-affiliate .dev-hero-stat-label{
  display:block;margin:2px 0 0;padding:0;
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.6875rem;font-weight:400;line-height:1.2;
  letter-spacing:0;color:#64748B
}
@media (max-width:520px){
  #page-affiliate .dev-hero-stats{grid-template-columns:1fr;row-gap:12px}
  #page-affiliate .dev-hero-stat-icon{width:40px;height:40px;border-radius:11px}
}

#page-affiliate .sb-stats-band{
  background:linear-gradient(135deg,#F8FAFC 0%,color-mix(in srgb,var(--accent-soft) 35%,#F8FAFC) 52%,#F8FAFC 100%)
}
#page-affiliate .sb-stats-band::before{
  background:linear-gradient(90deg,#2563EB,#3B82F6,#06B6D4)
}
#page-affiliate .sb-integ-band{
  background:var(--page);
  border-top:1px solid var(--line)
}
#page-affiliate .sb-integ-card,
#page-affiliate .sb-integ-badge{
  background:var(--surface);
  border:1px solid var(--line)
}

#page-affiliate .how-section{
  background:linear-gradient(180deg,#FFFFFF 0%,color-mix(in srgb,var(--accent-soft) 24%,#F8FAFC) 42%,#F8FAFC 100%)
}
#page-affiliate .why-section{
  background:linear-gradient(180deg,#F8FAFC 0%,color-mix(in srgb,var(--accent-soft) 18%,#FFFFFF) 50%,#F8FAFC 100%)
}
#page-affiliate #affiliate-pricing{
  background:var(--page)
}
#page-affiliate .bridge{
  background:linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%)
}
#page-affiliate .xcard{
  background:var(--surface);
  border-color:var(--line);
  box-shadow:var(--aff-shadow-sm)
}
#page-affiliate .faq-band{
  background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%)
}
#page-affiliate .contact-band{
  background:linear-gradient(180deg,#F8FAFC 0%,#fff 52%,#EFF6FF 100%)
}
#page-affiliate .contact-channel,
#page-affiliate .contact-trust-pill{
  background:var(--surface)
}
#page-affiliate .contact-card-accent{
  background:linear-gradient(90deg,#2563EB,#3B82F6,#1D4ED8)
}

#page-affiliate .contact-card,
#page-affiliate .qa,
#page-affiliate .why-quote,
#page-affiliate .why-platform,
#page-affiliate .why-shift,
#page-affiliate .plan{
  background:var(--surface);
  border-color:var(--line)
}
#page-affiliate .plan.feat-plan{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),var(--aff-shadow-md)
}
#page-affiliate .plan:hover{
  box-shadow:var(--aff-shadow-md)
}

/* Affiliate pricing: toggle, badges, DM Sans typography */
#page-affiliate #affiliate-pricing .lp5-price-monthly,
#page-affiliate #affiliate-pricing .lp5-price-yearly{
  display:none
}
#page-affiliate #affiliate-pricing .lp5-price-monthly:not(.lp5-is-hidden),
#page-affiliate #affiliate-pricing .lp5-price-yearly:not(.lp5-is-hidden){
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .15em;line-height:1.2
}
#page-affiliate #affiliate-pricing .lp5-is-hidden{
  display:none!important
}
#page-affiliate #affiliate-pricing .lp5-pricing-controls{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  margin-bottom:clamp(28px,3.5vw,40px)
}
#page-affiliate #affiliate-pricing .lp5-pricing-toggle-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px
}
#page-affiliate #affiliate-pricing .lp5-pricing-toggle-label{
  font-family:"DM Sans","Inter",sans-serif;
  font-size:.9375rem;font-weight:600;color:var(--muted);
  transition:color .2s,font-weight .2s
}
#page-affiliate #affiliate-pricing .lp5-pricing-toggle-label.is-active{
  font-weight:700;color:var(--accent)
}
#page-affiliate #affiliate-pricing .lp5-pricing-switch{
  position:relative;display:inline-flex;align-items:center;width:52px;height:28px;flex:none
}
#page-affiliate #affiliate-pricing .lp5-pricing-switch input{
  opacity:0;width:0;height:0;position:absolute
}
#page-affiliate #affiliate-pricing .lp5-pricing-switch-slider{
  position:absolute;inset:0;cursor:pointer;border-radius:999px;
  background:var(--line);transition:background .2s
}
#page-affiliate #affiliate-pricing .lp5-pricing-switch-slider::before{
  content:"";position:absolute;height:22px;width:22px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(15,23,42,.12)
}
#page-affiliate #affiliate-pricing .lp5-pricing-switch input:checked + .lp5-pricing-switch-slider{
  background:var(--accent)
}
#page-affiliate #affiliate-pricing .lp5-pricing-switch input:checked + .lp5-pricing-switch-slider::before{
  transform:translateX(24px)
}
#page-affiliate #affiliate-pricing .lp5-pricing-switch input:focus-visible + .lp5-pricing-switch-slider{
  outline:2px solid var(--accent);outline-offset:2px
}
#page-affiliate #affiliate-pricing .lp5-pricing-discount-pill{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:8px;
  background:#28B446;color:#fff;
  font-family:"DM Sans","Inter",sans-serif;font-size:.6875rem;font-weight:700;line-height:1
}
#page-affiliate #affiliate-pricing .lp5-pricing-beta{
  display:flex;align-items:center;justify-content:center;width:100%;max-width:520px;gap:14px
}
#page-affiliate #affiliate-pricing .lp5-pricing-beta::before,
#page-affiliate #affiliate-pricing .lp5-pricing-beta::after{
  content:"";flex:1;height:2px;background:color-mix(in srgb,var(--accent) 18%,var(--line))
}
#page-affiliate #affiliate-pricing .lp5-pricing-beta-badge{
  display:inline-flex;align-items:center;padding:10px 28px;border-radius:999px;
  background:#dff3e6;color:#2e7d32;white-space:nowrap;
  font-family:"DM Sans","Inter",sans-serif;font-size:.625rem;font-weight:700;line-height:1;letter-spacing:.02em
}
#page-affiliate #affiliate-pricing .plan h3{
  font-family:"DM Sans","Inter",sans-serif;font-size:1.0625rem;font-weight:700;color:var(--ink)
}
#page-affiliate #affiliate-pricing .plan .pfor{
  font-family:"DM Sans","Inter",sans-serif;font-size:.875rem;color:var(--muted)
}
#page-affiliate #affiliate-pricing .plan .pprice{
  font-family:"DM Sans","Inter",sans-serif;font-weight:800;
  font-size:clamp(1.65rem,2.2vw,2rem);letter-spacing:-.02em;color:var(--ink);
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:3.2rem
}
#page-affiliate #affiliate-pricing .lp5-price-amount{font:inherit;font-weight:inherit;color:inherit}
#page-affiliate #affiliate-pricing .lp5-price-slash{font:inherit;font-weight:800;color:inherit}
#page-affiliate #affiliate-pricing .lp5-price-period{
  font-family:"DM Sans","Inter",sans-serif;font-size:.875rem;font-weight:500;color:var(--muted)
}
#page-affiliate #affiliate-pricing .lp5-price-strike{
  display:block;width:100%;
  font-family:"DM Sans","Inter",sans-serif;font-size:.9375rem;font-weight:500;
  color:var(--faint);text-decoration:line-through;margin-bottom:2px
}
#page-affiliate #affiliate-pricing .lp5-price-custom{
  font-family:"DM Sans","Inter",sans-serif;font-weight:800;font-size:clamp(1.65rem,2.2vw,2rem)
}
#page-affiliate #affiliate-pricing .plan li{
  font-family:"DM Sans","Inter",sans-serif;font-size:.875rem;line-height:1.5;color:var(--muted)
}
#page-affiliate #affiliate-pricing .price-note{
  font-family:"DM Sans","Inter",sans-serif;font-size:.875rem;color:var(--faint)
}

#page-affiliate .how-scenario{
  background:linear-gradient(135deg,#FFFFFF,color-mix(in srgb,var(--accent-soft) 32%,#FFFFFF));
  box-shadow:var(--aff-shadow-md),inset 0 1px 0 rgba(255,255,255,.95)
}
#page-affiliate .how-scenario-mark{
  box-shadow:var(--aff-shadow-sm)
}
#page-affiliate .how-day1,
#page-affiliate .how-day1-badge,
#page-affiliate .how-tl-outcome,
#page-affiliate .how-tl-magic{
  box-shadow:var(--aff-shadow-xs)
}
#page-affiliate .how-tl-body{
  box-shadow:var(--aff-shadow-sm)
}
#page-affiliate .how-tl-item.is-active .how-tl-body{
  box-shadow:var(--aff-shadow-md),inset 0 1px 0 rgba(255,255,255,.95)
}
#page-affiliate .how-tl-item.is-magic.is-active .how-tl-body{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent),var(--aff-shadow-lg),inset 0 1px 0 rgba(255,255,255,.95)
}
#page-affiliate .hw-v3{
  box-shadow:var(--aff-shadow-lg),0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent),inset 0 1px 0 rgba(255,255,255,.95)
}
#page-affiliate .hw-v3.is-feature{
  box-shadow:0 0 0 1.5px var(--accent),var(--aff-shadow-lg),inset 0 1px 0 rgba(255,255,255,.95)
}
#page-affiliate .hw-v3-tile,
#page-affiliate .hw-v3-pill,
#page-affiliate .hw-v3-meta,
#page-affiliate .hw-v3-network,
#page-affiliate .hw-v3-search,
#page-affiliate .hw-v3-listing,
#page-affiliate .hw-v3-property{
  box-shadow:var(--aff-shadow-xs)
}
#page-affiliate .hw-v3-tile.is-live,
#page-affiliate .hw-v3-badge.is-key{
  box-shadow:var(--aff-shadow-sm)
}
#page-affiliate .why-quote{
  box-shadow:var(--aff-shadow-md),inset 0 1px 0 rgba(255,255,255,.95)
}
#page-affiliate .why-quote-mark{
  box-shadow:var(--aff-shadow-sm)
}
#page-affiliate .faq-item{
  box-shadow:var(--aff-shadow-xs)
}
#page-affiliate .faq-item[open]{
  box-shadow:var(--aff-shadow-sm)
}
#page-affiliate .contact-card{
  box-shadow:var(--aff-shadow-md)
}
#page-affiliate .hero-eyebrow--editorial{
  box-shadow:var(--aff-shadow-sm),inset 0 1px 0 rgba(255,255,255,.95)
}

body[data-theme="affiliate"] .contact-card .valid-feedback{
  color:#2563EB
}
body[data-theme="affiliate"] .btn-primary:hover{
  background:#1E40AF
}
body[data-theme="affiliate"] .hc-badge.live{
  background:#EFF6FF;
  color:#2563EB
}
body[data-theme="affiliate"] .step-mini .mini-chip.success{
  background:#EFF6FF;
  border-color:#BFDBFE;
  color:#1E40AF
}

@media (max-width:980px){
  #page-affiliate .hero-in{grid-template-columns:1fr;gap:0}
  #page-affiliate .hero-copy{margin-top:0;align-self:auto}
}

/* ============================================================
   LP5 responsive pass — tablet/mobile (desktop base unchanged)
   Additive max-width overrides only; do not edit rules above 1024px.
   ============================================================ */

@media (max-width:1024px){
  body.lp5-body .in{overflow-x:clip}
  .nav-sub-in{
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
    scroll-padding-inline:16px;
    overscroll-behavior-x:contain
  }
  .hero-trust-wall{width:100%;max-width:100%}
  .hero-trust-wall .htw-shell{max-width:100%}
}

@media (max-width:920px){
  .how-compact-main{
    grid-template-columns:1fr;
    gap:18px
  }
  .how-detail-stack{min-height:0}
}

@media (max-width:768px){
  .haff-main-grid{
    grid-template-columns:1fr;
    gap:12px
  }
  .haff-col-left,.haff-col-right,.haff-connector-col{display:none}
  .haff-col-center{width:100%;max-width:100%;padding:0}
  .hero-visual.hv-aff-dashboard{min-height:0;max-width:100%}

  #page-agent .hero-visual.hv-agent-dashboard,
  #page-developer .hero-visual.hv-dev-dashboard{min-height:auto}

  .htw-logo-chip{width:96px;height:48px;padding:4px 6px}
  .htw-logo-chip img{height:32px}

  .plan{padding:22px 18px}
  .plan .pprice{font-size:1.75rem}
  .plan.feat-plan .ribbon{left:16px;font-size:.64rem}

  .xcard{padding:22px 20px}
  .xcard .glyph{font-size:4.25rem;right:-4px;bottom:-10px}

  .contact-title{font-size:clamp(1.65rem,5vw,2.1rem)}
  .contact-lede{font-size:.95rem;max-width:none}

  .nav-drawer-panel{width:min(340px,100vw)}
  .nav-drawer-close{width:44px;height:44px;display:grid;place-items:center}
}

@media (max-width:640px){
  .hero-trust-signals .hts-chip,
  .live-counter-desc{white-space:normal}

  .hero-trust-signals .hts-chip{max-width:100%}

  body.lp5-body .btn-hero{
    flex:1 1 100%;
    min-width:100%
  }

  .how-strip{
    flex-direction:column;
    overflow-x:visible;
    gap:8px;
    padding-bottom:0
  }
  .how-strip-btn{
    flex:none;
    min-width:0;
    width:100%;
    white-space:normal;
    min-height:44px;
    padding:10px 14px
  }
  .how-strip-label{
    white-space:normal;
    overflow:visible;
    text-overflow:unset
  }

  .feat-visual{height:150px;margin:14px 0}
  .features-section .feat-visual .kb-col-title{font-size:.58rem}
  .features-section .feat-visual .kb-card{font-size:.62rem}
  .features-section .feat-visual .mini-kanban{padding:12px}
  .features-section .feat-visual .mini-table th,
  .features-section .feat-visual .mini-table td{font-size:.62rem}
  .features-section .feat-visual .mini-stat-val{font-size:.72rem}
  .features-section .feat-visual .mini-stat-label{font-size:.58rem}

  .why-quote--plain{
    max-width:100%;
    margin-top:16px;
    padding:16px 18px
  }
  .why-quote--plain .why-quote-text{font-size:.92rem;line-height:1.5}

  .vis-visual-frame img,.vis-visual-frame svg{max-width:100%;height:auto}

  .coming-soon-section .phone-frame{max-width:min(100%,280px);margin:0 auto}
  .coming-soon-section .cs-card{padding:20px 16px}

  .contact-card .g-recaptcha{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch
  }
  .contact-card .g-recaptcha > div{max-width:100%}

  .faq-item summary{min-height:44px;align-items:center}

  footer.lp5-footer .lp5-footer-newsletter-row{flex-direction:column}
  footer.lp5-footer .lp5-footer-newsletter-btn{min-height:44px}

  .hamb{width:44px;height:44px;border-radius:11px}

  .lp5-scroll-top{
    width:44px;
    height:44px;
    right:max(16px,env(safe-area-inset-right));
    bottom:max(18px,env(safe-area-inset-bottom))
  }
}

@media (max-width:480px){
  .plan .pprice{font-size:1.55rem}
  .plan h3{font-size:1.08rem}
  .xcard .glyph{font-size:3.25rem}
  .xcard h3{font-size:1.05rem}

  .htw-head-title{font-size:.88rem}
  .htw-head-sub{font-size:.68rem}

  #page-agent .htw-dev-title{font-size:clamp(.82rem,4vw,1rem)}
  #page-agent .htw-dev-grid{gap:8px}
}