/* ============================================
   Mahmudul Hasan — personal site design system, v4
   Matched directly to the ga4experts.com screenshot:
   white bg, light dot-grid, navy headings, orange accent,
   rounded geometric sans, left-aligned hero, no dashboard card.
   ============================================ */

:root{
  --ink: #13213C;
  --ink-soft: #5B6577;
  --ink-faint: #9498A3;
  --bg: #FFFFFF;
  --bg-soft: #F6F7F9;
  --line: #E7E9EE;
  --line-strong: #D8DBE2;
  --accent: #F1791E;
  --accent-hover: #D9670F;
  --accent-soft: #FDECD9;
  --accent-mark: #F6D9BE;
  --accent-ink: #9A4B0C;
  --navy: #13213C;
  --radius: 10px;
  --maxw: 1180px;
  --font: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink-soft);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-size:17px;
}
a{color:inherit; text-decoration:none;}
.fmail{font-family:var(--font-mono); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

/* ---------- NAV (ga4experts.com style) ---------- */
header.site-header{
  background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
}
nav.wrap{display:flex; align-items:center; gap:24px; height:72px;}
.logo{font-weight:800; font-size:23px; letter-spacing:-0.03em; margin-right:8px;}
.logo span{color:var(--accent);}
.navlinks{display:flex; align-items:center; gap:6px; font-size:16.5px; color:var(--ink); font-weight:500; margin-left:auto;}
.navlinks a, .nav-link{color:var(--ink); font-weight:500; padding:9px 11px; border-radius:8px;}
.navlinks a:hover, .nav-link:hover{color:var(--ink); background:var(--bg-soft);}
.navlinks a.active{color:var(--accent-ink);}
.nav-item{position:relative; display:flex; align-items:center;}
.nav-link{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font); background:none; border:none; cursor:pointer;
  font-size:16.5px; padding:6px 0;
}
.nav-link .caret{font-size:10px; opacity:.7; margin-top:2px;}
.dropdown{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px;
  box-shadow:0 20px 44px -18px rgba(19,33,60,0.22); width:300px;
  opacity:0; visibility:hidden; transition:all .16s ease; z-index:50;
}
.nav-item:hover .dropdown{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
.drop-link{display:block; padding:10px 12px; border-radius:9px;}
.drop-link:hover{background:var(--bg-soft);}
.drop-link b{display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:2px;}
.drop-link span{font-size:12.5px; color:var(--ink-faint); font-weight:500;}
.drop-foot{border-top:1px solid var(--line); margin-top:6px; padding:10px 12px 4px; font-size:13px; font-weight:700; color:var(--accent-ink);}
.nav-cta{display:flex; align-items:center; gap:10px;}

/* Resources (simple) dropdown — icon+text rows, single column */
.dropdown:not(.mega){width:290px;}
.dropdown:not(.mega) .drop-link{display:flex; gap:12px; align-items:flex-start; padding:11px 12px;}
.dropdown:not(.mega) .drop-ico{
  width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0;
  transition:background .15s ease, color .15s ease;
}
.dropdown:not(.mega) .drop-link:hover .drop-ico{background:var(--accent); color:#fff;}
.dropdown:not(.mega) .drop-txt b{display:block; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:2px;}
.dropdown:not(.mega) .drop-txt span{font-size:12px; color:var(--ink-faint); font-weight:500;}

.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:14px 24px; border-radius:16px; font-size:16px; font-weight:600;
  border:1px solid transparent; white-space:nowrap; font-family:var(--font);
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-hover);}
.btn-secondary{background:#fff; color:var(--ink); border-color:var(--line-strong);}
.btn-secondary:hover{background:var(--bg-soft);}
.btn-dark{background:var(--navy); color:#fff;}
.btn-dark:hover{background:#0B1730;}
.btn-sm{padding:9px 16px; font-size:14.5px;}
.btn-block{width:100%; justify-content:center;}
.text-link{font-size:14.5px; font-weight:600; color:var(--ink-soft);}
.text-link:hover{color:var(--ink);}

/* ---------- HERO ---------- */
.hero{
  padding:80px 0 60px; position:relative; overflow:hidden;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom, #000 75%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 75%, transparent 100%);
}
.hero-inner{max-width:680px; position:relative; z-index:1;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12.5px; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:22px;
}
.eyebrow .rule{width:18px; height:2px; background:var(--accent);}
h1.hero-title{
  font-size:clamp(36px, 5.2vw, 59px); font-weight:700; letter-spacing:-0.03em;
  line-height:1.08; margin-bottom:22px; color:var(--navy);
}
.hero-title .mark{position:relative; white-space:nowrap;}
.hero-title .mark::before{
  content:""; position:absolute; left:-3%; right:-3%; bottom:6%; top:20%;
  background:var(--accent-mark); z-index:-1; border-radius:4px;
}
.hero-sub{font-size:20px; color:var(--ink-soft); max-width:540px; margin-bottom:28px; line-height:1.6;}
.hero-sub b{color:var(--ink); font-weight:700;}
.hero-bullets{
  list-style:none; margin-bottom:32px; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; max-width:520px;
}
.hero-bullets li{font-size:15.5px; color:var(--ink); font-weight:600; display:flex; align-items:center; gap:9px;}
.hero-bullets li::before{content:"\2713"; color:var(--accent); font-weight:700;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}

/* trusted-by marquee + stats — one continuous band, one background */
.trustedby-section{background:var(--bg-soft); padding:60px 0 66px; overflow:hidden;}
.trustedby{text-align:center;}
.trustedby .label{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
}
.trustedby .label-dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}

/* full-bleed scrolling logo marquee */
.marquee{
  position:relative; margin-top:34px; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{
  display:flex; width:max-content; align-items:center;
  animation:marquee-scroll 38s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused;}
.logo-item{
  flex:0 0 auto; display:flex; align-items:center; gap:11px; margin:0 34px;
  font-size:23px; font-weight:800; letter-spacing:-0.025em; white-space:nowrap;
  color:var(--ink-faint); opacity:.72; transition:color .2s ease, opacity .2s ease;
}
.logo-item::before{
  content:""; width:9px; height:9px; border-radius:2px; flex-shrink:0;
  background:var(--line-strong); transition:background .2s ease;
}
.logo-item:hover{color:var(--navy); opacity:1;}
.logo-item:hover::before{background:var(--accent);}
@keyframes marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none; flex-wrap:wrap; justify-content:center; width:100%;}
  .logo-item[aria-hidden="true"]{display:none;}
}

/* minimal typographic stat band */
.stats-min{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  max-width:1000px; margin:62px auto 0;
}
.stat-m{position:relative; text-align:center; padding:8px 26px;}
.stat-m + .stat-m::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:54px; background:var(--line);
}
.stat-m-num{
  display:inline-flex; align-items:flex-start; justify-content:center;
  font-size:clamp(46px,5.2vw,62px); font-weight:800; color:var(--navy);
  letter-spacing:-0.045em; line-height:1; font-variant-numeric:tabular-nums;
}
.stat-m-num .plus{color:var(--accent); font-size:0.46em; font-weight:800; margin-top:0.16em; margin-left:2px;}
.stat-m-num .unit{color:var(--accent); font-size:0.5em; font-weight:800; margin-top:0.18em; margin-left:1px;}
.stat-m-num .dash{color:var(--ink-faint); font-weight:700; margin:0 1px;}
.stat-m-label{
  position:relative; display:inline-block; margin-top:18px; padding-top:14px;
  font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
}
.stat-m-label::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%) scaleX(0);
  width:26px; height:2px; border-radius:2px; background:var(--accent);
  transition:transform .5s ease .15s;
}
.stat-m.in-view .stat-m-label::before{transform:translateX(-50%) scaleX(1);}

