/* ══════════════════════════════════════════════════
   PSM DESIGN SYSTEM v2 — VISUAL TECH EDITION
   ══════════════════════════════════════════════════ */
:root{
  --bg:      #04050E;
  --bg2:     #070912;
  --bg3:     #090C18;
  --card:    #0C1022;
  --card2:   #0F1428;
  --blue:    #5B8DFF;
  --blue2:   #7BA3FF;
  --blue3:   #3A6FFF;
  --purple:  #8B5CF6;
  --purple2: #A78BFA;
  --green:   #10B981;
  --red:     #F43F5E;
  --amber:   #F59E0B;
  --white:   #FFFFFF;
  --gray:    #94A3B8;
  --gray2:   #64748B;
  --border:  rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.10);
  --blue-border: rgba(91,141,255,0.20);
  --glow:    0 0 60px rgba(91,141,255,0.15);
  --glow2:   0 0 120px rgba(91,141,255,0.08);
  --shadow:  0 24px 60px rgba(0,0,0,0.5);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
html{font-size:16px;scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--bg);color:var(--white);
  font-family:'DM Sans',system-ui,sans-serif;
  line-height:1.6;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans',sans-serif;
  line-height:1.12;letter-spacing:-0.025em;
}

/* ── GRADIENT TEXT ──────────────────────────────── */
.grad{
  background:linear-gradient(135deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.grad2{
  background:linear-gradient(135deg,var(--blue2),var(--blue));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ── CONTAINER ──────────────────────────────────── */
.container{max-width:1160px;margin:0 auto;padding:0 28px}
.container-sm{max-width:820px;margin:0 auto;padding:0 28px}
.section-center{text-align:center;margin-bottom:64px}
.section-center .eyebrow{margin-bottom:16px}

/* ── EYEBROW ────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:0.7rem;
  font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--blue);
}
.eyebrow::before{
  content:'';width:24px;height:1px;background:var(--blue);flex-shrink:0;
}

/* ── BUTTONS ────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.9rem;
  border-radius:10px;padding:13px 24px;cursor:pointer;
  transition:all 0.25s cubic-bezier(.4,0,.2,1);border:none;
  text-decoration:none;letter-spacing:-.01em;position:relative;
}
.btn-primary{
  background:linear-gradient(135deg,var(--blue),var(--blue3));
  color:var(--white);box-shadow:0 4px 24px rgba(91,141,255,0.3);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(91,141,255,0.45);
  background:linear-gradient(135deg,var(--blue2),var(--blue));
}
.btn-secondary{
  background:rgba(255,255,255,0.06);color:var(--white);
  border:1px solid var(--border2);backdrop-filter:blur(10px);
}
.btn-secondary:hover{background:rgba(255,255,255,0.10);transform:translateY(-2px)}
.btn-lg{padding:16px 32px;font-size:1rem;border-radius:12px}
.btn-xl{padding:18px 40px;font-size:1.05rem;border-radius:14px;letter-spacing:-.02em}
.page-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;align-items:center}
@media(max-width:600px){
  .page-btns{flex-direction:column;align-items:stretch}
  .page-btns .btn{width:100%;justify-content:center}
}

/* ── ANIMATED BACKGROUND MESH ───────────────────── */
.mesh-bg{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.mesh-bg::before{
  content:'';position:absolute;
  width:800px;height:800px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,141,255,0.12) 0%,transparent 70%);
  top:-200px;right:-200px;
  animation:meshFloat1 8s ease-in-out infinite;
}
.mesh-bg::after{
  content:'';position:absolute;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,0.08) 0%,transparent 70%);
  bottom:-100px;left:-100px;
  animation:meshFloat2 10s ease-in-out infinite;
}
@keyframes meshFloat1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-40px,30px) scale(1.1)}
}
@keyframes meshFloat2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(30px,-20px) scale(1.08)}
}

/* ── GRID OVERLAY ───────────────────────────────── */
.grid-overlay{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(91,141,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,141,255,0.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 0%,transparent 80%);
}

/* ── NAV ────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:68px;display:flex;align-items:center;
  background:rgba(4,5,14,0.80);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  transition:background 0.3s;
}
.nav.scrolled{background:rgba(4,5,14,0.95)}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1160px;margin:0 auto;padding:0 28px;width:100%;
}
.nav-brand{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1rem;
  display:flex;align-items:center;gap:10px;letter-spacing:-.025em;
}
.brand-dot{
  width:28px;height:28px;border-radius:7px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;font-weight:900;color:white;
  box-shadow:0 4px 12px rgba(91,141,255,0.4);
}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{
  font-size:0.85rem;color:var(--gray);transition:color 0.2s;font-weight:500;
  position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;right:0;height:1px;
  background:var(--blue);transform:scaleX(0);transition:transform 0.2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{
  background:linear-gradient(135deg,var(--blue),var(--blue3));
  color:var(--white)!important;padding:8px 18px;border-radius:8px;
  font-weight:700;font-size:0.82rem;font-family:'Plus Jakarta Sans',sans-serif;
  transition:all 0.2s;box-shadow:0 4px 16px rgba(91,141,255,0.3);
}
.nav-cta:hover{box-shadow:0 6px 24px rgba(91,141,255,0.45);transform:translateY(-1px)}
.nav-cta::after{display:none!important}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none;outline:none;-webkit-appearance:none;appearance:none}
.hamburger span{width:22px;height:2px;background:var(--white);border-radius:2px;transition:all 0.3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  display:none;position:fixed;inset:0;top:68px;
  background:rgba(4,5,14,0.98);backdrop-filter:blur(30px);
  z-index:199;padding:24px;flex-direction:column;
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  padding:16px 0;font-size:1.05rem;font-weight:600;
  border-bottom:1px solid var(--border);color:var(--gray);transition:color 0.2s;
}
.mobile-menu a:hover{color:var(--white)}
.mobile-menu .mob-cta{
  margin-top:24px;
  background:linear-gradient(135deg,var(--blue),var(--blue3));
  color:var(--white);text-align:center;border-radius:12px;padding:18px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1rem;
}
@media(max-width:860px){
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
}

/* ── HERO ───────────────────────────────────────── */
.hero{
  min-height:100vh;display:flex;align-items:center;
  position:relative;overflow:hidden;
  padding:120px 0 80px;
}
.hero-inner{position:relative;z-index:2;max-width:820px}
.platform-badges{
  display:flex;gap:12px;margin-bottom:36px;flex-wrap:wrap;
}
.platform-badge{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.04);border:1px solid var(--border2);
  border-radius:100px;padding:6px 14px;
  font-size:0.78rem;font-weight:600;color:var(--gray);
  backdrop-filter:blur(10px);transition:all 0.2s;
}
.platform-badge:hover{border-color:var(--blue-border);color:var(--white)}
.platform-badge .dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
}
.platform-badge .dot.meta{background:#1877F2}
.platform-badge .dot.tiktok{background:#FE2C55}
.platform-badge .dot.google{background:#4285F4}
.hero-h1{
  font-size:clamp(3rem,6vw,5.2rem);font-weight:800;line-height:1.05;
  letter-spacing:-0.035em;margin-bottom:28px;
}
.hero-lead{
  font-size:1.15rem;color:var(--gray);max-width:600px;line-height:1.75;
  margin-bottom:0;
}
.hero-metrics{
  display:flex;gap:32px;margin-top:48px;padding-top:40px;
  border-top:1px solid var(--border);flex-wrap:wrap;
}
.hero-metric{}
.hm-num{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:1.8rem;
  font-weight:800;color:var(--white);line-height:1;
}
.hm-num .acc{
  background:linear-gradient(135deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hm-lbl{font-size:0.78rem;color:var(--gray2);margin-top:4px}

/* ── FLOATING VISUAL ────────────────────────────── */
.hero-visual{
  position:absolute;right:-60px;top:50%;transform:translateY(-50%);
  width:500px;height:500px;
  display:flex;align-items:center;justify-content:center;
}
@media(max-width:1100px){.hero-visual{display:none}}
.visual-center{
  width:160px;height:160px;border-radius:28px;
  background:linear-gradient(135deg,rgba(91,141,255,0.15),rgba(139,92,246,0.1));
  border:1px solid rgba(91,141,255,0.25);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(20px);position:relative;z-index:2;
  box-shadow:0 0 80px rgba(91,141,255,0.2),inset 0 1px 1px rgba(255,255,255,0.08);
  animation:floatCenter 4s ease-in-out infinite;
}
@keyframes floatCenter{
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-12px)}
}
.visual-center-icon{font-size:3.5rem}
.orbit{
  position:absolute;border-radius:50%;border:1px dashed rgba(91,141,255,0.12);
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.orbit-1{width:280px;height:280px;animation:orbitSpin 20s linear infinite}
.orbit-2{width:400px;height:400px;animation:orbitSpin 30s linear infinite reverse}
@keyframes orbitSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.orbit-dot{
  position:absolute;width:36px;height:36px;border-radius:10px;
  background:var(--card2);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  animation:counterSpin 20s linear infinite;
}
.orbit-1 .orbit-dot{animation-duration:20s}
.orbit-2 .orbit-dot{animation-duration:30s;animation-direction:reverse}
@keyframes counterSpin{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
.orbit-dot.pos1{top:-18px;left:50%;transform:translateX(-50%)}
.orbit-dot.pos2{top:50%;right:-18px;transform:translateY(-50%)}
.orbit-dot.pos3{bottom:-18px;left:50%;transform:translateX(-50%)}
.orbit-dot.pos4{top:50%;left:-18px;transform:translateY(-50%)}

/* ── SCROLLING TICKER ───────────────────────────── */
.ticker{
  background:var(--bg2);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);padding:14px 0;overflow:hidden;
  position:relative;
}
.ticker::before,.ticker::after{
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--bg2),transparent)}
.ticker-inner{
  display:flex;gap:0;white-space:nowrap;
  animation:tickerScroll 30s linear infinite;
}
@keyframes tickerScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.ticker-item{
  display:inline-flex;align-items:center;gap:8px;
  padding:0 32px;font-size:0.82rem;color:var(--gray2);font-weight:500;
  flex-shrink:0;
}
.ticker-item strong{color:var(--white)}
.ticker-divider{color:var(--border2)}

/* ── SECTION BASE ───────────────────────────────── */
.section{padding:100px 0;position:relative;overflow:hidden}
.section-dark{background:var(--bg);padding:100px 0}
.section-darker{background:var(--bg2);padding:100px 0}
.section-darkest{background:var(--bg3);padding:100px 0}
@media(max-width:768px){
  .section,.section-dark,.section-darker,.section-darkest{padding:70px 0}
}

/* ── PROBLEM CARDS ──────────────────────────────── */
.problem-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:20px;overflow:hidden;margin-top:60px;
}
.problem-cell{
  background:var(--card);padding:32px 28px;
  transition:background 0.2s;
}
.problem-cell:hover{background:var(--card2)}
.problem-icon{
  width:44px;height:44px;border-radius:10px;
  background:rgba(244,63,94,0.1);border:1px solid rgba(244,63,94,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;margin-bottom:18px;
}
.problem-cell h4{font-size:0.95rem;margin-bottom:10px;color:var(--white)}
.problem-cell p{font-size:0.83rem;color:var(--gray);line-height:1.65}
@media(max-width:900px){.problem-grid{grid-template-columns:1fr}}

/* ── EXPLAINER DIAGRAM ──────────────────────────── */
.explainer-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px;
}
.explainer-card{
  border-radius:20px;padding:32px;position:relative;overflow:hidden;
}
.exp-bad{
  background:rgba(244,63,94,0.05);border:1px solid rgba(244,63,94,0.15);
}
.exp-good{
  background:rgba(91,141,255,0.06);border:1px solid rgba(91,141,255,0.2);
}
.exp-good::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--purple));
}
.exp-label{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:0.68rem;
  font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  margin-bottom:20px;display:flex;align-items:center;gap:8px;
}
.exp-bad .exp-label{color:var(--red)}
.exp-good .exp-label{color:var(--blue)}
.exp-list{display:flex;flex-direction:column;gap:10px}
.exp-item{
  display:flex;align-items:flex-start;gap:10px;
  font-size:0.875rem;color:var(--gray);line-height:1.5;
}
.exp-item .xi{flex-shrink:0;margin-top:1px;font-weight:700}
.exp-bad .xi{color:var(--red)}
.exp-good .xi{color:var(--blue)}
@media(max-width:600px){.explainer-grid{grid-template-columns:1fr}}

