:root{
  /* Brand palette (Growtify Hub) */
  --brand-red: #E3131A;
  --brand-red-2: #F21A25;

  --ink: #0B0B0C;
  --ink-2: #2A2A2D;
  --muted: #6B7280;

  --bg: #FFFFFF;
  --bg-soft: #F6F7F9;

  --card: #FFFFFF;
  --border: #E6E8EE;

  --shadow: 0 10px 30px rgba(0,0,0,.06);

  --radius: 16px;
  --radius-sm: 12px;

  --container: 1120px;

  /* Pattern + glow tuning */
  --soft-red-wash: rgba(227,19,26,.08);
  --soft-red-wash-2: rgba(227,19,26,.05);
  --dot: rgba(15, 23, 42, .06); /* subtle slate */
  --glow: rgba(227,19,26,.20);
}

/* ---------- Base / Reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{max-width:100%; display:block}
a{color:inherit}

/* ---------- Layout ---------- */
.container{
  width:min(var(--container), calc(100% - 40px));
  margin-inline:auto;
}
.section{padding:64px 0}
.section--muted{background:var(--bg-soft)}

/* ---------- Typography helpers ---------- */
.h1{font-size:clamp(32px, 4vw, 48px); line-height:1.1; letter-spacing:-0.02em; margin:0 0 12px}
.h2{font-size:clamp(24px, 2.8vw, 32px); line-height:1.2; letter-spacing:-0.02em; margin:0 0 8px}
.lead{font-size:clamp(16px, 1.4vw, 18px); color:var(--ink-2); max-width:74ch}
.muted{color:var(--muted); margin:8px 0 0}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
/*.brand{
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1;
}*/

/*.brand__logo{
  height:42px;              
  width:auto;
  max-width:220px;        
  object-fit:contain;
  display:block;
  border-radius:0;          
  }*/

/* Text logo */
.brand--text{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 22px;           /* adjust if needed */
  line-height: 1;
  font-weight: 800;          /* base weight */
}

/* Growtify */
.brand__growtify{
  color: #e3131a;            /* solid black */
  font-weight: 800;
  letter-spacing: -0.02em;   /* tight, premium */
}

/* Hub */
.brand__hub{
  color: #111111;            /* brand red */
  font-weight: 900;          /* slightly bolder */
  letter-spacing: -0.02em;
  margin-left: 0;            /* ensure no gap */
}

/* Nav */
.nav{display:flex; gap:18px; align-items:center}
.nav a{
  text-decoration:none;
  color:var(--ink-2);
  font-weight:500;
  font-size:14px;
}
.nav a:hover{color:var(--ink)}
.topbar__actions{display:flex; gap:14px; align-items:center}
.link{color:var(--ink-2); text-decoration:none; font-size:13px}
.link.subtle{color:var(--muted)}
.link:hover{color:var(--ink)}

/* Mobile nav toggle */
.navToggle{
  display:none;
  border:1px solid var(--border);
  background:#fff;
  padding:10px;
  border-radius:12px;
}
.navToggle span{
  display:block; width:18px; height:2px; background:var(--ink);
  margin:3px 0;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.btn--lg{padding:12px 18px; font-size:14px}
.btn--primary{
  background:var(--brand-red);
  color:#fff;
  box-shadow:0 10px 18px rgba(227,19,26,.18);
}
.btn--primary:hover{background:var(--brand-red-2)}
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--border);
}
.btn--ghost:hover{border-color:#cfd5e3}

/* ---------- HERO ---------- */
.hero{
  padding:64px 0 44px;
  /* light + subtle “Zoho-ish” washes */
  background:
    radial-gradient(900px 520px at 10% 5%, var(--soft-red-wash), transparent 60%),
    radial-gradient(900px 520px at 95% 25%, rgba(0,0,0,.035), transparent 60%),
    radial-gradient(800px 420px at 40% 80%, var(--soft-red-wash-2), transparent 60%),
    var(--bg);
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap:28px;
  align-items:start;
}
.eyebrow{
  margin:0 0 12px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.hero__title{
  margin:0;
  font-size:clamp(28px, 3.2vw, 46px);
  line-height:1.08;
  letter-spacing:-0.02em;
  font-weight:750;
}
.hero__title .accent{ color:var(--ink); font-weight:750; }
.hero__title .powered{
  display:inline-block;
  margin-top:6px;
  font-size:clamp(14px, 1.3vw, 18px);
  font-weight:650;
  color:var(--muted);
}
.hero__title .brandWord{
  color:var(--brand-red);
  font-weight:850;
}
.hero__underline{
  width:42px; height:4px;
  border-radius:999px;
  background:var(--brand-red);
  margin:18px 0 18px;
}
.hero__sub{
  margin:0;
  color:var(--ink-2);
  font-size:clamp(15px, 1.4vw, 18px);
  max-width:70ch;
}
.hero__cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.hero__badges{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap}
.badge{
  display:flex; gap:10px; align-items:center;
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
  border-radius:999px;
  padding:10px 14px;
}
.badge__dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--brand-red);
  box-shadow:0 0 0 4px rgba(227,19,26,.12);
}
.badge__big{font-weight:850; font-size:14px; line-height:1}
.badge__small{font-size:12px; color:var(--muted); margin-top:2px}

/* Hero card */
.heroCard{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.heroCard__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 18px 12px;
}
.heroCard__kicker{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
  font-weight:800;
}
.heroCard__link{
  font-size:13px; text-decoration:none; color:var(--brand-red); font-weight:800;
}
.heroCard__list{list-style:none; padding:0; margin:0}
.heroItem{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  border-top:1px solid var(--border);
}
.heroItem__meta{flex:1; min-width:0}
.heroItem__name{font-weight:800; font-size:14px}
.heroItem__desc{font-size:12px; color:var(--muted); margin-top:2px}
.heroItem__arrow{color:#9CA3AF; font-size:20px; line-height:1}

/* logo placeholders (you already use images) */
.heroItem__logoWrap{
  width:38px; height:38px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--border);
  display:grid; place-items:center;
  overflow:hidden;
}
.heroItem__logo{
  width:26px; height:26px;
  object-fit:contain;
}