/* ---------- SECTION SHARED ---------- */
section{padding:76px 0;}
.section-head{margin-bottom:42px; max-width:580px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.kicker{font-family:var(--font-mono); font-size:12.5px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--accent-ink);}
h2.section-title{font-size:clamp(30px, 3.8vw, 42px); font-weight:700; letter-spacing:-0.02em; line-height:1.15; margin-top:10px; color:var(--navy);}
.section-desc{color:var(--ink-soft); margin-top:12px; font-size:17px; line-height:1.6;}
.section-alt{background:var(--bg-soft);}

/* ---------- GRIDS / CARDS ---------- */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 20px;}
.icon-box{
  width:34px; height:34px; border-radius:8px; background:var(--accent-soft);
  color:var(--accent-ink); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12.5px; margin-bottom:16px;
}
.card h3{font-size:19px; font-weight:700; margin-bottom:8px; color:var(--navy); letter-spacing:-0.01em;}
.card p{font-size:15.5px; color:var(--ink-soft); line-height:1.6;}

/* minimal service-card dot (ga4experts style) */
.svc-card{transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.svc-card:hover{border-color:var(--line-strong);}
.svc-dot{
  display:block; width:10px; height:10px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);
  margin-bottom:18px;
}

/* process steps */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:22px;}
.step{position:relative; padding-top:46px;}
.step .num{
  position:absolute; top:0; left:0; width:30px; height:30px; border-radius:50%;
  background:#fff; border:2px solid var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; z-index:1;
}
.step::after{
  content:"\2192"; position:absolute; top:5px; right:-24px; font-size:15px;
  color:var(--line-strong); line-height:1;
}
.step:last-child::after{content:none;}
.step h3{font-size:17px; font-weight:700; margin-bottom:6px; color:var(--navy); letter-spacing:-0.01em;}
.step p{font-size:15px; color:var(--ink-soft); line-height:1.55;}
@media(max-width:900px){
  .step::after{content:none;}
}

/* thumbnail grid (projects + blog share this) */
.thumb-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:border-color .15s;}
.thumb-card:hover{border-color:var(--line-strong);}
.thumb{
  aspect-ratio:4/3; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint);
  font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  border-bottom:1px solid var(--line); position:relative;
}
.thumb .badge{
  position:absolute; top:12px; left:12px; background:var(--navy); color:#fff;
  font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:100px; text-transform:none;
  letter-spacing:0;
}
.thumb-body{padding:20px;}
.tags{display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap;}
.tag{font-size:11px; font-weight:700; background:var(--bg-soft); color:var(--ink-soft); padding:4px 10px; border-radius:100px;}
.thumb-body h3{font-size:17px; font-weight:700; margin-bottom:8px; line-height:1.4; color:var(--navy);}
.thumb-body p{font-size:14.5px; color:var(--ink-soft); margin-bottom:12px;}
.thumb-meta{font-size:13px; color:var(--ink-faint); font-weight:700; margin-bottom:10px;}
.thumb-link{font-size:14px; font-weight:700; color:var(--accent-ink);}