/* ── PLATFORM TABS ──────────────────────────────── */
.platform-tabs{
  display:flex;gap:4px;background:var(--card);
  border:1px solid var(--border2);border-radius:12px;padding:4px;
  margin-bottom:32px;width:fit-content;
}
.ptab{
  padding:10px 24px;border-radius:9px;cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.82rem;
  color:var(--gray);transition:all 0.2s;
}
.ptab.active{background:var(--bg);color:var(--white);box-shadow:0 2px 12px rgba(0,0,0,0.4)}
.ptab{display:flex;align-items:center;justify-content:center}
.ptab-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px;flex-shrink:0}
.platform-panel{display:none}
.platform-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media(max-width:768px){
  .platform-panel.active{grid-template-columns:1fr}
  .platform-tabs{width:100%}
  .ptab{flex:1;text-align:center}
}
.platform-features{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.pf-item{
  display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
  background:rgba(255,255,255,0.03);border:1px solid var(--border);
  border-radius:10px;font-size:0.875rem;
}
.pf-item .pf-icon{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:var(--blue-dim,rgba(91,141,255,0.1));
  display:flex;align-items:center;justify-content:center;font-size:0.9rem;
}
.pf-item .pf-text strong{display:block;font-size:0.85rem;color:var(--white);margin-bottom:2px}
.pf-item .pf-text span{font-size:0.8rem;color:var(--gray)}
.platform-visual{
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  padding:24px;overflow:hidden;position:relative;
}
.platform-visual::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--purple));
}
.mock-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border);
}
.mock-title{font-size:0.82rem;font-weight:600;color:var(--gray2);letter-spacing:0.04em}
.mock-status{
  display:flex;align-items:center;gap:6px;
  font-size:0.72rem;color:var(--green);font-weight:700;
}
.mock-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s ease infinite}
.mock-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mock-stat{
  background:rgba(255,255,255,0.03);border:1px solid var(--border);
  border-radius:10px;padding:14px;
}
.mock-stat .ms-val{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:1.4rem;
  font-weight:800;color:var(--white);line-height:1;
}
.mock-stat .ms-val.blue{color:var(--blue)}
.mock-stat .ms-val.green{color:var(--green)}
.mock-stat .ms-lbl{font-size:0.72rem;color:var(--gray2);margin-top:4px}
.mock-bar-wrap{margin-top:16px}
.mock-bar-lbl{display:flex;justify-content:space-between;font-size:0.72rem;color:var(--gray2);margin-bottom:6px}
.mock-bar{height:6px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden}
.mock-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--purple))}

/* ── STATS STRIP ────────────────────────────────── */
.stats-strip{padding:60px 0}
.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:20px;overflow:hidden;
}
.stat-cell{
  background:var(--card);padding:36px 28px;text-align:center;
  transition:background 0.2s;
}
.stat-cell:hover{background:var(--card2)}
.stat-num{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:2.8rem;font-weight:800;
  line-height:1;display:flex;align-items:baseline;justify-content:center;gap:2px;
  margin-bottom:8px;
}
.stat-num .acc{
  background:linear-gradient(135deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-size:2rem;
}
.stat-lbl{font-size:0.8rem;color:var(--gray);line-height:1.4}
@media(max-width:700px){.stats-row{grid-template-columns:repeat(2,1fr)}}

/* ── COMPARE TABLE ──────────────────────────────── */
.compare-wrap{
  border:1px solid var(--border);border-radius:20px;overflow:hidden;
  margin-top:56px;position:relative;
}
.compare-wrap::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--purple),transparent);
}
.compare-head{
  display:grid;grid-template-columns:2fr 1fr 1fr;
  background:var(--card2);border-bottom:1px solid var(--border);
}
.compare-head>div{
  padding:18px 24px;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:0.72rem;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--gray2);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.compare-head>div:first-child{justify-content:flex-start;text-align:left}
.compare-head .psm-col{
  color:var(--blue);
  background:rgba(91,141,255,0.06);border-left:2px solid var(--blue);
}
.compare-row{
  display:grid;grid-template-columns:2fr 1fr 1fr;
  border-bottom:1px solid var(--border);
}
.compare-row:last-child{border-bottom:none}
.compare-row:nth-child(odd){background:rgba(255,255,255,0.01)}
.compare-row>div{
  padding:14px 24px;font-size:0.875rem;
  display:flex;align-items:center;gap:6px;
}
.compare-row>.feature{color:var(--gray);font-weight:500}
.compare-row>.val{justify-content:center;color:var(--gray)}
.compare-row>.val.good{color:var(--green);font-weight:600}
.compare-row>.val.bad{color:var(--red)}
.compare-row>.val.mid{color:var(--amber)}
.compare-row>.psm-val{
  justify-content:center;color:var(--blue);font-weight:700;
  background:rgba(91,141,255,0.04);border-left:2px solid rgba(91,141,255,0.2);
}
.compare-note{
  font-size:0.7rem;color:var(--gray2);text-align:center;
  font-style:italic;padding:12px 24px;background:var(--card2);
}
@media(max-width:700px){
  .compare-head{display:grid;grid-template-columns:1fr 1fr;padding:12px 14px}
  .compare-head>div:first-child{display:none}
  .compare-head>div{font-size:0.68rem;padding:8px 10px;border-radius:6px;justify-content:center}
  .compare-head .psm-col{background:rgba(91,141,255,0.1)}
  .compare-row{display:block;padding:12px 14px;border-bottom:1px solid var(--border)}
  .compare-row>.feature{font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--gray2);padding:0 0 8px}
  .compare-row .mobile-vals{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .compare-row>.val,.compare-row>.psm-val{border-radius:8px;padding:8px 12px;font-size:0.82rem;background:rgba(255,255,255,0.03);border:1px solid var(--border);justify-content:center}
  .compare-row>.psm-val{background:rgba(91,141,255,0.08);border-color:rgba(91,141,255,0.2)}
}

/* ── HOW IT WORKS TIMELINE ──────────────────────── */
.timeline{display:flex;flex-direction:column;gap:0;margin-top:40px;position:relative}
.timeline::before{
  content:'';position:absolute;left:23px;top:48px;bottom:0;
  width:2px;
  background:linear-gradient(180deg,var(--blue),var(--purple),rgba(91,141,255,0));
  filter:drop-shadow(0 0 6px rgba(91,141,255,0.5));
}
.tl-step{display:flex;gap:20px;padding:0 0 28px;position:relative;align-items:flex-start}
.tl-step:last-child{padding-bottom:0}
.tl-num{
  width:48px;height:48px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.1rem;
  color:var(--white);position:relative;z-index:2;
  box-shadow:0 0 0 4px rgba(91,141,255,0.15),0 0 24px rgba(91,141,255,0.5);
  animation:numPulse 3s ease-in-out infinite;
}
.tl-step:nth-child(2) .tl-num{animation-delay:1s}
.tl-step:nth-child(3) .tl-num{animation-delay:2s}
@keyframes numPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(91,141,255,0.15),0 0 20px rgba(91,141,255,0.4)}
  50%{box-shadow:0 0 0 8px rgba(91,141,255,0.08),0 0 40px rgba(91,141,255,0.7)}
}
.tl-content{
  background:rgba(12,16,34,0.7);border:1px solid rgba(91,141,255,0.15);
  border-radius:16px;padding:20px 22px;flex:1;
  backdrop-filter:blur(10px);
  position:relative;overflow:hidden;
}
.tl-content::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(91,141,255,0.4),transparent)}
.tl-content h3{font-size:1rem;margin-bottom:6px;font-weight:700}
.tl-content p{font-size:0.85rem;color:var(--gray);line-height:1.65}