/* Hero banner (subtle patterned “wave” strip) */
.heroBanner{
  margin:0 18px 10px;
  border:1px solid var(--border);
  background:
    radial-gradient(120px 120px at 12% 35%, rgba(227,19,26,.10), transparent 60%),
    radial-gradient(140px 140px at 82% 30%, rgba(0,0,0,.05), transparent 62%),
    radial-gradient(120px 120px at 55% 78%, rgba(227,19,26,.08), transparent 62%),
    #fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.05);
}
.heroBanner svg{display:block; width:100%; height:auto; opacity:.95}

/* ---------- Section Head ---------- */
.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}
.sectionSub{
  margin:0;
  color:var(--muted);
  max-width:58ch;
  font-size:14px;
}

/* ---------- PROBLEM vs EXECUTION (Section 2) ---------- */
.problem{
  /* match the “light card” style in your sample reference, not dark */
  background:
    radial-gradient(900px 520px at 8% 15%, rgba(227,19,26,.08), transparent 60%),
    radial-gradient(900px 520px at 92% 40%, rgba(0,0,0,.03), transparent 62%),
    radial-gradient(800px 420px at 40% 90%, rgba(227,19,26,.05), transparent 60%),
    /* micro dot pattern */
    radial-gradient(var(--dot) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--bg-soft);
}

/* two cards + arrow */
.ba{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:18px;
  align-items:stretch;
}

/* Card base */
.baCard{
  position:relative;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(0,0,0,.07);
  padding:18px;
  overflow:hidden; /* required for animated border */
}

/* Soft inner sheen */
.baCard::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(260px 260px at 15% 25%, rgba(227,19,26,.08), transparent 60%),
    radial-gradient(260px 260px at 85% 65%, rgba(0,0,0,.03), transparent 62%);
  pointer-events:none;
  transform: translateZ(0);
  opacity:.6;
}

/* ---------- Brand animated border (subtle but visible on white) ---------- */
/* Works best in Chromium; safe fallback for others. */
@property --gh-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.baCard::before{
  content:"";
  position:absolute;
  inset:-2px; /* border thickness */
  border-radius:inherit;
  background:
    conic-gradient(
      from var(--gh-angle),
      rgba(227,19,26,.45),
      rgba(242,26,37,.20),
      rgba(11,11,12,.10),
      rgba(227,19,26,.35),
      rgba(242,26,37,.18),
      rgba(227,19,26,.45)
    );
  z-index:-1;
  filter: blur(.2px);
  opacity:.45;                 /* visible but not loud */
  animation: gh-rotate 16s linear infinite;
}

/* Extra outer glow ring (very soft) */
.baCard{
  box-shadow:
    0 14px 34px rgba(0,0,0,.07),
    0 0 0 1px rgba(227,19,26,.06),
    0 10px 30px rgba(227,19,26,.06);
}

/* Stronger on hover/focus (desktop) */
@media (hover:hover){
  .baCard:hover::before{opacity:.70}
  .baCard:hover{box-shadow: 0 18px 44px rgba(0,0,0,.09), 0 0 0 1px rgba(227,19,26,.10), 0 18px 40px rgba(227,19,26,.09)}
}

@keyframes gh-rotate{
  0%{ --gh-angle: 0deg; }
  100%{ --gh-angle: 360deg; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .baCard::before{animation:none}
}

/* Card top row */
.baCard__top{
  position:relative;
  z-index:1; /* over sheen */
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.70);
  backdrop-filter: blur(6px);
}
.baIcon{
  width:44px; height:44px;
  border-radius:14px;
  display:grid; place-items:center;
  font-weight:900;
  border:1px solid var(--border);
}
.baIcon--reality{background:rgba(0,0,0,.04); color:var(--ink)}
.baIcon--solve{background:rgba(227,19,26,.10); color:var(--brand-red)}

.baTitle{font-weight:850; font-size:16px; letter-spacing:-0.01em}
.baKicker{color:var(--muted); font-size:12px; margin-top:2px}

/* Lists */
.baList{
  position:relative;
  z-index:1;
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.baList li{
  position:relative;
  display:grid;
  grid-template-columns: 52px 1fr;
  gap:12px;
  align-items:start;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Optional “row border shimmer” (light, brand) */
.baList li::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:
    linear-gradient(90deg,
      rgba(227,19,26,.00),
      rgba(227,19,26,.18),
      rgba(227,19,26,.00)
    );
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
@media (hover:hover){
  .baList li:hover{
    transform: translateY(-1px);
    border-color: rgba(227,19,26,.18);
    box-shadow: 0 10px 22px rgba(0,0,0,.06), 0 10px 24px rgba(227,19,26,.06);
  }
  .baList li:hover::before{opacity:.9}
}

.baNum{
  font-weight:900;
  font-size:18px;
  color:#111;
  opacity:.70;
  line-height:1;
  padding-top:2px;
}
.baText{
  font-weight:650;
  color:var(--ink-2);
  font-size:14px;
  line-height:1.35;
}

/* Center arrow */
.baArrow{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:60px;
}
.baArrow__shaft{
  width:42px; height:10px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(227,19,26,.35), rgba(11,11,12,.18));
}
.baArrow__head{
  width:0; height:0;
  border-left:14px solid rgba(11,11,12,.28);
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  margin-left:-2px;
}

/* Statement block */
.statement{
  margin-top:18px;
  padding:16px 18px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:
    radial-gradient(220px 220px at 12% 40%, rgba(227,19,26,.10), transparent 65%),
    radial-gradient(220px 220px at 88% 55%, rgba(0,0,0,.03), transparent 65%),
    rgba(255,255,255,.80);
  color:var(--ink);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  line-height:1.35;
}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--border);
  padding:28px 0;
  background:#fff;
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}
.footer__logo{height:26px; width:auto; border-radius:8px}
.footer__note{margin:8px 0 0; color:var(--muted); font-size:13px; max-width:60ch}
.footer__links{display:flex; gap:14px; flex-wrap:wrap}
.footer__links a{color:var(--ink-2); text-decoration:none; font-weight:700; font-size:13px}
.footer__links a:hover{color:var(--ink)}

/* ---------- Responsive (Mobile-first priority) ---------- */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr; gap:18px}
  .sectionHead{flex-direction:column; align-items:flex-start}

  /* Mobile UX: one-after-another (clean + readable) */
  .ba{grid-template-columns:1fr; gap:14px}
  .baArrow{display:none}
}

