/* how-to-build-a-loyal-podcast-audience.html - extracted from inline <style> blocks, original document order preserved */

/* --- block --- */
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/Satoshi-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/Satoshi-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  color-scheme:dark;
  /* ── Identical to index.html ── */
  --bg:#000;
  --bg2:#080808;
  --o:#ED671C;--p:#B71CED;
  --pp:rgba(151,71,255,.62);
  --line:rgba(255,255,255,.12);
  --gtext:linear-gradient(135deg,#8B5CF6 0%,#B71CED 38%,#E91E8C 70%,#ED671C 100%);
  /* ── Kept for backward compat ── */
  --card:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  --card2:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  --border:rgba(255,255,255,.16);
  --border2:rgba(255,255,255,.20);
  --purple:#B71CED;
  --purple2:#8B5CF6;
  --pink:#E91E8C;
  --orange:#ED671C;
  --grad:linear-gradient(135deg,#8B5CF6 0%,#B71CED 38%,#E91E8C 70%,#ED671C 100%);
  --text:#fff;
  --muted:rgba(255,255,255,.55);
}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw}
body{
  background:#000;color:#fff;
  font-family:'Satoshi',sans-serif;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:rgba(183,28,237,.4);color:#fff}

/* ===== NAV ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:70px;padding:0 56px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,0);
  transition:background .4s,border-color .4s;
}
.nav.sc{
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(40px) saturate(160%);-webkit-backdrop-filter:blur(40px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-logo img{height:30px}
.nav-center{
  display:flex;align-items:center;gap:2px;
  background:rgba(20,20,23,.72);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:5px 7px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.nav-center > a{
  font-size:14px;font-weight:500;padding:9px 17px;border-radius:8px;
  color:rgba(255,255,255,.7);transition:color .2s,background .2s;
}
.nav-center > a:hover,.nav-center > a.active{color:#fff;background:rgba(255,255,255,.08)}

/* SERVICES DROPDOWN */
.svc-drop{position:relative}
.svc-trigger{
  display:flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;padding:9px 17px;border-radius:8px;
  color:rgba(255,255,255,.7);transition:color .2s,background .2s;
  cursor:pointer;user-select:none;
}
.svc-trigger::after{content:'▾';font-size:13px;opacity:.7;transition:transform .25s}
.svc-drop:hover .svc-trigger{color:#fff;background:rgba(255,255,255,.07)}
.svc-drop:hover .svc-trigger::after{transform:rotate(180deg)}
.svc-menu{
  position:absolute;top:calc(100% + 10px);left:-16px;
  display:none;
  background:#0a0a0a;border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:22px 22px 18px;
  box-shadow:0 24px 72px rgba(0,0,0,.85);
  width:580px;
}
.svc-drop:hover .svc-menu{display:block}
.svc-drop::after{content:'';position:absolute;left:-16px;right:-16px;top:100%;height:16px}
.svc-drop.open .svc-menu{display:block}
.svc-cols{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.svc-menu a{
  display:flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:500;padding:9px 13px;border-radius:9px;
  color:rgba(255,255,255,.62);transition:color .2s,background .2s;
}
.svc-menu a:hover{color:#fff;background:rgba(255,255,255,.07)}
.svc-menu a.cur{color:var(--purple2);background:rgba(183,28,237,.08)}
.svc-menu a::before{
  content:'';width:6px;height:6px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.2);transition:background .2s;
}
.svc-menu a:hover::before,.svc-menu a.cur::before{background:var(--grad);background-size:100%;background-clip:unset}
.svc-tailored{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.svc-tailored-label{
  font-size:var(--t-caption);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.48);display:block;margin-bottom:10px;padding-left:13px;
}
.svc-tailored-links{display:flex;gap:4px}

.nav-cta{
  font-size:var(--t-btn);font-weight:600;padding:11px 22px;border-radius:10px;
  border:none;color:#fff;cursor:pointer;
  background:linear-gradient(95deg,#a31ce8 0%,#c41fd4 100%);
  transition:box-shadow .25s,transform .2s,background .2s;
  display:inline-flex;align-items:center;gap:8px;
}
.nav-cta .cta-ico{font-size:var(--t-btn);line-height:1}
.nav-cta:hover{background:linear-gradient(95deg,#b228f5 0%,#d52ae6 100%);transform:translateY(-1px)}

/* ===== HERO ===== */
.hero{
  position:relative;height:100vh;min-height:600px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* Background photo */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:url('/assets/w-hero-banner.webp') center center/cover no-repeat;
}
/* Dark overlay */
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,.32);
}
/* Subtle vignette at edges */
.hero-bg::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%,transparent 50%,rgba(0,0,0,.35) 100%);
}

/* Center play button */
.hero-play{
  position:relative;z-index:2;
  width:80px;height:80px;border-radius:50%;
  background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .25s,transform .25s,box-shadow .25s;
}
.hero-play:hover{
  background:rgba(255,255,255,.28);
  transform:scale(1.08);
  
}
.hero-play::after{
  content:'';
  width:0;height:0;
  border-style:solid;
  border-width:14px 0 14px 24px;
  border-color:transparent transparent transparent #fff;
  margin-left:5px;
}

/* Trustpilot — bottom left */
.hero-tp{
  position:absolute;bottom:36px;left:48px;z-index:2;
  display:flex;flex-direction:column;gap:4px;
}
.tp-row{display:flex;align-items:center;gap:8px}
.tp-logo{
  background:#00b67a;color:#fff;font-size:var(--t-caption);font-weight:800;
  padding:2px 7px;border-radius:4px;letter-spacing:.04em;
}
.tp-stars{color:#00b67a;font-size:15px;letter-spacing:1px}
.tp-txt{font-size:var(--t-caption);font-weight:500;color:rgba(255,255,255,.75)}

/* Clutch badge — bottom right */
.hero-clutch{
  position:absolute;bottom:28px;right:48px;z-index:2;
  display:block;
  text-decoration:none;
  transition:transform .22s,box-shadow .22s;
  border-radius:50%;
  box-shadow:0 4px 24px rgba(0,0,0,.35);
}
.hero-clutch:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.45)}
.hero-clutch img{display:block;width:76px;height:82px;border-radius:50%}

.btn-p{
  display:inline-block;padding:14px 30px;border-radius:10px;
  background:linear-gradient(95deg,#8B5CF6 0%,#B71CED 32%,#E91E8C 62%,#ED671C 100%);
  color:#fff;font-size:var(--t-btn);font-weight:600;
  transition:box-shadow .25s,transform .2s;
}
.btn-p:hover{transform:translateY(-2px)}
.btn-o{
  display:inline-block;padding:14px 30px;border-radius:10px;
  border:1px solid rgba(255,255,255,.20);
  color:rgba(255,255,255,.8);font-size:var(--t-btn);font-weight:500;
  transition:border-color .2s,background .2s,transform .2s;
}
.btn-o:hover{border-color:rgba(183,28,237,.5);background:rgba(183,28,237,.07);transform:translateY(-2px)}

/* LOGOS BAND */
.logos-band{
  padding:36px 0;
  background:var(--bg);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.logos-label{
  font-size:var(--t-caption);font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.48);text-align:center;margin-bottom:18px;
}
.logos-track{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logos-track + .logos-track{margin-top:34px}
.logos-inner{
  display:flex;gap:78px;align-items:center;width:max-content;
}
.logos-row1{animation:lscroll 50s linear infinite}
.logos-row2{animation:lscrollR 50s linear infinite}
.logos-inner img{max-height:36px;max-width:150px;height:auto;width:auto;opacity:1;filter:none;object-fit:contain}
@keyframes lscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lscrollR{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ===== SECTION BASE ===== */
.sec{padding:100px 56px}
.sec-inner{max-width:1280px;margin:0 auto}
.sec-label{
  font-size:var(--t-caption);font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--pp);display:inline-flex;align-items:center;gap:14px;margin-bottom:14px;
}
.sec-label::before,.sec-label::after{content:'';width:26px;height:1px;background:linear-gradient(90deg,var(--p),var(--o));opacity:.7}
.sec-title{
  font-size:var(--t-h2);font-weight:700;
  letter-spacing:-.035em;line-height:1.16;padding:.1em 0;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em;
}
.sec-sub{
  font-size:var(--t-body);color:var(--muted);
  line-height:1.65;max-width:56ch;margin-top:14px;
}
.g-text{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;padding-bottom:.18em;
}

/* ===== PAIN POINTS ===== */
.pain{background:#000}
.pain-top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:52px;flex-wrap:wrap}
.pain-top .sec-title{max-width:22ch}
.pain-note{
  max-width:40ch;font-size:var(--t-body);font-weight:400;line-height:1.65;color:var(--muted);
  flex:0 0 38%;
}
.pain-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.pain-card{
  background:#0e0e10;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:22px 24px;min-height:160px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:background .3s,border-color .3s;
  position:relative;overflow:hidden;cursor:default;
}
.pain-quote{
  display:block;
  font-family:Georgia,'Times New Roman',serif;
  font-size:40px;font-weight:700;line-height:.7;
  color:rgba(255,255,255,.4);
  transition:opacity .2s,max-height .3s,margin .3s;
}
.pain-title{
  font-size:var(--t-body);font-weight:400;letter-spacing:-.2px;line-height:1.32;
  color:#fff;
}
.pain-desc{
  font-size:var(--t-body);color:rgba(255,255,255,.55);line-height:1.5;
  max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .35s cubic-bezier(.16,1,.3,1),opacity .3s,margin-top .3s;
}
.pain-card::after{
  content:'';position:absolute;left:0;bottom:0;width:58%;height:2px;
  background:linear-gradient(90deg,#B71CED 0%,#E91E8C 60%,transparent 100%);
  opacity:0;transition:opacity .3s;
}
.pain-card.is-active,.pain-card:hover{
  justify-content:flex-start;
  background:linear-gradient(180deg,rgba(42,16,60,.55) 0%,rgba(18,9,30,.45) 100%);
  border-color:rgba(255,255,255,.16);
}
.pain-card.is-active .pain-quote,.pain-card:hover .pain-quote{
  opacity:0;max-height:0;margin:0;
}
.pain-card.is-active .pain-desc,.pain-card:hover .pain-desc{
  max-height:240px;opacity:1;margin-top:10px;
}
.pain-card.is-active::after,.pain-card:hover::after{opacity:1}
/* interactive cursor spotlight */
.pain-card > *{position:relative;z-index:1}
.pain-card::after{z-index:2}
.pain-card::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(183,28,237,.22),transparent 62%);
  opacity:0;transition:opacity .35s;
}
.pain-card:hover::before{opacity:1}
/* scroll reveal */
.pain-card.rv-pending{opacity:0;transform:translateY(30px)}
.pain-card.rv-in{opacity:1;transform:translateY(0);
  transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}

/* ===== DESIGN STACK ===== */
.stack{
  background:var(--bg);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:60px 56px;
}
.stack-inner{max-width:1280px;margin:0 auto;text-align:center}
.stack-label{
  font-size:var(--t-caption);font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.48);margin-bottom:36px;
}
.stack-tools{
  display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.tool{
  display:flex;align-items:center;gap:11px;
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:12px 20px;
  font-size:var(--t-body);font-weight:600;
  transition:border-color .2s,transform .2s;cursor:default;
}
.tool:hover{border-color:rgba(183,28,237,.5);transform:translateY(-2px)}
.ti{
  width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-body);font-weight:900;font-style:italic;color:#fff;flex:none;
}
.ti-ai{background:linear-gradient(135deg,#ff9500,#ff6b00)}
.ti-ps{background:linear-gradient(135deg,#00b8ff,#0074d9)}
.ti-ae{background:linear-gradient(135deg,#a0a0ff,#7070d0)}
.ti-pr{background:linear-gradient(135deg,#d45fff,#9b00bf)}
.ti-id{background:linear-gradient(135deg,#ff6680,#cc004f)}
.ti-fig{background:linear-gradient(135deg,#0acf83,#1abcfe,#a259ff,#f24e1e);font-style:normal}
.ti-cv{background:linear-gradient(135deg,#7d2ae8,#4b00c3);font-style:normal}
.ti-mid{background:linear-gradient(135deg,#00a8e0,#0064a0);font-style:normal;font-size:13px}

/* ===== STATS — WHY GOOD DESIGN ===== */
.stats-sec{background:#000;position:relative;overflow:hidden}
.stats-sec::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 80% at 80% 50%,rgba(183,28,237,.1),transparent),
    radial-gradient(ellipse 40% 60% at 10% 20%,rgba(233,30,140,.06),transparent);
  pointer-events:none;
}
.stats-inner{max-width:1280px;margin:0 auto;position:relative;z-index:1;text-align:center}
.why-cats{
  display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin:32px 0 60px;
}
.why-cat{
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:16px 24px;text-align:left;min-width:200px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  transition:border-color .3s,transform .3s;
}
.why-cat:hover{border-color:rgba(183,28,237,.45);transform:translateY(-3px)}
.why-cat h3{
  font-size:var(--t-h3);font-weight:700;margin-bottom:6px;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em;
}
.why-cat p{font-size:var(--t-body);color:var(--muted);line-height:1.5}
.stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:800px;margin:0 auto;
}
.stat-c{
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:36px 32px;text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s;
}
.stat-c:hover{border-color:rgba(183,28,237,.45);transform:translateY(-3px)}
.stat-c::after{
  content:'';position:absolute;top:-30px;right:-30px;
  width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle,rgba(183,28,237,.12),transparent 70%);
  pointer-events:none;
}
.stat-num{
  display:block;
  font-size:clamp(50px,6vw,82px);font-weight:700;
  letter-spacing:-.04em;line-height:1;margin-bottom:10px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;padding-bottom:.18em;
}
.stat-txt{font-size:var(--t-body);font-weight:600;color:rgba(255,255,255,.82);line-height:1.35}

/* ===== INDUSTRIES ===== */
.ind-sec{background:var(--bg);padding:80px 56px}
.ind-inner{max-width:1280px;margin:0 auto;text-align:center}
.ind-tags{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:40px;
}
.ind-tag{
  padding:10px 22px;border-radius:100px;
  border:1px solid rgba(255,255,255,.14);
  font-size:var(--t-caption);font-weight:500;color:rgba(255,255,255,.65);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  transition:border-color .25s,background .25s,color .25s,transform .25s;cursor:default;
}
.ind-tag:hover{
  border-color:rgba(183,28,237,.5);
  background:rgba(183,28,237,.08);
  color:#fff;transform:translateY(-2px);
}

/* ===== TESTIMONIALS ===== */
.testi-sec{background:#000}
.testi-inner{max-width:1000px;margin:0 auto;text-align:center}
.trev-card{
  display:grid;grid-template-columns:280px 1fr;
  border-radius:14px;overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
  margin-top:52px;
}
/* LEFT white Clutch panel */
.trev-left{background:#fff;padding:28px 24px;text-align:left}
.trev-chead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.trev-clogo-img{height:24px;width:auto;display:block}
.trev-clink{font-size:var(--t-body);color:#555;text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.trev-clink:hover{color:#e84b37}
.trev-crating{display:flex;align-items:center;gap:7px;margin-bottom:16px}
.trev-ccount{font-size:var(--t-body);font-weight:600;color:#111}
.trev-cstars{color:#e84b37;font-size:14px;letter-spacing:2px}
.trev-cline{height:1px;background:#e8e8e8;margin:0 0 18px}
.trev-ctags{display:flex;flex-wrap:wrap;gap:6px}
.trev-ctag{
  font-size:var(--t-caption);font-weight:500;color:#444;
  background:#f1f1f1;border-radius:5px;padding:4px 10px;
}
.trev-ctag-more{background:#f8f8f8;color:#6b6b6b}
/* RIGHT dark panel */
.trev-right{
  background:#141414;
  display:grid;grid-template-columns:1fr 1px 1fr;
}
.trev-meta{padding:26px 24px;display:flex;flex-direction:column}
.trev-mrating{display:flex;align-items:center;gap:7px;margin-bottom:14px}
.trev-mcount{font-size:var(--t-body);font-weight:600;color:rgba(255,255,255,.65)}
.trev-mstars{color:#e84b37;font-size:13px;letter-spacing:2px}
.trev-mline{height:1px;background:rgba(255,255,255,.1);margin-bottom:16px}
.trev-mitem{
  display:flex;align-items:center;gap:10px;padding:5px 0;
  font-size:var(--t-body);color:rgba(255,255,255,.62);
}
.trev-mico{
  width:20px;height:20px;border-radius:4px;flex:none;
  background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-style:normal;
}
.trev-vdiv{background:rgba(255,255,255,.1)}
.trev-quote-col{padding:26px 28px;display:flex;flex-direction:column;justify-content:space-between}
.trev-quote{
  font-size:var(--t-body);line-height:1.7;color:rgba(255,255,255,.82);
  font-weight:400;margin:0;
}
.trev-author{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:24px}
.trev-alogo{max-height:22px;width:auto;opacity:.7;filter:brightness(1.4) grayscale(20%);object-fit:contain;align-self:flex-start}
.trev-aname{font-size:var(--t-body);color:rgba(255,255,255,.48);letter-spacing:.01em}

/* ===== FAQ ===== */
.faq-sec{
  background:url('/assets/bg-faqs.png') center center/cover no-repeat;
  position:relative;overflow:hidden;
}
.faq-inner{max-width:900px;margin:0 auto;position:relative;z-index:1;text-align:center}
.faq-title{
  font-family:inherit;font-weight:500;
  font-size:var(--t-h2);
  letter-spacing:-.03em;line-height:1.18;
  color:#fff;
background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.18em}
.faq-sub{
  margin-top:12px;font-size:var(--t-body);
  color:rgba(255,255,255,.7);font-weight:400;
}
.faq-list{margin-top:48px;text-align:left;display:flex;flex-direction:column;gap:14px}
.faq-item{
  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(48,16,72,.46) 0%,rgba(22,8,38,.46) 100%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  overflow:hidden;
  box-shadow:0 4px 18px rgba(20,4,40,.25);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.faq-item:hover{
  border-color:rgba(255,255,255,.30);
  background:linear-gradient(180deg,rgba(64,22,96,.55) 0%,rgba(30,10,52,.55) 100%);
}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 24px;cursor:pointer;
  font-size:15.5px;font-weight:500;color:rgba(255,255,255,.92);
  transition:color .2s;
}
.faq-q:hover{color:#fff}
.faq-ico{
  width:22px;height:22px;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:transparent;font-size:0;
  transition:transform .3s ease;
}
.faq-ico::before{
  content:'';width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid rgba(255,255,255,.72);
}
.faq-item.open .faq-ico{transform:rotate(180deg)}
.faq-a{
  font-size:14.5px;line-height:1.72;color:rgba(255,255,255,.72);
  max-height:0;overflow:hidden;padding:0 24px;
  transition:max-height .4s cubic-bezier(.16,1,.3,1),padding-bottom .4s;
}
.faq-item.open .faq-a{max-height:400px;padding-bottom:20px}

/* ===== CTA ===== */
.cta-sec{
  background:#000;
  position:relative;overflow:hidden;
}
.cta-inner{
  position:relative;z-index:1;
  max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
}
.cta-left h2{
  font-size:var(--t-h2);font-weight:700;
  letter-spacing:-.035em;line-height:1.1;margin-bottom:28px;
  color:#fff;
}

.cta-ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:26px}
.cta-ul li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:var(--t-body);font-weight:400;color:rgba(255,255,255,.8);line-height:1.4;
}
.cta-ul li::before{
  content:'';display:block;width:4px;height:4px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.8);margin-top:8px;
}
.cta-tagline{font-size:var(--t-body);font-weight:400;color:rgba(255,255,255,.6);margin-bottom:34px}
.cta-p-logos{
  display:grid;grid-template-columns:repeat(3,132px);
  gap:34px 56px;align-items:center;justify-items:stretch;width:max-content;
}
.cta-p-logos img{
  display:block;width:100%;max-width:100%;min-width:0;
  height:36px;object-fit:contain;object-position:left center;opacity:.95;
}

/* FORM */
.form-box{
  background:#0d0d0d;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;padding:34px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  width:100%;max-width:400px;margin-left:auto;
}
.fg{margin-bottom:16px}
.fg input,.fg textarea,.fg select{
  width:100%;padding:15px 16px;border-radius:6px;
  background:transparent;border:1px solid rgba(255,255,255,.5);
  color:#fff;font-family:'Satoshi',sans-serif;font-size:14.5px;
  outline:none;transition:border-color .2s,background .2s;
  -webkit-appearance:none;
}
.fg input:focus,.fg textarea:focus{
  border-color:#fff;background:rgba(255,255,255,.03);
}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(255,255,255,.48)}
.form-btn{
  width:100%;margin-top:6px;padding:15px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#a31ce8;
  color:#fff;font-family:'Satoshi',sans-serif;
  font-size:var(--t-btn);font-weight:600;border:none;cursor:pointer;
  transition:background .2s,box-shadow .2s;
}
.form-btn:hover{background:#b228f5;}
.form-btn .btn-ico{font-size:var(--t-btn);line-height:1}
.form-consent{
  display:flex;align-items:flex-start;gap:10px;margin-top:18px;
  font-size:13px;line-height:1.5;color:rgba(255,255,255,.48);
}
.form-consent input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:15px;height:15px;margin-top:1px;border-radius:3px;
  border:1px solid rgba(255,255,255,.3);background:transparent;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.form-consent input[type=checkbox]:checked{
  background:#a31ce8;border-color:#a31ce8;
}
.form-consent a{color:rgba(255,255,255,.7);text-decoration:underline}

/* ===== FOOTER ===== */
.ft{
  background:
    radial-gradient(ellipse 78% 95% at 58% -12%,rgba(122,46,152,.34) 0%,rgba(68,24,92,.16) 32%,transparent 60%),
    #060309;
  border:1px solid rgba(255,255,255,.06);border-bottom:none;
  border-radius:42px 42px 0 0;
  padding:64px 64px 26px;
  position:relative;overflow:hidden;
}
.ft-grid{
  max-width:1280px;margin:0 auto 46px;
  display:flex;align-items:stretch;gap:0;
}
.ft-brand{flex:0 0 30%;padding-right:36px}
.ft-brand img{height:42px;margin-bottom:30px}
.ft-brand-nav{display:flex;flex-direction:column;gap:6px}
.ft-brand-nav a{
  font-size:17px;font-weight:400;color:rgba(255,255,255,.78);
  padding:5px 0;transition:color .2s;
}
.ft-brand-nav a:hover{color:#fff}
.ft-divider{width:1px;background:rgba(255,255,255,.12);align-self:stretch;flex:none;margin:4px 0}
.ft-cols{
  flex:1;display:grid;grid-template-columns:0.9fr 1.25fr 1.3fr;gap:40px;
  padding-left:56px;
}
.ft-col h4{
  font-size:var(--t-h3);font-weight:500;letter-spacing:0;text-transform:none;
  color:#fff;margin-bottom:22px;
}
.ft-col a,.ft-col p{
  display:block;font-size:13.5px;color:rgba(255,255,255,.5);
  padding:6px 0;margin:0;transition:color .2s;line-height:1.3;
}
.ft-col a:hover{color:#fff}
.ft-bot{
  max-width:1280px;margin:0 auto;
  border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.48);
}
.ft-bot a{color:rgba(255,255,255,.48);transition:color .2s}
.ft-bot a:hover{color:#fff}
/* animated underline on footer + nav links */
.ft-col a,.ft-brand-nav a,.ft-bot a{position:relative;display:inline-block}
.ft-col a{display:block}
.ft-col a::after,.ft-brand-nav a::after,.ft-bot a::after,.nav-cta::after{
  content:'';position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:linear-gradient(90deg,#B71CED,#E91E8C);
  transition:width .3s ease;
}
.ft-col a:hover::after,.ft-brand-nav a:hover::after,.ft-bot a:hover::after{width:100%}

/* ===== DESIGN STACK (NEW) ===== */
.dstack{
  background:var(--bg);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:30px 56px;
}
.dstack-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;gap:36px;
}
.dstack-label{
  font-size:var(--t-caption);font-weight:700;letter-spacing:.02em;
  color:rgba(255,255,255,.48);line-height:1.55;
  min-width:106px;flex:none;
}
.dstack-icons{
  display:flex;gap:20px;align-items:center;
  flex-wrap:wrap;row-gap:18px;flex:1;min-width:0;
  justify-content:space-between;
}
.dsi{
  width:44px;height:44px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-body);font-weight:900;font-style:italic;color:#fff;
  cursor:default;transition:transform .18s,box-shadow .18s;
  letter-spacing:-.02em;overflow:hidden;
}
.dsi:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.dsi img{width:26px;height:26px;object-fit:contain;display:block;flex:none}
.dsi-local{background:transparent;padding:0}
.dsi-local img{width:44px;height:44px;object-fit:cover;border-radius:12px}

/* ===== WHY GOOD DESIGN (NEW) ===== */
.wgd-sec{background:#000}
.wgd-top{
  padding:120px 56px 40px;text-align:center;
}
.wgd-title{
  font-size:var(--t-h2);font-weight:500;
  letter-spacing:-.035em;line-height:1.22;
  padding:.14em 0;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.18em}
/* Staggered 3-column */
.wgd-cols{
  display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;
  align-items:start;gap:0;
  max-width:1280px;margin:0 auto;
  padding:0 56px 80px;
  min-height:280px;
}
.wgd-col{padding:24px 48px}
.wgd-col-1{padding-top:120px} /* stagger: lowest */
.wgd-col-2{padding-top:60px}  /* stagger: middle */
.wgd-col-3{padding-top:20px}  /* stagger: highest */
.wgd-divider{
  background:rgba(255,255,255,.12);
  min-height:200px;align-self:stretch;
  transition:background .45s ease,box-shadow .45s ease;
}
/* Animated vertical line — glow on hover */
.wgd-cols:hover .wgd-divider{
  background:linear-gradient(180deg,transparent 0%,rgba(139,92,246,.95) 50%,transparent 100%);
  
  animation:lineGlow 1.8s ease-in-out infinite;
}
@keyframes lineGlow{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
.wgd-h{
  font-size:var(--t-body);font-weight:700;margin-bottom:12px;
  display:block;letter-spacing:-.01em;
}
.wgd-cyan{color:#00cec8}
.wgd-pink{color:#E91E8C}
.wgd-purple{color:#8B5CF6}
.wgd-p{
  font-size:var(--t-body);color:rgba(255,255,255,.6);
  line-height:1.6;max-width:28ch;font-weight:400;
}
/* scroll reveal — columns slide up, dividers draw in */
.wgd-col.rv-pending{opacity:0;transform:translateY(46px)}
.wgd-col.rv-in{opacity:1;transform:translateY(0);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.wgd-divider.rv-pending{opacity:0;transform:scaleY(0);transform-origin:top}
.wgd-divider.rv-in{opacity:1;transform:scaleY(1);
  transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.wgd-col{transition:transform .35s ease}
.wgd-col.rv-in:hover{transform:translateY(-7px)}
.wgd-col .wgd-h{transition:text-shadow .35s ease}
.wgd-col:hover .wgd-cyan{text-shadow:0 0 22px rgba(0,206,200,.6)}
.wgd-col:hover .wgd-pink{text-shadow:0 0 22px rgba(233,30,140,.6)}
.wgd-col:hover .wgd-purple{text-shadow:0 0 22px rgba(139,92,246,.6)}
/* Purple gradient stats */
.wgd-stats-bg{
  background:url('/assets/bg-why-design.png') center center/cover no-repeat;
  position:relative;overflow:hidden;
  padding:80px 56px;
  margin-top:0;
}
.wgd-stats-bg::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(80,0,160,.35),transparent);
  pointer-events:none;
}
.wgd-stats-inner{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;
  gap:40px;align-items:center;
  position:relative;z-index:1;
}
.wgd-stats-col{display:flex;flex-direction:column}
.wgd-stat{display:flex;flex-direction:column;gap:6px}
.wgd-num{
  font-size:clamp(52px,7vw,100px);font-weight:700;
  letter-spacing:-.04em;line-height:1;color:#fff;
}
.wgd-stxt{
  font-size:var(--t-body);color:rgba(255,255,255,.6);
  line-height:1.45;max-width:20ch;font-weight:400;
}
.wgd-stats-col[style*="text-align:right"] .wgd-stxt{margin-left:auto}
.wgd-queen{
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.wgd-queen img{
  width:240px;height:auto;
  filter:drop-shadow(0 20px 50px rgba(100,0,200,.5));
  animation:float 5s ease-in-out infinite;
}

/* Industry tags with emoji */
.ind-tag-inner{display:flex;align-items:center;gap:8px}
.ind-emoji{font-size:var(--t-body);line-height:1}

@media(max-width:1080px){
  .dstack{padding:22px 36px}
  .wgd-top{padding:60px 36px 0}
  .wgd-cols{padding:0 36px}
  .wgd-stats-bg{padding:60px 36px}
  .dstack-icons{flex-wrap:wrap}
}
@media(max-width:860px){
  .wgd-cols{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .wgd-divider{display:none}
  .wgd-col-1,.wgd-col-2,.wgd-col-3{padding-top:16px;padding-left:0;padding-right:0}
  .wgd-stats-inner{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .wgd-queen{grid-column:1/-1;order:-1}
  .wgd-queen img{width:160px}
}
@media(max-width:580px){
  .dstack{padding:20px 22px}
  .dsi{width:38px;height:38px;font-size:var(--t-body);border-radius:9px}
  .dstack-label{min-width:90px;font-size:var(--t-caption)}
}

/* ===== SCREENSHOT MATCH OVERRIDES ===== */
/* Pain points — centered heading + quote-mark cards */
.pain-top{display:block!important;text-align:center;margin-bottom:52px}
.pain-top .sec-title{max-width:none!important;text-align:center}
.pain-note{display:none!important}
/* Stats — mascot center layout */
.stats-grid{display:none!important}
.stats-mascot-layout{
  display:grid;grid-template-columns:1fr 200px 1fr;
  gap:20px;align-items:center;max-width:960px;margin:0 auto;
}
.smcol{display:flex;flex-direction:column;gap:16px}
.sm-img{display:flex;align-items:center;justify-content:center}
.sm-img img{
  width:200px;height:auto;
  filter:drop-shadow(0 16px 40px rgba(183,28,237,.45));
  animation:float 4s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
/* Why Good Design — highlight center card */
.why-cat.center-card{
  border-color:rgba(183,28,237,.35);
  background:rgba(183,28,237,.07);
}
.why-cat.center-card h3{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  font-size:var(--t-h3);padding-bottom:.18em;
}
/* Testimonials — clean */

/* ===== RESPONSIVE ===== */
@media(max-width:1080px){
  .nav{padding:0 36px}
  .sec{padding:80px 36px}
  .hero{padding:110px 36px 0}
  .stack{padding:60px 36px}
  .ind-sec{padding:80px 36px}
  .cta-sec .sec,.cta-sec{padding:80px 36px}
  .ft{padding:56px 40px 24px;border-radius:32px 32px 0 0}
  .ft-cols{padding-left:40px;gap:28px}
}
@media(max-width:860px){
  .nav-center{display:none}
  .nav-cta{padding:9px 16px;font-size:var(--t-btn)}
  .pain-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:1fr}
  .stats-mascot-layout{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .sm-img{grid-column:1/-1;order:-1}
  .sm-img img{width:140px}
  .testi-cols{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr;gap:40px}
  .ft-grid{flex-direction:column;gap:36px}
  .ft-divider{display:none}
  .ft-brand{flex:none;padding-right:0}
  .ft-cols{padding-left:0;grid-template-columns:1fr 1fr;gap:28px}
  .clutch-meta{grid-template-columns:1fr}
  .why-cats{flex-direction:column;align-items:center}
  .hero-tp{left:22px;bottom:22px}
  .hero-clutch{right:22px;bottom:18px;width:56px;height:56px}
  .hero-play{width:64px;height:64px}
}
@media(max-width:580px){
  .pain-grid{grid-template-columns:1fr}
  .hero h1{font-size:var(--t-h1)}
  .sec{padding:70px 22px}
  .hero{padding:100px 22px 0}
  .stack{padding:50px 22px}
  .ind-sec{padding:70px 22px}
  .ft{padding:50px 22px 22px}
  .nav{padding:0 18px}
  .form-box{padding:28px 22px}
  .fg-row{grid-template-columns:1fr}
  .clutch-card{padding:26px 22px}
}

/* ===== GLOBAL CURSOR GLOW ===== */



/* ===== ANIMATION PACKAGE ===== */
@media (prefers-reduced-motion: no-preference){
  /* scroll reveal — slide up (text/blocks without hover-transform) */
  .reveal{opacity:0;transform:translateY(34px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
  /* scroll reveal — fade only (safe for hover-lift cards) */
  .reveal-fade{opacity:0;transition:opacity .7s ease}
  .reveal-fade.in{opacity:1}

  /* hero entrance */
  .hero-play{opacity:0;transform:scale(.6);
    animation:heroPop .9s cubic-bezier(.34,1.56,.64,1) .3s forwards}
  @keyframes heroPop{to{opacity:1;transform:scale(1)}}
  .hero-play::before{content:'';position:absolute;inset:-3px;border-radius:50%;
    border:2px solid rgba(255,255,255,.45);pointer-events:none;
    animation:heroRing 2.6s ease-out infinite}
  @keyframes heroRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.85);opacity:0}}
  .hero-tp,.hero-clutch{opacity:0;animation:fadeUp .8s ease .7s forwards}
  @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
}
/* nav CTA shine sweep (on hover) */
.nav-cta{position:relative;overflow:hidden}
.nav-cta::before{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);pointer-events:none}
.nav-cta:hover::before{animation:ctaShine .85s ease}
@keyframes ctaShine{to{left:150%}}
/* stat numbers glow when counting */
.wgd-num{transition:text-shadow .5s ease}
.wgd-stats-bg.in-stats .wgd-num{text-shadow:0 0 30px rgba(183,28,237,.5)}

/* ===== ANIMATION PACKAGE 2 ===== */
/* scroll progress bar */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;
  background:linear-gradient(90deg,#8B5CF6,#B71CED,#E91E8C,#ED671C);
  box-shadow:0 0 12px rgba(183,28,237,.6);transition:width .12s linear}
/* back-to-top button */
.to-top{position:fixed;right:26px;bottom:26px;z-index:80;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(20,20,24,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font-size:19px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;
  transition:opacity .3s,transform .3s,background .2s,box-shadow .2s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:linear-gradient(135deg,#a31ce8,#c41fd4);
  transform:translateY(-4px)}
/* marquee pause on hover */
.logos-track:hover .logos-inner{animation-play-state:paused}
/* smoother button transforms for magnetic effect */
.nav-cta,.form-btn,.btn-p,.btn-o{
  transition:transform .18s ease,box-shadow .25s ease,background .2s ease,border-color .2s ease}
@media (prefers-reduced-motion: no-preference){
  /* hero slow ken-burns zoom */
  .hero-bg{animation:kenburns 24s ease-in-out infinite alternate}
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
  /* floating chess mascot */
  .wgd-queen img{animation:floaty 4.6s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
}


/* ===== Footer (matches index home page) ===== */
.F{position:relative;z-index:3;overflow:hidden;border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(183,28,237,.6),rgba(237,103,28,.5),transparent) 1;
  padding:48px 60px 22px;background:#070708}
.F::after{content:'';position:absolute;right:-180px;bottom:-180px;width:560px;height:560px;border-radius:50%;
  background:repeating-radial-gradient(circle at center,rgba(183,28,237,.1) 0 1px,transparent 1px 56px);pointer-events:none}
.Fin{position:relative;z-index:1;max-width:1380px;margin:0 auto}
.Fstate{font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.2;
  background:linear-gradient(180deg,#fff 0%,#fff 68%,#d8d8d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  max-width:34ch;padding-bottom:.14em;padding-bottom:.18em}
.Fstate .grad{background:var(--gtext);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.18em}
.offmini{display:flex;gap:10px;align-items:center;padding:6px 0}
.offmini img{width:26px;height:auto;flex:none;filter:drop-shadow(0 4px 12px rgba(183,28,237,.4))}
.offmini b{display:block;font-size:13px;font-weight:700;letter-spacing:.02em}
.offmini a{display:block;font-size:13px;color:rgba(255,255,255,.48);transition:color .2s}
.offmini a:hover{color:#fff}
.Fgrid{display:grid;grid-template-columns:1.3fr .7fr .9fr .9fr 1.2fr;gap:40px;margin-top:42px}
.Fbrand img{height:24px;margin-bottom:14px}
.Fbrand p{font-size:13px;color:rgba(255,255,255,.48);max-width:28ch;line-height:1.6}
.Fsoc{display:flex;gap:8px;margin-top:18px}
.Fsoc a{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);transition:all .25s}
.Fsoc a:hover{border-color:rgba(183,28,237,.55);color:#fff;transform:translateY(-2px)}
.Fsoc svg{width:14px;height:14px;fill:currentColor;display:block}
.Fcol h4,.Fcol h3{font-size:var(--t-h3);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.48);margin-bottom:14px}
.Fcol a{display:block;font-size:13px;padding:4px 0;color:rgba(255,255,255,.65);transition:color .2s,padding-left .25s}
.Fcol a:hover{color:#fff;padding-left:6px}
.Fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:52px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.48)}
@media(max-width:860px){.Fgrid{grid-template-columns:1fr 1fr;gap:32px}.F{padding:60px 28px 28px}}
@media(max-width:580px){.Fgrid{grid-template-columns:1fr;gap:30px}}

/* author byline */
.bp-meta .bp-au{color:#fff;text-decoration:none;transition:color .2s}
.bp-meta .bp-au:hover{color:#d9a9f5;text-decoration:underline;text-underline-offset:3px}
.bp-avatar{border-radius:50%;object-fit:cover}
.bl-card .bl-au{display:flex;align-items:center;gap:9px;margin-top:12px}
.bl-card .bl-au img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none}
.bl-card .bl-au span{font-size:var(--t-caption);color:rgba(255,255,255,.5)}

/* --- block --- */
/* ============ BLOG ARTICLE PAGE ============ */
.bp-hero{
  position:relative;overflow:hidden;background:#000;text-align:center;
  padding:160px 24px 10px;
}
.bp-hero::before{
  content:'';position:absolute;left:50%;top:-40%;transform:translateX(-50%);
  width:1200px;height:700px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(183,28,237,.22),transparent 65%);
}
.bp-crumb{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-caption);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:22px;transition:color .2s;
}
.bp-crumb:hover{color:#fff}
.bp-hero h1{
  position:relative;z-index:1;
  font-size:var(--t-h1);font-weight:700;letter-spacing:-.03em;line-height:1.12;
  padding-bottom:.12em;color:#fff;max-width:19ch;margin:0 auto;
}
.bp-hero .excerpt{
  position:relative;z-index:1;
  font-size:var(--t-body);line-height:1.7;color:rgba(255,255,255,.65);
  max-width:640px;margin:16px auto 0;
}
.bp-hero .date{
  position:relative;z-index:1;display:inline-block;
  font-size:var(--t-caption);font-weight:600;color:#d9a9f5;margin:22px 0 0;
  padding:8px 18px;border-radius:999px;
  background:rgba(183,28,237,.12);border:1px solid rgba(183,28,237,.35);
}
.bp-share{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:34px 24px 38px;position:relative;
}
.bp-share::after{
  content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(780px,88%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
.bp-share span{font-size:var(--t-body);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.48);margin-right:6px}
.bp-share a{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.7);
  transition:all .25s;
}
.bp-share a:hover{border-color:rgba(183,28,237,.6);color:#fff;transform:translateY(-2px)}
.bp-share svg{width:15px;height:15px;fill:currentColor;display:block}
.bp-body{padding:30px 24px 70px;background:#000}
.bp-art{max-width:780px;margin:0 auto}
.bp-art h2{
  font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;color:#fff;
  margin:46px 0 16px;line-height:1.25;
}
.bp-art h3{
  font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;margin:40px 0 8px;
  background:var(--gtext);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  display:inline-block;padding-bottom:.18em;
}
.bp-art h4{font-size:var(--t-h3);font-weight:700;color:#fff;margin:26px 0 8px}
.bp-art p{font-size:var(--t-body);line-height:1.85;color:rgba(255,255,255,.68);margin:0 0 16px}
.bp-art p b,.bp-art li b{color:rgba(255,255,255,.92);font-weight:700}
.bp-art a{color:#c98af0;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.bp-art a:hover{color:#fff}
.bp-art ul,.bp-art ol{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.bp-art li{font-size:var(--t-body);line-height:1.7;color:rgba(255,255,255,.68)}
.bp-art li::marker{color:#B71CED}
.bp-art .lede{font-size:var(--t-body);color:rgba(255,255,255,.78)}
.bp-art hr{border:none;border-top:1px solid rgba(255,255,255,.1);margin:40px 0}
.bp-faq .faq-inner{max-width:780px}

/* --- dm-premium --- */
/* ===== PREMIUM POLISH (site-wide, not on home) ===== */
::selection{background:rgba(183,28,237,.45);color:#fff}
html{scrollbar-width:thin;scrollbar-color:#6d2f92 #0a0710}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0a0710}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#B71CED,#6a0f9e);border-radius:99px;border:2px solid #0a0710}
::-webkit-scrollbar-thumb:hover{background:#c93cf5}
:focus-visible{outline:2px solid rgba(183,28,237,.75);outline-offset:3px}
section[id],footer[id]{scroll-margin-top:96px}
#scrollProg{box-shadow:0 0 12px rgba(183,28,237,.8),0 0 4px rgba(233,30,140,.9)}
.form-btn{position:relative;overflow:hidden}
.form-btn::before{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);pointer-events:none}
.form-btn:hover::before{animation:ctaShine .85s ease}
@media(prefers-reduced-motion:no-preference){
  body{animation:dmPageIn .55s ease-out both}
  @keyframes dmPageIn{from{opacity:0}to{opacity:1}}
  .reveal{opacity:0;transform:translateY(36px);filter:blur(9px);
    transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),filter .95s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none;filter:none}
  .reveal-fade{opacity:0;transform:translateY(20px) scale(.98);filter:blur(7px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1)}
  .reveal-fade.in{opacity:1;transform:none;filter:none}
}

/* --- dart-footer-size --- */
/* ===== footer text at body size ===== */
.F .Fbrand p,.F .Fcol a,.F .offmini b,.F .offmini a,.F .Fbot{font-size:var(--dart-body,18px)!important;line-height:1.35!important}
.F .Fcol h4,.F .Fcol h3{font-size:14px!important}
.F .offmini img{width:32px!important}

/* --- dart-article-style --- */
/* ===== article beauty pass ===== */
.bp-cat{display:inline-block;letter-spacing:.18em;text-transform:uppercase;color:#a78bfa;margin-bottom:14px}
.bp-art .lede{color:rgba(255,255,255,.88)!important;border-left:3px solid #B71CED;padding-left:18px;margin-bottom:26px}
.bp-art p{margin:0 0 18px}
.bp-art h2{margin:46px 0 16px}
.bp-art h3{margin:34px 0 12px}
.bp-art ul,.bp-art ol{margin:0 0 20px 22px}
.bp-art li{margin-bottom:8px}
.bp-art li::marker{color:#B71CED}
.bp-art a{color:#d94ce6;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(183,28,237,.5);transition:color .2s}
.bp-art a:hover{color:#fff}
.bp-fig{margin:30px 0}
.bp-fig img{width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.12);display:block}
.bp-fig figcaption{color:rgba(255,255,255,.48);margin-top:10px;text-align:center}
.bp-embed{margin:26px 0}
.bp-embed a{display:inline-flex;gap:8px;align-items:center;padding:12px 22px;border:1px solid rgba(183,28,237,.45);border-radius:10px;color:#fff!important;text-decoration:none!important;background:rgba(183,28,237,.08);}
.bp-embed a:hover{background:rgba(183,28,237,.18)}
/* editorial sizes inside articles + tighter layout */
.bp-art{max-width:860px!important}
.bp-body{padding:26px 20px 60px!important}
.bp-art h2{line-height:1.2!important}
.bp-art h3{line-height:1.25!important}
.bp-hero h1{line-height:1.12!important}
/* v3: wider column, clean headings */
.bp-art{max-width:1000px!important}
.bp-body{padding:20px 40px 56px!important}
.bp-hero{padding-left:40px!important;padding-right:40px!important}
.bp-art h2,.bp-art h3{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.bp-art h2{padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);margin:42px 0 18px!important}
.bp-art h3{color:#fff!important;-webkit-text-fill-color:#fff!important;margin:30px 0 12px!important}
.bp-art ul{margin-left:6px!important}
.bp-art li{padding-left:6px}
@media(max-width:700px){.bp-body{padding:14px 20px 46px!important}.bp-hero{padding-left:20px!important;padding-right:20px!important}}

/* --- dart-typography --- */
/* ===== TYPE SCALE (single source, fluid): H1 70 | H2 60 | H3 25 | Body 18 | Caption 14 | Button 18 ===== */
:root{--t-h1:clamp(42px,5.2vw,70px);--t-h2:clamp(32px,4.4vw,60px);--t-h3:clamp(20px,1.85vw,25px);--t-sub:clamp(17px,1.35vw,18px);--t-body:clamp(17px,1.3vw,18px);--t-btn:clamp(16px,1.3vw,18px);--t-caption:clamp(15px,1.2vw,16px);--dart-body:clamp(17px,1.3vw,18px);--dart-body-sm:clamp(17px,1.3vw,18px)}
body{font-size:var(--t-body)!important}
.bp-hero h1, .hero h1{font-size:var(--t-h1)!important;font-weight:500!important;line-height:1.08!important}
.cta-left h2, .sec-title{font-size:var(--t-h2)!important;font-weight:500!important;line-height:1.12!important}
h3, h4, .bp-art h2, .bp-art h3{font-size:var(--t-h3)!important;font-weight:600!important;line-height:1.25!important}
.abf-front b, .abf-back b, .bd-step b, .ai-hf-card b, .ai-step b, .ai-svc-card b, .aic b, .bd-wcard b, .cmf-face b, .prf-face b, .sif-face b, .wdf-face b, .pm-wrong-card b, .wd-wcard b, .ab-member b, .pstep b, .seg-top b, .ct-loc b{font-size:var(--t-h3)!important;font-weight:600!important;line-height:1.25!important}
.bd-price-sub, .bd-proc-sub, .bl-hero-sub, .bp-art .lede, .bp-art h4, .bp-art li, .bp-art p, .bp-hero .date, .bp-hero .excerpt, .bp-share span, .cta-tagline, .cta-ul li, .dsi, .dstack-label, .faq-sub, .fs-hero-sub, .hero-sub, .ind-emoji, .lead, .pain-desc, .pain-note, .pain-title, .sec-label, .sec-sub, .stack-label, .stat-txt, .ti, .tool, .trev-aname, .trev-ccount, .trev-clink, .trev-mcount, .trev-mitem, .trev-quote, .vnums-sub, .wgd-h, .wgd-p, .wgd-stxt, .why-cat p{font-size:var(--t-body)!important;line-height:1.3!important}
.bd-price-sub, .bd-proc-sub, .bl-hero-sub, .bp-hero .excerpt, .cr-form .sub, .ct-every .sub, .cta-tagline, .faq-sub, .fs-hero-sub, .hero-sub, .lead, .pain-desc, .sec-sub, .stat-txt, .vnums-sub, .wgd-p, .why-cat p{font-size:var(--t-sub)!important;line-height:1.5!important}
.nav-cta, .btn-p, .btn-o, .form-btn, .fs-btn, .bd-btn, .cr-btn, .cm-btn, .bl-btn, .bd-plan .cta, .nav-cta .cta-ico, .form-btn .btn-ico, .bl-pager button, .fs-btn.ghost{font-size:var(--t-btn)!important;font-weight:500!important}
.sec-kicker, .kicker, .eyebrow, figcaption, .bp-fig figcaption, .bp-cat, .bl-card .date, .bp-hero .date, .cover .site, .svc-tailored-label, .F .Fcol h4,.F .Fcol h3, .tp-txt, .abf-hint, .dstack-label, .stack-label, .sec-label, .stat .lab, .camp-stats span, .bull-tools span, .trev-ctag, .logos-label, .tag, .chips a{font-size:var(--t-caption)!important}
/* ===== DESIGN SYSTEM - tokens, radius, buttons (single source of truth) ===== */
:root{
  --c-bg:#000;
  --c-orange:#ED671C;
  --c-magenta:#B71CED;
  --c-violet:#8B5CF6;
  --c-pink:#E91E8C;
  --grad-brand:linear-gradient(135deg,#8B5CF6 0%,#B71CED 38%,#E91E8C 70%,#ED671C 100%);
  --grad-btn:linear-gradient(95deg,#a31ce8 0%,#c41fd4 100%);
  --grad-btn-hover:linear-gradient(95deg,#b228f5 0%,#d52ae6 100%);
  --tx-1:#fff;
  --tx-2:rgba(255,255,255,.65);
  --tx-3:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.14);
  --r-nav:12px;
  --r-nav-link:8px;
  --r-btn:10px;
  --r-card:16px;
  --r-panel:20px;
}
/* Every button shares one radius */
.btn-p, .btn-o, .form-btn, .fs-btn, .fs-btn.ghost, .bd-btn, .cr-btn, .ct-submit, .cm-btn,
.bl-btn, .bd-plan .cta, .nav-cta, .bl-pager button{border-radius:var(--r-btn)!important}
/* Section CTA buttons */
.btn-p, .btn-o, .bd-btn, .cm-btn, .fs-btn, .fs-btn.ghost, .bl-btn, .bd-plan .cta{padding:14px 30px!important}
/* Form submit buttons */
.form-btn, .ct-submit, .cr-btn{padding:15px!important}
/* Nav CTA */
.nav-cta{padding:11px 22px!important}
@media(max-width:1024px){.nav-cta{padding:9px 16px!important}}
/* Primary button - one gradient style, one hover behaviour */
.btn-p, .form-btn, .ct-submit, .cr-btn, .bd-btn, .cm-btn, .bl-btn, .bd-plan .cta{
  background:var(--grad-btn)!important;color:var(--tx-1)!important;border:none!important;
  transition:background .25s ease,transform .2s ease,box-shadow .25s ease!important;
}
.btn-p:hover, .form-btn:hover, .ct-submit:hover, .cr-btn:hover, .bd-btn:hover, .cm-btn:hover,
.bl-btn:hover, .bd-plan .cta:hover, .nav-cta:hover{
  background:var(--grad-btn-hover)!important;transform:translateY(-1px)!important;
  box-shadow:0 8px 24px rgba(183,28,237,.28)!important;
}
/* Secondary button - one outline style, matching hover */
.btn-o, .fs-btn.ghost{
  background:transparent!important;color:var(--tx-1)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  transition:background .25s ease,border-color .25s ease,transform .2s ease!important;
}
.btn-o:hover, .fs-btn.ghost:hover{
  background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.40)!important;
  transform:translateY(-1px)!important;
}

/* --- nav-mobile-fix --- */
/* ===== Mobile navigation (hamburger + drawer) ===== */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(20,20,23,.72);cursor:pointer;padding:0;position:relative;z-index:901;flex:none}
.nav-burger span{display:block;width:20px;height:2px;margin:0 auto;background:#fff;border-radius:2px;transition:transform .3s,opacity .25s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mob{position:fixed;inset:0;z-index:890;background:rgba(8,6,12,.98);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);display:flex;flex-direction:column;padding:92px 24px 40px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s ease,transform .4s ease,visibility .4s}
.nav-mob.open{opacity:1;visibility:visible;transform:none}
.nav-mob-links{display:flex;flex-direction:column}
.nav-mob-links>a,.nm-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:inherit;font-size:19px;font-weight:500;color:#fff;text-decoration:none;padding:15px 6px;border:0;border-bottom:1px solid rgba(255,255,255,.08);background:none;cursor:pointer;text-align:left}
.nav-mob-links>a:hover,.nm-trigger:hover{color:#fff}
.nm-trigger .chev{font-size:14px;color:rgba(255,255,255,.5);transition:transform .3s}
.nm-group.open .nm-trigger .chev{transform:rotate(180deg)}
.nm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.nm-group.open .nm-sub{grid-template-rows:1fr}
.nm-sub-in{overflow:hidden;min-height:0}
.nm-sub a{display:block;font-size:15px;color:rgba(255,255,255,.62);text-decoration:none;padding:10px 6px 10px 18px}
.nm-sub a:hover{color:#fff}
.nm-sub-label{display:block;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.48);padding:14px 6px 4px 18px}
.nav-mob .nav-cta{display:inline-flex;justify-content:center;width:100%;margin-top:28px}
body.nav-locked{overflow:hidden}
@media(max-width:1024px){.nav-burger{display:flex}.nav-logo{position:relative;z-index:901}.nav>.nav-cta{display:none}}
@media(min-width:1025px){.nav-mob{display:none!important}.nav-burger{display:none!important}}
@media(prefers-reduced-motion:reduce){.nav-mob,.nav-burger span,.nm-sub,.nm-trigger .chev{transition:none}}

/* --- bp-rails --- */
.bp-railL,.bp-railR{display:block}
.bp-railL .rin,.bp-railR .rin{position:sticky;top:130px}
.bp-railL .rlab{display:block;font-size:var(--t-caption);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:14px;text-align:center}
.bp-railL .rin{display:flex;flex-direction:column;align-items:center;gap:0}
.bp-railL a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#121016;color:rgba(255,255,255,.75);margin-bottom:12px;transition:border-color .25s,color .25s,transform .25s}
.bp-railL a:hover{border-color:rgba(163,28,232,.6);color:#fff;transform:translateY(-2px)}
.bp-railL svg{width:18px;height:18px;fill:currentColor;display:block}
.bp-subcard{background:#121016;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:26px 24px;text-align:center}
.bp-subcard h4,.bp-subcard h3{margin:0 0 18px;color:#fff;font-size:var(--t-body);font-weight:700;line-height:1.4}
.bp-subform input{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.35);color:#fff;padding:10px 2px;font-size:var(--t-body);font-family:inherit;outline:none;margin-bottom:18px}
.bp-subform input::placeholder{color:rgba(255,255,255,.55)}
.bp-subform input:focus{border-bottom-color:#c41fd4}
.bp-subform button{width:100%;border:none;cursor:pointer;background:linear-gradient(95deg,#a31ce8,#c41fd4);color:#fff;font-weight:600;font-size:var(--t-btn);font-family:inherit;padding:12px 0;border-radius:10px;transition:opacity .25s,transform .25s}
.bp-subform button:hover{opacity:.9;transform:translateY(-1px)}
@media(min-width:1280px){
.bp-body{display:grid!important;grid-template-columns:96px minmax(0,1000px) 300px;justify-content:center;gap:46px;align-items:start}
.bp-share{display:none!important}
}
@media(max-width:1279px){
.bp-railL{display:none}
.bp-railR{max-width:430px;margin:44px auto 0}
.bp-railR .rin{position:static}
}

/* --- cta-form-xl --- */
.cta-sec .form-box{max-width:600px;padding:38px 34px}
.form-box .f-title{margin:0 0 6px;color:#fff;font-size:var(--t-h3);font-weight:600}
.form-box .f-sub{margin:0 0 24px;color:rgba(255,255,255,.55);font-size:var(--t-caption);line-height:1.5}
.cta-sec .fg-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cta-sec .fg{margin-bottom:18px}
.cta-sec .fg label{display:block;font-size:var(--t-caption);font-weight:600;color:rgba(255,255,255,.6);margin:0 0 7px}
.cta-sec .fg input,.cta-sec .fg textarea{font-size:16px}
.cta-sec .fg textarea{min-height:132px;resize:vertical}
.cta-sec .form-btn{padding:17px}
@media(max-width:640px){.cta-sec .fg-row{grid-template-columns:1fr}.cta-sec .form-box{padding:30px 22px}}
/* wider CTA card + white gradient stroke.
   the ramp mirrors the .bull-card gradient-border recipe already on this site, in white.
   double background: padding-box paints the card fill, border-box paints the
   gradient into the 1px border, so radius, shadow and padding are preserved
   and no pseudo-element or extra markup is needed.
   the input fields are not selected here, they keep their own plain border. */
.cta-sec .cta-inner{max-width:1280px}
.cta-sec .form-box{border-color:transparent;background:linear-gradient(#0d0d0d,#0d0d0d) padding-box,linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.12) 55%,rgba(255,255,255,.34)) border-box}

/* --- dart-mobile-fix --- */
/* Dart Marketing - mobile responsiveness fixes.
   Scoped to mobile / tablet media queries only.
   Rendering above 1180px is unchanged. */
/* client logo grid: width:max-content pinned the CTA columns to 507px */
@media(max-width:860px){
  .cta-left,.cta-right{min-width:0}
  .cta-p-logos{width:100%;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px}
  .cta-p-logos img{max-width:100%;min-width:0;object-fit:contain;object-position:left center}
}
@media(max-width:580px){
  .cta-p-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .cta-p-logos img{height:clamp(26px,8vw,36px)}
}
/* Clutch review card: 280px + 1fr / 1fr 1px 1fr never collapsed on mobile */
@media(max-width:860px){
  .trev-card{grid-template-columns:1fr}
  .trev-right{grid-template-columns:1fr}
  .trev-vdiv{width:100%;height:1px}
}
/* badge: anchor shrinks to 56x56 on mobile but the image stayed 76x82 */
@media(max-width:860px){
  .hero-clutch img{width:56px;height:56px;object-fit:cover}
}
/* touch targets: transparent hit area only, no visual change */
@media(max-width:860px){
  .nav-logo{position:relative}
  .nav-logo::after{content:"";position:absolute;top:-7px;right:0;bottom:-7px;left:0}
  .Fsoc a{position:relative}
  .Fsoc a::after{content:"";position:absolute;top:-6px;right:-4px;bottom:-6px;left:-4px;border-radius:50%}
}
@media(max-width:860px){
  .bp-crumb{position:relative}
  .bp-crumb::after{content:"";position:absolute;top:-6px;right:0;bottom:-6px;left:0}
}
@media(max-width:860px){
  .trev-clink{position:relative}
  .trev-clink::after{content:"";position:absolute;top:-6px;right:0;bottom:-6px;left:0}
}
/* secondary text CTAs sat 1-3px under the 24px minimum; hit area only */
@media(max-width:860px){
  .Fbot a{position:relative}
  .Fbot a::after{content:"";position:absolute;top:-3px;right:0;bottom:-3px;left:0}
}

/* --- dart-landmark-css --- */
.dart-skip{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;z-index:100000}
.dart-skip:focus,.dart-skip:focus-visible{left:14px;top:14px;width:auto;height:auto;overflow:visible;white-space:normal;padding:12px 20px;background:#fff;color:#000;border-radius:10px;font-family:'Satoshi',sans-serif;font-size:15px;font-weight:700;line-height:1.2;text-decoration:none;outline:3px solid #fff;outline-offset:2px;box-shadow:0 8px 28px rgba(0,0,0,.6)}
main{display:block}
main:focus{outline:none}

/* --- dart-tap-css --- */
/* WCAG 2.5.8 target size (minimum): transparent hit area only.
   No visual change - no colour, spacing, typography or box geometry is touched. */
/* "← All Insights"  measured 162x18 -> 162.0x24.0 */
a.bp-crumb{position:relative}
a.bp-crumb::after{content:"";position:absolute;top:-3px;right:0;bottom:-3px;left:0}

/* --- bp-hero-size --- */
/* Blog hero banner sized to match the approved v2 hero. These pages carry no
   cover image and no author block, so the card is text only and keeps the
   page's own centred copy. The width ladder, the breakpoints and the section
   padding below all mirror the v2 hero exactly, so the two templates line up
   at every viewport. Below 861 the v2 hero has no card at all, so neither does
   this one, which leaves these pages' phone layout exactly as it already was. */
.bp-hero.bp-hero-c{
  padding:clamp(112px,8.6vw,164px) 40px 68px!important;
}
.bp-hero-c .bp-hero-in{position:relative;z-index:1;margin:0 auto}
@media(min-width:861px){
  .bp-hero-c .bp-hero-in{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:min(94vw,1560px);max-width:100%;
    /* tracks the measured v2 card: text driven up to 1100, cover driven above */
    min-height:max(320px,calc(min(17.42vw,333px) + clamp(38px,3.1vw,59px) + clamp(42px,3.53vw,67px)));
    background:linear-gradient(180deg,#141118,#100e14);
    border:1px solid rgba(255,255,255,.09);
    border-radius:clamp(16px,1.3vw,24px);
    padding:clamp(38px,3.1vw,59px) clamp(38px,3.26vw,62px) clamp(42px,3.53vw,67px);
    text-align:center;
  }
  /* the site locks h1 to --t-h1 with !important further up, so the banner
     size has to be declared !important to land */
  .bp-hero-c h1{font-size:clamp(30px,2.45vw,46px)!important;line-height:1.16!important;
    max-width:26ch;margin:0}
  .bp-hero-c .excerpt{font-size:clamp(15px,1.05vw,18px)!important;line-height:1.5!important;
    max-width:74ch;margin:12px auto 0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bp-hero-c .date{margin:clamp(18px,1.6vw,28px) 0 0}
}
@media(min-width:861px) and (max-width:1099px){
  /* the v2 card is text driven across this band and measures a flat 354 */
  .bp-hero-c .bp-hero-in{min-height:354px}
}
@media(min-width:1024px){
  /* full reference width once there is room for it */
  .bp-hero-c .bp-hero-in{width:min(82.1vw,1560px)}
}
@media(max-width:860px){
  .bp-hero.bp-hero-c{padding:108px 40px 48px!important}
}
@media(max-width:700px){
  .bp-hero.bp-hero-c{padding:100px 20px 40px!important}
}

/* article hero headline back on the shared scale */
.bp-hero.bp-hero-c h1{font-size:var(--t-h1)!important;font-weight:500!important;line-height:1.1!important;letter-spacing:-.02em!important}

/* --- platform playbook hero: copy on the left, artwork on the right --- */
.bp-hero.pb-hero{padding:132px 40px 56px}
.pb-hero .bp-hero-in{
  max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:56px;align-items:center;text-align:left;
}
.pb-hero h1{margin:0 0 18px;max-width:20ch}
.pb-hero .excerpt{margin:0 0 22px;max-width:52ch}
.pb-hero .bp-meta{justify-content:flex-start}
.pb-hero-img{margin:0}
.pb-hero-img img{
  display:block;width:100%;max-width:440px;height:auto;margin-left:auto;
  border-radius:var(--r-card,16px);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
@media(max-width:900px){
  .bp-hero.pb-hero{padding:108px 24px 40px}
  .pb-hero .bp-hero-in{grid-template-columns:1fr;gap:34px}
  .pb-hero-img img{max-width:360px;margin:0 auto}
}
.bp-hero.pb-hero h1{font-size:var(--t-h1)!important;font-weight:500!important;line-height:1.1!important;letter-spacing:-.02em!important}

.pb-hero .bp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:flex-start}
.pb-hero .bp-msep{display:inline-block;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.34);flex:none}
.pb-hero .bp-mi{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.62)}

/* cache-key refresh */

/* Gradient text is clipped to the glyph box, so tight leading and negative
   letter-spacing cut descenders and the last glyph. Pad the box and pull the
   padding back with a matching negative margin so layout is unchanged. */
h1,h2,h3,.g-text,.g-brand,.grad{}
[class*="hero"] h1,[class*="hero"] h2,.sec-title,.sh,.g-text,.g-brand,.grad{
  padding-bottom:.16em;margin-bottom:-.16em;
  padding-right:.06em;
}

/* The nav CTA was taller than the nav row it sits in. */
.nav-cta{padding:9px 18px!important;font-size:var(--t-btn)!important;line-height:1.25!important}
@media(max-width:1024px){.nav-cta{padding:8px 14px!important}}

/* Footer region icons: each map has its own aspect ratio, so at a fixed width
   they rendered at four different heights and never lined up. They also came
   out near-black on a black footer, and the ones whose artwork runs to the
   edge of the file looked clipped. One fixed box with object-fit gives them a
   common size and centre, and the brightness lift makes them legible. The
   dartboard rings sat behind this column, so they move clear of it. */
.F .offmini img{width:32px!important;height:26px;object-fit:contain;object-position:center;
  filter:brightness(2.15) saturate(1.15) drop-shadow(0 3px 10px rgba(183,28,237,.45))}
.F .offmini{align-items:center;gap:12px}
.F::after{right:-300px;bottom:-250px}