/* ═══════════════════════════════ RESET & ROOT ═══════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#1a1005;
  --ink2:#2d1a08;
  --muted:#7a5c38;
  --faint:#b09070;
  --rule:#ece0cc;
  --surface:#f5ede0;
  --white:#fdf9f4;
  --blue:#c95a1e;
  --blue-dim:#fdf2eb;
  --blue-mid:#f5dcc8;
  --gold:#a87208;
  --green:#1a7a40;
  --purple:#a87208;
  --red:#b91c1c;
  --font:'DM Sans',system-ui,sans-serif;
  --display:'Plus Jakarta Sans','DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}
html{scroll-behavior:smooth;font-size:16px;overflow-x:clip}
body{background:var(--white);color:var(--ink);font-family:var(--font);overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:var(--blue-dim);color:var(--blue)}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#c99010;border-radius:2px}

/* ═══════════════════════════════ SCROLL PROGRESS ══════════════════════════ */
#progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#c95a1e,#c99010);z-index:999;width:0%;transition:width .1s linear}

/* ═══════════════════════════════ CURSOR ═══════════════════════════════════ */
#cursor{position:fixed;width:10px;height:10px;border-radius:50%;background:var(--blue);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .1s,width .3s var(--ease-out),height .3s var(--ease-out),opacity .3s;mix-blend-mode:multiply}
#cursor-ring{position:fixed;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(201,90,30,.4);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:transform .15s var(--ease-out),width .4s var(--ease-out),height .4s var(--ease-out)}
body:hover #cursor{opacity:1}
@media(hover:none){#cursor,#cursor-ring{display:none}}

/* ═══════════════════════════════ NAV ═══════════════════════════════════════ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 48px;height:60px;display:flex;align-items:center;justify-content:space-between;background:#fff;transition:none}
.logo{font-size:16px;font-weight:700;letter-spacing:-.3px;color:var(--ink);display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* Desktop nav — hidden by default, shown only on wide screens via min-width query below */
#navDesktop{display:none;align-items:center;gap:2px}
.nav-links a{padding:6px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .15s,background .15s}
.nav-links a:hover{color:var(--ink);background:var(--surface)}
.nav-links a.nav-active{color:var(--blue);background:var(--blue-dim)}
#navActions{display:none;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:9px;font-family:var(--font);font-size:14px;font-weight:600;border:none;cursor:pointer;text-decoration:none;transition:all .15s var(--ease-out);letter-spacing:-.1px}
.btn-ghost{background:var(--surface);color:var(--muted)}
.btn-ghost:hover{color:var(--ink);background:#e8edf4}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:#a87208;transform:translateY(-1px)}
.btn-lg{padding:13px 28px;font-size:16px;border-radius:12px}
/* Desktop breakpoint — show desktop nav, hide mobile ham */
@media(min-width:901px){
  #navDesktop{display:flex}
  #navActions{display:flex}
  .mob-ham{display:none !important}
}
/* ── MOBILE NAV ─────────────────────────────────────────── */
.mob-ham{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;border:none;background:var(--surface);border-radius:9px;cursor:pointer;padding:0;flex-shrink:0}
.mob-ham span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s,width .25s}
.mob-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mob-ham.open span:nth-child(2){opacity:0;width:0}
.mob-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:149}
.mob-nav-overlay.visible{display:block}
.mob-drawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,88vw);background:#fff;z-index:150;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 40px rgba(0,0,0,.12);overflow-y:auto;display:flex;flex-direction:column}
.mob-drawer.open{transform:translateX(0)}
.mob-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.mob-drawer-logo{font-size:16px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;text-decoration:none}
.mob-drawer-close{width:36px;height:36px;border:none;background:var(--surface);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px;line-height:1}
.mob-drawer-links{flex:1;padding:12px 8px}
.mob-drawer-links a{display:block;padding:12px 16px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;border-radius:10px;transition:background .15s}
.mob-drawer-links a:hover,.mob-drawer-links a:active{background:var(--surface)}
.mob-drawer-sec{padding:4px 16px 8px;font-size:10px;font-weight:600;letter-spacing:1.5px;color:var(--faint);text-transform:uppercase;margin-top:8px}
.mob-drawer-divider{height:1px;background:var(--rule);margin:8px 16px}
.mob-drawer-actions{padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.mob-drawer-actions .btn{width:100%;justify-content:center}

/* ═══════════════════════════════ HERO ═══════════════════════════════════════ */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:130px 40px 100px;text-align:center;position:relative;overflow:hidden;background:linear-gradient(160deg,#fdf2eb 0%,#fdf9f4 45%,#f5ede0 100%)}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-mesh{display:none}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--blue);margin-bottom:32px;position:relative;z-index:1}
.eyebrow-pill{background:var(--blue-dim);border-radius:50px;padding:5px 16px;display:inline-flex;align-items:center;gap:7px}
.eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{font-family:var(--display);font-size:clamp(54px,8vw,102px);font-weight:800;letter-spacing:-3.5px;line-height:.95;color:var(--ink);margin-bottom:28px;position:relative;z-index:1;max-width:920px}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-desc{font-size:clamp(16px,1.8vw,20px);color:var(--muted);max-width:520px;line-height:1.7;margin-bottom:48px;position:relative;z-index:1;font-weight:400}
.hero-ctas{display:flex;gap:12px;position:relative;z-index:1;flex-wrap:wrap;justify-content:center;margin-bottom:72px}
.hero-proof{display:flex;align-items:center;gap:36px;position:relative;z-index:1;flex-wrap:wrap;justify-content:center}
.proof-item{display:flex;flex-direction:column;align-items:center}
.proof-val{font-size:36px;font-weight:800;letter-spacing:-1.5px;color:var(--ink);line-height:1}
.proof-lbl{font-size:11px;color:var(--faint);font-weight:500;margin-top:5px;letter-spacing:.5px;text-transform:uppercase}
.proof-div{width:1px;height:40px;background:var(--rule)}
.scroll-cue{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--faint);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;z-index:1}
.scroll-cue-line{width:1px;height:48px;background:linear-gradient(to bottom,var(--blue),transparent);animation:draw-down 2s ease-in-out infinite}
@keyframes draw-down{0%{transform:scaleY(0);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}

/* ═══════════════════════════════ MARQUEE ════════════════════════════════════ */
.marquee-strip{overflow:hidden;padding:14px 0;background:var(--surface)}
.marquee-inner{display:flex;gap:0;width:max-content;animation:slide 40s linear infinite}
.marquee-inner:hover{animation-play-state:paused}
.m-item{display:inline-flex;align-items:center;gap:10px;padding:0 28px;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap}
.m-dot{width:3px;height:3px;border-radius:50%;background:var(--blue);flex-shrink:0}
@keyframes slide{to{transform:translateX(-50%)}}

/* ═══════════════════════════════ SECTIONS ═══════════════════════════════════ */
section{padding:140px 64px}
.wrap{max-width:1200px;margin:0 auto}
.wrap-narrow{max-width:820px;margin:0 auto}
.label{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--blue);margin-bottom:14px;display:inline-flex;align-items:center;gap:10px}
.label::before{content:'';flex-shrink:0;display:block;width:22px;height:1.5px;background:currentColor;border-radius:1px}
h2.heading{font-family:var(--display);font-size:clamp(36px,4.5vw,58px);font-weight:800;letter-spacing:-1.5px;line-height:1.08;color:var(--ink);margin-bottom:20px}
.subhead{font-size:18px;color:var(--muted);line-height:1.75;font-weight:400}
.sec-head{margin-bottom:90px}
.sec-head.center{text-align:center}
.sec-head.center .subhead{margin:0 auto;max-width:600px}

/* ═══════════════════════════════ UNIFIED CARD SYSTEM ═══════════════════════ */
.panel{background:#fff;border-radius:20px;padding:48px}
.panel-surface{background:var(--surface);border-radius:20px;padding:48px}
.panel-dark{background:var(--surface);border-radius:20px;padding:40px}
.panel-blue{background:var(--blue-dim);border-radius:20px;padding:48px}

/* ═══════════════════════════════ ARTICLE STYLES (SEO) ══════════════════════ */
.art{font-size:15px;line-height:1.85;color:var(--muted)}
.art p{margin-bottom:18px}
.art h4{font-size:16px;font-weight:700;color:var(--ink);margin:28px 0 10px;letter-spacing:-.3px}
.art ul{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.art ul li{padding-left:22px;position:relative}
.art ul li::before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.art-lede{font-size:16px;color:var(--body);line-height:1.8;font-weight:400;margin-bottom:20px;padding-left:18px;position:relative}.art-lede::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;background:linear-gradient(to bottom,var(--blue),var(--purple));border-radius:2px}

/* ═══════════════════════════════ STICKY NARRATIVE ═══════════════════════════ */
.sticky-section{padding:0 48px}
.sticky-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:600px}
.sticky-left{position:sticky;top:100px;height:fit-content;padding:100px 80px 100px 0;align-self:start}
.sticky-right{padding:80px 0 80px 80px}
.sticky-item{padding:40px 0;opacity:.35;transition:opacity .5s}
.sticky-item.in-view{opacity:1}
.sticky-item:last-child{border-bottom:none}
.sticky-num{font-family:var(--mono);font-size:11px;color:var(--blue);font-weight:500;letter-spacing:1px;margin-bottom:12px;display:block}
.sticky-item h3{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.5px;color:var(--ink);margin-bottom:10px;line-height:1.3}
.sticky-item p{font-size:15px;color:var(--muted);line-height:1.7}
.sticky-item ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:7px}
.sticky-item ul li{font-size:14px;color:var(--muted);display:flex;align-items:flex-start;gap:8px}
.sticky-item ul li::before{content:'';display:block;width:5px;height:5px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:7px}