@media (max-width: 860px){
  .navToggle{display:block}
  .nav{
    display:none;
    position:absolute;
    left:20px; right:20px; top:64px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:12px;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .topbar__inner{position:relative}
  .topbar__actions .link.subtle{display:none}
}

/* ============================
   Section 2: Mobile-first Pill Comparison
   ============================ */

.cmpPillsWrap{
  position: relative;
}

.cmpPillsHint{
  display:none;
  margin: 0 0 10px;
}
.cmpPillsHint__chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:700;
  color:var(--ink-2);
  background: rgba(227,19,26,.06);
  border:1px solid rgba(227,19,26,.18);
  padding:8px 10px;
  border-radius:999px;
}

/* Desktop layout */
.cmpPills{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Titles (two columns) */
.cmpPills__heads{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  padding:16px;
  background:
    radial-gradient(900px 400px at 0% 0%, rgba(227,19,26,.08), transparent 55%),
    radial-gradient(900px 400px at 100% 0%, rgba(0,0,0,.04), transparent 55%),
    rgba(0,0,0,.02);
  border-bottom:1px solid var(--border);
}

.cmpPills__head{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(255,255,255,.75);
}

.cmpPills__headIcon{
  width:44px; height:44px;
  border-radius:999px;
  display:grid; place-items:center;
  font-weight:900;
  border:1px solid var(--border);
  background: rgba(0,0,0,.04);
  color: var(--ink);
}
.cmpPills__headIcon--ok{
  background: rgba(227,19,26,.10);
  color: var(--brand-red);
  border-color: rgba(227,19,26,.18);
}

.cmpPills__headTitle{font-weight:900; letter-spacing:-.01em}
.cmpPills__headSub{color:var(--muted); font-size:12px; margin-top:2px}

/* Rows container */
.cmpPills__rows{
  padding:16px;
  display:grid;
  gap:12px;
}

/* Each row: left pill, arrow, right pill */
.cmpRow{
  display:grid;
  grid-template-columns: 1fr 44px 1fr;
  gap:12px;
  align-items:stretch; /* important: keep both sides same height */
}

/* Pills */
.cmpRow__pill{
  display:grid;
  grid-template-columns: 56px 56px 1fr;
  align-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  min-height: 74px; /* IMPORTANT: equal height across left & right */
  padding:10px 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
}

.cmpRow__pill--right{
  grid-template-columns: 1fr 56px 56px;
}

/* Icon circle */
.cmpRow__icon{
  display:flex;
  align-items:center;
  justify-content:center;
}
.cmpRow__iconCircle{
  width:36px; height:36px;
  border-radius:999px;
  display:grid; place-items:center;
  font-weight:900;
  border:1px solid var(--border);
  line-height:1;
}
.cmpRow__iconCircle--bad{
  background: rgba(227,19,26,.10);
  border-color: rgba(227,19,26,.18);
  color: var(--brand-red);
}
.cmpRow__iconCircle--good{
  background: rgba(15,118,110,.10);
  border-color: rgba(15,118,110,.18);
  color: #0f766e;
}

/* Numbers */
.cmpRow__num{
  font-weight:900;
  font-size:18px;
  color: var(--ink);
  opacity:.70;
  text-align:center;
}
.cmpRow__num--right{
  text-align:center;
}

/* Text */
.cmpRow__text{
  font-weight:700;
  color: var(--ink-2);
  line-height:1.25;
  font-size:14px;
}

/* Mid arrow */
.cmpRow__mid{
  display:flex;
  align-items:center;
  justify-content:center;
}
.cmpRow__arrow{
  width:34px;
  height:10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(227,19,26,.22), rgba(11,11,12,.12));
  position: relative;
}
.cmpRow__arrow::after{
  content:"";
  position:absolute;
  right:-10px;
  top:50%;
  transform: translateY(-50%);
  width:0; height:0;
  border-left: 12px solid rgba(11,11,12,.18);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* Hover: subtle animated border (brand-safe, not dark) */
@media (hover:hover){
  .cmpRow__pill{
    position:relative;
  }
  .cmpRow__pill::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:999px;
    background: conic-gradient(
      from 180deg,
      rgba(227,19,26,.0),
      rgba(227,19,26,.22),
      rgba(0,0,0,.10),
      rgba(227,19,26,.18),
      rgba(227,19,26,.0)
    );
    opacity:0;
    transition: opacity .25s ease;
    z-index:-1;
  }
  .cmpRow__pill:hover::before{opacity:1;}
}

/* Mobile-first: keep the same “two-column” feel via horizontal swipe */
@media (max-width: 860px){
  .cmpPillsHint{display:block;}

  .cmpPills{
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  /* Force enough width so both columns remain side-by-side */
  .cmpPills__heads,
  .cmpPills__rows{
    min-width: 920px;
  }

  .cmpRow{
    scroll-snap-align: start;
  }

  /* Optional: nicer scrollbar */
  .cmpPills::-webkit-scrollbar{height:10px}
  .cmpPills::-webkit-scrollbar-thumb{background:#d9dde7;border-radius:999px}
  .cmpPills::-webkit-scrollbar-track{background:transparent}
}

/* =========================
   HOW WE DO IT (reference chain)
   ========================= */

.how{
  /* light, not dark */
  background:
    radial-gradient(800px 360px at 18% 22%, rgba(227,19,26,.06), transparent 60%),
    radial-gradient(900px 380px at 85% 25%, rgba(0,0,0,.035), transparent 55%),
    var(--bg);
}

/* Desktop chain container */
.howChain{
  position:relative;
  margin-top:26px;
  padding:26px 0 10px;
  display:grid;
  grid-template-columns: repeat(7, minmax(140px, 1fr));
  gap:22px;
  align-items:center;
}

/* Baseline line behind nodes */
.howLine{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:3px;
  background:linear-gradient(90deg, rgba(230,232,238,.0), rgba(230,232,238,.95), rgba(230,232,238,.0));
  transform:translateY(-50%);
  z-index:0;
}

/* Step */
.howStep{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:1;
  min-height:220px; /* keeps a consistent chain height */
}

/* top/bottom alternation */
.howStep--top{ justify-content:flex-start; }
.howStep--bottom{ justify-content:flex-end; }

/* Node (circle) */
.howNode{
  position:relative;
  display:grid;
  place-items:center;
  width:120px;
  height:120px;
}

/* Ring (matches your brand) */
.howRing{
  width:96px;
  height:96px;
  border-radius:999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,.25) 40%, rgba(255,255,255,0) 70%),
    conic-gradient(from 210deg, rgba(227,19,26,.95), rgba(242,26,37,.55), rgba(227,19,26,.95));
  box-shadow: 0 16px 34px rgba(227,19,26,.12);
  display:grid;
  place-items:center;
  position:relative;
}