/* ── REVIEW MARQUEE ─────────────────────────────── */
.review-track{overflow:hidden;position:relative;padding:20px 0}
.review-track::before,.review-track::after{
  content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;
}
.review-track::before{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.review-track::after{right:0;background:linear-gradient(-90deg,var(--bg2),transparent)}
.review-row{display:flex;gap:16px;animation:marquee 12s linear infinite}
.review-row.rev{animation-direction:reverse;animation-duration:15s}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.review-card-mini{
  flex-shrink:0;width:300px;
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:20px;
}
.rcm-stars{color:var(--amber);font-size:0.8rem;letter-spacing:2px;margin-bottom:10px}
.rcm-text{font-size:0.83rem;color:var(--gray);line-height:1.65;margin-bottom:12px}
.rcm-author strong{font-size:0.8rem;color:var(--white);display:block}
.rcm-author span{font-size:0.75rem;color:var(--gray2)}

/* ── CTA SECTION ────────────────────────────────── */
.cta-section{
  padding:120px 0;position:relative;overflow:hidden;
  background:var(--bg);
}
.cta-section::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%,rgba(91,141,255,0.08) 0%,transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 50%,rgba(139,92,246,0.06) 0%,transparent 70%);
}
.cta-inner{position:relative;z-index:2;text-align:center}
.cta-chips{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:28px;
}
.cta-chip{
  font-size:0.78rem;color:var(--gray2);
  display:flex;align-items:center;gap:7px;
}
.cta-chip::before{
  content:'✓';color:var(--blue);font-weight:700;font-size:0.75rem;
}

/* ── COMPLIANCE DISCLAIMER ──────────────────────── */
.compliance-bar{
  background:var(--card2);border-top:1px solid var(--border);
  padding:20px 0 28px;
}
.compliance-text{
  font-size:0.72rem;color:var(--gray2);text-align:center;line-height:1.6;max-width:800px;margin:0 auto;
}
@media(max-width:600px){
  .compliance-bar{padding-bottom:20px}
  .compliance-text{font-size:0.68rem;padding-right:0}
}

/* ── WA FLOAT ───────────────────────────────────── */
.wa-float{
  position:fixed;bottom:28px;right:24px;z-index:300;
  display:flex;align-items:center;gap:10px;
  background:#25D366;
  border-radius:50px;padding:12px 20px 12px 14px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.85rem;
  color:var(--white);cursor:pointer;
  box-shadow:0 8px 32px rgba(37,211,102,0.4);
  transition:all 0.25s cubic-bezier(.4,0,.2,1);
}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(37,211,102,0.55)}
.wa-float .wa-icon{font-size:1.1rem;flex-shrink:0}
@media(max-width:600px){
  .wa-float{border-radius:50%;padding:14px;width:52px;height:52px;justify-content:center}
  .wa-float .wa-label{display:none}
}

/* ── FOOTER ─────────────────────────────────────── */
.footer{
  background:var(--bg2);border-top:1px solid var(--border);padding:56px 0 32px;
}
.footer-grid{
  display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:56px;
  padding-bottom:48px;border-bottom:1px solid var(--border);
}
.footer-brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1rem;
  margin-bottom:14px;
}
.footer-desc{font-size:0.83rem;color:var(--gray);line-height:1.7;max-width:320px}
.footer-contact{margin-top:20px;display:flex;flex-direction:column;gap:6px}
.footer-contact a,.footer-contact span{font-size:0.8rem;color:var(--gray);transition:color 0.2s}
.footer-contact a:hover{color:var(--white)}
.footer-heading{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:0.68rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--gray2);margin-bottom:18px;
}
.footer-links{display:flex;flex-direction:column;gap:12px}
.footer-links a{font-size:0.83rem;color:var(--gray);transition:color 0.2s}
.footer-links a:hover{color:var(--white)}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:24px;font-size:0.75rem;color:var(--gray2);flex-wrap:wrap;gap:12px;
}
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ── CONTACT ────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start}
.contact-method{
  display:flex;gap:16px;align-items:flex-start;
  padding:20px;border-radius:14px;background:var(--card);
  border:1px solid var(--border);margin-bottom:14px;
  text-decoration:none;transition:all 0.2s;
}
.contact-method:hover{border-color:var(--blue-border);transform:translateX(3px)}
.cm-ico{
  width:44px;height:44px;border-radius:10px;
  background:rgba(91,141,255,0.1);display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;flex-shrink:0;
}
.cm-label{font-size:0.68rem;font-weight:700;color:var(--gray2);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px}
.cm-value{font-weight:600;font-size:0.95rem;color:var(--white);margin-bottom:3px;word-break:break-all}
.cm-note{font-size:0.8rem;color:var(--gray)}
.contact-form-box{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:36px;position:relative;overflow:hidden;
}
.contact-form-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--purple));
}
.contact-form-box h3{font-size:1.3rem;margin-bottom:6px}
.contact-form-box p{font-size:0.875rem;color:var(--gray);margin-bottom:28px}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:0.78rem;font-weight:600;color:var(--gray);margin-bottom:7px}
.form-control{
  width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border2);
  border-radius:9px;padding:11px 14px;color:var(--white);font-size:0.9rem;
  font-family:inherit;transition:border-color 0.2s;
}
.form-control:focus{outline:none;border-color:var(--blue)}
.form-control::placeholder{color:var(--gray2)}
select.form-control{cursor:pointer}
select.form-control option{background:var(--bg2);color:var(--white)}
textarea.form-control{resize:vertical;min-height:110px}
.form-submit{
  width:100%;
  background:linear-gradient(135deg,var(--blue),var(--blue3));
  color:var(--white);border:none;border-radius:10px;padding:14px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.95rem;
  cursor:pointer;transition:all 0.2s;
  box-shadow:0 4px 20px rgba(91,141,255,0.3);
}
.form-submit:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(91,141,255,0.4)}
.form-success{display:none;text-align:center;padding:32px 20px}
.form-success .big-icon{font-size:3rem;margin-bottom:12px}
.form-success h3{color:var(--blue);margin-bottom:8px}
.form-success p{font-size:0.875rem;color:var(--gray)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media(max-width:480px){.contact-form-box{padding:24px 20px}.cm-value{font-size:0.82rem}}

/* ── BLOG ───────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:56px}
.blog-card{
  background:var(--card);border:1px solid var(--border);border-radius:18px;
  overflow:hidden;text-decoration:none;transition:all 0.25s cubic-bezier(.4,0,.2,1);
}
.blog-card:hover{border-color:var(--blue-border);transform:translateY(-3px);box-shadow:var(--glow)}
.blog-card-img{
  height:150px;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--border);position:relative;overflow:hidden;
}
.blog-card-img-inner{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:0.78rem;
  font-weight:800;letter-spacing:0.18em;text-align:center;line-height:1.5;
  position:relative;z-index:2;
}
.blog-card-body{padding:24px}
.blog-tag{
  font-size:0.68rem;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--blue);margin-bottom:10px;
}
.blog-card-body h3{font-size:1rem;color:var(--white);margin-bottom:8px;line-height:1.4}
.blog-card-body p{font-size:0.83rem;color:var(--gray);line-height:1.6;margin-bottom:14px}
.blog-read{font-size:0.82rem;color:var(--blue);font-weight:600}
@media(max-width:700px){.blog-grid{grid-template-columns:1fr}}

/* ── POST ───────────────────────────────────────── */
.post-hero{padding:130px 0 48px;position:relative;overflow:hidden}
.post-wrap{max-width:760px;margin:0 auto;padding:0 28px}
.post-wrap h2{font-size:1.6rem;margin:40px 0 14px}
.post-wrap h3{font-size:1.15rem;margin:28px 0 10px;color:var(--white)}
.post-wrap p{font-size:0.95rem;color:var(--gray);margin-bottom:16px;line-height:1.78}
.post-wrap ul,.post-wrap ol{margin:12px 0 20px 18px;display:flex;flex-direction:column;gap:8px}
.post-wrap li{font-size:0.95rem;color:var(--gray);line-height:1.7}
.post-wrap strong{color:var(--white)}
.post-callout{background:rgba(91,141,255,0.06);border:1px solid rgba(91,141,255,0.2);border-left:3px solid var(--blue);border-radius:12px;padding:20px 24px;margin:28px 0}
.post-callout p{color:var(--white);margin:0}
.post-warning{background:rgba(244,63,94,0.06);border:1px solid rgba(244,63,94,0.18);border-radius:12px;padding:20px 24px;margin:28px 0}
.post-warning p{color:var(--white);margin:0}
.post-meta{display:flex;gap:16px;font-size:0.82rem;color:var(--gray2);margin-bottom:40px;flex-wrap:wrap}
.post-tag{background:rgba(91,141,255,0.1);border:1px solid rgba(91,141,255,0.2);padding:3px 10px;border-radius:100px;font-size:0.72rem;font-weight:700;color:var(--blue);letter-spacing:0.08em;text-transform:uppercase}
.post-cta-box{background:var(--card);border:1px solid rgba(91,141,255,0.2);border-radius:16px;padding:32px;margin:48px 0;text-align:center}
.post-cta-box h3{margin-bottom:10px}
.post-cta-box p{margin-bottom:20px;color:var(--gray)}
.back-link{font-size:0.85rem;color:var(--gray2);display:inline-flex;align-items:center;gap:6px;margin-bottom:32px;transition:color 0.2s}
.back-link:hover{color:var(--white)}
.key-takeaways{background:rgba(91,141,255,0.06);border:1px solid rgba(91,141,255,0.2);border-left:3px solid var(--blue);border-radius:12px;padding:24px 28px;margin-bottom:36px}
.kt-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.key-takeaways ul{margin:0;padding:0;display:flex;flex-direction:column;gap:9px;list-style:none}
.key-takeaways li{font-size:0.88rem;color:var(--white);line-height:1.6}

/* ── PAGE HERO ──────────────────────────────────── */
.page-hero{padding:140px 0 80px;position:relative;overflow:hidden}
.page-hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 14px;border-radius:100px;margin-bottom:24px;
  background:rgba(91,141,255,0.10);border:1px solid rgba(91,141,255,0.25);
  font-size:0.68rem;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--blue);font-family:'Plus Jakarta Sans',sans-serif;
}
.lead{font-size:1.1rem;color:var(--gray);max-width:560px;line-height:1.72}