.filter-row{display:flex; gap:10px; margin-bottom:36px; flex-wrap:wrap; align-items:center;}
.filter-pill{
  font-size:13px; font-weight:700; padding:8px 16px; border-radius:100px; border:1px solid var(--line);
  color:var(--ink-soft); background:#fff; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.filter-pill:hover{border-color:var(--line-strong); color:var(--ink);}
.filter-pill.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.filter-count{font-size:13px; font-weight:600; color:var(--ink-faint); margin-left:auto;}
.filter-count b{color:var(--ink); font-weight:700;}
.is-hidden{display:none !important;}

/* before/after */
.split{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.split-col{border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:#fff;}
.split-col.good{border-color:var(--accent);}
.split-col h3{font-size:13px; font-weight:700; margin-bottom:16px; letter-spacing:.03em; text-transform:uppercase;}
.split-col.bad h3{color:var(--ink-faint);}
.split-col.good h3{color:var(--accent-ink);}
.split-col ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
.split-col li{font-size:14px; color:var(--ink-soft); padding-left:20px; position:relative;}
.split-col.bad li::before{content:"\2013"; position:absolute; left:0; color:var(--ink-faint); font-weight:700;}
.split-col.good li::before{content:"\2713"; position:absolute; left:0; color:var(--accent-ink); font-weight:700;}
.split-col.good li{color:var(--ink);}

/* before/after — ga4experts-style "why it matters" */
.ps-cols{display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; max-width:900px; margin:0 auto;}
.ps-card{border-radius:20px; padding:28px; background:var(--bg-soft); border:1px solid var(--line); position:relative;}
.ps-card.ps-good{
  background:linear-gradient(180deg, var(--accent-soft), #fff);
  border:2px solid var(--accent); box-shadow:0 30px 60px -30px rgba(241,121,30,0.4);
}
.ps-card.ps-good::after{
  content:"The result"; position:absolute; top:-12px; right:20px;
  background:var(--accent); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:5px 12px; border-radius:100px; box-shadow:0 8px 18px -8px rgba(241,121,30,0.7);
}
.ps-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
  padding:5px 13px; border-radius:100px; margin-bottom:18px;
}
.ps-tag-bad{background:#FBEAEA; color:#C0413B;}
.ps-tag-good{background:var(--accent-soft); color:var(--accent-ink);}
.ps-card ul{list-style:none; display:flex; flex-direction:column; gap:14px;}
.ps-card li{font-size:14.5px; display:flex; align-items:flex-start; gap:11px;}
.ps-bad li{color:var(--ink-soft);}
.ps-good li{color:var(--ink); font-weight:500;}
.ps-card li svg{flex-shrink:0; margin-top:2px;}
.ps-bad li svg{color:#C0413B;}
.ps-good li svg{color:var(--accent);}
.ps-bridge{display:none;}
@media(min-width:701px){
  .ps-bridge{display:flex; flex-direction:column; align-items:center; gap:10px; height:100%;}
  .ps-bridge-line{width:1px; flex:1; background:var(--line);}
  .ps-bridge-chip{
    background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; white-space:nowrap;
    padding:7px 12px; border-radius:100px; box-shadow:0 10px 22px -10px rgba(241,121,30,0.7);
  }
}
@media(max-width:700px){
  .ps-cols{grid-template-columns:1fr;}
}

/* about / avatar */
.avatar-circle{
  width:150px; height:150px; border-radius:50%; flex-shrink:0;
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; color:var(--accent-ink);
  font-size:38px; font-weight:700;
}
.avatar-lg{
  width:100%; aspect-ratio:1; border-radius:var(--radius);
  background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; color:var(--accent-ink);
  font-size:52px; font-weight:700;
}
.timeline{display:flex; flex-direction:column; gap:0;}
.timeline-item{display:grid; grid-template-columns:120px 1fr; gap:24px; padding:22px 0; border-top:1px solid var(--line);}
.timeline-item:first-child{border-top:none;}
.timeline-item .when{font-size:13px; font-weight:700; color:var(--ink-faint); padding-top:2px;}
.timeline-item h3{font-size:15px; font-weight:700; margin-bottom:6px; color:var(--navy);}
.timeline-item p{font-size:14px; color:var(--ink-soft);}
.pill-row{display:flex; flex-wrap:wrap; gap:8px;}
.skill-pill{font-size:13px; font-weight:600; background:#fff; border:1px solid var(--line); padding:8px 14px; border-radius:100px;}

/* simple two-up CTA band */
.cta-band{background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:48px;}
.cta-band-top{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-band h2{font-size:24px; font-weight:700; letter-spacing:-0.02em; margin-bottom:8px; color:var(--navy);}
.cta-band p{color:var(--ink-soft); font-size:15px;}

/* contact form */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-grid .full{grid-column:1/-1;}
label{display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:8px;}
.contact-card input,
.contact-card select,
.contact-card textarea{
  width:100% !important; border-radius:14px !important;
  border:1.5px solid var(--line-strong) !important; background:#fff !important;
  color:var(--ink); font-family:var(--font); font-size:15px;
  transition:border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance:none; appearance:none;
  padding:11px 18px !important;
}
.contact-card textarea{padding:16px 20px !important;}
.contact-card input:focus,
.contact-card select:focus,
.contact-card textarea:focus{
  outline:none; border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(241,121,30,0.12);
}
.contact-card input::placeholder,
.contact-card textarea::placeholder{color:var(--ink-faint);}
.contact-card textarea{resize:vertical; min-height:120px;}
.form-note{font-size:12.5px; color:var(--ink-faint); margin-top:16px;}
.contact-card{
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:36px;
  box-shadow:0 4px 24px -12px rgba(19,33,60,0.08);
}

/* footer */
footer{border-top:1px solid var(--line); padding:48px 0 40px;}
.footer-row{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:32px; flex-wrap:wrap; gap:24px;}
.footer-nav{display:flex; gap:26px; font-size:14px; color:var(--ink-soft); font-weight:600; flex-wrap:wrap;}
.footer-bottom{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-faint); border-top:1px solid var(--line); padding-top:22px; flex-wrap:wrap; gap:12px;}
.social{display:flex; gap:16px;}

/* page hero (non-home pages) */
.page-hero{padding:56px 0 44px; border-bottom:1px solid var(--line); background:var(--bg-soft);}
.page-hero .kicker{margin-bottom:10px;}
.page-hero h1{font-size:32px; font-weight:700; letter-spacing:-0.02em; margin-bottom:12px; color:var(--navy);}
.page-hero p{font-size:15.5px; color:var(--ink-soft); max-width:600px;}

/* project detail */
.detail-meta{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px; border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:#fff;}
.detail-meta div span{display:block; font-size:12px; color:var(--ink-faint); font-weight:700; margin-bottom:4px; text-transform:uppercase; letter-spacing:.03em;}
.detail-meta div b{font-size:14.5px; font-weight:700;}
.shot{
  aspect-ratio:16/10; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:var(--radius); display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-bottom:20px;
}
.prose h2{font-size:19px; font-weight:700; margin:32px 0 12px; color:var(--navy);}
.prose p{font-size:15px; color:var(--ink-soft); margin-bottom:14px; max-width:680px;}
.prose ul{margin:0 0 14px 20px; color:var(--ink-soft); font-size:15px;}
.prose ul li{margin-bottom:8px; line-height:1.6;}
.prose code{
  font-family:var(--font-mono); font-size:13px; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--accent-ink);
}
.result-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0;}
.result-box{background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius); padding:20px;}
.result-box b{display:block; font-size:21px; color:var(--accent-ink); font-weight:700;}
.result-box span{font-size:13px; color:var(--ink-soft);}

/* blog post */
.post-meta-row{display:flex; gap:16px; align-items:center; font-size:13px; color:var(--ink-faint); font-weight:700; margin-bottom:20px;}
.prose .lead{font-size:19px; line-height:1.6; color:var(--ink); font-weight:500; margin-bottom:24px;}
.prose h2{scroll-margin-top:90px;}
.post-callout{
  background:var(--accent-soft); border:1px solid var(--accent-mark); border-left:4px solid var(--accent);
  border-radius:12px; padding:20px 22px; margin:26px 0; max-width:720px;
}
.post-callout p{margin:0; font-size:15.5px; color:var(--accent-ink); font-weight:600; max-width:none;}
.post-callout .callout-label{display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:6px;}
.prose figure{margin:28px 0; max-width:820px;}
.prose figure img{width:100%; border-radius:12px; border:1px solid var(--line);}
.prose figcaption{font-size:12.5px; color:var(--ink-faint); font-weight:600; margin-top:10px; text-align:center;}
.post-back{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--accent-ink); margin-bottom:18px;}
.post-tags{display:flex; gap:8px; flex-wrap:wrap; margin:28px 0 0;}
.post-tags .tag{font-size:12px;}

/* ---------- FOR AGENCIES ---------- */
.agencies-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;}
.agencies-list{list-style:none; display:flex; flex-direction:column; gap:14px; margin-top:24px;}
.agencies-list li{display:flex; gap:12px; font-size:15.5px; color:var(--ink); align-items:flex-start; font-weight:500;}
.agencies-list li::before{content:"\2713"; color:var(--accent-ink); font-weight:700; margin-top:1px;}
.agencies-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px;}
.agencies-card .quote{font-size:16px; color:var(--navy); line-height:1.6; margin-top:20px; font-weight:600;}
.agencies-card .by{font-size:13px; color:var(--ink-faint); margin-top:12px;}
.perfect-for-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:12px;}
.perfect-for{display:flex; flex-wrap:wrap; gap:8px;}
.perfect-for span{font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--bg-soft); border:1px solid var(--line); padding:7px 13px; border-radius:100px;}