.howRing::before{
  content:"";
  position:absolute;
  inset:16px;
  background:#fff;
  border-radius:999px;
  border:1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.howNum{
  position:relative;
  z-index:1;
  font-weight:900;
  font-size:22px;
  color:var(--ink);
  letter-spacing:-0.02em;
}

/* “half-circle” connector arcs near the ring (reference style) */
.howArc{
  position:absolute;
  width:36px;
  height:68px;
  border:3px solid rgba(227,19,26,.22);
  background:transparent;
}

/* TOP steps: arc on the RIGHT */
.howStep--top .howArc{
  right:-10px;
  left:auto;
  border-left:none;
  border-radius:0 999px 999px 0;
}

/* BOTTOM steps: arc on the LEFT */
.howStep--bottom .howArc{
  left:-10px;
  right:auto;
  border-right:none;
  border-radius:999px 0 0 999px;
}

/* Vertical placement (keep your current offsets) */
.howArc--top{ top:34px; }
.howArc--bottom{ bottom:34px; }

.howStep--last .howArc{ display:none; }

/* Text blocks */
.howText{
  width:180px;
  max-width:100%;
  text-align:left;
}
.howText h3{
  margin:0 0 6px;
  font-size:15px;
  letter-spacing:-0.01em;
  font-weight:800;
  color:var(--ink);
}
.howText p{
  margin:0;
  font-size:13px;
  color:var(--ink-2);
  line-height:1.35;
}

/* Position text relative to node (top: above, bottom: below) */
.howText--top{
  margin-bottom:14px;
}
.howText--bottom{
  margin-top:14px;
}

/* Desktop: hide mobile list */
.howMobile{ display:none; }

/* =========================
   Mobile: vertical connected list (mobile-first priority)
   ========================= */
@media (max-width: 980px){
  .howChain{ display:none; }
  .howMobile{
    display:grid;
    gap:14px;
    margin:22px 0 0;
    padding:0;
    list-style:none;
  }

  .howMItem{
    display:grid;
    grid-template-columns: 96px 1fr;
    gap:14px;
    align-items:flex-start;
    background:rgba(255,255,255,.88);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:14px;
  }

  .howMNode{
    position:relative;
    width:96px;
    display:grid;
    place-items:center;
  }

  .howMStem{
    position:absolute;
    left:50%;
    top:88px;
    width:3px;
    height:calc(100% + 18px);
    transform:translateX(-50%);
    background:linear-gradient(180deg, rgba(227,19,26,.18), rgba(230,232,238,.9));
    border-radius:999px;
  }
  .howMItem--last .howMStem{ display:none; }

  .howMText h3{
    margin:2px 0 6px;
    font-size:18px;
    font-weight:900;
    letter-spacing:-0.02em;
    color:var(--ink);
  }
  .howMText p{
    margin:0;
    font-size:15px;
    color:var(--ink-2);
    line-height:1.45;
  }
}

/* =========================
   WE DELIVER
   ========================= */
.deliver{ background: var(--bg-soft); }
.deliverGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:stretch;
}
.deliverCard{
  background:rgba(255,255,255,.9);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.deliverCard--soft{
  background:
    radial-gradient(700px 240px at 20% 20%, rgba(227,19,26,.06), transparent 60%),
    rgba(255,255,255,.92);
}
.deliverTitle{
  margin:0 0 10px;
  font-size:16px;
  font-weight:900;
  letter-spacing:-0.01em;
}
.deliverList{
  margin:0 0 14px;
  padding-left:18px;
  color:var(--ink-2);
  font-weight:600;
}
.deliverList li{ margin:10px 0; }
.deliverList--check{ list-style:none; padding-left:0; }
.deliverList--check li{
  position:relative;
  padding-left:26px;
}
.deliverList--check li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--brand-red);
  font-weight:900;
}
.pill{
  display:inline-block;
  margin-left:6px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(227,19,26,.10);
  color:var(--brand-red);
  border:1px solid rgba(227,19,26,.16);
  font-weight:900;
  font-size:12px;
}
.deliverBadge{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
  border:1px dashed rgba(227,19,26,.28);
  background:rgba(227,19,26,.04);
  border-radius:14px;
  padding:12px 12px;
}
.deliverBadge__dot{
  width:12px;height:12px;border-radius:50%;
  background:var(--brand-red);
  box-shadow:0 0 0 6px rgba(227,19,26,.12);
}
.deliverBadge__text strong{ display:block; font-size:13px; }
.deliverBadge__text span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }

@media (max-width: 980px){
  .deliverGrid{ grid-template-columns:1fr; }
}

/* =========================
   PLATFORMS (single marquee system for desktop + mobile)
   ========================= */
.platforms{
  background:
    radial-gradient(1000px 420px at 18% 18%, rgba(227,19,26,.06), transparent 60%),
    radial-gradient(1100px 420px at 82% 22%, rgba(0,0,0,.035), transparent 55%),
    var(--bg);
}

.platformTip{
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(227,19,26,.28);
  background: rgba(227,19,26,.04);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 13px;
  display: inline-block;
}

.platformMarquee{
  margin-top: 10px;
  display: grid;
  gap: 14px;
}

/* Each row container */
.marqueeRow{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px 0;
  -webkit-overflow-scrolling: touch;
}

/* subtle fade edges (desktop & mobile) */
.marqueeRow::before,
.marqueeRow::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:56px;
  z-index:2;
  pointer-events:none;
}
.marqueeRow::before{
  left:0;
  background: linear-gradient(90deg, rgba(246,247,249,1), rgba(246,247,249,0));
}
.marqueeRow::after{
  right:0;
  background: linear-gradient(270deg, rgba(246,247,249,1), rgba(246,247,249,0));
}