/* ── MISC ───────────────────────────────────────── */
.glow-line{height:1px;background:linear-gradient(90deg,transparent,rgba(91,141,255,0.25),rgba(139,92,246,0.15),transparent)}
.badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:100px;
  font-size:0.72rem;font-weight:600;
  background:rgba(255,255,255,0.04);border:1px solid var(--border2);color:var(--gray);
}
.badge.green{background:rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.2);color:var(--green)}
.badge.blue{background:rgba(91,141,255,0.08);border-color:rgba(91,141,255,0.2);color:var(--blue)}
.hide-mobile{display:block}
@media(max-width:768px){.hide-mobile{display:none}.section,.section-dark,.section-darker,.section-darkest{padding:64px 0}}

/* ── REVEAL ─────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.55s,transform 0.55s}
.reveal.visible{opacity:1;transform:none}
.d1{transition-delay:0.08s}.d2{transition-delay:0.16s}.d3{transition-delay:0.24s}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.4;transform:scale(0.85)}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* ══ PATCH v3 FIXES ══════════════════════════════ */

/* Hamburger — force visible, larger touch target */
@media(max-width:860px){
  .hamburger{display:flex!important;min-width:44px;min-height:44px;align-items:center;justify-content:center;background:rgba(255,255,255,0.07)!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:10px!important;padding:10px!important}
  .hamburger span{width:22px;height:2.5px;background:#fff!important;border-radius:3px}
}

/* Brand icon — replace generic P */
.brand-dot{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-size:0;box-shadow:0 4px 12px rgba(91,141,255,0.4);
  overflow:hidden;
}
.brand-dot svg{display:block}

/* WA green button (CTA section) */
.btn-wa{
  background:#25D366;color:#fff!important;
  box-shadow:0 4px 24px rgba(37,211,102,0.35);
  display:inline-flex;align-items:center;gap:10px;
}
.btn-wa:hover{background:#1ebe5d;box-shadow:0 8px 36px rgba(37,211,102,0.5);transform:translateY(-2px)}

/* Equal-width CTA buttons on mobile */
@media(max-width:600px){
  .btn-wa,.btn-secondary.btn-xl{width:100%;justify-content:center}
}

/* Solution section — center text on mobile */
@media(max-width:768px){
  .sol-text-col{text-align:left}
  .sol-text-col .badge-row{justify-content:flex-start}
  .sol-text-col h2{text-align:left}
}

/* USP chips — 3-col on mobile for even rows */
@media(max-width:600px){
  .cta-chip-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 6px;justify-items:center}
  .cta-chip{font-size:0.72rem;text-align:center}
}

/* WA float icon centering on mobile */
@media(max-width:600px){
  .wa-float{display:flex;align-items:center;justify-content:center}
  .wa-icon{display:flex;align-items:center;justify-content:center;line-height:1}
  .wa-icon svg{display:block}
}

/* ══ PATCH v5 — WOW + SERVICES FIX ══════════════ */

/* Glowing section orbs */
.section-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.orb-red{width:400px;height:400px;background:radial-gradient(circle,rgba(244,63,94,0.12),transparent 70%);top:-100px;right:-80px}
.orb-blue{width:500px;height:500px;background:radial-gradient(circle,rgba(91,141,255,0.1),transparent 70%);bottom:-120px;left:-100px}
.orb-purple{width:350px;height:350px;background:radial-gradient(circle,rgba(139,92,246,0.1),transparent 70%);top:50%;right:-60px}

/* Stats section glow enhancement */
.stat-big-cell{position:relative}
.stat-big-cell::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;background:radial-gradient(circle at 50% 50%,rgba(91,141,255,0.06),transparent 70%)}
.stat-big-cell:hover::after{opacity:1}