/* ═══════════════════════════════ FLOW DIAGRAM ═══════════════════════════════ */
.flow-section{padding:140px 64px;background:var(--surface);overflow:hidden;position:relative}
.flow-section::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.flow-wrap{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.flow-title{text-align:center;margin-bottom:80px}
.flow-title .label{color:rgba(255,255,255,.4)}
.flow-title h2{font-family:var(--display);color:#fff;font-size:clamp(36px,5vw,58px);font-weight:800;letter-spacing:-2px}
.flow-pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.flow-pipe::before{content:'';position:absolute;top:44px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),rgba(201,90,30,.6),rgba(168,114,8,.6),rgba(255,255,255,.15),transparent)}
.flow-step{text-align:center;padding:0 12px;position:relative}
.flow-orb{width:88px;height:88px;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .3s}
.flow-orb::before{content:'';position:absolute;inset:-4px;border-radius:50%;opacity:.25;transition:opacity .3s}
.flow-step:hover .flow-orb{transform:translateY(-4px)}
.flow-step:hover .flow-orb::before{opacity:.6}
.fo-1{background:rgba(201,90,30,.12)}
.fo-2{background:rgba(168,114,8,.12)}
.fo-3{background:rgba(245,158,11,.12)}
.fo-4{background:rgba(0,182,122,.12)}
.fo-5{background:rgba(239,68,68,.12)}
.flow-step h4{font-family:var(--display);font-size:15px;font-weight:700;color:#fff;margin-bottom:8px}
.flow-step p{font-size:12px;color:rgba(255,255,255,.45);line-height:1.5;max-width:140px;margin:0 auto}
.flow-step .flow-tag{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10px;padding:3px 9px;border-radius:50px;font-weight:500}
.t1{background:rgba(201,90,30,.15);color:#93b4ff}
.t2{background:rgba(168,114,8,.15);color:#c4b5fd}
.t3{background:rgba(245,158,11,.15);color:#fcd34d}
.t4{background:rgba(0,182,122,.15);color:#6ee7b7}
.t5{background:rgba(239,68,68,.15);color:#fca5a5}

/* ═══════════════════════════════ MODULE TABS ════════════════════════════════ */
.accordion-section{padding:140px 64px;background:var(--surface)}
.mod-tabs-wrap{position:relative;margin-top:64px}
.mod-tabs-wrap::after{content:'';position:absolute;right:0;top:0;bottom:0;width:80px;background:linear-gradient(90deg,transparent,var(--surface));pointer-events:none}
.mod-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.mod-tabs::-webkit-scrollbar{display:none}
.mod-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:50px;background:var(--surface);cursor:pointer;white-space:nowrap;transition:all .2s var(--ease-out);font-family:var(--font);font-size:13px;font-weight:600;color:var(--muted);flex-shrink:0}
.mod-tab:hover{background:#fdf2eb;color:var(--ink)}
.mod-tab.active{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(201,90,30,.25),0 0 0 4px rgba(201,90,30,.06)}
.mod-tab-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--blue-dim);flex-shrink:0;transition:background .2s}
.mod-tab.active .mod-tab-icon{background:rgba(255,255,255,.2)}
.mod-panel-wrap{margin-top:20px;background:#fff;border-radius:20px;overflow:hidden}
.mp-inner{display:grid;grid-template-columns:1fr 1fr;gap:0}
.mp-left{padding:40px 40px 40px 40px}
.mp-right{padding:40px;background:var(--surface);overflow-y:auto;max-height:600px}
.mp-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.mp-icon{width:52px;height:52px;border-radius:14px;background:var(--blue);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.mp-header h3{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--ink);margin-bottom:4px}
.mp-header p{font-size:13px;color:var(--muted)}
.mp-desc{font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:24px}
.acc-features{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:20px}
.acc-feat{background:transparent;border-radius:0;padding:9px 0;font-size:13px;color:var(--body);display:flex;align-items:center;gap:10px}
.acc-feat::before{content:'✓';width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.acc-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--blue);margin-top:4px;text-decoration:none}
.acc-link:hover{gap:10px}
.acc-article{font-size:14px;line-height:1.8;color:var(--muted)}
.acc-article h4{font-size:14px;font-weight:700;color:var(--ink);margin:20px 0 8px;letter-spacing:-.2px}
.acc-article h4:first-child{margin-top:0}
.acc-article p{margin-bottom:12px}
.acc-article ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.acc-article ul li{padding-left:18px;position:relative;font-size:13px}
.acc-article ul li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.mp-no-article{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:200px;text-align:center;color:var(--faint)}
.mp-no-article svg{margin-bottom:12px;opacity:.3}
.mp-no-article p{font-size:13px}
@media(max-width:768px){
  .mp-inner{grid-template-columns:1fr}
  .mp-left{padding:24px}
  .mp-right{padding:24px;max-height:none}
  .acc-features{grid-template-columns:1fr}
}

/* ═══════════════════════════════ VISUAL DEMOS ═══════════════════════════════ */
.demo-section{padding:140px 64px;background:#fff}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:120px}
.demo-grid:last-child{margin-bottom:0}
.demo-grid.flip .demo-vis{order:-1}
.demo-text .label{margin-bottom:10px}
.demo-text h2{font-family:var(--display);font-size:clamp(30px,3.5vw,44px);font-weight:800;letter-spacing:-1.5px;color:var(--ink);line-height:1.1;margin-bottom:14px}
.demo-text p{font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:22px}
.demo-checklist{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:28px}
.demo-checklist li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--body)}
.demo-checklist li .chk{width:18px;height:18px;border-radius:50%;background:var(--blue-dim);color:var(--blue);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--blue);text-decoration:none;transition:gap .2s}
.link-arrow:hover{gap:10px}
.demo-vis{position:relative}

/* ── Dashboard card components ── */
.card{background:#fff;border-radius:16px;overflow:hidden}
.card-hdr{padding:16px 20px;background:var(--surface);display:flex;align-items:center;justify-content:space-between}
.card-hdr h4{font-size:14px;font-weight:700;color:var(--ink)}
.live-badge{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--green)}
.live-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);animation:blink 1.5s infinite}
.card-body{padding:16px 20px}

/* Heatmap */
.hm{display:grid;gap:4px}
.hm-row{display:grid;grid-template-columns:28px repeat(12,1fr);gap:4px}
.hm-day{font-size:10px;color:var(--faint);display:flex;align-items:center;font-family:var(--mono)}
.hm-cell{height:26px;border-radius:3px;transition:filter .2s;cursor:default}
.hm-cell:hover{filter:brightness(1.1)}
.hm-hours{display:grid;grid-template-columns:28px repeat(12,1fr);gap:4px;margin-top:4px}
.hm-hour{font-size:9px;color:var(--faint);text-align:center;font-family:var(--mono)}

/* Agent bars */
.ag-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ag-av{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.ag-name{font-size:12px;font-weight:600;color:var(--ink);width:60px;flex-shrink:0}
.ag-bar{flex:1;height:6px;background:var(--surface);border-radius:3px;overflow:hidden}
.ag-fill{height:100%;border-radius:3px}
.ag-val{font-size:12px;font-weight:700;font-family:var(--mono);width:28px;text-align:right;color:var(--ink)}

/* Lead table */
.lead-table{width:100%;border-collapse:collapse}
.lead-table th{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--faint);padding:0 8px 10px;text-align:left}
.lead-table td{padding:10px 8px;font-size:12px;color:var(--body);vertical-align:middle}
.lead-table tr:nth-child(even) td{background:var(--surface)}
.lead-flag{font-size:16px}
.lead-score{font-weight:700;font-family:var(--mono)}
.status-pill{font-size:10px;font-weight:700;padding:3px 8px;border-radius:50px}

/* Bar chart */
.bar-chart{display:flex;align-items:flex-end;gap:5px;height:80px}
.bc-bar{flex:1;border-radius:3px 3px 0 0;transition:filter .2s;cursor:default;min-height:4px}
.bc-bar:hover{filter:brightness(1.1)}
.bc-labels{display:flex;gap:5px;margin-top:4px}
.bc-lbl{flex:1;text-align:center;font-size:9px;color:var(--faint);font-family:var(--mono)}