/* Track */
.marqueeTrack{
  display: flex;
  gap: 14px;
  align-items: center;
  width: max-content;
  padding: 0 16px;
  animation: marquee linear infinite;
  animation-duration: var(--marqueeDur, 36s);
  will-change: transform;
}

.marqueeTrack--reverse{
  animation-direction: reverse;
}

.marqueeRow[data-speed="34"] .marqueeTrack{ --marqueeDur: 34s; }
.marqueeRow[data-speed="36"] .marqueeTrack{ --marqueeDur: 36s; }
.marqueeRow[data-speed="40"] .marqueeTrack{ --marqueeDur: 40s; }

/* Logo tile */
.mLogo{
  width: 170px;             /* desktop-friendly */
  height: 76px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #fff;
  display: grid;
  place-items: center;
  padding: 10px 14px;
  flex: 0 0 auto;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mLogo img{
  max-width: 140px;
  width: 100%;
  height: 42px;
  object-fit: contain;
  display: block;
  filter: saturate(1.05);
}

@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); } /* requires duplicated set */
}

/* Desktop polish: pause on hover */
@media (hover:hover){
  .marqueeRow:hover .marqueeTrack{ animation-play-state: paused; }
  .mLogo:hover{
    transform: translateY(-2px);
    border-color: rgba(227,19,26,.25);
    box-shadow: 0 16px 32px rgba(0,0,0,.08);
  }
}

/* Mobile sizing */
@media (max-width: 980px){
  .mLogo{
    width: 125px;
    height: 56px;
    border-radius: 16px;
    padding: 8px 10px;
  }
  .mLogo img{
    max-width: 96px;
    height: 28px;
  }
  .marqueeRow::before,
  .marqueeRow::after{
    width: 42px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .marqueeTrack{ animation: none; }
}

/* =========================
   MODAL (single source of truth)
   Fix: mobile scroll + iOS + sticky actions
   ========================= */

/* lock background scroll */
html.modalLock,
body.modalLock{
  height: 100%;
  overflow: hidden;
}

/* overlay */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.modal.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 18, .55);
}

