/* Media Pandit — site styles (homepage + AI Agents & Automation catalogue) */
:root{
  --bg:#FFFFFF; --soft:#F5F8FF; --soft-2:#EDF2FF; --tint:#F9FAFF;
  --navy:#0A1430; --navy-2:#111C4D;
  --blue:#2F6BFF; --violet:#7C5CFF; --cyan:#22CBDD;
  --grad:linear-gradient(100deg,#2F6BFF 0%,#7C5CFF 52%,#22CBDD 100%);
  --grad-btn:linear-gradient(100deg,#2F6BFF,#6D5BFF);
  --amber:#FFB020; --amber-2:#FF8A3D;
  --ink:#0B1220; --ink-2:#233047; --muted:#5A6781; --faint:#8A94A8;
  --line:#E4EAF6; --line-2:#D4DDF0;
  --green:#12B76A; --rose:#F04E6A;
  --shadow:0 26px 60px -26px rgba(20,45,110,0.28);
  --shadow-sm:0 12px 30px -16px rgba(20,45,110,0.25);
  --disp:'Sora',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1180px; --r:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{margin:0}
body.mp-page{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
.mp-page a{color:inherit; text-decoration:none}
.mp-page h1,.mp-page h2,.mp-page h3{font-family:var(--disp); margin:0; line-height:1.08; letter-spacing:-0.025em; text-wrap:balance; font-weight:800}
.mp-page p{margin:0}
.mp-page img,.mp-page svg{max-width:100%}
.mp-page button{font:inherit}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px,4.5vw,36px)}
.eyebrow{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--blue)}
.gradtext{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.btn{font-family:var(--disp); font-weight:700; font-size:15px; border-radius:12px; padding:14px 24px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:9px; transition:transform .16s, box-shadow .16s, background .16s; white-space:nowrap; line-height:1.2}
.btn-grad{background:var(--grad-btn); color:#fff; box-shadow:0 14px 30px -12px rgba(60,100,255,0.6)}
.btn-amber{background:linear-gradient(100deg,var(--amber),var(--amber-2)); color:#3a2400; box-shadow:0 14px 30px -12px rgba(255,150,40,0.6)}
.btn-ghost{background:#fff; border-color:var(--line-2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue)}
.btn-light{background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3); color:#fff}
.btn-light:hover{background:rgba(255,255,255,0.2)}
.btn:hover{transform:translateY(-2px)}

/* logo */
.brand{display:flex; align-items:center; gap:12px; font-family:var(--disp); font-weight:800; font-size:20px; color:var(--ink); white-space:nowrap; line-height:1.1}
.brand .mark{width:44px;height:44px; flex:0 0 auto; border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; padding:5px}
.brand .mark svg{width:100%;height:100%}
.brand small{display:block; font-family:var(--mono); font-weight:400; font-size:10px; color:var(--faint); letter-spacing:0.08em; margin-top:2px}

/* announce */
.announce{background:linear-gradient(90deg,#EEF3FF,#F3EEFF); color:var(--ink-2); font-size:13.5px; text-align:center; padding:10px 16px; border-bottom:1px solid var(--line)}
.announce .pill{background:linear-gradient(100deg,var(--amber),var(--amber-2)); color:#3a2400; font-weight:700; font-size:11px; padding:2px 9px; border-radius:999px; margin-right:9px; font-family:var(--mono)}
.announce a{color:var(--blue); font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* nav */
header.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.admin-bar header.nav{top:32px}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:18px; height:74px}
.navlinks{display:flex; gap:22px; font-weight:600; font-size:14.5px; color:var(--ink-2); white-space:nowrap}
.navlinks a:hover,.navlinks a.on{color:var(--blue)}
.nav-cta{display:flex; gap:10px; align-items:center}
.burger{display:none; background:#fff; border:1px solid var(--line-2); border-radius:10px; width:44px;height:44px; font-size:19px; cursor:pointer}
.navlinks.open{display:flex; position:absolute; top:74px; left:0; right:0; z-index:20; flex-direction:column; gap:0; background:#fff; border-bottom:1px solid var(--line); padding:8px 24px 18px; box-shadow:var(--shadow)}
.navlinks.open a{padding:10px 0}
@media (max-width:1180px){ .nav-cta .btn-ghost{display:none} .navlinks{gap:18px; font-size:14px} }

/* hero (home) */
.hero{position:relative; overflow:hidden; background:radial-gradient(900px 520px at 85% -5%, #E9EFFF, transparent 60%), radial-gradient(700px 480px at 5% 15%, #F2ECFF, transparent 60%), var(--tint)}
.hero.bordered{border-bottom:1px solid var(--line)}
#mesh{position:absolute; inset:0; opacity:0.55; width:100%; height:100%}
.hero .grid-lines{position:absolute; inset:0; background-image:linear-gradient(rgba(47,107,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(47,107,255,0.06) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(900px 500px at 60% 20%, #000, transparent 75%); mask-image:radial-gradient(900px 500px at 60% 20%, #000, transparent 75%)}
.hero-body{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 0.95fr; gap:44px; align-items:center; padding-block:clamp(48px,7vw,86px)}
.h-eyebrow{display:inline-flex; align-items:center; gap:10px; margin-bottom:20px}
.h-eyebrow .dot{width:7px;height:7px;border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan)}
h1.h1{font-size:clamp(34px,5.4vw,60px); color:var(--ink)}
.h-sub{margin-top:20px; color:var(--muted); font-size:clamp(16px,1.7vw,19px); max-width:46ch}
.h-cta{margin-top:28px; display:flex; gap:13px; flex-wrap:wrap}
.h-proof{margin-top:26px; display:flex; align-items:center; gap:12px 22px; flex-wrap:wrap; color:var(--muted); font-size:13.5px}
.h-proof .pchip{display:inline-flex; align-items:center; gap:8px; font-weight:600}
.h-proof .pchip b{color:var(--ink); font-family:var(--disp)}
.h-proof .tk{color:var(--green); font-weight:800}

/* growth dashboard card */
.agent{position:relative; background:linear-gradient(180deg,#0F1A44,#0A1430); border:1px solid rgba(255,255,255,0.1); border-radius:22px; box-shadow:var(--shadow); padding:16px}
.agent .top{display:flex; align-items:center; gap:10px; padding:6px 6px 14px; border-bottom:1px solid rgba(255,255,255,0.09)}
.agent .top .ai{width:34px;height:34px;border-radius:9px; background:var(--grad); display:flex;align-items:center;justify-content:center; font-size:17px}
.agent .top b{color:#fff; font-family:var(--disp); font-size:14px}
.agent .top span{color:#7fe0c0; font-size:11px; font-family:var(--mono)}
.agent .top .live{margin-left:auto; color:#7fe0c0; font-size:11px; font-family:var(--mono); display:flex; align-items:center; gap:6px}
.agent .top .live::before{content:""; width:7px;height:7px;border-radius:50%; background:#38e0a5; box-shadow:0 0 8px #38e0a5}
.agent .foot{display:flex; align-items:center; gap:8px; margin-top:12px; padding:9px 12px; border:1px solid rgba(255,255,255,0.12); border-radius:12px; color:#8C99BE; font-size:12.5px}
.agent .foot .send{margin-left:auto; width:28px;height:28px;border-radius:8px; background:var(--grad-btn); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px}
.dash{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 6px 6px}
.tile{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:11px 12px}
.tile .k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:#8C99BE}
.tile .v{font-family:var(--disp); font-weight:800; font-size:19px; color:#fff; margin-top:4px}
.tile .v em{font-style:normal; font-family:var(--body); font-weight:600; font-size:11px; color:#7fe0c0; margin-left:4px}
.tile .bar{height:4px; border-radius:99px; background:rgba(255,255,255,0.08); margin-top:9px; overflow:hidden}
.tile .bar i{display:block; height:100%; background:var(--grad); border-radius:99px}
.float-chip{position:absolute; background:#fff; color:var(--ink); border-radius:12px; padding:9px 12px; box-shadow:var(--shadow-sm); border:1px solid var(--line); font-size:12px; font-weight:600; display:flex; align-items:center; gap:8px; z-index:3}
.float-chip .ic{width:24px;height:24px;border-radius:7px; background:var(--soft-2); display:flex;align-items:center;justify-content:center; font-size:13px}
.fc1{top:66px; left:-18px; animation:bob 5s ease-in-out infinite}
.fc2{bottom:66px; right:-18px; animation:bob 6s ease-in-out infinite reverse}
@keyframes bob{0%,100%{transform:translateY(-6px)}50%{transform:translateY(8px)}}

/* trust strip */
.trust{background:#fff; border-block:1px solid var(--line); padding-block:22px}
.trust-in{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.trust-stats{display:flex; gap:36px; flex-wrap:wrap}
.trust-stats .s .n{font-family:var(--disp); font-weight:800; font-size:24px; color:var(--ink)}
.trust-stats .s .n em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.trust-stats .s .l{color:var(--faint); font-size:11.5px; font-family:var(--mono); letter-spacing:0.06em}
.trust-tag{display:inline-flex; align-items:center; gap:9px; color:var(--muted); font-size:13.5px; font-weight:600}
.trust-tag .in{font-size:16px}

.mp-page section{padding-block:clamp(56px,8vw,94px)}
.mp-page section.tight{padding-block:clamp(40px,6vw,64px)}
.sec-head{max-width:700px; margin-bottom:46px}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(28px,4.4vw,46px); margin-top:14px}
.sec-head p{color:var(--muted); margin-top:16px; font-size:17px}

/* problems */
.prob-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.prob{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s}
.prob:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.prob .q{display:flex; gap:10px; align-items:flex-start}
.prob .q .em{font-size:20px; flex:0 0 auto}
.prob .q p{font-family:var(--disp); font-weight:700; font-size:16.5px; line-height:1.4; color:var(--ink)}
.prob .fix{margin-top:16px; padding-top:16px; border-top:1px dashed var(--line-2)}
.prob .fix .lbl{font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--blue)}
.prob .fix p{color:var(--muted); font-size:14.5px; margin-top:6px}
.prob .out{margin-top:auto; padding-top:16px; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:var(--green)}
.stat-strip{margin-top:26px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.stat-c{background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:16px 18px}
.stat-c .n{font-family:var(--disp); font-weight:800; font-size:26px; color:var(--ink)}
.stat-c .n b{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-c .l{font-size:13px; color:var(--muted); margin-top:4px}
.src{font-size:12px; color:var(--faint); margin-top:12px; text-align:center}

/* audit */
.audit{background:var(--soft)}
.audit-card{position:relative; overflow:hidden; border-radius:24px; padding:clamp(28px,4.5vw,52px); color:#fff; background:radial-gradient(600px 300px at 12% 0%, #2a3f9e, transparent 60%), linear-gradient(120deg,var(--navy-2),#1c1656); box-shadow:var(--shadow); display:grid; grid-template-columns:1.3fr 0.7fr; gap:34px; align-items:center}
.audit-card .badge{display:inline-flex; align-items:center; gap:8px; background:rgba(255,176,32,0.16); color:#FFCE7A; border:1px solid rgba(255,176,32,0.4); font-family:var(--mono); font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; padding:6px 12px; border-radius:999px}
.audit-card h2{color:#fff; font-size:clamp(24px,3.4vw,38px); margin-top:16px}
.audit-card p{color:#C4CFEA; margin-top:14px; font-size:16px; max-width:46ch}
.audit-list{margin-top:18px; display:flex; gap:10px 22px; flex-wrap:wrap}
.audit-list span{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:#DCE6FF}
.audit-list span::before{content:"✓"; color:#38e0a5; font-weight:800}
.audit-cta{display:flex; flex-direction:column; gap:12px}
.audit-cta .btn{justify-content:center}
.audit-cta .note{font-size:12.5px; color:#8C99BE; text-align:center}

/* capabilities */
.caps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cap-c{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; transition:transform .2s, box-shadow .2s}
.cap-c:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.cap-c .ic{width:54px;height:54px;border-radius:14px; background:var(--grad-btn); display:flex; align-items:center; justify-content:center; font-size:25px; margin-bottom:18px; box-shadow:0 10px 24px -12px rgba(60,100,255,0.7)}
.cap-c.v2 .ic{background:linear-gradient(120deg,#7C5CFF,#22CBDD)} .cap-c.v3 .ic{background:linear-gradient(120deg,#22CBDD,#2F6BFF)}
.cap-c.v4 .ic{background:linear-gradient(120deg,#2F6BFF,#7C5CFF)} .cap-c.v5 .ic{background:linear-gradient(120deg,#7C5CFF,#5B8CFF)} .cap-c.v6 .ic{background:linear-gradient(120deg,#22CBDD,#7C5CFF)}
.cap-c h3{font-size:20px}
.cap-c p{color:var(--muted); font-size:14.5px; margin-top:9px}
.cap-c .get{margin-top:14px; font-size:13px; color:var(--ink-2)}
.cap-c .get b{font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--blue); display:block; margin-bottom:5px}
.cap-c .more{display:inline-block; margin-top:12px; font-weight:700; font-size:13.5px; color:var(--blue)}

/* approach */
.approach{background:var(--soft)}
.app-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center}
.handshake{background:#fff; border:1px solid var(--line); border-radius:24px; padding:34px; box-shadow:var(--shadow); text-align:center}
.handshake svg{width:min(100%,300px); height:auto; margin-inline:auto; display:block}
.handshake .cap{margin-top:16px; font-family:var(--disp); font-weight:700; font-size:18px}
.handshake .sub{color:var(--muted); font-size:14px; margin-top:6px}
.app-h2{font-size:clamp(26px,3.6vw,40px); margin-top:12px}
.app-list{display:flex; flex-direction:column; gap:14px; margin-top:24px}
.app-item{display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px}
.app-item .n{font-family:var(--mono); font-size:12px; color:var(--blue); flex:0 0 auto; margin-top:3px}
.app-item b{font-family:var(--disp); font-size:15.5px; display:block}
.app-item span{color:var(--muted); font-size:14px}

/* flow */
.show-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.flow{display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:var(--shadow)}
.fnode{display:flex; align-items:center; gap:13px; background:var(--soft); border:1px solid var(--line); border-radius:13px; padding:13px 15px}
.fnode .ic{width:38px;height:38px;border-radius:10px; background:var(--grad-btn); display:flex;align-items:center;justify-content:center; font-size:18px; flex:0 0 auto; color:#fff}
.fnode.done .ic{background:linear-gradient(120deg,#22CBDD,#12B76A)}
.fnode b{font-family:var(--disp); font-size:14px; display:block} .fnode span{font-size:12px; color:var(--muted)}
.fnode .stat{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--green)}
.farrow{color:var(--faint); text-align:center; font-size:14px; margin:-4px 0}
.show-copy h2{font-size:clamp(26px,3.6vw,40px)}
.show-copy p{color:var(--muted); margin-top:16px; font-size:16.5px}
.show-list{margin-top:22px; display:flex; flex-direction:column; gap:12px}
.show-list .li{display:flex; gap:12px; align-items:flex-start; font-size:15px}
.show-list .li .t{width:24px;height:24px;border-radius:7px; background:var(--soft-2); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:13px; flex:0 0 auto; margin-top:2px}
.show-list .li b{font-family:var(--disp)}

/* why */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.wcard{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px}
.wcard .ic{font-size:24px; width:50px;height:50px;border-radius:12px; background:var(--soft-2); display:flex;align-items:center;justify-content:center; margin-bottom:14px}
.wcard h3{font-size:18px} .wcard p{color:var(--muted); font-size:14px; margin-top:7px}

/* platforms */
/* ---- the stack (platforms, grouped by job) ---- */
.stack{background:var(--soft); border-block:1px solid var(--line)}
.stack-defs{position:absolute; width:0; height:0; overflow:hidden}
.stack-head{max-width:760px; margin-bottom:clamp(30px,4vw,46px)}
.stack-head h2{font-size:clamp(28px,4.4vw,46px); margin-top:14px}
.stack-head p{color:var(--muted); font-size:16.5px; margin-top:16px; max-width:660px}

.stack-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:start}
.stack-col{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px 20px 20px; height:100%; position:relative; overflow:hidden}
.stack-col::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad); opacity:.9}
.stack-step{display:flex; align-items:baseline; gap:10px; margin-bottom:9px}
.stack-step .n{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--faint)}
.stack-step b{font-family:var(--disp); font-weight:800; font-size:18px; color:var(--ink); letter-spacing:-.02em}
.stack-line{color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:18px; min-height:2.9em}

.stack-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.stack-list li{display:flex; align-items:flex-start; gap:11px}
.stack-ic{flex:0 0 auto; width:38px; height:38px; border-radius:11px; background:var(--tint); border:1px solid var(--line); display:flex; align-items:center; justify-content:center}
.stack-ic svg{width:21px; height:21px; display:block}
.stack-t{display:flex; flex-direction:column; gap:1px; min-width:0}
.stack-t b{font-family:var(--disp); font-weight:700; font-size:14.5px; color:var(--ink); letter-spacing:-.01em; line-height:1.3}
.stack-t span{font-size:12.5px; color:var(--muted); line-height:1.45}


@media (max-width:1040px){
  .stack-grid{grid-template-columns:repeat(2,1fr)}
  .stack-line{min-height:0}
}
@media (max-width:560px){
  .stack-grid{grid-template-columns:1fr; gap:14px}
  .stack-col{padding:20px 18px 18px}
}

/* process */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.step{padding-top:22px; border-top:2px solid transparent; border-image:var(--grad) 1}
.step .no{font-family:var(--mono); font-size:13px; color:var(--blue); font-weight:500}
.step h3{font-size:19px; margin-top:12px} .step p{color:var(--muted); font-size:14px; margin-top:9px}

/* CTA */
.cta-sec{padding-bottom:clamp(56px,8vw,96px)}
.cta{position:relative; overflow:hidden; border-radius:26px; padding:clamp(38px,6vw,72px); text-align:center; color:#fff; background:radial-gradient(700px 320px at 50% -20%, #2a3f9e, transparent 65%), linear-gradient(160deg,var(--navy-2),var(--navy))}
.cta .eyebrow{color:#9FB4E8}
.cta h2{font-size:clamp(30px,5vw,54px); color:#fff}
.cta p{color:#B9C4E4; margin-top:16px; font-size:17.5px; max-width:52ch; margin-inline:auto}
.cta .row{margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.cta .rea{margin-top:16px; color:#8C99BE; font-size:13px}

/* footer */
footer.mp-foot{background:var(--navy); color:#AEBAD6; padding-block:52px 30px}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:30px}
.mp-foot h4{font-family:var(--mono); color:#7d88a8; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; margin:0 0 15px; font-weight:400}
.mp-foot a{display:block; color:#AEBAD6; font-size:14px; padding:5px 0}
.mp-foot a:hover{color:#fff}
.foot-brand .brand{color:#fff; display:inline-flex}
.foot-brand .brand .mark{border-color:transparent}
.foot-brand .brand small{color:#8FA0BC}
.foot-brand p{color:#8c99be; font-size:14px; margin-top:14px; max-width:34ch}
.foot-bottom{margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.08); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:#7d88a8}
.chat-float{position:fixed; right:18px; bottom:18px; z-index:60; background:linear-gradient(100deg,var(--amber),var(--amber-2)); color:#3a2400; height:52px; padding:0 20px; border-radius:999px; display:flex; align-items:center; gap:9px; box-shadow:0 14px 30px -8px rgba(255,150,40,0.7); font-family:var(--disp); font-weight:700; font-size:14px}

/* ===== catalogue page ===== */
.hero-in{position:relative; z-index:2; padding-block:clamp(44px,7vw,80px); display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center}
.hero-in h1.h1{font-size:clamp(32px,5vw,56px); margin-top:16px}
.hero-in .h-sub{max-width:50ch}
.h-stats{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.hs{background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-sm)}
.hs .n{font-family:var(--disp); font-weight:800; font-size:28px} .hs .n b{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800}
.hs .l{font-size:13px; color:var(--muted); margin-top:4px}
.filters{position:sticky; top:74px; z-index:40; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding-block:14px}
.admin-bar .filters{top:106px}
.f-in{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.search{flex:1 1 240px; display:flex; align-items:center; gap:8px; border:1px solid var(--line-2); border-radius:12px; padding:0 12px; background:#fff; height:44px}
.search input{border:0; outline:0; width:100%; font-family:var(--body); font-size:14.5px; color:var(--ink); background:transparent; margin:0; padding:0; box-shadow:none}
.fchips{display:flex; gap:8px; flex-wrap:wrap}
.fchip{font-family:var(--disp); font-weight:600; font-size:13px; padding:9px 14px; border-radius:999px; border:1px solid var(--line-2); background:#fff; color:var(--ink-2); cursor:pointer; transition:.15s; line-height:1.2}
.fchip:hover{border-color:var(--blue); color:var(--blue)}
.fchip.on{background:var(--grad-btn); color:#fff; border-color:transparent}
.count{font-family:var(--mono); font-size:12px; color:var(--faint); margin-left:auto; white-space:nowrap}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; position:relative}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card[hidden]{display:none}
.card .top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.card .ic{width:46px;height:46px;border-radius:12px; background:var(--soft-2); display:flex;align-items:center;justify-content:center; font-size:22px}
.hot{font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:#B45309; background:#FFF4E5; border:1px solid #FFD9A8; border-radius:999px; padding:4px 9px; white-space:nowrap}
.card h3{font-size:17px; margin-top:14px; line-height:1.3}
.card p{color:var(--muted); font-size:14px; margin-top:8px}
.card .for{font-size:12.5px; color:var(--ink-2); margin-top:10px}
.card .for b{font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue); margin-right:6px}
.card .tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:14px}
.card .tags span{font-family:var(--mono); font-size:10.5px; color:var(--blue); background:var(--soft-2); border-radius:6px; padding:3px 8px}
.cat-h{margin:34px 0 14px; display:flex; align-items:center; gap:12px}
.cat-h h2{font-size:22px} .cat-h .ln{flex:1; height:1px; background:var(--line)}
.cat-h[hidden]{display:none}
.empty{display:none; text-align:center; color:var(--muted); padding:40px 0}
.empty a{color:var(--blue); font-weight:700}
.custom{background:var(--soft)}

/* responsive */
@media (max-width:1024px){
  .hero-body,.hero-in{grid-template-columns:1fr; gap:36px}
  .prob-grid,.caps,.why-grid,.grid{grid-template-columns:1fr 1fr}
  .stat-strip{grid-template-columns:1fr 1fr}
  .show-grid,.app-grid,.audit-card{grid-template-columns:1fr; gap:28px}
  .steps{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .navlinks:not(.open),.nav-cta .btn-ghost{display:none}
  .burger{display:inline-flex; align-items:center; justify-content:center}
  .trust-in{justify-content:center; text-align:center}
  .count{margin-left:0; width:100%}
}
@media (max-width:560px){
  .prob-grid,.caps,.why-grid,.foot-grid,.stat-strip,.grid,.h-stats{grid-template-columns:1fr}
  .chat-float span{display:none} .chat-float{padding:0; width:52px; justify-content:center}
  .trust-stats{gap:22px}
}
@media (prefers-reduced-motion:reduce){ .fc1,.fc2{animation:none} #mesh{opacity:0.3} }

/* ---- Free Growth Audit form ---- */
.audit-card.has-form{grid-template-columns:1fr 1fr; align-items:start}
.lf{background:#fff; color:var(--ink); border-radius:20px; padding:clamp(18px,2.6vw,28px); box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.lf p{margin:0; max-width:none; color:var(--muted); font-size:14px}
.lf-hp{position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.lf .lf-progress{display:none; gap:6px; margin-bottom:10px}
.lf.js .lf-progress{display:flex}
.lf-progress span{flex:1; height:5px; border-radius:99px; background:var(--line)}
.lf-progress span.on{background:var(--grad)}
.lf .lf-stepname{display:none; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:14px}
.lf.js .lf-stepname{display:block}
.lf-step{border:0; margin:0; padding:0; min-width:0}
.lf-step + .lf-step{margin-top:22px; padding-top:22px; border-top:1px solid var(--line)}
.lf.js .lf-step + .lf-step{margin-top:0; padding-top:0; border-top:0}
.lf-step[hidden]{display:none}
.lf-q{font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--ink); padding:0; margin-bottom:12px; line-height:1.25}
.lf-chips{display:flex; flex-wrap:wrap; gap:8px}
.lf-chip{position:relative; cursor:pointer; display:inline-flex}
.lf-chip input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.lf-chip span{display:inline-flex; align-items:center; min-height:40px; padding:8px 13px; border:1.5px solid var(--line-2); border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ink-2); background:#fff; line-height:1.3; transition:border-color .15s, background .15s, color .15s}
.lf-chip:hover span{border-color:var(--blue)}
.lf-chip input:checked + span{border-color:var(--blue); background:var(--soft-2); color:var(--blue)}
.lf-chip input:checked + span::before{content:"✓"; margin-right:6px; font-weight:800}
.lf-chip input:focus-visible + span{outline:3px solid rgba(47,107,255,.35); outline-offset:2px}
.lf-field{display:flex; flex-direction:column; gap:6px; margin-top:14px}
.lf-field label{font-size:13.5px; font-weight:600; color:var(--ink-2)}
.lf-field label em{font-style:normal; font-weight:400; color:var(--faint); margin-left:4px}
.lf-field input{width:100%; font-family:var(--body); font-size:16px; color:var(--ink); background:#fff; border:1.5px solid var(--line-2); border-radius:12px; padding:12px 14px; min-height:48px; transition:border-color .15s, box-shadow .15s}
.lf-field input::placeholder{color:#A3ACBD}
.lf-field input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(47,107,255,.14)}
.lf-field input[aria-invalid="true"]{border-color:var(--rose)}
.lf-tel{display:flex; align-items:stretch}
.lf-tel b{display:flex; align-items:center; padding:0 12px; font-weight:700; font-size:15px; color:var(--ink-2); background:var(--soft); border:1.5px solid var(--line-2); border-right:0; border-radius:12px 0 0 12px}
.lf-tel input{border-radius:0 12px 12px 0; min-width:0}
.lf-err{display:block; font-size:13px; color:#C4203F; font-weight:500}
.lf-err:empty{display:none}
#lf-needs-err{margin-top:8px}
.lf .btn{width:100%; justify-content:center; margin-top:18px; min-height:50px; white-space:normal; text-align:center}
.lf .btn[disabled]{opacity:.7; cursor:progress; transform:none}
.lf .lf-next{display:none}
.lf.js .lf-next{display:inline-flex}
.lf .lf-hint{margin-top:10px; text-align:center; font-size:12.5px; color:var(--faint)}
.lf.js .lf-step:not([data-step="1"]) .lf-back{display:block}
.lf-back{display:none; margin:10px auto 0; background:none; border:0; padding:6px 10px; color:var(--muted); font-weight:600; font-size:14px; cursor:pointer}
.lf-back:hover{color:var(--blue)}
.lf .lf-note{margin-top:12px; font-size:12.5px; line-height:1.55; text-align:center}
.lf .lf-formerr{margin-top:12px; padding:10px 12px; border-radius:10px; background:#FFF1F3; color:#B42340; font-size:13.5px}
.lf-done:focus{outline:none}
.lf-done-ic{width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#12B76A,#22CBDD); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800}
.lf-done h3{font-size:22px; margin-top:14px; color:var(--ink); line-height:1.25}
.lf .lf-ref{margin-top:8px; font-family:var(--mono); font-size:12.5px}
.lf-ref b{color:var(--ink)}
.lf .lf-done-p{margin-top:14px; font-size:14.5px; line-height:1.6}
.lf-more{display:inline-block; margin-top:18px; color:var(--blue); font-weight:700; font-size:14px}
.chat-float{transition:opacity .2s, transform .2s}
.chat-float.is-hidden{opacity:0; pointer-events:none; transform:translateY(12px)}
/* .mp-page button{font:inherit} and .mp-page a{color:inherit} would otherwise win */
.lf .btn{font-family:var(--disp); font-weight:700; font-size:15px; line-height:1.2}
.lf .lf-back{font-family:var(--body); font-size:14px; font-weight:600}
.lf .lf-more{color:var(--blue)}
.lf.js .lf-hp{display:none}
@media (max-width:900px){ .audit-card.has-form{grid-template-columns:1fr} }
@media (max-width:560px){ .audit-card.has-form{padding:22px 16px} .lf{padding:18px 16px} }
@media (prefers-reduced-motion:reduce){ .chat-float,.lf-chip span,.lf-field input{transition:none} }