/* Leaderboard */
.lb{border-radius:16px;overflow:hidden}
.lb-head{background:linear-gradient(135deg,var(--ink2),var(--ink));padding:20px;color:#fff}
.lb-head h4{font-size:16px;font-weight:700;margin-bottom:3px}
.lb-head span{font-size:12px;opacity:.5}
.lb-row{display:flex;align-items:center;gap:12px;padding:13px 18px;background:#fff;transition:background .2s}
.lb-row:nth-child(even){background:var(--surface)}
.lb-row:hover{background:#fdf2eb}
.lb-rank{width:22px;text-align:center;font-size:12px;font-weight:800;font-family:var(--mono);color:var(--muted)}
.lb-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.lb-info{flex:1}
.lb-name{font-size:13px;font-weight:600;color:var(--ink)}
.lb-role{font-size:11px;color:var(--muted)}
.lb-pts{font-size:15px;font-weight:800;font-family:var(--mono);color:var(--blue)}
.lb-delta{font-size:10px;font-weight:600;color:var(--green)}

/* Broker cards */
.broker-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.broker-card{background:var(--surface);border-radius:12px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.bk-name{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.bk-badge{font-size:9px;padding:2px 7px;border-radius:50px;font-weight:700}
.bk-good{background:#dcfce7;color:#166534}
.bk-ok{background:#fef3c7;color:#92400e}
.bk-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.bk-stat{display:flex;flex-direction:column}
.bk-val{font-size:14px;font-weight:800;font-family:var(--mono);color:var(--ink)}
.bk-lbl{font-size:10px;color:var(--faint)}
.bk-sparkline{display:flex;align-items:flex-end;gap:2px;height:28px;margin-top:10px}
.bk-bar{flex:1;border-radius:1px 1px 0 0;background:var(--blue);opacity:.2;transition:opacity .2s}
.bk-bar.hi{opacity:.9}
.bk-bar.med{opacity:.5}

/* ═══════════════════════════════ VIDEO PLACEHOLDER ══════════════════════════ */
.video-section{padding:0 64px 140px}
.video-wrap-inner{max-width:1000px;margin:0 auto}
.video-label{text-align:center;margin-bottom:40px}
.video-frame{border-radius:20px;overflow:hidden;position:relative;aspect-ratio:16/9;background:#1a1005;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.1),0 20px 60px rgba(50,20,0,.25)}
.video-frame canvas{position:absolute;inset:0;width:100%;height:100%}
.video-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10}
.play-ring{width:80px;height:80px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.15),0 8px 32px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);background:rgba(255,255,255,.1);transition:all .3s;margin-bottom:16px}
.play-ring:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);transform:scale(1.05)}
.play-ring svg{margin-left:4px}
.video-caption-text{font-size:14px;color:rgba(255,255,255,.5);font-weight:500}
.video-caption-text strong{color:rgba(255,255,255,.8)}

/* ═══════════════════════════════ NUMBERS ════════════════════════════════════ */
.numbers-section{padding:120px 64px;background:var(--surface);position:relative;overflow:hidden}
.numbers-section::before{content:'';position:absolute;top:0;right:0;width:600px;height:100%;background:radial-gradient(ellipse at right,rgba(255,255,255,.06) 0%,transparent 60%)}
.numbers-wrap{max-width:1100px;margin:0 auto}
.numbers-head{text-align:center;margin-bottom:70px}
.numbers-head h2{font-family:var(--display);color:#fff;font-size:clamp(36px,4.5vw,56px);font-weight:800;letter-spacing:-2px}
.numbers-head p{color:rgba(255,255,255,.6);font-size:17px;margin-top:10px}
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:transparent;border-radius:20px;overflow:hidden}
.num-cell{background:transparent;padding:40px 32px;text-align:center;transition:background .3s}
.num-cell:hover{background:rgba(201,90,30,.06)}
.num-val{font-size:clamp(44px,5vw,60px);font-weight:900;letter-spacing:-2px;color:var(--blue);display:block;line-height:1;margin-bottom:10px}
.num-lbl{font-size:13px;color:rgba(255,255,255,.55);font-weight:500;letter-spacing:.3px}

/* ═══════════════════════════════ SECURITY ═══════════════════════════════════ */
.security-section{padding:140px 64px;background:var(--surface)}
.sec-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.sec-list{display:flex;flex-direction:column;gap:20px;margin-top:40px}
.sec-item{display:flex;gap:16px;align-items:flex-start;padding:20px;background:var(--surface);border-radius:12px;transition:transform .3s}
.sec-item:hover{transform:translateX(4px)}
.sec-icon{width:40px;height:40px;border-radius:10px;background:var(--blue-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--blue)}
.sec-item h4{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px}
.sec-item p{font-size:13px;color:var(--muted);line-height:1.55}
.audit-card{background:#fff;border-radius:16px;overflow:hidden}
.audit-head{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;background:var(--surface)}
.audit-head h4{font-size:13px;font-weight:700;color:var(--ink)}
.audit-safe{font-size:11px;font-weight:600;color:var(--green);display:flex;align-items:center;gap:4px}
.audit-safe::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green)}
.audit-row{display:flex;align-items:center;gap:12px;padding:11px 20px}
.audit-row:last-child{border-bottom:none}
.audit-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.audit-text{flex:1}
.audit-main{font-size:12px;font-weight:500;color:var(--ink)}
.audit-time{font-size:11px;color:var(--faint)}
.audit-ok{font-size:10px;font-weight:700;padding:2px 8px;border-radius:50px}

/* ═══════════════════════════════ TECH ═══════════════════════════════════════ */
.tech-section{padding:80px 64px;background:var(--surface)}
.tech-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:48px;flex-wrap:wrap;justify-content:center}
.tech-label{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);flex-shrink:0}
.tech-items{display:flex;flex-wrap:wrap;gap:8px}
.tech-chip{background:#fff;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px;transition:all .2s;cursor:default;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.tech-chip:hover{color:var(--blue);background:var(--blue-dim);box-shadow:0 2px 8px rgba(201,90,30,.12)}
.tech-chip .ver{font-family:var(--mono);font-size:11px;color:var(--faint);font-weight:400}

/* ═══════════════════════════════ CTA ═══════════════════════════════════════ */
.cta-section{padding:120px 64px;background:linear-gradient(135deg,#c95a1e 0%,#a87208 100%);position:relative;overflow:hidden}
.cta-bg{position:absolute;inset:0;pointer-events:none}.cta-bg canvas{width:100%;height:100%;display:block}
.cta-content{max-width:680px;margin:0 auto;text-align:center;position:relative;z-index:1}
.cta-content h2{font-family:var(--display);font-size:clamp(44px,6vw,72px);font-weight:800;letter-spacing:-2.5px;color:#fff;line-height:1.0;margin-bottom:20px}
.cta-content p{font-size:17px;color:rgba(255,255,255,.5);line-height:1.65;margin-bottom:44px}
.cta-form{display:flex;gap:10px;justify-content:center}
.cta-input{flex:1;max-width:300px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#fff;padding:14px 18px;font-family:var(--font);font-size:15px;outline:none;transition:border-color .2s}
.cta-input::placeholder{color:rgba(255,255,255,.3)}
.cta-input:focus{border-color:rgba(201,90,30,.6)}
.cta-note{margin-top:16px;font-size:12px;color:rgba(255,255,255,.25);letter-spacing:.5px}

/* ═══════════════════════════════ FOOTER ════════════════════════════════════ */
footer{background:#0a0e1a;color:rgba(255,255,255,.65)}
.footer-main{max-width:1280px;margin:0 auto;padding:100px 64px 60px;display:grid;grid-template-columns:340px 1fr;gap:100px}
.footer-brand{}
.footer-logo{font-size:16px;font-weight:700;color:#fff;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.footer-tagline{font-size:14px;line-height:1.8;color:rgba(255,255,255,.65);margin-bottom:28px;max-width:260px}
.footer-domain{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.4);margin-bottom:28px;display:block}
.footer-social{display:flex;gap:10px}
.footer-social a{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);text-decoration:none;transition:all .2s;font-size:12px}
.footer-social a:hover{border-color:rgba(255,255,255,.5);color:#fff}
.footer-newsletter{margin-top:32px;padding-top:32px}
.footer-newsletter p{font-size:12px;color:rgba(255,255,255,.55);margin-bottom:10px}
.footer-nl-row{display:flex;gap:8px}
.footer-nl-input{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:9px;color:#fff;padding:10px 14px;font-family:var(--font);font-size:13px;outline:none}
.footer-nl-input::placeholder{color:rgba(255,255,255,.35)}
.footer-nl-input:focus{border-color:rgba(201,90,30,.6)}
.footer-nl-btn{background:var(--blue);color:#fff;border:none;border-radius:9px;padding:10px 16px;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s}
.footer-nl-btn:hover{background:#a87208}
.footer-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:40px}
.footer-col h5{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:18px;display:block}
.footer-col a{display:block;font-size:13px;color:rgba(255,255,255,.65);margin-bottom:10px;text-decoration:none;transition:color .2s;line-height:1.3}
.footer-col a:hover{color:#fff}
.footer-col .foot-new{font-size:9px;font-weight:700;background:var(--blue);color:#fff;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:middle}
.footer-bottom{max-width:1280px;margin:0 auto;padding:24px 64px;display:flex;justify-content:space-between;align-items:center;font-size:12px;flex-wrap:wrap;gap:12px}
.footer-bottom a{color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s}
.footer-bottom a:hover{color:rgba(255,255,255,.85)}
.footer-legal{display:flex;gap:24px}
.footer-badges{display:flex;gap:10px;align-items:center}
.footer-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:50px;letter-spacing:.5px}
.badge-pct{background:rgba(201,90,30,.15);color:#93b4ff}
.badge-aes{background:rgba(0,182,122,.1);color:#6ee7b7}
.badge-ent{background:rgba(245,158,11,.1);color:#fcd34d}

/* ═══════════════════════════════ ANIMATIONS ════════════════════════════════ */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  will-change:opacity,transform;
}
.reveal.up{opacity:1;transform:none}
.reveal.delay-1{transition-delay:.07s}
.reveal.delay-2{transition-delay:.14s}
.reveal.delay-3{transition-delay:.22s}
.reveal.delay-4{transition-delay:.30s}
.reveal.delay-5{transition-delay:.38s}
/* Directional slide-in from left / right */
.reveal.rl{transform:translateX(-52px) translateY(8px)}
.reveal.rr{transform:translateX(52px) translateY(8px)}
.reveal.rl.up,.reveal.rr.up{transform:none}
/* Reduce motion */
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.rl,.reveal.rr{transition-duration:.01ms!important}
}

/* ═══════════════════════════════ RESPONSIVE ════════════════════════════════ */
@media(max-width:1100px){
  .sticky-inner{grid-template-columns:1fr}
  .sticky-left{position:relative;top:0;padding:60px 0 0}
  .sticky-right{padding:40px 0 0}
  .demo-grid,.sec-layout{grid-template-columns:1fr;gap:50px}
  .demo-grid.flip .demo-vis{order:0}
  .numbers-grid{grid-template-columns:repeat(2,1fr)}
  .footer-main{grid-template-columns:1fr;gap:60px}
  .footer-cols{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .footer-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  nav{padding:0 24px;height:56px}
  section{padding:90px 24px}
  .flow-section,.numbers-section,.security-section,.tech-section{padding-left:24px;padding-right:24px}
  .cta-section{padding:100px 24px}
  .accordion-section{padding:90px 24px}
  .demo-section{padding:90px 24px}
  .video-section{padding:0 24px 90px}
  .flow-pipe{grid-template-columns:1fr 1fr;gap:24px}
  .flow-pipe::before{display:none}
  .hero{padding:110px 24px 70px}
  .hero h1{letter-spacing:-2px;font-size:clamp(40px,10vw,80px)}
  .hero-desc{font-size:15px;line-height:1.65}
  .hero-ctas{flex-direction:column;align-items:flex-start;gap:12px}
  .hero-ctas .btn-lg{width:100%;justify-content:center}
  .hero-proof{gap:16px;flex-wrap:wrap}
  .numbers-grid{grid-template-columns:1fr 1fr}
  .acc-features{grid-template-columns:1fr}
  .panel,.panel-surface,.panel-blue{padding:28px}
  .footer-main{padding:70px 24px 50px}
  .footer-bottom{padding:20px 24px}
  .footer-cols{grid-template-columns:1fr 1fr}
  .footer-badges{display:none}
  h2.heading{font-size:clamp(28px,7vw,48px)}
  .mod-tabs-wrap{margin-top:40px}
  .hd-stats{grid-template-columns:repeat(3,1fr)}
  .hd-grid{grid-template-columns:1fr}
  .sec-head h2{font-size:clamp(28px,6vw,44px)}
}
@media(max-width:500px){
  nav{padding:0 16px;height:52px}
  section{padding:70px 16px}
  .hero{padding:84px 16px 60px}
  .hero h1{font-size:clamp(34px,9vw,52px);letter-spacing:-1.5px}
  .hero-desc{font-size:14px}
  .hero-ctas{gap:10px}
  .hero-ctas .btn-lg{padding:13px 20px;font-size:15px}
  .numbers-grid{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
  .cta-form{flex-direction:column}
  .cta-input{max-width:100%}
  .hero-proof{gap:12px}
  .proof-div{display:none}
  .proof-item{text-align:center}
  .flow-pipe{grid-template-columns:1fr;gap:20px}
  .footer-main{padding:50px 16px 40px}
  .footer-bottom{padding:16px}
  .num-cell{padding:28px 20px}
  .hero-dash{margin-top:40px;border-radius:12px}
  .hd-stats{grid-template-columns:repeat(2,1fr)}
  .acc-item-hd{padding:18px 16px}
  .acc-item-body{padding:0 16px 18px}
  h2.heading{font-size:clamp(26px,8vw,40px)}
  .eyebrow-pill{font-size:11px;padding:6px 14px}
}

/* ═══════════════════════ SYNE DISPLAY FONT — EXTRA HEADINGS ══════════════ */
.lb-head h4,.mp-header h3,.sec-head h2,.numbers-section h2,
.flow-title h2,.cta-content h2,h3[style*="font-size:32px"]{font-family:var(--display)}

/* ═══════════════════════ FLOW ORB — OVERFLOW PULSE RINGS ════════════════ */
.flow-pipe{overflow:visible}
.flow-step{overflow:visible;position:relative}
.flow-orb{overflow:visible;position:relative}
@keyframes orb-pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2);opacity:0}}
.fo-1::after,.fo-2::after,.fo-3::after,.fo-4::after,.fo-5::after{
  content:'';position:absolute;inset:0;border-radius:50%;animation:orb-pulse 2.8s ease-out infinite;pointer-events:none}
.fo-1::after{border:1.5px solid rgba(201,90,30,.5);animation-delay:0s}
.fo-2::after{border:1.5px solid rgba(168,114,8,.5);animation-delay:.6s}
.fo-3::after{border:1.5px solid rgba(245,158,11,.5);animation-delay:1.2s}
.fo-4::after{border:1.5px solid rgba(0,182,122,.5);animation-delay:1.8s}
.fo-5::after{border:1.5px solid rgba(239,68,68,.5);animation-delay:2.4s}

/* ═══════════════════════ NUMBERS — GHOST BG TYPOGRAPHY ══════════════════ */
.num-ghost-bg{
  position:absolute;font-family:var(--display);font-weight:900;
  font-size:min(28vw,340px);opacity:.028;color:#fff;pointer-events:none;
  top:50%;left:50%;transform:translate(-50%,-50%);
  white-space:nowrap;letter-spacing:-12px;z-index:0;line-height:1;
  user-select:none}
.numbers-wrap{position:relative;z-index:1}

/* ═══════════════════════ DEMO VIS — FLOATING POP BADGE ═════════════════ */
.demo-vis{position:relative;overflow:visible}
.vis-pop{
  position:absolute;top:-15px;left:20px;z-index:10;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:50px;
  font-family:var(--display);font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  box-shadow:0 4px 20px rgba(0,0,0,.15);white-space:nowrap}
.vis-pop-blue{background:var(--blue);color:#fff;box-shadow:0 4px 20px rgba(201,90,30,.4)}
.vis-pop-green{background:var(--green);color:#fff;box-shadow:0 4px 20px rgba(0,182,122,.4)}
.vis-pop-purple{background:var(--purple);color:#fff;box-shadow:0 4px 20px rgba(168,114,8,.4)}
.vis-pop-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.7);animation:blink 1.5s infinite}

/* ═══════════════════════ NUMBERS SECTION ════════════════════════════════ */
.num-val{font-family:var(--display)}
.proof-val{font-family:var(--display)}

/* ═══════════════════════ LOGO MARK REFINED ══════════════════════════════ */
.logo{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.logo-mark{position:relative}
.footer-logo{font-family:var(--display);letter-spacing:2px;text-transform:uppercase;font-size:14px}

/* ═══════════════════════ SECTION LABEL CENTERED ════════════════════════ */
.sec-head.center .label,.flow-title .label,.numbers-head .label,.center .label{
  justify-content:center}

/* ═══════════════════════ DEMO VIS — NO EDGE BLEED ══════════════════════ */
/* Out-of-box effect via transparent card header instead */

/* ═══════════════════════ SECTION FLOW — REDUCE SEPARATION ══════════════ */
/* Remove alternating bg colors so sections merge visually */
.demo-section{background:#fff;padding:80px 64px}
.demo-grid{margin-bottom:100px}
.demo-grid:last-child{margin-bottom:0}
/* Top-ruled section separators instead of bg changes */
.accordion-section{background:#fff}
section[style*="background:var(--surface)"]{background:#fff !important}

/* ═══════════════════════ NUMBERS — REVERT TO CLEAN FLAT ════════════════ */
.numbers-section{padding:120px 64px;background:var(--surface);position:relative;overflow:hidden}
.numbers-section::before{content:'';position:absolute;top:0;right:0;width:600px;height:100%;background:radial-gradient(ellipse at right,rgba(255,255,255,.06) 0%,transparent 60%)}
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:transparent;border-radius:20px;overflow:hidden}
.num-cell{background:transparent;padding:40px 32px;text-align:center;transition:background .3s}
.num-cell:hover{background:rgba(201,90,30,.06)}
.num-val{font-size:clamp(44px,5vw,60px);font-weight:900;letter-spacing:-2px;color:var(--blue);display:block;line-height:1;margin-bottom:10px}

/* ═══════════════════════ CTA — REVERT TO ORIGINAL ══════════════════════ */
.cta-section{padding:120px 64px;background:linear-gradient(135deg,#c95a1e 0%,#a87208 100%);position:relative;overflow:hidden}
.cta-section::before{content:none}
.cta-section::after{content:none}
.cta-content{max-width:680px;margin:0 auto;text-align:center;position:relative;z-index:1}

/* ═══════════════════════ ICON CONTAINERS — NO BACKGROUND ═══════════════ */
/* Remove colored box backgrounds from feature/gamification icons */
.mp-icon{background:transparent;color:var(--blue)}
.sec-icon{background:transparent;color:var(--blue)}

/* ═══════════════════════ REMOVE GAMIFICATION ITEM BG ═══════════════════ */
/* Inline gamification items have colored bg squares — override to none */
.gamif-item-icon{background:transparent !important;box-shadow:none !important}

/* ═══════════════════════ MOD TAB — NO ICON BG ══════════════════════════ */
.mod-tab-icon{background:transparent;color:var(--blue)}
.mod-tab.active .mod-tab-icon{background:transparent;color:#fff}

/* ═══════════════════════ FLOW SECTION — KEEP DARK ══════════════════════ */
.flow-section::after{content:none}

/* ═══════════════════════ DARK-TO-LIGHT REMOVE ══════════════════════════ */
.dark-to-light{display:none}

/* ═══════════════════════ BENTO GRID FEATURES ═══════════════════════════ */
.bento-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:16px;margin-top:64px}
.bento-card{background:#fff;border-radius:20px;padding:28px;box-shadow:0 2px 4px rgba(0,0,0,.04),0 12px 36px rgba(0,0,0,.07);position:relative;overflow:hidden;transition:transform .3s var(--ease-out),box-shadow .3s}
.bento-card:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(0,0,0,.06),0 20px 56px rgba(0,0,0,.1)}
.bento-card.bento-wide{grid-column:span 2}
.bento-card.bento-tall{grid-row:span 2}
.bento-card.bento-dark{background:var(--surface)}
.bento-accent{position:absolute;top:0;left:0;right:0;height:2px;border-radius:20px 20px 0 0}
.bento-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0}
.bento-card h4{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.3px;color:var(--ink);margin-bottom:8px}
.bento-card p{font-size:13px;color:var(--muted);line-height:1.6}
.bento-card.bento-dark h4{color:var(--ink)}
.bento-card.bento-dark p{color:var(--muted)}
/* Ghost number behind bento card */
.bento-ghost{position:absolute;bottom:-10px;right:-10px;font-family:var(--display);font-size:80px;font-weight:900;opacity:.04;line-height:1;pointer-events:none;color:var(--blue);user-select:none}

/* ═══════════════════════ SECTION DIVIDER GRADIENT LINE ═════════════════ */
.section-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(201,90,30,.2),rgba(168,114,8,.2),transparent);max-width:1200px;margin:0 auto}

/* ═══════════════════════ NUMBERS — MORE DRAMATIC ═══════════════════════ */
.numbers-section{padding:120px 64px;background:var(--surface);position:relative;overflow:hidden}
.numbers-section::before{content:'';position:absolute;top:0;right:0;width:700px;height:100%;background:radial-gradient(ellipse at right,rgba(168,114,8,.15) 0%,transparent 60%)}
.num-cell{background:transparent;border:none;padding:48px 40px;text-align:center;transition:background .3s;position:relative}
.num-cell:hover{background:rgba(201,90,30,.05)}
.num-val{font-size:clamp(52px,6vw,72px);font-weight:900;letter-spacing:-3px;color:var(--blue);display:block;line-height:1;margin-bottom:10px}
.numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:transparent;border-radius:24px;overflow:hidden;backdrop-filter:blur(10px)}

/* ═══════════════════════ CTA — GRADIENT BLOB BG ════════════════════════ */
.cta-section{padding:120px 64px;position:relative;overflow:hidden;background:linear-gradient(135deg,#c95a1e 0%,#a87208 100%)}
.cta-section::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;background:radial-gradient(ellipse,rgba(255,255,255,.12) 0%,transparent 70%);pointer-events:none}
.cta-section::after{content:'';position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px 256px;pointer-events:none;z-index:0}
.cta-content{position:relative;z-index:2}

/* ═══════════════════════ FLOW SECTION — GRAIN ══════════════════════════ */
.flow-section{position:relative}
.flow-section::after{content:'';position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px 256px;pointer-events:none;z-index:0}

/* ═══════════════════════ HERO → BRAIN TRANSITION ═══════════════════════ */
.dark-to-light{background:linear-gradient(180deg,#040610 0%,#ffffff 100%);height:80px;pointer-events:none}

/* ═══════════════════════ KILL ALL ELEVATION SHADOWS ════════════════════ */
.bento-card{box-shadow:none}
.bento-card:hover{box-shadow:none}
.broker-card{box-shadow:none}
.video-frame{box-shadow:none}
.tech-chip{box-shadow:none}
.tech-chip:hover{box-shadow:none}
.mod-tab.active{box-shadow:none}

/* ═══════════════════════ PIPELINE — NORMAL COLORS ══════════════════════ */
.fo-3{background:rgba(99,102,241,.12)}
.fo-4{background:rgba(100,116,139,.12)}
.fo-5{background:rgba(139,92,246,.12)}
.t3{background:rgba(99,102,241,.15);color:#a5b4fc}
.t4{background:rgba(100,116,139,.15);color:#94a3b8}
.t5{background:rgba(139,92,246,.15);color:#c4b5fd}

/* ═══════════════════════ MOD TABS — NO BORDER ══════════════════════════ */
.mod-tab{border:none;outline:none}
.mod-tab:focus{outline:none}

/* ═══════════════════════ DEMO CARD — OUT OF BOX ════════════════════════ */
/* Card header blends with page bg; only the data body is "contained" */
.demo-vis .card{outline:none;border:none !important;background:transparent;border-radius:0;overflow:visible}
.demo-vis .card-hdr{background:transparent;border-bottom:none}
.demo-vis .card-body{background:#fff;border-radius:16px;overflow:hidden}
/* Remove vis-pop shadow */
.vis-pop,.vis-pop-blue,.vis-pop-green,.vis-pop-purple{box-shadow:none}
/* Fix cut-off: body already has overflow-x:hidden, so no need for section clip */
.demo-section{overflow:visible !important}

/* FLOW ORBS — CLEAN, NO BG, NO BOUNCE RING */
.fo-1,.fo-2,.fo-3,.fo-4,.fo-5{background:none !important}
.flow-orb{background:none !important;width:60px;height:60px}
.flow-orb::before{display:none !important}
.flow-step:hover .flow-orb{transform:translateY(-3px)}
.flow-pipe::before{background:linear-gradient(90deg,transparent,rgba(201,90,30,.12),rgba(201,90,30,.2),rgba(168,114,8,.12),transparent)}

/* ═══════════ LIGHT MODE EVERYWHERE — REMOVE ALL DARK SECTIONS ═════════ */

/* Flow section → light */
.flow-section{background:var(--surface) !important}
.flow-section::before,.flow-section::after{display:none !important}
.flow-title h2{color:var(--ink) !important}
.flow-title .label{color:var(--faint) !important}
.flow-step h4{color:var(--ink) !important}
.flow-step p{color:var(--muted) !important}
/* Flow icon SVG strokes: white→blue for light bg */
.flow-orb svg path{stroke:rgba(201,90,30,.8) !important}
.flow-orb svg line{stroke:rgba(201,90,30,.65) !important}
.flow-orb svg polyline{stroke:rgba(201,90,30,.85) !important}
.flow-orb svg circle{stroke:rgba(201,90,30,.75) !important;fill:rgba(201,90,30,.85) !important}
.flow-orb svg circle[fill="none"]{fill:none !important}
.flow-orb svg polygon{stroke:rgba(201,90,30,.75) !important;fill:rgba(201,90,30,.06) !important}

/* Numbers section → light */
.numbers-section{background:var(--surface) !important;padding:120px 64px !important}
.numbers-section::before{display:none !important}
.numbers-grid{background:transparent !important;border-radius:20px !important}
.num-cell{background:var(--white) !important}
.num-cell:hover{background:var(--blue-dim) !important}
.num-val{color:var(--blue) !important}
[class*="num-lbl"]{color:var(--muted) !important}
.numbers-section h2,.numbers-section .label{color:var(--ink) !important}

/* CTA section → light */
.cta-section{background:var(--surface) !important}
.cta-section::before,.cta-section::after{display:none !important}
.cta-bg canvas{opacity:0.06 !important}
.cta-content h2,.cta-content h3{color:var(--ink) !important}
.cta-content p{color:var(--muted) !important}
.cta-note{color:var(--faint) !important}
.cta-input{background:#fff !important;border-color:var(--rule) !important;color:var(--ink) !important}
.cta-input::placeholder{color:var(--faint) !important}
.cta-input:focus{border-color:var(--blue) !important}
.cta-content a[href*="meetbridge"]{color:var(--muted) !important;border-color:var(--rule) !important}

/* Footer → light */
footer{background:#f4f5f7 !important;color:var(--muted) !important}
.footer-main{border-bottom-color:var(--rule) !important}
.footer-logo{color:var(--ink) !important}
.footer-tagline{color:var(--muted) !important}
.footer-col h5{color:var(--faint) !important}
.footer-col a{color:var(--muted) !important}
.footer-col a:hover{color:var(--ink) !important}
.footer-domain{color:var(--faint) !important}
.footer-bottom{color:var(--faint) !important}
.footer-bottom a{color:var(--faint) !important}
.footer-social a{background:var(--surface) !important;border-color:var(--rule) !important;color:var(--muted) !important}
.footer-newsletter p{color:var(--muted) !important}
.footer-nl-input{background:#fff !important;border-color:var(--rule) !important;color:var(--ink) !important}
.footer-nl-input::placeholder{color:var(--faint) !important}
.footer-bottom a:hover{color:var(--ink) !important}

/* Hero dashboard — already light in source CSS, no overrides needed */

/* Mega nav feature card → light */
.mega-col-feature{background:var(--surface) !important}
.mega-feature-card>div[style*="color:#fff"]{color:var(--ink) !important}
.mega-feature-card>div[style*="rgba(255,255,255"]{color:var(--muted) !important}
.mega-feature-card [style*="color:#fbbf7a"]{color:var(--blue) !important}
/* Override the mono label in mega feature */
.mega-col-feature [style*="rgba(255,255,255,.4)"]{color:var(--faint) !important}

/* Leaderboard head → light */
.lb-head{background:var(--blue) !important}

/* Bento dark → light */
.bento-card.bento-dark{background:var(--surface) !important}
.bento-card.bento-dark h4{color:var(--ink) !important}
.bento-card.bento-dark p{color:var(--muted) !important}

/* Panel dark → light */
.panel-dark{background:var(--surface) !important}
.panel-dark *{color:var(--ink) !important}

/* Video frame → light */
.video-frame{background:var(--surface) !important}

/* HERO DASHBOARD MOCKUP — LIGHT */
.hero-dash{width:100%;max-width:960px;margin:60px auto 0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 6px rgba(0,0,0,.04),0 20px 60px rgba(201,90,30,.06),0 0 0 1px rgba(201,90,30,.06);position:relative;z-index:2}
.hd-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--rule)}
.hd-body{padding:20px;background:#fff}
.hd-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);border-radius:10px;overflow:hidden;margin-bottom:20px}
.hd-stat{background:#fff;padding:14px 16px;text-align:center}
.hd-val{display:block;font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-1px;color:var(--ink);line-height:1}
.hd-lbl{display:block;font-size:9px;color:var(--faint);letter-spacing:1px;text-transform:uppercase;margin-top:4px;font-family:var(--mono)}
.hd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hd-table-wrap{background:var(--surface);border-radius:10px;padding:14px}
.hd-table{width:100%;border-collapse:collapse;font-size:11px}
.hd-table th{font-family:var(--mono);font-size:8px;letter-spacing:1.5px;color:var(--faint);text-transform:uppercase;text-align:left;padding:0 8px 8px 0;font-weight:400}
.hd-table td{color:var(--muted);padding:7px 8px 7px 0;border-top:1px solid var(--rule)}
.hd-mini-right{background:var(--surface);border-radius:10px;padding:14px}
.hd-bars{display:flex;gap:3px;height:44px;align-items:flex-end}
.hd-bar-item{flex:1;background:var(--blue-dim);border-radius:2px 2px 0 0;transition:height .3s}
.hd-bar-item.active{background:var(--blue)}
.hd-agents{display:flex;flex-direction:column;gap:6px}
.hd-agent{display:flex;align-items:center;gap:8px}
.hd-agent>span:first-child{font-family:var(--mono);font-size:8px;color:var(--faint);width:18px;text-align:right}
.hd-agent-bar{height:6px;border-radius:3px;flex:1}

/* MEGA MENU */
.mega-nav{align-items:center;gap:4px}
.mega-item{position:relative}
.mega-trigger{background:none;border:none;outline:none;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--muted);padding:8px 12px;border-radius:8px;transition:color .2s,background .2s}
.mega-trigger:hover,.mega-item.open .mega-trigger{color:var(--ink);background:var(--surface)}
.mega-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-8px);background:#fff;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.1);width:680px;padding:24px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:200;pointer-events:none}
.mega-item.open .mega-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.mega-cols{display:grid;grid-template-columns:1fr 1fr 220px;gap:24px}
.mega-col-hd{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:2px;color:var(--faint);text-transform:uppercase;margin-bottom:12px}
.mega-link{display:flex;align-items:flex-start;gap:10px;padding:8px;border-radius:10px;text-decoration:none;transition:background .15s;margin-bottom:4px}
.mega-link:hover{background:var(--surface)}
.mega-link-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mega-link-title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.mega-link-sub{font-size:11px;color:var(--muted);margin-top:1px;line-height:1.4}
.mega-col-feature{background:linear-gradient(145deg,#c95a1e,#7a3a0a);border-radius:12px;padding:20px}
.mega-feature-card{}
/* Modules panel */
.mega-panel-modules{width:480px}
.mega-modules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mega-mod{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:10px;text-decoration:none;transition:background .15s}
.mega-mod:hover{background:var(--surface)}
.mega-mod-num{font-family:var(--mono);font-size:9px;color:var(--blue);font-weight:600;letter-spacing:1px}
.mega-mod-name{font-size:13px;font-weight:600;color:var(--ink)}
/* Nav link style for non-mega items */
.mega-nav>a{font-size:13px;font-weight:500;color:var(--muted);padding:8px 12px;border-radius:8px;text-decoration:none;transition:color .2s,background .2s}
.mega-nav>a:hover{color:var(--ink);background:var(--surface)}

/* ═══════════════════════════ VS TABLE ══════════════════════════════════════ */
.vs-section{padding:140px 64px;background:#fff}
.vs-wrap{max-width:820px;margin:0 auto;overflow-x:auto}
.vs-table{width:100%;border-collapse:collapse}
.vs-table thead tr{border-bottom:2px solid var(--rule)}
.vs-table thead th{padding:16px 20px;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--faint)}
.vs-feat-col{text-align:left}
.vs-maestro-hd{text-align:center;color:var(--blue) !important;min-width:130px}
.vs-other-hd{text-align:center;color:#ef4444 !important;min-width:130px}
.vs-table tbody tr{border-bottom:1px solid var(--rule);transition:background .15s}
.vs-table tbody tr:hover{background:var(--blue-dim)}
.vs-table tbody tr:nth-child(odd){background:var(--surface)}
.vs-table tbody tr:nth-child(odd):hover{background:var(--blue-dim)}
.vs-table tbody td{padding:15px 20px;font-size:14px;color:var(--ink);font-weight:500;line-height:1.4}
.vs-table tbody td.chk,.vs-table tbody td.x{text-align:center;font-size:22px;font-weight:900}
.vs-table tbody td.chk{color:var(--green)}
.vs-table tbody td.x{color:#ef4444}

/* ═══════════════════════════ PRICING ════════════════════════════════════ */
.pricing-section{padding:140px 64px;background:var(--surface)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1040px;margin:0 auto}
.price-card{background:#fff;border-radius:24px;padding:40px 32px;position:relative;display:flex;flex-direction:column}
.price-card-featured{background:var(--blue)}
.price-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;padding:5px 16px;border-radius:50px;white-space:nowrap;text-transform:uppercase}
.price-icon{font-size:32px;margin-bottom:20px;line-height:1}
.price-card h3{font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--ink);margin-bottom:6px}
.price-card-featured h3{color:#fff}
.price-tagline{font-size:13px;color:var(--muted);margin-bottom:24px;line-height:1.6}
.price-card-featured .price-tagline{color:rgba(255,255,255,.7)}
.price-val{font-size:52px;font-weight:900;letter-spacing:-3px;color:var(--ink);line-height:1;margin-bottom:6px;font-family:var(--mono)}
.price-val-unit{font-size:15px;font-weight:400;letter-spacing:0;color:var(--muted);font-family:var(--font);margin-left:2px}
.price-card-featured .price-val{color:#fff}
.price-card-featured .price-val-unit{color:rgba(255,255,255,.6)}
.price-note{font-size:12px;color:var(--faint);margin-bottom:28px}
.price-card-featured .price-note{color:rgba(255,255,255,.45)}
.price-divider{height:1px;background:var(--rule);margin-bottom:24px}
.price-card-featured .price-divider{background:rgba(255,255,255,.15)}
.price-feats{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.price-feats li{font-size:13px;color:var(--muted);display:flex;align-items:flex-start;gap:9px;line-height:1.4}
.price-card-featured .price-feats li{color:rgba(255,255,255,.85)}
.price-feats li::before{content:'✓';width:17px;height:17px;border-radius:50%;background:var(--green);color:#fff;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.price-card-featured .price-feats li::before{background:rgba(255,255,255,.25)}
.pricing-footer-note{text-align:center;margin-top:48px;font-size:14px;color:var(--faint)}

/* ═══════════════════════ MOBILE FINAL OVERRIDES (must be last) ═══════════ */
@media(max-width:768px){
  /* History timeline — collapse 160px date column, stack vertically */
  #history [style*="160px"]{grid-template-columns:1fr !important;gap:4px !important;margin-bottom:32px !important}
  #history [style*="160px"]>div:first-child{text-align:left !important}
  #history [style*="160px"]>div:nth-child(2){display:none !important}
  /* Clip sections so inline-grid children can't blow out viewport */
  section,.demo-section{overflow-x:clip !important}
  .demo-section{padding:80px 24px !important}
  .numbers-section{padding:90px 24px !important}
  .flow-section{padding-left:24px !important;padding-right:24px !important}
  /* Collapse all inline 2-col grids inside these sections */
  #gamification>.wrap>div,
  #how-it-thinks .wrap>div[style*="grid"],
  #ecosystem .wrap>div[style*="grid"],
  #guide .wrap>div[style*="grid"]{grid-template-columns:1fr !important;gap:40px !important}
  .broker-row{grid-template-columns:1fr !important}
  .lead-table th:nth-child(2),.lead-table td:nth-child(2){display:none}
  /* New sections */
  .vs-section{padding:80px 20px}
  .pricing-section{padding:80px 20px}
  .pricing-grid{grid-template-columns:1fr}
  .vs-table thead th,.vs-table tbody td{padding:12px 10px;font-size:13px}
  /* iPhone + pilot visual — stack on mobile */
  #how-it-thinks .wrap>div>div[style*="260px"]{width:200px !important;margin:0 auto}
}
@media(max-width:500px){
  section,.demo-section{overflow-x:clip !important}
  .demo-section{padding:60px 16px !important}
  .numbers-section{padding:70px 16px !important}
  #gamification>.wrap>div{gap:32px !important}
  .broker-row{gap:12px !important}
  .numbers-grid{grid-template-columns:1fr 1fr !important}
}

/* ═══════════════════════════════ PAGE IDENTITY SYSTEM ═══════════════════════════════ */
/* Each page gets a colored top stripe + unique hero tint so users instantly know where they are */

/* Top accent stripe */
body::before{content:'';display:block;height:3px;position:fixed;top:0;left:0;right:0;z-index:9999}

/* index.html — Cowboy orange/gold */
body.page-home::before{background:linear-gradient(90deg,#c95a1e,#a87208)}
body.page-home .hero{background:linear-gradient(160deg,#fdf2eb 0%,#fdf9f4 45%,#f5ede0 100%)}

/* ai-brain.html — Deep gold/amber */
body.page-ai-brain::before{background:linear-gradient(90deg,#a87208,#c95a1e)}
body.page-ai-brain .hero{background:linear-gradient(160deg,#fdf9f0 0%,#fdf9f4 50%,#f5ede0 100%)}
body.page-ai-brain nav{border-bottom:1px solid rgba(168,114,8,.12)}

/* modules.html — Warm sienna/orange */
body.page-modules::before{background:linear-gradient(90deg,#c95a1e,#8b3a0f)}
body.page-modules .hero{background:linear-gradient(160deg,#fdf2eb 0%,#fdf9f4 50%,#f5ede0 100%)}
body.page-modules nav{border-bottom:1px solid rgba(201,90,30,.12)}

/* why-cowboy.html — Gold/sienna */
body.page-why::before{background:linear-gradient(90deg,#a87208,#c95a1e)}
body.page-why .hero{background:linear-gradient(160deg,#fdf9f0 0%,#fdf9f4 50%,#fdf2eb 100%)}
body.page-why nav{border-bottom:1px solid rgba(168,114,8,.15)}

/* pricing.html — Gold/green accent */
body.page-pricing::before{background:linear-gradient(90deg,#a87208,#1a7a40)}
body.page-pricing .hero{background:linear-gradient(160deg,#fdf9f0 0%,#fdf9f4 50%,#f0fdf4 100%)}
body.page-pricing nav{border-bottom:1px solid rgba(168,114,8,.12)}

/* security.html — Sienna/dark */
body.page-security::before{background:linear-gradient(90deg,#8b3a0f,#c95a1e)}
body.page-security .hero{background:linear-gradient(160deg,#fdf2eb 0%,#fdf9f4 50%,#f5ede0 100%)}
body.page-security nav{border-bottom:1px solid rgba(139,58,15,.12)}

/* about.html — Warm gold */
body.page-about::before{background:linear-gradient(90deg,#a87208,#c95a1e)}
body.page-about .hero{background:linear-gradient(160deg,#fdf9f0 0%,#fdf9f4 50%,#f5ede0 100%)}
body.page-about nav{border-bottom:1px solid rgba(168,114,8,.15)}

/* Push nav down so stripe doesn't overlap it */
body::before ~ nav,nav{margin-top:0}

/* ═══════════════════════════════ NAV CARDS SECTION ════════════════════════ */
.nav-cards-section{padding:80px 64px 120px;background:#fff}
.nav-cards-wrap{max-width:1160px;margin:0 auto}
.nav-cards-head{text-align:center;margin-bottom:64px}

/* PAGE CARDS — 6 large destination cards */
.page-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:72px}
.page-card{background:#fff;border-radius:20px;padding:32px 28px 36px;text-decoration:none;display:flex;flex-direction:column;gap:12px;position:relative;transition:all .25s cubic-bezier(.16,1,.3,1);overflow:hidden}
.page-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--pc-line,var(--blue));transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.page-card:hover{transform:translateY(-5px);box-shadow:0 20px 60px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.06);border-color:transparent}
.page-card:hover::before{transform:scaleX(1)}
.page-card-icon{display:flex;align-items:center;margin-bottom:6px}
.page-card-title{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.5px;line-height:1.2}
.page-card-sub{font-size:13px;color:var(--muted);line-height:1.65;flex:1}
.page-card-link{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.3px;margin-top:8px;display:flex;align-items:center;gap:5px;transition:gap .2s}
.page-card:hover .page-card-link{gap:9px}

/* MOD CARDS — 14 module tiles with ghost number watermark */
.mod-dir-head{display:flex;align-items:baseline;gap:16px;margin-bottom:28px}
.mod-dir-head h3{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--faint)}
.mod-dir-head span{width:1px;flex:1;height:1px;background:var(--rule);display:block}
.mod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.mod-card{background:var(--surface);border-radius:14px;padding:20px 16px 18px;text-decoration:none;display:flex;flex-direction:column;gap:8px;transition:all .2s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}
.mod-card::after{content:attr(data-num);position:absolute;right:-2px;bottom:-10px;font-size:64px;font-weight:900;color:var(--mc,rgba(0,0,0,.045));font-family:var(--display);letter-spacing:-4px;line-height:1;pointer-events:none;user-select:none}
.mod-card:hover{background:#fff;border-color:var(--mc,var(--rule));box-shadow:0 8px 32px rgba(201,90,30,.08);transform:translateY(-3px)}
.mod-card-icon{display:flex;align-items:center}
.mod-card-name{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.2px;line-height:1.2}
.mod-card-tag{font-size:11px;color:var(--faint);margin-top:2px}

/* Responsive */
@media(max-width:1100px){.mod-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.page-cards-grid{grid-template-columns:1fr 1fr}.mod-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.page-cards-grid{grid-template-columns:1fr}.mod-grid{grid-template-columns:1fr 1fr}.nav-cards-section{padding:60px 20px 90px}}

/* ═══════════════════════════════ SOCIAL PROOF ═══════════════════════════════ */
.social-proof-section{padding:100px 64px;background:var(--white);border-bottom:1px solid var(--rule)}
.sp-header{text-align:center;margin-bottom:64px}
.sp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--blue);text-transform:uppercase;margin-bottom:18px}
.sp-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulse 2s ease-in-out infinite}
.sp-heading{font-size:clamp(28px,4vw,44px);max-width:600px;margin:0 auto 16px}
.sp-sub{color:var(--muted);font-size:17px;max-width:480px;margin:0 auto}

/* Stats bar */
.sp-stats-bar{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:72px;background:var(--surface);border-radius:16px;padding:0;overflow:hidden}
.sp-stat{flex:1;padding:32px 28px;text-align:center}
.sp-stat-div{width:1px;height:64px;background:var(--rule);flex-shrink:0}
.sp-stat-num{font-family:var(--display);font-size:clamp(26px,3vw,38px);font-weight:800;color:var(--ink);letter-spacing:-1.5px;line-height:1;margin-bottom:8px}
.sp-stat-label{font-size:13px;color:var(--muted);line-height:1.4}

/* Testimonial cards */
.sp-testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sp-card{background:var(--surface);border-radius:16px;padding:36px 32px;position:relative;transition:box-shadow .25s}
.sp-card:hover{border-color:rgba(201,90,30,.25);box-shadow:0 8px 32px rgba(201,90,30,.06)}
.sp-quote-mark{font-family:Georgia,serif;font-size:64px;color:var(--blue);opacity:.2;line-height:.6;margin-bottom:16px;display:block}
.sp-quote{font-size:15px;line-height:1.7;color:var(--ink2);margin-bottom:28px}
.sp-author{display:flex;align-items:center;gap:14px}
.sp-author-avatar{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:.03em}
.sp-author-name{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.sp-author-role{font-size:12px;color:var(--muted)}

@media(max-width:900px){.sp-testimonials{grid-template-columns:1fr 1fr}.sp-stats-bar{flex-wrap:wrap}.sp-stat-div{display:none}.sp-stat{flex:0 0 45%}}
@media(max-width:600px){.social-proof-section{padding:70px 20px}.sp-testimonials{grid-template-columns:1fr}.sp-stat{flex:0 0 100%}}

/* ═══════════════════════════════ HOMEPAGE CUSTOM SECTIONS — MOBILE ═══════════════════════════════ */
/* Race / speed section */
@media(max-width:768px){
  .race-section,.math-section,.tex-coach-section,.viopa-section,.lb-section,.how-section,.tl-section,.testi-section,.security-section-hp,.faq-section,.cta-strip-hp{padding-left:20px !important;padding-right:20px !important}
  .race-bars{gap:14px}
  .race-bar-row{gap:10px}
  .race-label{min-width:90px;font-size:13px}
  .race-track{height:28px}
  .race-val{font-size:13px;min-width:40px}
}
/* Math / before-after */
@media(max-width:900px){
  .math-grid,.before-after-grid{grid-template-columns:1fr}
  .math-card{padding:28px 24px}
}
/* Tex coach panel */
@media(max-width:768px){
  .tex-panel{flex-direction:column;gap:20px}
  .tex-panel-face{margin:0 auto}
  .coach-screen{height:260px}
}
/* VIOPA grid */
@media(max-width:900px){
  .viopa-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:500px){
  .viopa-grid{grid-template-columns:1fr}
}
/* Modules grid */
@media(max-width:768px){
  .mods-hp-grid{grid-template-columns:repeat(3,1fr) !important;gap:10px}
}
@media(max-width:500px){
  .mods-hp-grid{grid-template-columns:1fr 1fr !important}
}
/* Leaderboard */
@media(max-width:600px){
  .lb-row{grid-template-columns:32px 1fr auto !important}
  .lb-col-calls,.lb-col-conv{display:none}
}
/* How it works */
@media(max-width:768px){
  .how-steps{grid-template-columns:1fr 1fr !important;gap:20px}
}
@media(max-width:500px){
  .how-steps{grid-template-columns:1fr !important}
}
/* Timeline */
@media(max-width:768px){
  .tl-inner{padding-left:32px}
  .tl-item{margin-bottom:36px}
  .tl-dot{left:-32px}
  .tl-year{font-size:12px}
}
/* Testimonials */
@media(max-width:900px){
  .testi-grid{grid-template-columns:1fr 1fr !important}
}
@media(max-width:600px){
  .testi-grid{grid-template-columns:1fr !important}
}
/* Security */
@media(max-width:900px){
  .sec-hp-grid{grid-template-columns:1fr 1fr 1fr !important}
}
@media(max-width:600px){
  .sec-hp-grid{grid-template-columns:1fr 1fr !important}
}
@media(max-width:400px){
  .sec-hp-grid{grid-template-columns:1fr !important}
}
/* Pricing levers */
@media(max-width:768px){
  .price-levers{flex-direction:column;gap:20px}
  .price-lever{width:100% !important}
}
/* FAQ */
@media(max-width:600px){
  .faq-grid{grid-template-columns:1fr !important}
}
/* Hero homepage */
@media(max-width:768px){
  .hero-homepage{padding:100px 20px 60px}
  .hero-badge{font-size:11px;padding:5px 12px}
  .tex-canvas-wrap{width:90px;height:90px}
  .tex-canvas-wrap canvas{width:90px !important;height:90px !important}
}
@media(max-width:500px){
  .hero-homepage{padding:80px 16px 50px}
}
/* Nav cards / page cards — already covered above; ensure social proof coverage */
@media(max-width:768px){
  .nav-cards-section{padding:60px 20px 80px}
  .page-cards-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:500px){
  .page-cards-grid{grid-template-columns:1fr}
  .mod-grid{grid-template-columns:1fr 1fr}
}

/* ── BREADCRUMB NAV OFFSET (fixed nav is 64px tall) ── */
.page-header-strip{margin-top:64px}

/* ════════════════════════════════════════════════════════════════════════════
   RTL / HEBREW SUPPORT  (class .rtl added to <body> by i18n.js)
   ════════════════════════════════════════════════════════════════════════════ */

/* Global direction */
body.rtl{direction:rtl;text-align:right}

/* Nav layout */
.rtl nav{direction:rtl}
.rtl #navDesktop{flex-direction:row-reverse}
.rtl #navActions{flex-direction:row-reverse;margin-left:0;margin-right:auto}
.rtl .nav-links{direction:rtl}
.rtl .mob-drawer{left:auto;right:0;transform:translateX(100%)}
.rtl .mob-drawer.open{transform:translateX(0)}
.rtl .mob-drawer-head{flex-direction:row-reverse}
.rtl .mob-drawer-links{text-align:right}

/* mega nav */
.rtl .mega-panel{left:auto;right:0}
.rtl .mega-cols{direction:rtl}
.rtl .mega-link{flex-direction:row-reverse;text-align:right}
.rtl .mega-link-icon{margin-left:12px;margin-right:0}

/* Footer */
.rtl .footer-main{direction:rtl}
.rtl .footer-col{text-align:right}
.rtl .footer-bottom{flex-direction:row-reverse}
.rtl .foot-inner{direction:rtl}
.rtl .foot-col{text-align:right}
.rtl .foot-bottom{direction:rtl}

/* Hero */
.rtl .hero,.rtl .hero-inner,.rtl .hero-content{direction:rtl;text-align:right}
.rtl .hero-ctas,.rtl .hero-btns{flex-direction:row-reverse;justify-content:flex-end}

/* Sections */
.rtl .section,.rtl .inner,.rtl .sec-head,.rtl .sec-body{direction:rtl;text-align:right}
.rtl .sec-sub,.rtl .eyebrow{text-align:right}
.rtl .feat{flex-direction:row-reverse;text-align:right}
.rtl .feat-text{text-align:right}
.rtl .timeline::before{left:auto;right:18px}
.rtl .tl-item{flex-direction:row-reverse}
.rtl .tl-content{padding-right:20px;padding-left:0}

/* Cards */
.rtl .mod-card,.rtl .viopa-card,.rtl .how-step,.rtl .speed-card{text-align:right}
.rtl .viopa-card{flex-direction:row-reverse}
.rtl .lb-row{direction:rtl}
.rtl .lb-agent{flex-direction:row-reverse}
.rtl .lb-stat{text-align:left}
.rtl .lb-badge{margin-left:0;margin-right:auto}
.rtl .price-feats li{flex-direction:row-reverse}
.rtl .price-feats li::before{margin-left:8px;margin-right:0}
.rtl .testi-author{flex-direction:row-reverse}
.rtl .testi-badge{margin-left:0;margin-right:auto}
.rtl .faq-q{flex-direction:row-reverse}
.rtl .faq-q::after{margin-left:0;margin-right:auto}
.rtl .drop-item,.rtl .mega-mod{direction:rtl}
.rtl .race-row{direction:rtl}
.rtl .race-lbl{text-align:left}
.rtl .how-grid{direction:rtl}
.rtl .math-card{direction:rtl;text-align:right}
.rtl .math-row{flex-direction:row-reverse}
.rtl .case-card{direction:rtl}
.rtl .coach-layout{direction:rtl}
.rtl .coach-feats{text-align:right}
.rtl .panel-head{flex-direction:row-reverse}
.rtl .panel-live{margin-left:0;margin-right:auto}
.rtl .sec-cards{direction:rtl}
.rtl .sec-card{text-align:right}
.rtl .cta-strip{direction:rtl}
.rtl .cta-pair{flex-direction:row-reverse}
.rtl .marquee-wrap,.rtl .mq-track{direction:ltr} /* keep marquee LTR */

/* Language toggle button */
.lang-toggle-btn{
  font-size:12px;font-weight:700;letter-spacing:.5px;
  color:var(--muted,#7a5c38);
  background:transparent;
  border:1px solid rgba(168,114,8,.25);
  border-radius:5px;
  padding:5px 10px;
  cursor:pointer;
  transition:border-color .2s,color .2s;
  font-family:inherit;
  white-space:nowrap;
  display:inline-flex;align-items:center;
}
.lang-toggle-btn:hover{border-color:var(--gold,#a87208);color:var(--gold,#a87208)}
/* When placed inside nav-end (index.html inline nav) */
.nav-end .lang-toggle-btn{margin-right:2px}
/* When placed inside navActions (maestro.css pages) */
#navActions .lang-toggle-btn{}