/* panel becomes the scroll container */
.modal__panel{
  position: relative;
  width: min(720px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
}

/* header stays visible */
.modal__head{
  position: sticky;
  top: 0;
  z-index: 5;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;

  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.modal__title{ font-weight: 900; font-size: 16px; letter-spacing: -0.01em; }
.modal__sub{ margin-top: 2px; color: var(--muted); font-size: 13px; }

.modal__close{
  border: 1px solid var(--border);
  background:#fff;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

/* keep actions always reachable on mobile */
.form__actions{
  position: sticky;
  bottom: 0;
  z-index: 5;

  background: #fff;
  border-top: 1px solid var(--border);
  padding: 12px 18px;
}

/* small devices: slightly tighter spacing */
@media (max-width: 520px){
  .modal.is-open{ padding: 10px; }
  .modal__panel{ width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  .modal__head{ padding: 14px 14px; }
  .form__actions{ padding: 12px 14px; }
}

.trustBanner{
  background:
    radial-gradient(900px 380px at 12% 30%, rgba(227,19,26,.10), transparent 60%),
    radial-gradient(900px 380px at 88% 20%, rgba(0,0,0,.04), transparent 55%),
    var(--bg);
}

.trust{
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  padding: 22px;
  align-items: center;
}

.trust__kicker{ color: var(--muted); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.trust__title{ margin: 8px 0 6px; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -0.02em; }
.trust__sub{ margin: 0; color: var(--ink-2); }

.trust__stats{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trustCard{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  text-align:center;
}
.trustIcon{
  width: 54px; height: 54px; border-radius: 999px;
  display:grid; place-items:center;
  margin: 0 auto 10px;
  background: rgba(227,19,26,.08);
  border: 1px solid rgba(227,19,26,.18);
  font-weight: 900;
}
.trustNum{ font-weight: 950; font-size: 34px; letter-spacing: -0.02em; }
.trustLbl{ color: var(--muted); font-weight: 700; margin-top: 2px; }

@media (max-width: 980px){
  .trust{ grid-template-columns: 1fr; }
}

.noScroll { overflow: hidden; }

/* Subtle grid pattern helper */
.bgGrid {
  position: relative;
  overflow: hidden;
}
.bgGrid::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(230,232,238,.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230,232,238,.55) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity:.22;
  pointer-events:none;
}
.bgGrid::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(closest-side, rgba(227,19,26,.10), transparent 70%);
  transform: translate(20%, -10%);
  opacity:.55;
  pointer-events:none;
}
.bgGrid > .container{ position:relative; z-index:1; }

/* =========================
   PROOF BANNER (aligned + big quote)
   ========================= */

.proof{
  background: var(--bg);
  padding: 64px 0;
}

.proofWrap{
  position: relative;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow);
  overflow: hidden;

  /* This is what makes it “feel” aligned in height/weight */
  padding: 26px;
}

.proofPattern{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .9;
  background:
    radial-gradient(900px 360px at 15% 25%, rgba(227,19,26,.10), transparent 60%),
    radial-gradient(900px 360px at 88% 20%, rgba(0,0,0,.045), transparent 55%),
    radial-gradient(600px 240px at 70% 85%, rgba(227,19,26,.06), transparent 60%),
    /* subtle grid */
    linear-gradient(to right, rgba(11,11,12,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,11,12,.06) 1px, transparent 1px);
  background-size:
    auto, auto, auto,
    22px 22px,
    22px 22px;
  mix-blend-mode: multiply;
}

.proofGrid{
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 18px;
  align-items: center;
}

.proofLeft{
  padding: 6px 6px 6px 2px;
}

.proofEyebrow{
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 700;
  letter-spacing: .01em;
  margin-bottom: 12px;
}

.proofTitle{
  margin: 0;
  font-size: clamp(30px, 3.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.proofStat{
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px 14px;
  border-left: 1px solid rgba(230,232,238,.9);
}

.proofGrid .proofStat:last-child{
  border-right: none;
}

/* icon chip */
.proofIcon{
  width: 86px;
  height: 86px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;

  border: 1px solid rgba(230,232,238,.9);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.55) 45%, rgba(255,255,255,.2) 75%),
    rgba(227,19,26,.05);
  color: var(--brand-red-2);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

.proofNum{
  font-size: clamp(34px, 3vw, 56px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.proofLabel{
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}

/* BIG quote bar */
.proofQuote{
  position: relative;
  margin-top: 18px;
  padding: 18px 18px;
  border-radius: 18px;
  border: 1px solid rgba(230,232,238,.95);
  background: rgba(255,255,255,.82);

  font-size: clamp(18px, 1.6vw, 26px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);

  /* fade-in start state */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}

.proofQuote.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Bounce icons (no spin) */
.proofIcon--bounce{
  animation: proofBounce 2.8s ease-in-out infinite;
  transform-origin: 50% 60%;
}
.proofGrid .proofStat:nth-child(2) .proofIcon--bounce{ animation-delay: .1s; }
.proofGrid .proofStat:nth-child(3) .proofIcon--bounce{ animation-delay: .25s; }

@keyframes proofBounce{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Mobile */
@media (max-width: 980px){
  .proofWrap{ padding: 18px; border-radius: 18px; }

  .proofGrid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .proofStat{
    border-left: none;
    border-top: 1px solid rgba(230,232,238,.9);
    border-radius: 16px;
    background: rgba(255,255,255,.86);
  }

  .proofTitle{
    font-size: clamp(30px, 9vw, 44px);
  }

  .proofQuote{
    margin-top: 14px;
    font-size: 18px;
    padding: 16px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .proofIcon--bounce{ animation: none; }
  .proofQuote{ transition: none; }
}

/* =========================
   INDUSTRY PROOF SECTION
   ========================= */

.industryProof{
  padding: 64px 0;
  background: var(--bg);
}

.industryWrap{
  position: relative;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  padding: 26px;
  overflow: hidden;
}

.industryPattern{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .85;
  background:
    radial-gradient(800px 360px at 12% 20%, rgba(227,19,26,.10), transparent 60%),
    radial-gradient(800px 360px at 90% 18%, rgba(0,0,0,.04), transparent 55%),
    linear-gradient(to right, rgba(11,11,12,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,11,12,.06) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px, 22px 22px;
}

.industryHeader{
  position: relative;
  margin-bottom: 26px;
}

.industryEyebrow{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.industryTitle{
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.03em;
}

.industrySub{
  margin-top: 10px;
  max-width: 640px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}

/* GRID */
.industryGrid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* CARD (same visual weight as proofStat) */
.industryCard{
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(230,232,238,.95);
  background: rgba(255,255,255,.86);

  font-weight: 600;
  font-size: 15px;
  color: var(--ink);

  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* ICON CHIP */
.industryIcon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  border: 1px solid rgba(230,232,238,.9);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.55) 45%, rgba(255,255,255,.2) 75%),
    rgba(227,19,26,.05);

  font-size: 18px;
  flex-shrink: 0;
}

.industryWrap{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

/* MOBILE */
@media (max-width: 900px){
  .industryWrap{ padding: 18px; }
  .industryGrid{
    grid-template-columns: 1fr;
  }
}

/* =========================
   PRICING (comparison: tick / x + best seller)
   ========================= */
.pricing{
  background:
    radial-gradient(900px 380px at 18% 18%, rgba(227,19,26,.06), transparent 60%),
    radial-gradient(1100px 420px at 82% 22%, rgba(0,0,0,.035), transparent 55%),
    var(--bg);
}

.gstBar{
  margin-top:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.82);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:12px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.gstPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px dashed rgba(227,19,26,.35);
  background: rgba(227,19,26,.06);
  font-weight:800;
  font-size:12px;
  color: var(--ink);
}
.gstNote{
  margin-left:10px;
  color: var(--ink-2);
  font-weight:600;
  font-size:13px;
}
.gstBar__right{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--ink-2);
  font-weight:700;
}
.gstLabel{ font-weight:700; color: var(--ink-2); }
.gstPlan{ color: var(--ink); }
.gstTotal{ color: var(--ink); }
.gstSep{ opacity:.6; }

.priceGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:16px;
  align-items:stretch;
}

.plan{
  position:relative;
  background: rgba(255,255,255,.88);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 16px;
  display:flex;
  flex-direction:column;
  min-height: 100%;
  overflow:hidden;
}

.plan__top{ padding:2px 2px 8px; }
.plan__tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
  color: var(--ink-2);
}
.plan__tag--accent{
  border-color: rgba(227,19,26,.22);
  background: rgba(227,19,26,.06);
  color: var(--ink);
}
.plan__name{
  margin:10px 0 4px;
  font-size:20px;
  font-weight:950;
  letter-spacing:-0.02em;
  color: var(--ink);
}
.plan__kicker{
  margin:0;
  color: var(--ink-2);
  font-weight:650;
  font-size:14px;
  line-height:1.35;
}
.plan__gift{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(227,19,26,.28);
  background: rgba(227,19,26,.04);
  font-weight:800;
  color: var(--ink);
}
.plan__noteSmall{
  margin-top:8px;
  color: var(--ink-2);
  font-weight:650;
  font-size:13px;
}

.plan__price{
  margin-top:12px;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:#fff;
}
.plan__amt{
  display:flex;
  align-items:baseline;
  gap:6px;
  color: var(--ink);
}
.plan__amt .currency{ font-weight:950; font-size:18px; opacity:.9; }
.plan__amt .num{ font-weight:1000; font-size:34px; letter-spacing:-0.03em; }
.plan__meta{
  margin-top:4px;
  color: var(--ink-2);
  font-weight:700;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.plan__meta .save{
  display:inline-flex;
  padding:4px 10px;
  border-radius:999px;
  background: rgba(25,165,90,.10);
  border:1px solid rgba(25,165,90,.25);
  color: rgba(20,130,70,.95);
  font-weight:900;
  font-size:12px;
}

.plan__final{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px;
  border-radius:14px;
  background: rgba(227,19,26,.04);
  border:1px dashed rgba(227,19,26,.26);
}
.plan__final .label{ color: var(--ink-2); font-weight:800; font-size:12px; }
.plan__final .value{ color: var(--ink); font-weight:950; }

.plan__list{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
  flex: 1 1 auto;
}

/* Tick / X like client comparison */
.plan__list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: var(--ink);
  font-weight:650;
  font-size:14px;
  line-height:1.35;
}
.plan__list li::before{
  content:"";
  width:18px;
  height:18px;
  border-radius:999px;
  flex:0 0 auto;
  margin-top:1px;
  background: rgba(230,232,238,.95);
  border:1px solid var(--border);
}
.plan__list li.ok::before{
  background: rgba(25,165,90,.12);
  border-color: rgba(25,165,90,.25);
  mask: none;
  position:relative;
}
.plan__list li.ok::after{
  content:"✓";
  position:absolute;
  transform: translate(6px, 1px);
  color: rgba(20,130,70,.95);
  font-weight:1000;
  font-size:14px;
  pointer-events:none;
}
.plan__list li.no{ color: rgba(30,35,45,.65); }
.plan__list li.no::before{ background: rgba(227,19,26,.10); border-color: rgba(227,19,26,.20); }
.plan__list li.no::after{
  content:"×";
  position:absolute;
  transform: translate(6px, -1px);
  color: rgba(227,19,26,.95);
  font-weight:1000;
  font-size:16px;
  pointer-events:none;
}

.plan__cta{
  margin-top:14px;
  width:100%;
}

.plan--best{
  border-color: rgba(227,19,26,.25);
  box-shadow: 0 18px 40px rgba(227,19,26,.10);
  transform: translateY(-4px);
}
.plan__ribbon{
  position:absolute;
  top:12px;
  left:50%;
  transform: translateX(-50%);
  background: rgba(227,19,26,.95);
  color:#fff;
  font-weight:1000;
  font-size:12px;
  letter-spacing:.06em;
  padding:7px 12px;
  border-radius:999px;
  box-shadow: 0 12px 26px rgba(227,19,26,.18);
}

.plan.is-selected{
  outline: 3px solid rgba(227,19,26,.20);
  border-color: rgba(227,19,26,.35);
}

.pricingFoot{
  margin-top:14px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.pricingFoot__note{
  color: var(--ink-2);
  font-weight:650;
}

/* Mobile first priority */
@media (max-width: 980px){
  .priceGrid{
    grid-template-columns: 1fr;
  }
  .plan--best{ transform:none; }
}

/* =========================
   PRICING (comparison style like reference)
   ========================= */

.pricing{
  background:
    radial-gradient(1000px 420px at 18% 18%, rgba(227,19,26,.06), transparent 60%),
    radial-gradient(1100px 420px at 82% 22%, rgba(0,0,0,.035), transparent 55%),
    var(--bg);
}

.pricingGrid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap:18px;
  row-gap:34px; /* ✅ key fix: gives space for the pill above */
  align-items:stretch;
}

.priceCard{
  position:relative;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
  min-height: 560px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.priceCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(15,23,42,.10);
}

.priceCard__pill{
  position:absolute;
  top:-12px;
  left:32px;

  padding:6px 36px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;

  border:1px solid var(--border);
  background:#f3f4f6;
  color:#374151;

  white-space:nowrap;
  line-height:1;

  z-index:1; /* ensures it stays above its own card */
}

.priceCard__pill--best{
  background: rgba(227,19,26,.10);
  border-color: rgba(227,19,26,.25);
  color: rgba(227,19,26,1);
}

.priceCard__pill--neutral{
  background:#f3f4f6;
}

.priceCard__bestRow{
  position:absolute;
  top:-14px;
  left:18px;
  display:flex;
  align-items:center;
  gap:10px;
}

.bestCheck{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: rgba(227,19,26,1);
  color:#fff;
  font-weight:900;
  box-shadow: 0 10px 24px rgba(227,19,26,.22);
}

.priceCard--best{
  border: 2px solid rgba(227,19,26,.35);
  box-shadow: 0 22px 60px rgba(227,19,26,.12);
}

.priceCard__head{ padding-top:10px; }
.priceCard__title{
  margin:0;
  font-size:22px;
  font-weight:900;
  letter-spacing:-0.02em;
  color: var(--ink);
}
.priceCard__muted{
  margin:6px 0 0;
  color: var(--ink-2);
  font-weight:600;
}

.priceCard__price{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  background: rgba(15,23,42,.03);
  border:1px solid rgba(230,232,238,.9);
}

.priceBig{
  font-size:40px;
  font-weight:950;
  letter-spacing:-0.03em;
  color: var(--ink);
  line-height:1.0;
}
.priceBig .inr{ font-size: 26px; vertical-align: 8px; margin-right:2px; }

.priceSub{
  margin-top:6px;
  color: var(--ink-2);
  font-weight:700;
}

.saveRow{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.saveTag{
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  background: rgba(34,197,94,.12);
  color: rgba(22,163,74,1);
  border: 1px solid rgba(34,197,94,.22);
}
.gift{ font-weight:800; color: var(--ink-2); }

.priceTotal, .priceMini{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
.priceTotal .label, .priceMini .label{
  color: var(--ink-2);
  font-weight:800;
  font-size:13px;
}
.priceTotal .value, .priceMini .value{
  font-weight:950;
  color: var(--ink);
  letter-spacing:-0.01em;
}

.priceMeta{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.metaBox{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
}
.metaBox--tint{
  background: rgba(227,19,26,.04);
  border-color: rgba(227,19,26,.18);
}
.metaTitle{
  font-size:12px;
  font-weight:900;
  color: var(--ink-2);
}
.metaValue{
  margin-top:2px;
  font-weight:800;
  color: var(--ink);
}

.featureList{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.featureList li{
  position:relative;
  padding-left:28px;
  color: var(--ink);
  font-weight:700;
  line-height:1.35;
}
.featureList li::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:18px;
  height:18px;
  border-radius:999px;
  display:inline-block;
}
.featureList li.ok::before{
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.25);
}
.featureList li.ok::after{
  content:"✓";
  position:absolute;
  left:4px;
  top:0px;
  font-size:14px;
  font-weight:950;
  color: rgba(22,163,74,1);
}
.featureList li.no::before{
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.25);
}
.featureList li.no::after{
  content:"✕";
  position:absolute;
  left:5px;
  top:-1px;
  font-size:14px;
  font-weight:950;
  color: rgba(220,38,38,1);
}

.priceCard__actions{
  display:flex;
  justify-content:center;   /* center the Pay button */
  align-items:center;
  gap:12px;                 /* useful if you later uncomment Select */
  margin-top:14px;          /* optional spacing */
}

.priceNote{
  margin:10px 0 0;
  color: var(--ink-2);
  font-weight:600;
  font-size:12px;
}

.priceCard.is-selected{
  border-color: rgba(227,19,26,.45);
  box-shadow: 0 20px 60px rgba(227,19,26,.10);
}

.pricingSelected{
  margin-top:18px;
  border:1px dashed rgba(227,19,26,.32);
  background: rgba(227,19,26,.05);
  border-radius:16px;
  padding:12px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.pricingSelected__label{
  font-weight:950;
  color: var(--ink);
}
.pricingSelected__value{
  color: var(--ink-2);
  font-weight:800;
}

@media (max-width: 980px){
  .pricingGrid{
    grid-template-columns: 1fr;
    row-gap:38px; /* ✅ extra breathing room */
  }
}

/* optional: nicer on mobile */
@media (max-width: 640px){
  .priceCard__actions .btn{
    width:100%;
    max-width:340px;
  }
}

/* =========================
   FOOTER: fix cropping + grid pattern behind content
   ========================= */

.footerCTA, .footerLinks{
  background: rgba(255,255,255,.9);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
  position: relative;

  /* IMPORTANT: avoid clipping content */
  overflow: visible;
}

/* pattern behind content */
.footerCTA::before, .footerLinks::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(227,19,26,.06), transparent 45%),
    radial-gradient(circle at 82% 22%, rgba(0,0,0,.03), transparent 48%),
    linear-gradient(transparent 24px, rgba(230,232,238,.35) 25px),
    linear-gradient(90deg, transparent 24px, rgba(230,232,238,.35) 25px);
  background-size: auto, auto, 26px 26px, 26px 26px;
  opacity:.35;
  pointer-events:none;

  /* keep pattern behind */
  z-index: 0;
}

/* ensure content stays above pattern */
.footerCTA > *, .footerLinks > *{
  position: relative;
  z-index: 1;
}

/* prevent email cropping on narrow widths */
.footerLinks a,
.footerLinks .footerContact{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ✅ Long email / text should wrap nicely instead of overflowing */
.footerLinks a,
.footerLinks .footerEmail,
.footerLinks p{
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 860px){
  .footerCol__title{
    display: inline-block;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(227,19,26,.18);
    background: rgba(227,19,26,.06);
    font-weight: 900;
    letter-spacing: -0.01em;
  }
}

.footerCTA__brand{
  position: relative;
  z-index: 1;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.footerCTA__logo{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(230,232,238,.9);
  background:#fff;
}

.footerCTA__tag{
  margin: 2px 0 0;
  color: var(--ink-2);
  font-weight: 600;
  line-height: 1.45;
}

.footerCTA__actions{
  position: relative;
  z-index: 1;
  margin-top: 14px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.footerCols{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.footerCol__title{
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--ink);
}

.footerCol a{
  display:block;
  color: var(--ink-2);
  text-decoration:none;
  font-weight: 650;
  padding: 6px 0;
}
.footerCol a:hover{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.footerMail{
  font-weight: 800 !important;
}

.footerMeta{
  margin-top: 6px;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 13px;
}

.footerBottom{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  margin-top: 16px;
  border-top: 1px solid rgba(230,232,238,.85);
  color: var(--ink-2);
  font-weight: 650;
  font-size: 13px;
}

.footerBottom__muted{
  color: rgba(14,24,36,.55);
}

/* Mobile footer */
@media (max-width: 980px){
  .footerTop{ grid-template-columns: 1fr; }
  .footerCols{ grid-template-columns: 1fr; }
  .footerBottom{ flex-direction: column; align-items:flex-start; }
}

/* =========================
   Reveal animation (About page blocks)
   ========================= */

.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

.mutedLink{
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px dotted rgba(120,130,150,.55);
}
.mutedLink:hover{ color: var(--ink); border-bottom-color: rgba(227,19,26,.45); }

/* Honeypot — hard hide */
.hp{
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.hp *{
  display: none !important;
}

/* =========================
   Platforms Modal (plm) — CLEAN
   ========================= */

html.plmLock, body.plmLock{
  height: 100%;
  overflow: hidden;
}

.plm{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.plm.is-open{ display: block; }

.plm__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 18, .55);
}

/* Panel = fixed height container; header fixed, body scrolls */
.plm__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(760px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  margin: 0;

  background: rgba(255,255,255,.96);
  border: 1px solid var(--border, #e6e8ee);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
  overflow: hidden;

  display: flex;
  flex-direction: column;

  /* Better iOS feel */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}



.plm__head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border, #e6e8ee);
  background: rgba(0,0,0,.02);
}

.plm__title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink, #0f172a);
}

.plm__sub{
  margin-top: 4px;
  color: var(--muted, #6b7280);
  font-size: 13px;
  line-height: 1.35;
}

.plm__close{
  align-self: start;     /* keeps it at top */
  justify-self: end;     /* pushes it to the right */
  border: 1px solid var(--border, #e6e8ee);
  background: #fff;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

/* body becomes the scroll area (so the bottom items are always reachable) */
.plm__body{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /* gives breathing room at bottom + iPhone safe area */
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.plm__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.plm__item{
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(230,232,238,.95);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);

  font-weight: 700;
  font-size: 14px;
  color: var(--ink, #0f172a);

  cursor: pointer;
  user-select: none;
  text-align: left;
}

.plm__item:hover{
  border-color: rgba(227,19,26,.22);
  box-shadow: 0 14px 30px rgba(227,19,26,.10);
}

/* Logo chip */
.plm__chip{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e6e8ee;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}

.plm__chip img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.plm__fallback{
  font-weight: 900;
  color: #111;
  font-size: 12px;
  letter-spacing: .02em;
}

.plm__toast{
  margin-top: 12px;
  display: none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(16,185,129,.25);
  background: rgba(16,185,129,.08);
  color: #065f46;
  font-weight: 800;
  font-size: 13px;
}

.plm__toast.is-show{ display: block; }

/* Optional: slightly tighter vertical fit on small screens */
@media (max-width: 640px){
  .plm__panel{
    max-height: calc(100dvh - 16px);
    width: calc(100% - 16px);
  }
}