/* dark "for agencies" band (ga4experts style) */
.dark-agencies{
  background:radial-gradient(120% 140% at 85% 0%, #1B2C4A 0%, #0E1530 55%);
  color:#C3CDE0; position:relative; overflow:hidden;
}
.dark-agencies .kicker{color:var(--accent);}
.dark-agencies .section-title{color:#fff;}
.dark-agencies .section-desc{color:#9FB0C8;}
.dark-agencies .agencies-list li{color:#DFE6F3;}
.dark-agencies .agencies-list li::before{color:var(--accent);}
.dark-agencies .agencies-card{
  background:transparent; border:1px solid rgba(255,255,255,0.12); border-radius:22px;
}
.dark-agencies .agencies-card .quote{color:#fff;}
.dark-agencies .agencies-card .by{color:#8595B2;}
.dark-agencies .perfect-for-label{color:#8595B2;}
.dark-agencies .perfect-for span{
  color:#DFE6F3; background:transparent; border-color:rgba(255,255,255,0.12);
}

/* ---------- TESTIMONIALS ---------- */
.testi-title{display:flex; flex-direction:column; gap:4px;}
.testi-title .accent-line{color:var(--accent-ink); font-size:0.85em;}
.testi-disclaimer{font-size:13px; color:var(--ink-faint); font-style:italic; margin-top:14px;}
.testi-filters{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:24px auto 40px;}
.testi-filter{
  font-family:var(--font); font-size:13.5px; font-weight:600; color:var(--ink-soft);
  background:#fff; border:1px solid var(--line); border-radius:100px; padding:9px 16px;
  cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.testi-filter:hover{border-color:var(--line-strong); color:var(--ink);}
.testi-filter.active{background:var(--navy); border-color:var(--navy); color:#fff;}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start;}
.testi-grid .testi.offset{margin-top:24px;}
.testi-grid .testi.hidden{display:none;}
/* load-more: show first 6, reveal the rest on click */
.testi-grid .testi:nth-child(n+7){display:none;}
.testi-grid.show-all .testi:nth-child(n+7){display:flex;}
.testi-loadmore{display:flex; justify-content:center; margin-top:36px;}
.testi-loadmore .lm-count{color:var(--ink-faint); font-weight:600;}
.testi-loadmore.is-done{display:none;}
.testi{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column;}
.testi-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.testi-badge{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--bg-soft); border:1px dashed var(--line-strong);
  border-radius:100px; padding:3px 9px;
}
.stars{color:var(--accent); font-size:14px; letter-spacing:2px;}
.testi p{font-size:16px; color:var(--ink-soft); line-height:1.6; margin-bottom:18px; flex:1;}
.testi.lg p{font-size:17.5px; line-height:1.55;}
.testi p mark{background:var(--accent-mark); color:var(--ink); border-radius:3px; padding:0 3px; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.testi-by{display:flex; align-items:center; gap:12px;}
.testi-av{width:36px; height:36px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}
.testi-by b{display:block; font-size:14px; font-weight:700; color:var(--navy);}
.testi-by span{font-size:12.5px; color:var(--ink-faint);}

/* video-testimonial placeholder card */
.testi-video-thumb{
  position:relative; aspect-ratio:16/10; border-radius:8px; margin-bottom:16px; overflow:hidden;
  background:linear-gradient(160deg,#1B2C4A,#0E1530);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
.testi-video-thumb .play-icon{
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.3); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; padding-left:3px;
}
.testi-video-thumb .video-label{font-size:11.5px; font-weight:600; color:#9FB0C8; text-align:center; padding:0 16px;}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line); padding:4px 0;}
.faq-item h3{font-size:16px; font-weight:700; margin-bottom:10px; display:flex; justify-content:space-between; gap:16px; color:var(--navy);}
.faq-item h3 .q-mark{color:var(--accent); flex-shrink:0;}
.faq-item p{font-size:14.5px; color:var(--ink-soft); line-height:1.65; max-width:660px;}

/* FAQ accordion (native <details>/<summary>) */
details.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 0; font-size:17px; font-weight:700; color:var(--navy);
}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item[open] summary{color:var(--accent-ink);}
.faq-icon{flex-shrink:0; width:16px; height:16px; position:relative;}
.faq-icon::before, .faq-icon::after{
  content:""; position:absolute; background:var(--accent); border-radius:2px; transition:transform .25s ease;
}
.faq-icon::before{width:16px; height:2px; top:7px; left:0;}
.faq-icon::after{width:2px; height:16px; top:0; left:7px;}
details.faq-item[open] .faq-icon::after{transform:scaleY(0);}
details.faq-item .faq-a{padding:0 0 20px;}
details.faq-item .faq-a p{font-size:15.5px; color:var(--ink-soft); line-height:1.65; max-width:660px; margin:0;}

/* ---------- GET STARTED (two options) ---------- */
.start-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin:0 auto;}
.start-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:32px; text-align:center;}
.start-card.feat{border:2px solid var(--accent);}
.start-card .tag-top{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-ink); margin-bottom:12px;}
.start-card h3{font-size:19px; font-weight:700; margin-bottom:8px; color:var(--navy);}
.start-card p{font-size:14px; color:var(--ink-soft); margin-bottom:20px;}

@media(max-width:900px){
  .grid-4, .grid-3, .grid-2, .testi-grid{grid-template-columns:repeat(2,1fr);}
  .stats-min{grid-template-columns:repeat(2,1fr); gap:36px 0; max-width:520px;}
  .stat-m:nth-child(odd)::before{display:none;}
  .steps{grid-template-columns:repeat(1,1fr);}
  .navlinks{display:none;}
  .split, .form-grid, .detail-meta, .result-strip, .agencies-grid, .start-grid, .hero-bullets{grid-template-columns:1fr;}
  .testi-grid .testi.offset{margin-top:0;}
}
@media(max-width:600px){
  .testi-grid{grid-template-columns:1fr;}
  .logo-item{font-size:20px; margin:0 26px;}
}

/* ============================================
   v5 additions: hero image, mockup cards, thumbnails
   as real <img>, animations, hover polish, wide dropdown,
   expanded footer, "two ways to start" reuse.
   ============================================ */

/* hero split (text left / image or mockup right) */
.hero-inner.split{max-width:none; display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;}
.hero-media{position:relative;}
.hero-media img{width:100%; border-radius:20px;}

/* generic browser/app "mockup" card used on service pages instead of a flat image */
.mockup-card{
  background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(19,33,60,0.22);
}
.mockup-topbar{
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border-bottom:1px solid var(--line); background:var(--bg-soft); font-size:12.5px; font-weight:700; color:var(--ink-soft);
}
.mockup-topbar .dots{display:flex; gap:6px;}
.mockup-topbar .dots span{width:8px; height:8px; border-radius:50%; background:var(--line-strong); display:block;}
.mockup-topbar .live{color:var(--live,#1F9D55); display:flex; align-items:center; gap:6px; font-weight:700;}
.mockup-topbar .live .dot{width:6px; height:6px; border-radius:50%; background:#1F9D55; display:block;}
.mockup-body{padding:22px;}
.mrow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.mrow:last-child{border-bottom:none;}
.mrow .label{display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:600;}
.pill-pass{background:#E7F6EC; color:#1F9D55; font-weight:700; font-size:11px; padding:3px 10px; border-radius:100px; white-space:nowrap;}
.pill-fail{background:#FDEBEB; color:#C0392B; font-weight:700; font-size:11px; padding:3px 10px; border-radius:100px; white-space:nowrap;}
.pill-warn{background:var(--accent-soft); color:var(--accent-ink); font-weight:700; font-size:11px; padding:3px 10px; border-radius:100px; white-space:nowrap;}
.score-big{font-size:42px; font-weight:700; color:var(--navy); line-height:1;}
.score-label{font-size:12.5px; color:var(--ink-faint); font-weight:600; margin-top:6px;}
.mockup-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); margin-top:4px;}
.mockup-stats div{padding:14px 6px 0; text-align:center;}
.mockup-stats b{display:block; font-size:16px; font-weight:700; color:var(--navy);}
.mockup-stats span{font-size:11px; color:var(--ink-faint); font-weight:600;}
.code-block{background:var(--navy); color:#D7E1F0; font-family:'SFMono-Regular',Consolas,monospace; font-size:12.5px; padding:18px; border-radius:12px; line-height:1.7; overflow-x:auto; white-space:pre;}
.code-block .ok{color:#5DD08A; font-size:12px; margin-top:10px; display:block;}
.tag-chip-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px;}
.tag-chip{font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:8px; background:var(--bg-soft); color:var(--ink-soft); border:1px solid var(--line);}
.tag-chip.on{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent);}

/* thumbnails now use real <img> */
.thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease;}
.thumb{overflow:hidden;}
.thumb-card:hover .thumb img{transform:scale(1.05);}
.thumb-card{transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.thumb-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(19,33,60,0.25);}

/* button + card hover polish */
.btn{transition:background .15s ease, transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary:hover{box-shadow:0 10px 24px -10px rgba(241,121,30,0.55);}
.card, .start-card, .agencies-card, .testi, .mockup-card{transition:transform .2s ease, box-shadow .2s ease;}
.card:hover, .start-card:hover{transform:translateY(-3px); box-shadow:0 20px 36px -26px rgba(19,33,60,0.22);}

/* scroll-in animation utility */
.fade-up{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.fade-up.in-view{opacity:1; transform:translateY(0);}

/* wide services dropdown (2-column) */
.dropdown.wide{width:520px; display:grid; grid-template-columns:1fr 1fr; gap:2px;}

/* expanded footer columns like ga4experts */
.footer-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:32px;}
.footer-cols h4{font-size:13px; font-weight:700; color:var(--ink); margin-bottom:14px; text-transform:uppercase; letter-spacing:.03em;}
.footer-cols ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
.footer-cols a{font-size:14px; color:var(--ink-soft); font-weight:500;}
.footer-cols a:hover{color:var(--accent-ink);}
.footer-about p{font-size:14px; color:var(--ink-soft); max-width:340px; margin-top:12px;}

/* hero trust-stat strip (service pages) */
.hero .stats-row{display:flex; gap:40px; margin-top:38px; flex-wrap:wrap;}
.hero .stats-row .stat b{display:block; font-size:30px; font-weight:800; color:var(--navy); letter-spacing:-0.02em; line-height:1;}
.hero .stats-row .stat span{font-size:13px; color:var(--ink-faint); font-weight:600; margin-top:6px; display:block;}

/* comparison table (service pages) — polished v2 */
/* comparison grid (div-based, no table element) */
.cx{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 4px 24px -12px rgba(19,33,60,0.08);
}
.cx-head, .cx-row{
  display:grid; grid-template-columns:1.1fr 1fr 1fr 1.1fr; gap:0;
}
.cx-head{background:var(--bg-soft); border-bottom:2px solid var(--line-strong);}
.cx-head .cx-label,
.cx-head .cx-col{
  padding:18px 22px; font-size:12px; font-weight:700; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:.06em;
}
.cx-head .cx-me{
  background:linear-gradient(180deg, #FFF0E0, #FFF7EE);
  color:var(--accent-ink); font-size:14px; font-weight:700;
  text-transform:none; letter-spacing:-0.01em;
  border-left:2px solid var(--accent); border-top:2px solid var(--accent); border-right:2px solid var(--accent);
  margin:-1px -1px 0 0; padding:16px 22px;
  border-radius:14px 14px 0 0;
}
.cx-row{border-bottom:1px solid var(--line); transition:background .15s ease;}
.cx-row:hover{background:var(--bg-soft);}
.cx-last{border-bottom:none;}
.cx-row .cx-label{
  padding:18px 22px; font-size:14.5px; font-weight:700; color:var(--ink);
}
.cx-row .cx-col{
  padding:18px 22px; font-size:14.5px; color:var(--ink-soft);
}
.cx-row .cx-me{
  background:rgba(241,121,30,0.04); color:var(--ink); font-weight:600;
  border-left:2px solid var(--accent); border-right:2px solid var(--accent);
  margin-right:-1px;
}
.cx-row:hover .cx-me{background:rgba(241,121,30,0.08);}
.cx-last .cx-me{
  border-bottom:2px solid var(--accent);
  border-radius:0 0 14px 14px; margin-bottom:-1px;
}
.cx-yes{color:#1F9D55; font-weight:800; margin-right:4px;}

@media(max-width:900px){
  .cx-head, .cx-row{grid-template-columns:1fr;}
  .cx-head .cx-label{display:none;}
  .cx-row .cx-label{background:var(--bg-soft); font-size:13px; padding:12px 22px;}
  .cx-row .cx-col, .cx-row .cx-me{padding:12px 22px;}
  .cx-head .cx-me{border-radius:0; margin:0; border-left:none; border-right:none; border-top:none;}
  .cx-row .cx-me{border-left:none; border-right:none; margin:0;}
  .cx-last .cx-me{border-radius:0; margin:0; border-bottom:none;}
}

/* service page showcase image (above pricing) */
.svc-shot{max-width:760px; margin:0 auto 40px;}
.svc-shot img{width:100%; border-radius:16px; border:1px solid var(--line); box-shadow:0 30px 60px -34px rgba(19,33,60,0.28); display:block;}
.svc-shot figcaption{font-size:13px; color:var(--ink-faint); font-weight:600; text-align:center; margin-top:12px;}

/* service page "symptoms" list */
.symptom-list{list-style:none; display:flex; flex-direction:column; gap:12px; max-width:640px;}
.symptom-list li{font-size:15px; color:var(--ink); display:flex; gap:10px; align-items:flex-start;}
.symptom-list li::before{content:"\2022"; color:var(--accent); font-weight:700;}

/* numbered build steps (vertical) */
.build-steps{display:flex; flex-direction:column; gap:0; max-width:760px;}
.build-step{display:grid; grid-template-columns:56px 1fr; gap:20px; padding:24px 0; border-top:1px solid var(--line);}
.build-step:first-child{border-top:none;}
.build-step .bnum{width:40px; height:40px; border-radius:10px; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
.build-step h3{font-size:16px; font-weight:700; margin-bottom:6px; color:var(--navy);}
.build-step p{font-size:14.5px; color:var(--ink-soft);}

@media(max-width:900px){
  .hero-inner.split{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr 1fr;}
  .dropdown.wide{width:280px; grid-template-columns:1fr;}
}

/* ============================================
   v6: services mega-menu, hero portrait finishing,
   dark footer + dark CTA band, case-study stacked layout,
   "built for teams" list, homepage per screenshot.
   ============================================ */

/* --- Services mega-menu: wider, opens toward the right, icon rows --- */
.dropdown.mega{
  width:560px; left:0; transform:translateX(-40px) translateY(6px);
  display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:14px;
  border-radius:16px;
}
.nav-item:hover .dropdown.mega{transform:translateX(-40px) translateY(0);}
.mega .drop-link{display:flex; gap:12px; align-items:flex-start; padding:11px 12px;}
.mega .drop-ico{
  width:36px; height:36px; border-radius:10px; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mega .drop-link:hover .drop-ico{border-color:var(--line-strong); transform:translateY(-1px); box-shadow:0 8px 16px -8px rgba(19,33,60,0.3);}
.mega .drop-txt b{display:block; font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:2px;}
.mega .drop-txt span{font-size:12.5px; color:var(--ink-faint); font-weight:500;}
.mega-foot{
  grid-column:1/-1; border-top:1px solid var(--line); margin-top:6px; padding:12px 12px 4px;
  display:flex; justify-content:space-between; align-items:center;
}
.mega-foot span{font-size:12.5px; color:var(--ink-soft);}
.mega-foot a{font-size:13px; font-weight:700; color:var(--accent-ink);}

/* --- Hero portrait (right side) with CSS finishing --- */
.hero-portrait{position:relative; display:flex; justify-content:center; align-items:center;}
.hero-portrait .glow{
  position:absolute; width:118%; height:118%; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 50% 40%, rgba(241,121,30,0.18), rgba(241,121,30,0) 62%);
}
.portrait-frame{
  position:relative; z-index:1; width:100%; max-width:420px; border-radius:26px; overflow:hidden;
  background:linear-gradient(160deg,#FDE6CF,#FBD4AE);
  box-shadow:0 40px 80px -32px rgba(19,33,60,0.4), 0 0 0 1px rgba(19,33,60,0.05);
}
.portrait-frame::after{
  content:""; position:absolute; inset:0; border-radius:26px;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,0.55); pointer-events:none;
}
.portrait-frame img{width:100%; display:block;}
.float-badge{
  position:absolute; z-index:2; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:12px 16px; box-shadow:0 18px 36px -18px rgba(19,33,60,0.28);
  display:flex; align-items:center; gap:10px;
  animation:floaty 4.5s ease-in-out infinite;
}
.float-badge .fb-ico{width:32px; height:32px; border-radius:9px; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px;}
.float-badge b{display:block; font-size:14px; font-weight:700; color:var(--navy); line-height:1.1;}
.float-badge span{font-size:11.5px; color:var(--ink-faint); font-weight:600;}
.float-badge.tl{top:26px; left:-14px; animation-delay:0s;}
.float-badge.br{bottom:30px; right:-14px; animation-delay:1.5s;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@media(prefers-reduced-motion:reduce){.float-badge{animation:none;}}

/* --- "Built for teams that run on data" checklist panel --- */
.runlist{list-style:none; display:grid; grid-template-columns:1fr; gap:11px;}
.runlist li{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:17px 21px;
  font-size:16px; font-weight:600; color:var(--ink); display:flex; gap:16px; align-items:center;
  transition:border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.runlist li:hover{
  background:#fff; border-color:var(--line-strong); transform:translateX(4px);
  box-shadow:0 10px 24px -16px rgba(19,33,60,0.25);
}
.runlist li .n{color:var(--accent); font-weight:700; font-size:13px; flex-shrink:0;}
.runlist li .label{color:var(--ink);}

/* --- big case-study cards on homepage --- */
.case-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.case-card{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;}
.case-card:hover{transform:translateY(-4px); box-shadow:0 24px 44px -26px rgba(19,33,60,0.28);}
.case-card .case-img{aspect-ratio:4/3; overflow:hidden; border-bottom:1px solid var(--line);}
.case-card .case-img img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.case-card:hover .case-img img{transform:scale(1.05);}
.case-body{padding:28px 26px 30px;}
.case-body .eyebrow-sm{font-size:12.5px; font-weight:700; color:var(--accent-ink); text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px;}
.case-body h3{font-size:25px; font-weight:700; color:var(--navy); line-height:1.28; letter-spacing:-0.01em;}

/* --- "Get started" band: light section wrapper + floating dark card --- */
.cta-wrap{padding:88px 0 100px;}
.dark-cta{
  background:radial-gradient(120% 160% at 15% 0%, #1D2C5A, #0E1530 60%);
  color:#fff; padding:56px 40px; border-radius:28px;
  position:relative; overflow:hidden;
  box-shadow:0 40px 80px -36px rgba(14,21,48,0.45);
}
.dark-cta::before{content:""; position:absolute; top:-140px; left:50%; transform:translateX(-50%);
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(241,121,30,0.16), rgba(19,33,60,0) 62%); pointer-events:none;}
.dark-cta .section-head{position:relative; z-index:1;}
.dark-cta h2.section-title{color:#fff;}
.dark-cta .section-desc{color:#9FB0C8;}
.dark-cta .start-grid{position:relative; z-index:1;}
.dark-cta .start-card{background:#1B2C4A; border:1px solid #26385A;}
.dark-cta .start-card.feat{border:2px solid var(--accent);}
.dark-cta .start-card h3{color:#fff;}
.dark-cta .start-card p{color:#9FB0C8;}
.dark-cta .start-card .tag-top{color:var(--accent);}
.dark-cta.simple{
  text-align:center; padding:64px 40px; display:flex; flex-direction:column; align-items:center;
}
.dark-cta.simple .kicker{position:relative; z-index:1;}
.dark-cta.simple h2.section-title{position:relative; z-index:1; margin-top:10px;}
.dark-cta.simple .section-desc{position:relative; z-index:1; margin-top:10px; margin-bottom:30px;}
.dark-cta.simple .btn-primary{position:relative; z-index:1;}

/* --- Cal.com inline embed card --- */
.cal-embed-card{
  max-width:920px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:20px; padding:8px; box-shadow:0 30px 60px -34px rgba(19,33,60,0.22); overflow:hidden;
}
.cal-embed-card #my-cal-inline{width:100%; height:640px;}
@media(max-width:700px){
  .cal-embed-card #my-cal-inline{height:780px;}
}

/* --- dark footer (matches screenshot) --- */
footer{background:var(--navy); color:#9FB0C8; border-top:none;}
footer .logo{color:#fff;}
footer .footer-about p{color:#9FB0C8;}
footer .footer-cols h4{color:#fff;}
footer .footer-cols a{color:#9FB0C8;}
footer .footer-cols a:hover{color:var(--accent);}
footer .footer-bottom{border-top:1px solid #26385A; color:#6E7E97;}
footer .social a:hover{color:var(--accent);}

/* --- Case Studies stacked "single post with separator" layout --- */
.case-stack{display:flex; flex-direction:column;}
.case-entry{display:grid; grid-template-columns:1.1fr 0.9fr; gap:36px; align-items:start; padding:52px 0; border-top:1px solid var(--line);}
.case-entry:first-child{border-top:none; padding-top:0;}
.case-entry-media{order:2;}
.case-entry-media img{width:100%; border-radius:14px; border:1px solid var(--line);}
.case-entry .eyebrow-sm{font-size:12px; font-weight:700; color:var(--accent-ink); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; display:block;}
.case-entry h2{font-size:24px; font-weight:700; color:var(--navy); letter-spacing:-0.02em; margin-bottom:12px;}
.case-entry p{font-size:15px; color:var(--ink-soft); margin-bottom:18px;}
.case-entry .case-metrics{margin-bottom:18px;}
.case-entry .tags{margin-bottom:18px;}

@media(max-width:900px){
  .dropdown.mega{width:300px; grid-template-columns:1fr; transform:translateX(-10px) translateY(6px);}
  .nav-item:hover .dropdown.mega{transform:translateX(-10px) translateY(0);}
  .runlist, .case-grid{grid-template-columns:1fr;}
  .case-entry, .case-entry.rev{grid-template-columns:1fr;}
  .case-entry.rev .case-entry-media{order:0;}
  .float-badge.tl{left:6px;}
  .float-badge.br{right:6px;}
  .dark-cta{padding:40px 22px; border-radius:20px;}
}

/* ============================================
   v7: dark hero photo card, animated pricing,
   refined dark footer, tighter section rhythm.
   ============================================ */

/* --- section rhythm --- */
section{padding:88px 0;}
.section-head{margin-bottom:48px;}

/* --- HERO: light left, dark photo card right (ga4experts structure) --- */
.hero{padding:72px 0 76px;}
.hero-inner.split{gap:56px; align-items:center;}
.hero-photo{position:relative;}
.hero-photo .glow{
  position:absolute; inset:-8% -8% -8% -8%; z-index:0; border-radius:32px;
  background:radial-gradient(circle at 62% 38%, rgba(241,121,30,0.22), rgba(241,121,30,0) 60%);
  filter:blur(6px);
}
.hero-photo-card{
  position:relative; z-index:1; border-radius:26px; overflow:hidden; aspect-ratio:4/4.6;
  background:linear-gradient(160deg,#1B2C4A,#0A1120);
  box-shadow:0 44px 90px -34px rgba(10,17,32,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.hero-photo-card img{width:100%; height:100%; object-fit:cover; object-position:center 12%; display:block;}
.hero-photo-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,17,32,0) 55%, rgba(10,17,32,0.55) 100%);
}
.hero-chip{
  position:absolute; z-index:2; left:18px; bottom:18px; right:18px;
  background:rgba(255,255,255,0.94); backdrop-filter:blur(6px);
  border-radius:14px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 18px 36px -18px rgba(10,17,32,0.5);
}
.hero-chip .hc-left{display:flex; align-items:center; gap:10px;}
.hero-chip .hc-dot{width:9px; height:9px; border-radius:50%; background:#1F9D55; box-shadow:0 0 0 4px rgba(31,157,85,0.16);}
.hero-chip .hc-left b{font-size:13.5px; font-weight:700; color:var(--navy); display:block; line-height:1.1;}
.hero-chip .hc-left span{font-size:11.5px; color:var(--ink-faint); font-weight:600;}
.hero-chip .hc-val{font-size:20px; font-weight:700; color:var(--accent);}
.float-badge{ /* kept for other pages, hidden on new hero */ }

/* --- ANIMATED PRICING TABLE --- */
.price-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:860px; margin:0 auto;}
.price-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:34px 30px;
  overflow:hidden; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.price-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--accent),#ffb26b); transform:scaleX(0); transform-origin:left; transition:transform .4s ease;
}
.price-card:hover{transform:translateY(-8px); box-shadow:0 34px 60px -30px rgba(19,33,60,0.32); border-color:var(--line-strong);}
.price-card:hover::before{transform:scaleX(1);}
.price-card.feat{border:2px solid var(--accent); box-shadow:0 30px 56px -30px rgba(241,121,30,0.4);}
.price-card.feat::before{transform:scaleX(1);}
.price-ribbon{
  position:absolute; top:16px; right:-38px; transform:rotate(45deg);
  background:var(--accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.04em;
  padding:6px 44px; box-shadow:0 6px 14px -6px rgba(241,121,30,0.6);
}
.price-plan{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-ink); margin-bottom:14px;}
.price-amount{display:flex; align-items:baseline; gap:8px; margin-bottom:6px;}
.price-amount .amt{font-size:44px; font-weight:700; color:var(--navy); letter-spacing:-0.03em; line-height:1;}
.price-amount .unit{font-size:14px; font-weight:600; color:var(--ink-faint);}
.price-tagline{font-size:15.5px; color:var(--ink-soft); margin-bottom:22px; line-height:1.55;}
.price-feats{list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:26px;}
.price-feats li{font-size:15px; color:var(--ink); font-weight:500; display:flex; gap:10px; align-items:flex-start;}
.price-feats li .ck{
  width:20px; height:20px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; margin-top:1px;
}
.price-foot{font-size:12px; color:var(--ink-faint); margin-top:14px; text-align:center;}

/* --- REFINED DARK FOOTER (4 columns like screenshot) --- */
footer{background:var(--navy); color:#93A2BC; padding:64px 0 34px; border-top:none;}
.footer-cols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:44px;}
.footer-about .logo{color:#fff; font-size:19px; margin-bottom:14px;}
.footer-about p{color:#8595AF; font-size:14.5px; max-width:330px; line-height:1.7;}
.footer-about .fmail{margin-top:16px; display:inline-block; color:var(--accent); font-weight:700; font-size:14px;}
.footer-cols h4{font-size:13px; font-weight:700; color:#fff; margin-bottom:16px; text-transform:uppercase; letter-spacing:.06em;}
.footer-cols ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
.footer-cols a{font-size:14.5px; color:#8595AF; font-weight:500; transition:color .15s ease;}
.footer-cols a:hover{color:var(--accent);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid #24344F; padding-top:24px; font-size:13px; color:#5E6E88;
}
.footer-bottom .social{display:flex; gap:18px;}
.footer-bottom .social a{color:#8595AF; font-weight:600;}
.footer-bottom .social a:hover{color:var(--accent);}

@media(max-width:900px){
  .footer-cols{grid-template-columns:1fr 1fr;}
  .price-grid{grid-template-columns:1fr;}
  .hero-photo-card{aspect-ratio:4/4; max-width:420px; margin:0 auto;}
}


/* ============================================
   WordPress / Elementor compatibility layer
   (appended by the theme conversion)
   ============================================ */
.wp-section.e-con{padding-top:110px !important; padding-bottom:110px !important;}
.wp-section > .e-con-inner{padding-left:32px; padding-right:32px;}
.wp-section.e-con{display:block;}
.wp-section > .e-con-inner > .elementor-widget:not(:last-child){margin-bottom:0;}
.elementor-widget-text-editor, .elementor-widget-html{width:100%;}
.e-con-inner > .elementor-widget.full-bleed{width:100vw; max-width:100vw; position:relative; left:50%; margin-left:-50vw;}
body{overflow-x:hidden;}
/* Elementor resets headings margins; restore ours via existing classes (already class-based). */

/* Hello Elementor's own theme CSS also defines .site-header (padding + a
   width-limited wrapper) and stacks on top of ours, adding extra height
   and shrinking the border-bottom. Force our header back to its exact
   box model and break it out to true full width. */
body header.site-header{
  padding:0 !important;
  margin:0 !important;
  height:auto !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  position:relative !important;
  left:50%; right:50%; margin-left:-50vw !important; margin-right:-50vw !important;
  width:100vw !important; max-width:100vw !important;
}
body header.site-header nav.wrap{
  display:flex !important;
  align-items:center !important;
  height:72px !important;
  width:100% !important;
  max-width:var(--maxw) !important;
  margin:0 auto !important;
  padding:0 32px !important;
  box-sizing:border-box !important;
}
body header.site-header .logo{flex-shrink:0 !important;}
body header.site-header .nav-cta{flex-shrink:0 !important; margin-left:0 !important;}
body header.site-header .navlinks{margin-left:auto !important;}

/* ============================================
   v8: GA4 services page redesign
   — "Good fit" card grid, comparison table polish,
   — elaborated pricing, request extras, CTA revamp
   ============================================ */

/* --- "Good fit" 2x2 card grid --- */
.fit-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.fit-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 24px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fit-card:hover{
  transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(19,33,60,0.22);
  border-color:var(--accent);
}
.fit-icon{
  width:42px; height:42px; border-radius:11px; background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; margin-bottom:16px;
}
.fit-card h3{font-size:18px; font-weight:700; margin-bottom:8px; color:var(--navy); letter-spacing:-0.01em;}
.fit-card p{font-size:15px; color:var(--ink-soft); line-height:1.6;}

/* (comparison table replaced with .cx div grid) */

/* --- Process cards (How I work — full-width interactive grid) --- */
.proc-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.proc-card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:32px 26px 26px; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),
             box-shadow .3s ease, border-color .3s ease;
}
.proc-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--accent), #ffb26b);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.proc-card::after{
  content:""; position:absolute; inset:0; border-radius:18px;
  background:radial-gradient(circle at 50% 0%, rgba(241,121,30,0.08), transparent 60%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.proc-card:hover{
  transform:translateY(-8px); border-color:var(--accent);
  box-shadow:0 30px 60px -30px rgba(241,121,30,0.35);
}
.proc-card:hover::before{transform:scaleX(1);}
.proc-card:hover::after{opacity:1;}

.proc-num{
  position:absolute; top:20px; right:22px;
  font-family:var(--font-mono); font-size:13px; font-weight:700;
  color:var(--ink-faint); letter-spacing:.05em;
  transition:color .3s ease, transform .3s ease;
}
.proc-card:hover .proc-num{color:var(--accent); transform:scale(1.15);}

.proc-icon{
  width:52px; height:52px; border-radius:14px;
  background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; margin-bottom:18px;
  transition:background .3s ease, color .3s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.proc-card:hover .proc-icon{
  background:var(--accent); color:#fff;
  transform:rotate(-8deg) scale(1.08);
}

.proc-card h3{
  font-size:18px; font-weight:700; margin-bottom:10px; color:var(--navy);
  letter-spacing:-0.01em;
}
.proc-card > p{
  font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:16px;
}
.proc-list{
  list-style:none; padding:0; margin:0 0 20px;
  display:flex; flex-direction:column; gap:8px;
}
.proc-list li{
  font-size:13px; color:var(--ink); padding-left:20px; position:relative;
  transition:transform .25s ease;
}
.proc-list li::before{
  content:"✓"; position:absolute; left:0; color:var(--accent);
  font-weight:700; font-size:12px;
}
.proc-card:hover .proc-list li{transform:translateX(3px);}
.proc-card:hover .proc-list li:nth-child(2){transition-delay:.05s;}
.proc-card:hover .proc-list li:nth-child(3){transition-delay:.1s;}

.proc-meta{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:16px; border-top:1px dashed var(--line-strong);
  font-size:12px; font-weight:700; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:.05em;
}
.proc-meta span:last-child{color:var(--accent-ink);}

@media(max-width:1100px){
  .proc-grid{grid-template-columns:repeat(2, 1fr);}
}
@media(max-width:600px){
  .proc-grid{grid-template-columns:1fr;}
}

/* --- Guarantee stamp --- */
.stamp{
  flex-shrink:0; width:140px; height:140px; border-radius:50%;
  border:3px dashed var(--line-strong);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-faint); line-height:1.3; padding:18px;
  transform:rotate(12deg);
  user-select:none; margin-right:auto;
}
@media(max-width:600px){
  .stamp{width:110px; height:110px; font-size:11px; padding:12px;}
}

/* --- Request extras (below contact heading) --- */
.request-extras{margin-top:28px; display:flex; flex-direction:column; gap:18px;}
.req-point{display:flex; gap:14px; align-items:flex-start;}
.req-ico{
  width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; margin-top:2px;
}
.req-point b{display:block; font-size:15px; font-weight:700; color:var(--navy); margin-bottom:4px;}
.req-point p{font-size:14px; color:var(--ink-soft); line-height:1.55; margin:0;}

/* --- CTA trust band (dark card) --- */
.cta-trust{
  background:radial-gradient(120% 160% at 15% 0%, #1D2C5A, #0E1530 60%);
  border-radius:28px; padding:64px 40px; text-align:center;
  position:relative; overflow:hidden;
  box-shadow:0 40px 80px -36px rgba(14,21,48,0.45);
}
.cta-trust::before{
  content:""; position:absolute; top:-140px; left:50%; transform:translateX(-50%);
  width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(241,121,30,0.16), rgba(19,33,60,0) 62%); pointer-events:none;
}
.cta-trust-inner{position:relative; z-index:1; max-width:640px; margin:0 auto;}
.cta-trust-actions{display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap;}
.btn-ghost{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.25);
  padding:12px 22px; border-radius:8px; font-size:16px; font-weight:600;
  font-family:var(--font); cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.4);}

@media(max-width:900px){
  .fit-grid{grid-template-columns:1fr;}
  .cta-trust{padding:48px 24px; border-radius:20px;}
}

/* ============================================
   v9: hero fade-mask fix + section separator
   — move dot-grid + mask to ::before so content
     stays crisp (stats no longer fade to white),
   — hairline separator under hero,
   — ground stats-row as a bottom band, kill the
     lopsided white space below the hero image.
   ============================================ */

/* Mask was on the whole .hero, fading bottom content (stats-row)
   to transparent — read as empty white space. Move background +
   mask to a pseudo-element; keep real content fully opaque. */
.hero{
  background-image:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 72%, transparent 100%);
}
.hero > .e-con-inner{position:relative; z-index:1;}

/* Hero: extra breathing room below */
.wp-section.hero{padding-bottom:72px !important;}

/* ============================================
   v10: Eye-catching 2nd section layouts
   per-page designs for service pages
   ============================================ */

/* --- Signal-loss cards (Server-Side Tagging) --- */
.signal-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.signal-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 24px;
  position:relative; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;
}
.signal-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--accent) 0%, #FF6B35 100%);
  opacity:0; transition:opacity .25s ease;
}
.signal-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -18px rgba(19,33,60,0.18);}
.signal-card:hover::before{opacity:1;}
.signal-ico{
  width:48px; height:48px; border-radius:12px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  margin-bottom:16px; transition:background .25s ease, transform .25s ease;
}
.signal-card:hover .signal-ico{background:var(--accent); transform:rotate(-8deg) scale(1.08);}
.signal-card:hover .signal-ico{color:#fff;}
.signal-card h3{font-size:16px; font-weight:700; color:var(--navy); margin-bottom:8px;}
.signal-card p{font-size:14px; color:var(--ink-soft); line-height:1.55;}
.signal-tag{
  display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--accent-ink); background:var(--accent-soft);
  padding:4px 10px; border-radius:6px; margin-top:12px;
}

/* --- Blind-spot tiles (Microsoft Clarity) --- */
.blind-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
.blind-tile{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:30px 28px;
  display:flex; gap:20px; align-items:flex-start;
  transition:transform .25s ease, box-shadow .25s ease;
}
.blind-tile:hover{transform:translateY(-3px); box-shadow:0 16px 36px -14px rgba(19,33,60,0.16);}
.blind-num{
  flex-shrink:0; width:52px; height:52px; border-radius:50%;
  background:var(--bg-soft); border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; color:var(--accent);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.blind-tile:hover .blind-num{background:var(--accent); border-color:var(--accent); color:#fff;}
.blind-tile h3{font-size:16px; font-weight:700; color:var(--navy); margin-bottom:6px;}
.blind-tile p{font-size:14px; color:var(--ink-soft); line-height:1.55;}
.blind-cta{
  grid-column:1/-1; background:var(--navy); border-radius:16px; padding:28px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.blind-cta p{color:#9FB0C8; font-size:15px; font-weight:500; margin:0;}
.blind-cta b{color:#fff; display:block; font-size:17px; margin-bottom:4px;}

/* --- Diagnostic cards (GA4 Audit) --- */
.diag-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.diag-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 24px;
  position:relative; transition:transform .25s ease, box-shadow .25s ease;
}
.diag-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -18px rgba(19,33,60,0.18);}
.diag-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:5px 12px; border-radius:20px; margin-bottom:16px;
}
.diag-badge.sev-high{background:#FEE2E2; color:#991B1B;}
.diag-badge.sev-med{background:#FEF3C7; color:#92400E;}
.diag-badge.sev-low{background:#DBEAFE; color:#1E40AF;}
.diag-badge::before{
  content:""; width:7px; height:7px; border-radius:50%; flex-shrink:0;
}
.diag-badge.sev-high::before{background:#DC2626;}
.diag-badge.sev-med::before{background:#F59E0B;}
.diag-badge.sev-low::before{background:#3B82F6;}
.diag-card h3{font-size:16px; font-weight:700; color:var(--navy); margin-bottom:8px;}
.diag-card p{font-size:14px; color:var(--ink-soft); line-height:1.55;}
.diag-impact{
  margin-top:14px; font-size:12.5px; font-weight:600; color:var(--ink-faint);
  padding-top:14px; border-top:1px solid var(--line);
}
.diag-impact b{color:var(--navy); font-weight:700;}

/* --- Drift strips (Meta Pixel & CAPI) --- */
.drift-grid{display:flex; flex-direction:column; gap:16px;}
.drift-strip{
  display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch;
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.drift-strip:hover{transform:translateY(-3px); box-shadow:0 16px 36px -14px rgba(19,33,60,0.16);}
.drift-before, .drift-after{padding:24px 28px;}
.drift-before{background:var(--bg-soft);}
.drift-before h4, .drift-after h4{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  margin-bottom:8px;
}
.drift-before h4{color:var(--ink-faint);}
.drift-after h4{color:var(--accent);}
.drift-before p, .drift-after p{font-size:14.5px; color:var(--ink-soft); line-height:1.5; margin:0;}
.drift-after p{color:var(--navy); font-weight:600;}
.drift-arrow{
  display:flex; align-items:center; justify-content:center; width:52px;
  background:var(--bg-soft); border-left:1px solid var(--line); border-right:1px solid var(--line);
  font-size:20px; color:var(--accent); font-weight:700;
}

@media(max-width:900px){
  .signal-grid, .diag-grid{grid-template-columns:1fr;}
  .blind-grid{grid-template-columns:1fr;}
  .drift-strip{grid-template-columns:1fr; gap:0;}
  .drift-arrow{width:auto; height:40px; border-left:none; border-right:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
}