/* Hero mobile live-account card */
.hero-mobile-card{
  display:none;
  margin-top:32px;
  background:rgba(12,16,34,0.85);
  border:1px solid rgba(91,141,255,0.2);
  border-radius:16px;padding:20px;
  backdrop-filter:blur(20px);
  position:relative;overflow:hidden;
}
.hero-mobile-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--blue),var(--purple),transparent)}
@media(max-width:860px){.hero-mobile-card{display:block}}
@media(min-width:861px){.hero-mobile-card{display:none!important}}
.hmc-header{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.hmc-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px rgba(91,141,255,0.8);animation:pulse 2s infinite}
.hmc-title{font-size:0.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray2)}
.hmc-live{margin-left:auto;font-size:0.65rem;font-weight:700;color:#10B981;letter-spacing:.05em}
.hmc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.hmc-stat{display:flex;flex-direction:column;gap:4px}
.hmc-val{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.1rem;line-height:1}
.hmc-val.blue{background:linear-gradient(135deg,var(--blue),var(--blue2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hmc-val.purple{background:linear-gradient(135deg,var(--purple),var(--purple2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hmc-val.green{color:#10B981}
.hmc-lbl{font-size:0.62rem;color:var(--gray2);line-height:1.3}
.hmc-bar{display:flex;align-items:center;gap:10px}
.hmc-bar-lbl{font-size:0.62rem;color:var(--gray2);white-space:nowrap}
.hmc-bar-track{flex:1;height:4px;background:rgba(255,255,255,0.07);border-radius:4px;overflow:hidden}
.hmc-bar-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:4px}
.hmc-bar-pct{font-size:0.65rem;font-weight:700;color:var(--blue);white-space:nowrap}
@keyframes pulse{0%,100%{box-shadow:0 0 6px rgba(91,141,255,0.7)}50%{box-shadow:0 0 14px rgba(91,141,255,1)}}

/* Stats section — enhanced background */
.stats-section-wrap{position:relative;overflow:hidden}
.stats-section-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(91,141,255,0.05),transparent);pointer-events:none}

/* Stat numbers — animated glow border on card */
.stats-big{box-shadow:0 0 0 1px rgba(91,141,255,0.1),0 24px 80px rgba(0,0,0,0.4);border:none!important;background:rgba(12,16,34,0.9)!important}

/* Section container z-index fix for orbs */
.section-orb + .container{position:relative;z-index:1}

/* ══ PATCH v6 — CONTACT + SERVICES + HOMEPAGE WOW ═ */

/* Contact trust row in hero */
.contact-trust-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.contact-trust-chip{font-size:0.78rem;color:var(--gray);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:5px 12px;display:flex;align-items:center;gap:5px}

/* Contact method cards — WA green */
.contact-wa{border-color:rgba(37,211,102,0.3)!important;background:rgba(37,211,102,0.05)!important}
.contact-wa:hover{border-color:rgba(37,211,102,0.5)!important;background:rgba(37,211,102,0.08)!important}
.cm-ico-wa{background:#25D366!important}
.cm-ico-email{background:linear-gradient(135deg,var(--blue),var(--blue3))!important}
.cm-ico-loc{background:rgba(91,141,255,0.2)!important}
.cm-arrow{margin-left:auto;color:var(--gray2);font-size:1.1rem;flex-shrink:0}
.contact-wa .cm-arrow{color:#25D366}

/* Contact submit button */
.btn-wa-submit{
  width:100%;padding:16px;border-radius:12px;
  background:#25D366;color:#fff;border:none;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1rem;
  cursor:pointer;transition:all .25s;margin-top:8px;
  box-shadow:0 4px 20px rgba(37,211,102,0.3);
}
.btn-wa-submit:hover{background:#1ebe5d;box-shadow:0 8px 30px rgba(37,211,102,0.45)}

/* Services hero stats row */
.svc-hero-stats{display:flex;gap:28px;margin-top:32px;flex-wrap:wrap}
.svc-hero-stat{display:flex;flex-direction:column;gap:4px}
.svc-stat-num{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.5rem;background:linear-gradient(135deg,var(--white),var(--blue2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.svc-stat-lbl{font-size:0.72rem;color:var(--gray2)}
.svc-trust-row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.svc-trust-pill{font-size:0.75rem;font-weight:700;padding:6px 14px;border-radius:20px;border:1px solid rgba(255,255,255,0.12);color:var(--gray);letter-spacing:.03em}

/* Service section platform badge */
.svc-section-badge{display:inline-flex;align-items:center;gap:7px;font-size:0.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:20px;border:1px solid;margin-bottom:4px}

/* Service sections — top accent border */
.svc-meta{border-top:2px solid rgba(24,119,242,0.25)}
.svc-tiktok{border-top:2px solid rgba(255,255,255,0.08)}
.svc-google{border-top:2px solid rgba(234,67,53,0.2)}

/* Homepage feat-badges: add padding-right so WA float doesn't overlap */
@media(max-width:600px){
  .feat-badges{padding-right:68px}
  .hero-mobile-card{margin-top:28px}
}

/* Homepage problem section - neon-cell icon improvement */
.n-icon{
  font-size:1.6rem;margin-bottom:16px;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  background:rgba(244,63,94,0.08);border:1px solid rgba(244,63,94,0.18);border-radius:14px;
}

/* Enhanced review cards */
.rev-card{border:1px solid rgba(91,141,255,0.12)!important;box-shadow:0 4px 24px rgba(0,0,0,0.3)!important}
.rev-card:hover{border-color:rgba(91,141,255,0.25)!important;transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.4)!important}

/* Services page hero padding reduction */
.page-hero{padding:120px 0 60px}

/* Contact page — make cm-ico always size correctly */
.cm-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(91,141,255,0.12)}

/* ══ PATCH v7 ══════════════════════════════════════ */

/* Feat-list USP visual improvement */
.feat-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.04);
  font-size:0.875rem;color:var(--gray);line-height:1.55;
}
.feat-item:last-child{border-bottom:none}
.ck{
  flex-shrink:0;width:20px;height:20px;border-radius:6px;
  background:rgba(91,141,255,0.12);border:1px solid rgba(91,141,255,0.2);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);font-size:0.7rem;font-weight:900;margin-top:1px;
}

/* Blog thumb fix */
.blog-thumb{height:140px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border);overflow:hidden}
.blog-thumb-txt{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.75rem;font-weight:800;letter-spacing:0.18em;text-align:center;line-height:1.6}

/* About page font fix for headings */
.about-grid h2{font-family:'Plus Jakarta Sans',sans-serif}

/* Services — reduce bottom section padding before CTA */
.svc-google.section.mid{padding-bottom:48px}

/* Blog grid — force single column at 900px */
@media(max-width:900px){
  .blog-grid{grid-template-columns:1fr!important}
}

/* Contact font fix */
.contact.html h1,.page-hero h1{font-family:'Plus Jakarta Sans',sans-serif}

/* Consistent hamburger pill across all pages */
.hamburger{
  background:rgba(255,255,255,0.07)!important;
  border:1px solid rgba(255,255,255,0.09)!important;
  border-radius:10px!important;
}

/* ══ PATCH v8 — COMPREHENSIVE WOW ═══════════════════ */

/* ── WHO-THIS-IS-FOR persona cards ── */
.who-section{margin-bottom:20px}
.who-label{font-size:0.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.who-grid{display:flex;flex-direction:column;gap:8px}
.who-card{
  display:flex;align-items:center;gap:12px;padding:11px 16px;
  background:rgba(91,141,255,0.05);
  border:1px solid rgba(91,141,255,0.12);
  border-left:3px solid var(--blue);
  border-radius:0 12px 12px 0;
  font-size:0.85rem;color:var(--gray);line-height:1.4;
  transition:all 0.2s;
}
.who-card:hover{background:rgba(91,141,255,0.1);color:var(--white);transform:translateX(4px)}
.wc-num{
  flex-shrink:0;width:24px;height:24px;border-radius:7px;
  background:rgba(91,141,255,0.15);color:var(--blue);
  font-size:0.62rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;
  display:flex;align-items:center;justify-content:center;letter-spacing:0;
}

/* ── DANGER CARD ── */
.danger-card{
  background:rgba(244,63,94,0.05);
  border:1px solid rgba(244,63,94,0.18);
  border-radius:16px;padding:20px;
  position:relative;overflow:hidden;margin-top:0;
}
.danger-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(244,63,94,0.6),transparent)}
.danger-label{font-size:0.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.danger-grid{display:flex;flex-direction:column;gap:8px}
.danger-item{display:flex;align-items:flex-start;gap:10px;font-size:0.83rem;color:var(--gray);line-height:1.45}
.dx{flex-shrink:0;width:20px;height:20px;border-radius:6px;background:rgba(244,63,94,0.12);color:var(--red);font-size:0.7rem;font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:1px}

/* ── METRIC SHOWCASE CARD ── */
.svc-metric-card{
  background:rgba(91,141,255,0.04);
  border:1px solid rgba(91,141,255,0.16);
  border-radius:16px;padding:20px;
  position:relative;overflow:hidden;
}
.svc-metric-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--purple),var(--blue));background-size:200%;animation:shimmer 3s linear infinite}
.svc-metric-label{font-size:0.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.svc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.svc-metric-item{display:flex;flex-direction:column;gap:4px;padding:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px}
.smn{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.15rem;background:linear-gradient(135deg,var(--white),var(--blue2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.smn.blue{background:linear-gradient(135deg,var(--blue),var(--blue2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.smn.purple{background:linear-gradient(135deg,var(--purple),var(--purple2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.smn.green{background:linear-gradient(135deg,#10B981,#34D399);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sml{font-size:0.68rem;color:var(--gray2);line-height:1.3}

/* ── SHIMMER ANIMATION ── */
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}

/* ── ENHANCED GLASS CARD ── */
.glass-card{
  position:relative;overflow:hidden;
}
.glass-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,141,255,0.4),transparent);
}

/* ── ANIMATED GRADIENT BORDER on metric callouts ── */
@keyframes gradBorder{
  0%,100%{opacity:0.6}50%{opacity:1}
}
.svc-metric-card::before{animation:gradBorder 2.5s ease-in-out infinite}

/* ── TIMELINE enhanced ── */
.tl-num{
  background:linear-gradient(135deg,var(--blue),var(--purple))!important;
  box-shadow:0 0 16px rgba(91,141,255,0.4)!important;
  font-size:0.85rem!important;
}
.tl-step{position:relative}

/* ── REVIEW CARDS enhanced ── */
.rcard{
  border:1px solid rgba(91,141,255,0.1)!important;
  background:rgba(12,16,34,0.9)!important;
  position:relative;overflow:hidden;
}
.rcard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,141,255,0.3),transparent);
}
.rc-stars{color:#F59E0B!important;font-size:0.9rem;letter-spacing:2px;margin-bottom:10px}

/* ── SECTION background texture ── */
.bg-grid{
  position:relative;
}
.bg-grid::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(91,141,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(91,141,255,0.03) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}

/* ── CTA section enhanced ── */
.cta-glow{
  background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(91,141,255,0.08),transparent 70%),var(--bg2)!important;
  border-top:1px solid rgba(91,141,255,0.1);
}

/* ── NEON CELL enhanced ── */
.neon-cell{
  border-bottom:1px solid rgba(255,255,255,0.04)!important;
}
.neon-cell .n-icon{
  background:rgba(244,63,94,0.1)!important;
  border:1px solid rgba(244,63,94,0.2)!important;
}

/* ── COMPARE TABLE enhanced ── */
.compare-wrap{
  background:rgba(12,16,34,0.8);
  border:1px solid rgba(91,141,255,0.15)!important;
  border-radius:20px;overflow:hidden;
  box-shadow:0 0 40px rgba(91,141,255,0.06);
}
.psm-col{
  background:linear-gradient(135deg,rgba(91,141,255,0.12),rgba(139,92,246,0.08))!important;
  font-weight:800!important;color:var(--blue)!important;
}
.psm-val{
  color:var(--blue)!important;font-weight:700!important;
}

/* ── FOOTER contact icons alignment ── */
.footer-contact a,.footer-contact span{display:flex;align-items:flex-start;gap:8px}

/* ── ABOUT PAGE whitespace fix ── */
.about-grid + .cta-section{margin-top:0}
.section.mid:has(.about-grid){padding-bottom:48px}

/* ══ PATCH v10 — PREMIUM VISUAL EFFECTS ════════════ */

/* ── GRAIN TEXTURE OVERLAY ── */
/* Applied via SVG filter inline — no external files */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  opacity:0.4;mix-blend-mode:overlay;
}
/* Grain on dark sections */
.s::before,.section::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:0.25;mix-blend-mode:overlay;border-radius:inherit;
}
.s,.section{position:relative}

/* ── PULSING HERO ORB ── */
@keyframes orbPulse{
  0%,100%{transform:scale(1);opacity:0.8}
  50%{transform:scale(1.12);opacity:1}
}
.section-orb{animation:orbPulse 6s ease-in-out infinite}
.orb-red{animation-delay:-2s}
.orb-purple{animation-delay:-4s}

/* ── GREEN BUTTON PULSE GLOW ── */
@keyframes greenGlow{
  0%,100%{box-shadow:0 4px 24px rgba(37,211,102,0.35)}
  50%{box-shadow:0 4px 40px rgba(37,211,102,0.65),0 0 60px rgba(37,211,102,0.15)}
}
.btn-wa{animation:greenGlow 2.5s ease-in-out infinite}
.btn-wa:hover{animation:none;box-shadow:0 8px 48px rgba(37,211,102,0.7)}

/* ── WA FLOAT PULSE ── */
@keyframes waPulse{
  0%,100%{box-shadow:0 8px 32px rgba(37,211,102,0.4)}
  50%{box-shadow:0 8px 48px rgba(37,211,102,0.7),0 0 0 6px rgba(37,211,102,0.08)}
}
.wa-float{animation:waPulse 2.5s ease-in-out infinite}
.wa-float:hover{animation:none}

/* ── HERO TRUST BADGE PULSE DOT ── */
@keyframes dotBlink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,0.5)}60%{opacity:1;box-shadow:0 0 0 5px rgba(16,185,129,0)}}
.trust-dot{animation:dotBlink 2s ease-out infinite}

/* ── STATS BIG CELL hover glow ── */
.stat-big-cell:hover{
  background:rgba(12,16,34,0.95)!important;
}
.stat-big-cell .glow-stat-num{
  filter:drop-shadow(0 0 24px rgba(91,141,255,0.45));
}

/* ── NEON CELL improved hover ── */
.neon-cell:hover{
  background:rgba(12,16,34,0.98)!important;
  box-shadow:0 0 30px rgba(244,63,94,0.08)inset;
}

/* ── ANIMATED GRADIENT BORDER on hero card ── */
.hero-card{
  border-image:none!important;
}
@keyframes cardBorder{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ── SECTION EYEBROW enhanced ── */
.eyebrow{
  background:linear-gradient(90deg,var(--blue),var(--purple),var(--blue));
  background-size:200%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmer 4s linear infinite;
}

/* ── COMPARE ROW hover highlight ── */
.compare-row:hover{background:rgba(91,141,255,0.04)}
.compare-row{transition:background .15s}

/* ── TIMELINE line glow ── */
.timeline::before{
  background:linear-gradient(180deg,var(--blue),var(--purple),rgba(91,141,255,0))!important;
  filter:drop-shadow(0 0 6px rgba(91,141,255,0.4));
}

/* ── PAGE HERO enhanced gradient ── */
.page-hero-bg{
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(91,141,255,0.12),transparent 70%),
             radial-gradient(ellipse 40% 40% at 80% 30%,rgba(139,92,246,0.07),transparent 60%)!important;
}

/* ── WHO CARD enhanced ── */
.who-card:hover .wc-num{background:var(--blue);color:white}

/* ── DANGER CARD enhanced ── */
.danger-item:hover{color:var(--white)}
.danger-item{transition:color .15s}

/* ── REVIEW STARS enhanced ── */
.rc-stars{
  background:linear-gradient(90deg,#F59E0B,#FBBF24);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ── FOOTER enhanced ── */
.footer{border-top:1px solid transparent;background-image:linear-gradient(var(--bg2),var(--bg2)),linear-gradient(90deg,transparent,rgba(91,141,255,0.3),transparent);background-origin:border-box;background-clip:padding-box,border-box}

/* ══ PATCH v11 ══════════════════════════════════════ */

/* About hero text - ensure container padding on mobile */
@media(max-width:768px){
  .about-hero-wrap .container{padding-left:20px;padding-right:20px}
  .about-h1{font-size:clamp(1.8rem,7.5vw,2.6rem)!important;letter-spacing:-.025em!important}
}

/* Contact section tighten */
@media(max-width:600px){
  .page-hero{padding:80px 0 32px!important}
}

/* Brand dot - enforce max size absolutely */
.brand-dot{
  width:28px!important;height:28px!important;min-width:28px;min-height:28px;
  max-width:28px;max-height:28px;
  border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(91,141,255,0.4);
  overflow:hidden;
}
.brand-dot svg{display:block;flex-shrink:0;width:18px;height:18px}

/* Grain on body sections - position fix */
.s::before,.section::before{
  border-radius:0;
}

/* ══ MONOGRAM FIX ═════════════════════════════════════ */
.brand-monogram{
  font-family:'Plus Jakarta Sans',sans-serif!important;
  font-weight:900!important;
  font-size:0.6rem!important;
  letter-spacing:0.02em!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:linear-gradient(135deg,var(--blue),var(--purple))!important;
  line-height:1!important;
  width:28px!important;height:28px!important;
  min-width:28px;min-height:28px;
  max-width:28px!important;max-height:28px!important;
  border-radius:8px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex-shrink:0!important;
  box-shadow:0 4px 12px rgba(91,141,255,0.4)!important;
  overflow:hidden!important;
}

/* ── OPTION J BRAND DOT ── */
.brand-j{
  background:linear-gradient(135deg,#04050E,#0c1230,#0f172a)!important;
  box-shadow:0 0 24px rgba(91,141,255,0.4),0 0 0 1px rgba(91,141,255,0.25)!important;
  border-radius:10px!important;
  width:32px!important;height:32px!important;
  min-width:32px;min-height:32px;
  max-width:32px!important;max-height:32px!important;
}

/* ══ NEON CELL SPACING FIX ═══════════════════════ */
.neon-cell-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
@media(max-width:900px){
  .neon-cell{padding:18px 18px!important}
  .neon-cell-header{margin-bottom:8px!important}
  .n-icon{width:36px!important;height:36px!important;min-width:36px!important;font-size:1rem!important}
  .neon-cell h4{font-size:0.88rem!important}
  .neon-cell p{font-size:0.80rem!important;line-height:1.6!important}
  .neon-grid{margin-top:32px!important;border-radius:18px!important}
}

/* ── HOW IT WORKS SCROLL FIX ── */
#how-it-works{scroll-margin-top:88px}

/* ── TIMELINE OVERRIDE CLEANUP ── */
.tl-num{
  background:linear-gradient(135deg,var(--blue),var(--purple))!important;
  font-size:1.1rem!important;
}
.timeline::before{
  background:linear-gradient(180deg,var(--blue),var(--purple),rgba(91,141,255,0))!important;
}

/* ══ HERO USP GRID ═══════════════════════════════════ */
.hero-usps{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:24px;
}
.hero-usp{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:8px 12px;
  font-size:0.8rem;color:var(--gray);
  font-weight:500;
  transition:all .2s;
  backdrop-filter:blur(8px);
}
.hero-usp:hover{background:rgba(255,255,255,0.07);color:var(--white);transform:translateY(-1px)}
.usp-icon{
  width:24px;height:24px;border-radius:7px;
  background:rgba(37,211,102,0.12);border:1px solid rgba(37,211,102,0.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.usp-icon.usp-blue{background:rgba(91,141,255,0.12);border-color:rgba(91,141,255,0.2)}
.usp-icon.usp-amber{background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.2)}
.usp-icon.usp-purple{background:rgba(139,92,246,0.12);border-color:rgba(139,92,246,0.2)}
.usp-icon.usp-red{background:rgba(91,141,255,0.10);border-color:rgba(91,141,255,0.18)}
.usp-text{white-space:nowrap}

@media(max-width:860px){
  .hero-usps{padding-right:64px}
  .hero-usp{padding:7px 10px;font-size:0.75rem}
  .usp-icon{width:22px;height:22px;border-radius:6px}
}

/* ══ ANIMATED HEADLINE GRAD OVERRIDE ════════════════ */
/* Make sure existing .grad elements also animate */
.grad2{background:linear-gradient(135deg,#5B8DFF,#8B5CF6,#3A6FFF,#A78BFA);background-size:300%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradShift 6s ease-in-out infinite}

/* ══ PATCH v25 ══════════════════════════════════════ */

/* USP 2-column grid - clean aligned layout */
.hero-usps{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  margin-top:22px;
  padding-right:0!important;
}
.hero-usp{justify-content:flex-start}
/* Last item if odd - span full width */
.hero-usp:last-child:nth-child(odd){grid-column:1/-1}

/* Timeline: fix line centering using step pseudo-element approach */
.timeline::before{display:none!important}
.tl-step:not(:last-child){position:relative}
.tl-step:not(:last-child)::after{
  content:'';
  position:absolute;
  left:23px;top:48px;
  width:2px;
  bottom:0;
  background:linear-gradient(180deg,var(--blue),var(--purple),rgba(139,92,246,0));
  filter:drop-shadow(0 0 4px rgba(91,141,255,0.6));
  z-index:0;
}

/* Timeline number pulse - re-declare for reliability */
.tl-num{
  animation:numPulse 3s ease-in-out infinite!important;
  position:relative;z-index:2;
}
.tl-step:nth-child(2) .tl-num{animation-delay:1s!important}
.tl-step:nth-child(3) .tl-num{animation-delay:2s!important}

/* Hero sparkle dots */
.hero::before{
  content:'';
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(91,141,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(139,92,246,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 60%, rgba(91,141,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85% 50%, rgba(163,122,250,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 70%, rgba(91,141,255,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 15%, rgba(255,255,255,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 80%, rgba(91,141,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 85%, rgba(139,92,246,0.3) 0%, transparent 100%);
  animation:sparkleShift 12s ease-in-out infinite;
}
@keyframes sparkleShift{
  0%,100%{opacity:0.7;transform:translateY(0)}
  50%{opacity:1;transform:translateY(-4px)}
}

/* n-icon SVG sizing */
.n-icon svg{width:18px;height:18px;flex-shrink:0}
@media(max-width:860px){
  .n-icon svg{width:16px;height:16px}
}

/* Hero CTA area glow under buttons */
.page-btns{position:relative}
.page-btns::before{
  content:'';
  position:absolute;
  bottom:-20px;left:0;right:0;height:60px;
  background:radial-gradient(ellipse 60% 60% at 30% 50%,rgba(37,211,102,0.12),transparent 70%);
  pointer-events:none;
  filter:blur(10px);
}

/* ══ PATCH v26 ══════════════════════════════════════ */

/* TIMELINE: revert to ::before on .timeline, remove buggy ::after */
.tl-step:not(:last-child)::after{display:none!important;content:none!important}
.timeline::before{
  display:block!important;
  content:''!important;
  position:absolute!important;
  left:23px!important;
  top:24px!important;
  bottom:24px!important;
  width:2px!important;
  background:linear-gradient(180deg,var(--blue),var(--purple),rgba(91,141,255,0.1))!important;
  filter:drop-shadow(0 0 5px rgba(91,141,255,0.5))!important;
}

/* USP - remove orphan rule, now 6 items = clean 3x2 */
.hero-usp:last-child:nth-child(odd){grid-column:auto!important}

/* ══ HEADER ALIGNMENT v26 ══════════════════════════ */

/* Nav inner - consistent edge padding */
.nav-inner{padding:0 20px!important}

/* Brand dot - 34px, perfectly centered in 68px nav */
.brand-j{
  width:34px!important;height:34px!important;
  min-width:34px;min-height:34px;
  max-width:34px!important;max-height:34px!important;
  border-radius:10px!important;
}

/* Hamburger - match brand dot exactly: 34px visual size, same radius */
@media(max-width:860px){
  .hamburger{
    display:flex!important;
    width:34px!important;height:34px!important;
    min-width:34px!important;min-height:34px!important;
    max-width:34px!important;max-height:34px!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(255,255,255,0.07)!important;
    border:1px solid rgba(255,255,255,0.1)!important;
    border-radius:10px!important;
    padding:0!important;
  }
  .hamburger span{
    width:18px!important;
    height:2px!important;
    background:#fff!important;
    border-radius:2px!important;
  }
}

/* Brand text - slightly smaller, better weight for nav */
.nav-brand{font-size:0.92rem!important;letter-spacing:-.02em!important}

/* ══ PREMIUM MOBILE MENU ════════════════════════════ */
.mobile-menu{
  display:none;position:fixed;inset:0;top:68px;
  background:rgba(4,5,14,0.97);
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  z-index:199;
  flex-direction:column;justify-content:space-between;
  padding:8px 0 32px;
  border-top:1px solid rgba(91,141,255,0.12);
}
.mobile-menu::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,141,255,0.4),rgba(139,92,246,0.3),transparent);
}
.mobile-menu.open{display:flex}

/* Nav links */
.mob-nav-links{display:flex;flex-direction:column;padding:8px 0}
.mob-link{
  display:flex;align-items:center;gap:16px;
  padding:18px 24px;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.05);
  transition:all 0.15s;
  position:relative;overflow:hidden;
}
.mob-link::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--blue),var(--purple));
  opacity:0;transition:opacity .2s;
}
.mob-link:hover::before,.mob-link:active::before{opacity:1}
.mob-link:hover,.mob-link:active{background:rgba(91,141,255,0.05)}
.mob-link-num{
  font-size:0.65rem;font-weight:700;letter-spacing:.12em;
  color:rgba(91,141,255,0.5);font-family:'Plus Jakarta Sans',sans-serif;
  min-width:20px;
}
.mob-link-label{
  font-size:1.25rem;font-weight:700;color:var(--white);
  font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em;
}
.mob-link:hover .mob-link-label{color:var(--white)}

/* Bottom area */
.mob-bottom{padding:0 20px;display:flex;flex-direction:column;gap:16px}

/* Stats row */
.mob-stats{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);
  border-radius:14px;padding:14px 20px;
}
.mob-stat{display:flex;flex-direction:column;align-items:center;gap:3px}
.mob-stat-n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:0.92rem;background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mob-stat-l{font-size:0.62rem;color:var(--gray2);text-align:center;line-height:1.2}
.mob-stat-div{width:1px;height:32px;background:rgba(255,255,255,0.08)}

/* WA CTA */
.mob-cta-wa{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#25D366;color:#fff;
  border-radius:14px;padding:16px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1rem;
  text-decoration:none;
  box-shadow:0 4px 24px rgba(37,211,102,0.35);
  transition:all .2s;
}
.mob-cta-wa:hover,.mob-cta-wa:active{background:#1ebe5d;box-shadow:0 8px 32px rgba(37,211,102,0.5)}

/* ══ PATCH v29 ══════════════════════════════════════ */
/* Fix delivery score bar - span needs display:block for height to work */
.hmc-bar-fill{display:block!important;height:100%!important}

/* ══ PATCH v30 ══════════════════════════════════════ */

/* Reduce header glow - was too intense */
.brand-j{
  box-shadow:0 0 14px rgba(91,141,255,0.22),0 0 0 1px rgba(91,141,255,0.18)!important;
}

/* ── PREMIUM COMPARE TABLE (cmp2) ── */
.cmp2{
  border-radius:20px;overflow:hidden;
  border:1px solid rgba(91,141,255,0.15);
  background:rgba(8,10,24,0.8);
  backdrop-filter:blur(12px);
  margin-top:32px;
}
.cmp2-head{
  display:grid;grid-template-columns:1fr 1.1fr 1.1fr;
  background:rgba(91,141,255,0.06);
  border-bottom:1px solid rgba(91,141,255,0.12);
  padding:0;
}
.cmp2-h-feat{padding:14px 16px}
.cmp2-h-psm{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:14px 12px;
  background:linear-gradient(135deg,rgba(91,141,255,0.18),rgba(139,92,246,0.12));
  border-left:1px solid rgba(91,141,255,0.2);
  border-right:1px solid rgba(91,141,255,0.1);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:0.78rem;
  color:#fff;letter-spacing:-.01em;
  position:relative;
}
.cmp2-h-psm::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--purple));
}
.cmp2-h-own{
  display:flex;align-items:center;justify-content:center;
  padding:14px 12px;
  font-size:0.72rem;color:var(--gray2);font-weight:600;
  border-left:1px solid rgba(255,255,255,0.05);
}
.cmp2-row{
  display:grid;grid-template-columns:1fr 1.1fr 1.1fr;
  border-bottom:1px solid rgba(255,255,255,0.04);
  align-items:center;
  transition:background .15s;
}
.cmp2-row:last-child{border-bottom:none}
.cmp2-row:hover{background:rgba(91,141,255,0.03)}
.cmp2-feat{
  display:flex;align-items:center;gap:7px;
  padding:13px 14px;
  font-size:0.72rem;color:var(--gray);font-weight:600;
}
.cmp2-psm{
  display:flex;align-items:center;justify-content:center;
  padding:13px 10px;
  font-size:0.72rem;font-weight:700;
  color:#5B8DFF;
  background:rgba(91,141,255,0.05);
  border-left:1px solid rgba(91,141,255,0.1);
  border-right:1px solid rgba(91,141,255,0.06);
  text-align:center;line-height:1.3;
}
.cmp2-bad{
  display:flex;align-items:center;justify-content:center;
  padding:13px 10px;
  font-size:0.72rem;font-weight:600;
  color:rgba(244,63,94,0.7);
  border-left:1px solid rgba(255,255,255,0.04);
  text-align:center;line-height:1.3;
}
.cmp2-mid{
  display:flex;align-items:center;justify-content:center;
  padding:13px 10px;
  font-size:0.72rem;font-weight:600;
  color:var(--gray2);
  border-left:1px solid rgba(255,255,255,0.04);
  text-align:center;line-height:1.3;
}

/* ══ TIMELINE FINAL FIX v31 ══════════════════════════ */
/* Kill ALL previous timeline::before overrides, let index.html inline win */
.timeline::before{
  left:23px!important;
  filter:drop-shadow(0 0 4px rgba(91,141,255,0.5))!important;
}
.timeline::after{
  display:block!important;
}
@media(max-width:860px){
  .timeline::before{left:17px!important}
  .timeline::after{left:14px!important}
}

/* ══ TIMELINE v32 - SEQUENTIAL GLOW ════════════════ */
/* Kill traveling dot */
.timeline::after{display:none!important;content:none!important}
/* Kill old numGlow animation */
.tl-num{animation:none!important}
/* Active state from JS */
.tl-num.tl-active{
  background:linear-gradient(135deg,#5B8DFF,#8B5CF6)!important;
  color:#fff!important;
  box-shadow:0 0 0 10px rgba(91,141,255,0.15),0 0 40px rgba(91,141,255,1),0 0 80px rgba(139,92,246,0.6)!important;
  transform:scale(1.18)!important;
}
/* Line - correct position */
.timeline::before{left:23px!important}
@media(max-width:860px){
  .timeline::before{left:17px!important}
}

/* ══ TIMELINE CLEAN v33 ════════════════════════════ */
.tl-num{animation:none!important;transition:none!important;transform:none!important}
.tl-num.tl-active{box-shadow:0 0 0 4px rgba(91,141,255,0.15),0 0 20px rgba(91,141,255,0.4)!important;transform:none!important}
.timeline::after{display:none!important;content:none!important}
.timeline::before{left:23px!important;box-shadow:none!important;filter:none!important}
@media(max-width:860px){.timeline::before{left:17px!important}}

/* ══ DESKTOP FIXES v34 ══════════════════════════════ */

/* 1. HERO: Fix hero-right staying in grid flow on desktop so it doesn't overlap */
@media(min-width:1081px){
  .hero-right{
    position:relative!important;
    right:auto!important;top:auto!important;
    transform:none!important;
    width:460px!important;
    flex-shrink:0;
  }
  .hero-inner{max-width:600px!important}
  .hero-grid{
    display:grid!important;
    grid-template-columns:1fr 460px!important;
    gap:64px!important;
    align-items:center!important;
  }
}

/* 2. Blog card titles - no overflow clipping, full title visible */
.blog-card-body h3{
  overflow:visible!important;
  display:block!important;
  -webkit-line-clamp:unset!important;
  -webkit-box-orient:unset!important;
  white-space:normal!important;
}
/* Also fix blog/index.html blog-body h3 */
.blog-body h3{
  overflow:visible!important;
  display:block!important;
  white-space:normal!important;
}

/* 3. Services CTA section - reduce excess padding */
.cta-section{padding:64px 0!important}
.svc-cta-btn{
  display:inline-flex!important;
  width:auto!important;
}

/* 4. About CTA sub text - fix alignment */
@media(min-width:860px){
  .cta-section .section-sub{text-align:center!important;max-width:500px!important;margin-left:auto!important;margin-right:auto!important}
}

/* 5. Hero USP grid on desktop - 3 columns so it doesn't get too tall */
@media(min-width:860px){
  .hero-usps{grid-template-columns:1fr 1fr 1fr!important}
}

/* ══ DESKTOP ALIGNMENT FINAL v35 ════════════════════ */

/* 1. Hero h1 - reduce desktop font size so it fits in 600px in 2 lines */
@media(min-width:1081px){
  .hero-inner h1{
    font-size:clamp(2.8rem,3.8vw,4rem)!important;
    max-width:580px;
  }
  .hero-inner{max-width:620px!important}
  .hero-grid{grid-template-columns:1fr 460px!important}
}

/* 2. CTA sections desktop - fully center everything consistently */
@media(min-width:860px){
  .cta-section .container{text-align:center}
  .cta-section .section-h2{text-align:center!important;margin-left:auto!important;margin-right:auto!important}
  .cta-section .section-sub{text-align:center!important;max-width:520px!important;margin-left:auto!important;margin-right:auto!important}
  .cta-section .cta-btn-row{justify-content:center!important;display:flex!important}
  .cta-section .btn-wa{display:inline-flex!important;width:auto!important}
  .svc-cta-btn{display:inline-flex!important;width:auto!important;margin:0 auto!important}
}

/* 3. Blog card - fix title height to be consistent, 3 lines max with ellipsis */
.blog-body h3{
  display:-webkit-box!important;
  -webkit-line-clamp:3!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  min-height:3.9em!important; /* ensures both cards same height */
  line-height:1.3!important;
}
.blog-card-body h3{
  display:-webkit-box!important;
  -webkit-line-clamp:3!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  min-height:3.9em!important;
  line-height:1.3!important;
}

/* 4. Nav brand text - desktop size */
@media(min-width:860px){
  .nav-brand{font-size:1rem!important;letter-spacing:-.022em!important}
}

/* ── Blog card title: remove forced min-height, natural height is better */
.blog-body h3{min-height:unset!important}
.blog-card-body h3{min-height:unset!important}

/* ── Mobile menu: fix spacing + WA float overlap ── */
.mobile-menu{
  justify-content:flex-start!important;
  overflow-y:auto;
}
.mob-bottom{
  margin-top:auto!important;
  padding-bottom:20px!important;
}
/* Hide WA float when mobile menu is open */
.mobile-menu.open ~ * .wa-float,
body:has(.mobile-menu.open) .wa-float{
  display:none!important;
}
/* Ensure mob CTA button text doesn't clip */
.mob-cta-wa{
  padding-right:20px!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ══ MOBILE MENU REBUILD v38 ════════════════════════ */
.mobile-menu{
  display:none;
  position:fixed;inset:0;top:68px;
  background:rgba(4,5,14,0.98);
  backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  z-index:199;
  flex-direction:column;
  border-top:1px solid rgba(91,141,255,0.15);
  overflow:hidden;
}
.mobile-menu::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,141,255,0.5),rgba(139,92,246,0.4),transparent);
  pointer-events:none;
}
.mobile-menu.open{display:flex}

/* Nav links */
.mob-nav{
  flex:1;
  display:flex;flex-direction:column;
  justify-content:center;
  padding:0 28px;
  gap:4px;
}
.mob-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  text-decoration:none;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.35rem;font-weight:700;
  color:rgba(255,255,255,0.85);
  letter-spacing:-.02em;
  transition:color .15s;
}
.mob-link:last-child{border-bottom:none}
.mob-link:hover,.mob-link:active{color:#fff}
.mob-arr{
  font-size:1rem;color:rgba(91,141,255,0.5);
  transition:transform .15s,color .15s;
}
.mob-link:hover .mob-arr,.mob-link:active .mob-arr{
  color:var(--blue);transform:translateX(4px);
}

/* Footer */
.mob-footer{
  padding:16px 20px 28px;
  display:flex;flex-direction:column;gap:12px;
  border-top:1px solid rgba(255,255,255,0.06);
}

/* Stats row */
.mob-stats{
  display:flex;align-items:center;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:12px;padding:12px 16px;
}
.mob-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.mob-stat-n{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:0.9rem;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mob-stat-l{font-size:0.6rem;color:var(--gray2);text-align:center}
.mob-stat-sep{width:1px;height:28px;background:rgba(255,255,255,0.07);flex-shrink:0}

/* WA button */
.mob-wa-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#25D366;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
  border-radius:14px;padding:15px 20px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.95rem;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(37,211,102,0.3);
  white-space:nowrap;
}
.mob-wa-btn:hover,.mob-wa-btn:active{background:#1ebe5d}

/* Kill old menu classes to prevent conflicts */
.mob-nav-links,.mob-bottom,.mob-cta-wa,.mob-link-num,.mob-link-label{all:unset}

/* Scroll offset: land a bit lower - heading closer to top */
#how-it-works{scroll-margin-top:110px!important}

/* ══ MENU FINAL v40 ════════════════════════════════ */
/* Not full screen - slide down to ~80% of viewport, more premium */
.mobile-menu{
  bottom:auto!important;
  height:calc(100vh - 68px)!important;
  max-height:680px!important; /* cap height - no dead space on large phones */
  border-radius:0 0 24px 24px!important;
  box-shadow:0 40px 80px rgba(0,0,0,0.6)!important;
  overflow:hidden!important;
}

/* Fix nav: start at top with padding, no justify-center dead zone */
.mob-nav{
  justify-content:flex-start!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
  overflow-y:auto;
}

/* Tighten link spacing */
.mob-link{padding:14px 0!important}

/* Menu: full screen, no peek */
.mobile-menu{
  max-height:none!important;
  height:calc(100vh - 68px)!important;
}

/* Nav brand text size - mobile + desktop */
.nav-brand{font-size:1.2rem!important;letter-spacing:-.025em!important}
@media(min-width:860px){.nav-brand{font-size:1.25rem!important}}

/* cmp2 icon size fix + mobile alignment */
.cmp2-feat svg{width:14px!important;height:14px!important;flex-shrink:0}
.cmp2-feat{gap:6px!important}
/* Ensure all value cells are same min-height for alignment */
.cmp2-psm,.cmp2-bad,.cmp2-mid{min-height:40px!important;white-space:nowrap!important}
@media(max-width:500px){
  .cmp2-psm,.cmp2-bad,.cmp2-mid{font-size:0.68rem!important;padding:10px 6px!important;white-space:nowrap!important}
  .cmp2-feat{font-size:0.68rem!important;padding:10px 10px!important;gap:5px!important}
}

/* ══ PATCH v31 ══════════════════════════════════════ */
/* Beam — fix animation so it never parks at a visible position on mobile */
@keyframes beamMov{0%{left:-2%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:102%;opacity:0}}
/* Hero trust badge — bigger text */
.hero-trust{font-size:0.82rem!important;padding:8px 18px!important}

/* ══ PATCH v32 — DESKTOP HERO LAYOUT ════════════════ */
/* 861–1080px: absolute card layout */
@media(min-width:861px) and (max-width:1080px){
  .hero h1{font-size:clamp(2.2rem,3.2vw,3.2rem)!important;line-height:1.08!important;margin-bottom:20px!important}
  .hero-content{max-width:500px!important}
  .hero .lead{max-width:440px!important}
  .hero-right{top:50%!important;transform:translateY(-50%)!important}
}
/* 1081px+: proper 2-col grid — align card to top of content, tighten sizing */
@media(min-width:1081px){
  .hero-grid{align-items:start!important;gap:56px!important}
  .hero-right{margin-top:8px!important;position:relative!important;top:auto!important;transform:none!important}
  .hero h1{font-size:clamp(2.4rem,3.2vw,3.4rem)!important;line-height:1.08!important;margin-bottom:20px!important}
  .hero-content{max-width:none!important}
  .hero .lead{font-size:1rem!important;max-width:100%!important}
  /* Buttons — less oversized for the column */
  .hero .btn-xl{padding:15px 28px!important;font-size:0.95rem!important}
  /* USP chips — true 3×2 grid */
  .hero-usps{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
}
/* Beam — lower opacity so mid-sweep is less harsh */
.beam{background:linear-gradient(180deg,transparent,rgba(91,141,255,0.2),transparent)!important}
/* Equal width buttons on desktop — hero pair + CTA section pair */
@media(min-width:600px){
  .cta-glow .btn-xl{min-width:260px;justify-content:center}
  .page-btns .btn{min-width:200px;justify-content:center}
}
/* Services CTA button — prevent text wrapping on mobile */
@media(max-width:600px){
  .svc-cta-btn{white-space:nowrap!important;font-size:0.88rem!important;padding:15px 22px!important;justify-content:center!important}
}

/* ── SISTER BRAND CALLOUT ────────────────────────── */
.sister-callout{
  display:flex;align-items:center;gap:16px;
  margin-top:16px;padding:13px 18px;
  background:linear-gradient(135deg,rgba(16,185,129,0.06) 0%,rgba(16,185,129,0.02) 100%);
  border:1px solid rgba(16,185,129,0.2);
  border-radius:14px;text-decoration:none;
  transition:all .25s;position:relative;overflow:hidden;
}
.sister-callout::after{
  content:'→';position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:1rem;color:rgba(16,185,129,0.5);transition:all .25s;
}
.sister-callout:hover{
  background:linear-gradient(135deg,rgba(16,185,129,0.1) 0%,rgba(16,185,129,0.04) 100%);
  border-color:rgba(16,185,129,0.35);
  transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(16,185,129,0.1);
}
.sister-callout:hover::after{right:14px;color:rgba(16,185,129,0.9)}
.sister-icon{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;
  background:rgba(16,185,129,0.12);
  border:1px solid rgba(16,185,129,0.3);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 12px rgba(16,185,129,0.15);
}
.sister-icon svg{filter:drop-shadow(0 0 3px rgba(16,185,129,0.5))}
.sister-text{display:flex;flex-direction:column;gap:3px;padding-right:24px}
.sister-label{font-size:0.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#10B981;opacity:0.8}
.sister-desc{font-size:0.84rem;color:var(--gray);line-height:1.3}
.sister-desc strong{color:var(--white);font-weight:600}

/* Blue/PSM variant */
.sister-callout.psm-variant{
  background:linear-gradient(135deg,rgba(91,141,255,0.06) 0%,rgba(91,141,255,0.02) 100%);
  border-color:rgba(91,141,255,0.2);
}
.sister-callout.psm-variant::after{color:rgba(91,141,255,0.5)}
.sister-callout.psm-variant:hover{
  background:linear-gradient(135deg,rgba(91,141,255,0.1) 0%,rgba(91,141,255,0.04) 100%);
  border-color:rgba(91,141,255,0.35);
  box-shadow:0 4px 20px rgba(91,141,255,0.1);
}
.sister-callout.psm-variant:hover::after{color:rgba(91,141,255,0.9)}
.sister-callout.psm-variant .sister-icon{
  background:rgba(91,141,255,0.12);
  border-color:rgba(91,141,255,0.3);
  box-shadow:0 0 12px rgba(91,141,255,0.15);
}
.sister-callout.psm-variant .sister-icon svg{filter:drop-shadow(0 0 3px rgba(91,141,255,0.5))}
.sister-callout.psm-variant .sister-label{color:#5B8DFF}