/* ============================================================
   MARKETRON — 2026 Redesign · Shared stylesheet
   Source of truth: the approved homepage (index.html).

   1. TOKENS ......... every color, font, size, space, radius,
                       shadow and motion value lives here.
   2. Base
   3. Components ..... in homepage order.

   Rule: nothing below the tokens block may use a raw color,
   font, spacing, radius or shadow value. Add a token instead.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  /* ---- 2026 brand palette ---- */
  --corporate-blue:#0F488D;
  --deep-navy:#0F1A3A;
  --mid-blue:#516AC4;
  --paynow-purple:#7030A0;
  --taas-gold:#E1A94C;
  --digital-blue:#1676BB;
  --success-green:#46B649;

  /* ---- Extended colors already used on the homepage ----
     Not in the 2026 palette; kept so the homepage renders unchanged.
     Flagged for review in blocks.html. */
  --teal:#0896C5;               /* Integrations accent, Traffic stat gradient end */
  --taas-gold-deep:#B9842F;     /* TaaS panel accent (badge, check marks) */
  --taas-gold-hover:#EFBE63;    /* .btn-gold hover */
  --taas-amber:#B9651E;         /* TaaS stat gradient end */
  --nxt-cyan:#0CA3C9;           /* NXT stat gradient end */
  --paynow-violet:#9B59E0;      /* PayNow stat gradient end */
  --navy-royal:#1D3E8F;         /* Integrations stat gradient end */

  /* ---- Signature gradient stops (blue → lavender → gold, from the logo) ---- */
  --sig-blue-light:#7FA3FF;
  --sig-lavender:#C8B8E8;
  --sig-gold-light:#F2C173;

  /* ---- Hero orbit node glows ---- */
  --node-nxt:#4FA3E8;
  --node-paynow:#C07FE8;
  --node-digital:#9FA8E8;
  --node-traffic:#7FB2FF;
  --node-taas:var(--sig-gold-light);

  /* ---- Neutrals ---- */
  --white:#FFFFFF;
  --gray-50:#F7F8FA;
  --gray-100:#EEF1F5;
  --gray-300:#D7DCE3;
  --gray-400:#A6AFC0;           /* logo-strip wordmarks */
  --gray-500:#69748A;
  --charcoal:#1C2230;

  /* ---- Overlays: white on dark surfaces ---- */
  --on-dark-95:rgba(255,255,255,.95);
  --on-dark-85:rgba(255,255,255,.85);
  --on-dark-82:rgba(255,255,255,.82);
  --on-dark-75:rgba(255,255,255,.75);
  --on-dark-72:rgba(255,255,255,.72);
  --on-dark-70:rgba(255,255,255,.7);
  --on-dark-60:rgba(255,255,255,.6);
  --on-dark-50:rgba(255,255,255,.5);
  --on-dark-45:rgba(255,255,255,.45);
  --on-dark-32:rgba(255,255,255,.32);
  --on-dark-30:rgba(255,255,255,.3);
  --on-dark-28:rgba(255,255,255,.28);
  --on-dark-22:rgba(255,255,255,.22);
  --on-dark-14:rgba(255,255,255,.14);
  --on-dark-12:rgba(255,255,255,.12);
  --on-dark-10:rgba(255,255,255,.1);
  --on-dark-08:rgba(255,255,255,.08);
  --header-glass:rgba(255,255,255,.92);

  /* ---- Overlays: navy ---- */
  --navy-text-74:rgba(15,26,58,.74);  /* body copy on the light end of the ombre */
  --navy-glass-45:rgba(10,16,38,.45); /* orbit node pill */
  --navy-glass-50:rgba(10,16,38,.5);  /* orbit core */

  /* ---- Gradients ---- */
  --grad-text:linear-gradient(95deg,var(--sig-blue-light) 0%,var(--sig-lavender) 45%,var(--sig-gold-light) 100%);
  --grad-hero:linear-gradient(140deg,#0A1026 0%,#0F2B66 32%,var(--corporate-blue) 58%,#3A4FB0 82%,#5B3E9E 104%);
  --grad-hero-glow:
    radial-gradient(700px 460px at 88% 12%, rgba(112,48,160,.38), transparent 65%),
    radial-gradient(620px 420px at 6% 96%, rgba(225,169,76,.2), transparent 60%),
    radial-gradient(440px 320px at 60% 110%, rgba(81,106,196,.4), transparent 65%);
  --grad-ombre:
    linear-gradient(180deg,rgba(15,26,58,0) 55%,rgba(15,26,58,.24) 100%),
    linear-gradient(115deg,var(--corporate-blue) 0%,#3D6BBF 26%,#8FAEE8 52%,#D6DEF0 76%,#F4E4C2 100%);
  --grad-ombre-fade:
    linear-gradient(180deg,var(--white) 0%,rgba(255,255,255,.96) 34%,rgba(255,255,255,.55) 58%,rgba(255,255,255,0) 88%),
    linear-gradient(115deg,#2B50B8 0%,var(--mid-blue) 28%,#9D93B5 52%,#E8A94C 78%,#F6E3C0 100%);
  --grad-navy:linear-gradient(150deg,var(--corporate-blue),var(--deep-navy));
  --grad-navy-glow:radial-gradient(560px 360px at 50% 0%, rgba(225,169,76,.16), transparent 65%);
  --grad-photo-scrim:linear-gradient(180deg,rgba(15,26,58,.93) 0%,rgba(15,26,58,.82) 50%,rgba(15,26,58,.93) 100%);
  --mask-edge-fade:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  /* Product stat-card gradients */
  --grad-taas:linear-gradient(135deg,var(--taas-gold),var(--taas-amber));
  --grad-traffic:linear-gradient(135deg,var(--corporate-blue),var(--teal));
  --grad-nxt:linear-gradient(135deg,var(--digital-blue),var(--nxt-cyan));
  --grad-paynow:linear-gradient(135deg,var(--paynow-purple),var(--paynow-violet));
  --grad-integrations:linear-gradient(135deg,var(--deep-navy),var(--navy-royal));

  /* ---- Typography ---- */
  --font:'Montserrat','Segoe UI',sans-serif;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;

  /* Fluid display sizes */
  --fs-display:clamp(40px,5vw,58px);      /* h1.campaign */
  --fs-h2:clamp(28px,3.2vw,40px);
  --fs-cta-title:clamp(32px,4vw,48px);    /* final CTA h2 */
  --fs-panel-title:clamp(26px,2.8vw,36px);
  --fs-stat-xl:clamp(48px,5.4vw,72px);    /* stat card numeral */
  --fs-stat-lg:clamp(40px,4.4vw,56px);    /* stats band numeral */
  --fs-quote:clamp(19px,2.2vw,24px);
  /* Fixed sizes (px value in the name, exactly as the homepage uses them) */
  --fs-22:22px;
  --fs-20:20px;
  --fs-18-5:18.5px;
  --fs-18:18px;
  --fs-17:17px;
  --fs-16-5:16.5px;
  --fs-16:16px;
  --fs-15-5:15.5px;
  --fs-15:15px;
  --fs-14-5:14.5px;
  --fs-14:14px;
  --fs-13-5:13.5px;
  --fs-13:13px;
  --fs-12-5:12.5px;
  --fs-12:12px;
  --fs-11-5:11.5px;
  --fs-10-5:10.5px;
  --fs-10:10px;

  --lh-none:1;
  --lh-display:1.12;
  --lh-heading:1.15;
  --lh-snug:1.3;
  --lh-card-title:1.35;
  --lh-quote:1.5;
  --lh-body:1.6;
  --lh-relaxed:1.65;
  --lh-loose:1.7;

  --ls-tight:-.02em;
  --ls-snug:-.01em;
  --ls-wordmark:.04em;
  --ls-badge:.05em;
  --ls-tag:.1em;
  --ls-label:.12em;
  --ls-kind:.13em;
  --ls-eyebrow:.14em;
  --ls-caption:.16em;
  --ls-core:.24em;

  /* ---- Spacing (px value in the name) ---- */
  --sp-1:1px;
  --sp-2:2px;
  --sp-4:4px;
  --sp-5:5px;
  --sp-6:6px;
  --sp-7:7px;
  --sp-8:8px;
  --sp-9:9px;
  --sp-10:10px;
  --sp-11:11px;
  --sp-12:12px;
  --sp-13:13px;
  --sp-14:14px;
  --sp-15:15px;
  --sp-16:16px;
  --sp-18:18px;
  --sp-20:20px;
  --sp-22:22px;
  --sp-24:24px;
  --sp-26:26px;
  --sp-28:28px;
  --sp-30:30px;
  --sp-32:32px;
  --sp-34:34px;
  --sp-36:36px;
  --sp-38:38px;
  --sp-40:40px;
  --sp-44:44px;
  --sp-48:48px;
  --sp-54:54px;
  --sp-56:56px;
  --sp-64:64px;
  --sp-70:70px;
  --sp-72:72px;
  --sp-80:80px;
  --sp-84:84px;
  --sp-96:96px;
  --sp-104:104px;
  --sp-110:110px;

  /* Layout */
  --max:1240px;
  --gutter:var(--sp-32);
  --section-y:var(--sp-96);
  --section-y-mobile:var(--sp-64);
  --header-h:72px;

  /* ---- Radii ---- */
  --radius-xs:2px;      /* hamburger bars */
  --radius-sm:9px;      /* dropdown links, chips */
  --radius-btn:10px;    /* buttons */
  --radius-md:13px;     /* icon tiles, card images */
  --radius:14px;        /* cards, dropdown panel */
  --radius-lg:20px;     /* resource cards */
  --radius-xl:22px;     /* stat cards */
  --radius-pill:999px;
  --radius-round:50%;

  /* ---- Shadows ---- */
  --shadow-sm:0 2px 8px rgba(15,26,58,.07);
  --shadow-md:0 10px 30px rgba(15,26,58,.12);
  --shadow-lg:0 24px 60px rgba(15,26,58,.18);
  --shadow-float:0 14px 40px rgba(15,26,58,.16);
  --shadow-float-hover:0 24px 56px rgba(15,26,58,.24);
  --shadow-btn-primary:0 10px 24px rgba(15,72,141,.32);
  --shadow-btn-gold:0 10px 24px rgba(225,169,76,.4);
  --shadow-btn-dark:0 10px 24px rgba(15,26,58,.3);
  --shadow-pill-dark:0 10px 28px rgba(0,0,0,.28);
  --shadow-core:0 26px 70px rgba(0,0,0,.4);
  --shadow-avatar:0 12px 32px rgba(0,0,0,.35);
  --shadow-mark:drop-shadow(0 4px 10px rgba(0,0,0,.35));

  /* ---- Motion ---- */
  --dur-fast:.18s;
  --dur-base:.2s;
  --dur-med:.25s;
  --dur-fade:.4s;
  --dur-slide:.55s;
  --dur-reveal:.6s;
  --ease:ease;
  --ease-slide:cubic-bezier(.65,.05,.25,1);
  --ease-ripple:cubic-bezier(.2,.6,.4,1);
  --lift-sm:translateY(-2px);
  --lift-md:translateY(-6px);
}

/* ============================================================
   2. BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  color:var(--charcoal);
  background:var(--white);
  line-height:var(--lh-body);
  font-size:var(--fs-16);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}

/* ===== Type scale (per brand guide §2.2) ===== */
.eyebrow{
  display:inline-block;
  font-size:var(--fs-13);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--corporate-blue);
  margin-bottom:var(--sp-14);
}
.eyebrow--light{color:var(--taas-gold);}
h1.campaign{
  font-size:var(--fs-display);
  font-weight:var(--fw-extrabold);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-tight);
}
.grad{
  background:var(--grad-text);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
h2{font-size:var(--fs-h2);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:var(--ls-snug);}
h3{font-size:var(--fs-20);font-weight:var(--fw-bold);line-height:var(--lh-snug);}
.lead{font-size:var(--fs-18);color:var(--gray-500);line-height:var(--lh-relaxed);}

/* ============================================================
   3. COMPONENTS
   ============================================================ */

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-9);
  padding:var(--sp-15) var(--sp-30);border-radius:var(--radius-btn);
  font-family:var(--font);font-weight:var(--fw-semibold);font-size:var(--fs-15);line-height:var(--lh-body);
  border:2px solid transparent;cursor:pointer;white-space:nowrap;
  transition:all var(--dur-fast) var(--ease);
}
.btn-primary{background:var(--corporate-blue);color:var(--white);}
.btn-primary:hover{background:var(--deep-navy);transform:var(--lift-sm);box-shadow:var(--shadow-btn-primary);}
.btn-gold{background:var(--taas-gold);color:var(--deep-navy);}
.btn-gold:hover{background:var(--taas-gold-hover);transform:var(--lift-sm);box-shadow:var(--shadow-btn-gold);}
.btn-outline{background:transparent;border-color:var(--gray-300);color:var(--charcoal);}
.btn-outline:hover{border-color:var(--corporate-blue);color:var(--corporate-blue);}
.btn-outline-light{background:transparent;border-color:var(--on-dark-45);color:var(--white);}
.btn-outline-light:hover{border-color:var(--white);background:var(--on-dark-08);}
.btn .arrow{transition:transform var(--dur-fast) var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}

.text-link{
  font-weight:var(--fw-bold);font-size:var(--fs-15);color:var(--corporate-blue);
  display:inline-flex;align-items:center;gap:var(--sp-7);
}
.text-link:hover .arrow{transform:translateX(4px);}
.text-link .arrow{transition:transform var(--dur-fast) var(--ease);}

/* ===== Announcement bar ===== */
.announce{
  background:var(--deep-navy);color:var(--white);
  font-size:var(--fs-13-5);font-weight:var(--fw-medium);text-align:center;
  padding:var(--sp-9) var(--sp-16);
}
.announce a{color:var(--taas-gold);font-weight:var(--fw-bold);margin-left:var(--sp-8);}
.announce a:hover{text-decoration:underline;}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky;top:0;z-index:200;
  background:var(--header-glass);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--gray-100);
  transition:box-shadow var(--dur-base) var(--ease);
}
.site-header.scrolled{box-shadow:var(--shadow-sm);}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);}
.logo{display:inline-flex;align-items:center;}
.logo img{height:46px;width:auto;display:block;}
/* Phone header: logo keeps its size and never slides under Get a Demo */
.site-header .logo{flex:none;}
.footer-brand .logo img{height:40px;}
.nav-links{display:flex;align-items:center;gap:var(--sp-30);margin-left:auto;margin-right:var(--sp-34);}
.nav-links>li{position:relative;}
.nav-links>li>a{
  font-size:var(--fs-15);font-weight:var(--fw-semibold);color:var(--charcoal);
  padding:var(--sp-26) var(--sp-2);display:inline-flex;align-items:center;gap:var(--sp-5);
}
.nav-links>li>a:hover{color:var(--corporate-blue);}
.caret{font-size:var(--fs-10);opacity:.55;}
.dropdown{
  position:absolute;top:100%;left:calc(var(--sp-18) * -1);min-width:280px;
  background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:var(--sp-12);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:all var(--dur-fast) var(--ease);
}
.nav-links li:hover .dropdown,.nav-links li:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{
  display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-11) var(--sp-14);border-radius:var(--radius-sm);font-size:var(--fs-14-5);font-weight:var(--fw-semibold);
}
.dropdown a span{font-size:var(--fs-12-5);font-weight:var(--fw-regular);color:var(--gray-500);}
.dropdown a:hover{background:var(--gray-50);color:var(--corporate-blue);}
.nav-cta{display:flex;align-items:center;gap:var(--sp-14);}
.nav-cta .login{font-size:var(--fs-15);font-weight:var(--fw-semibold);color:var(--gray-500);}
.nav-cta .login:hover{color:var(--corporate-blue);}
.nav-cta .btn{padding:var(--sp-11) var(--sp-22);font-size:var(--fs-14);}
.hamburger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:var(--sp-5);padding:var(--sp-8);}
@media(max-width:420px){.site-header .logo img{height:32px;}.nav-cta{gap:var(--sp-8);}.nav-cta .btn{padding:var(--sp-10) var(--sp-14);font-size:var(--fs-13);}}
@media(max-width:374px){.site-header .logo img{height:28px;}}
.hamburger span{display:block;width:24px;height:2.5px;background:var(--charcoal);border-radius:var(--radius-xs);transition:all var(--dur-base);}

/* ===== Hero ===== */
.hero{
  position:relative;overflow:hidden;
  background:var(--grad-hero);
  color:var(--white);
  padding:var(--sp-96) 0 var(--sp-110);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:var(--grad-hero-glow);
  pointer-events:none;
}
.hero .container{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-64);align-items:center;}
.hero-badge{
  display:inline-flex;align-items:center;gap:var(--sp-8);
  background:var(--on-dark-10);border:1px solid var(--on-dark-22);
  border-radius:var(--radius-pill);padding:var(--sp-7) var(--sp-16);
  font-size:var(--fs-13);font-weight:var(--fw-semibold);letter-spacing:var(--ls-badge);margin-bottom:var(--sp-26);
}
.hero-badge .dot{width:8px;height:8px;border-radius:var(--radius-round);background:var(--success-green);}
.hero h1 .accent{color:var(--taas-gold);}
.hero .sub{font-size:var(--fs-18-5);line-height:var(--lh-relaxed);color:var(--on-dark-85);max-width:540px;margin:var(--sp-24) 0 var(--sp-36);}
.hero-ctas{display:flex;gap:var(--sp-16);flex-wrap:wrap;}
.hero-proof{
  margin-top:var(--sp-44);display:flex;gap:var(--sp-36);flex-wrap:wrap;
  font-size:var(--fs-13-5);color:var(--on-dark-75);
}
.hero-proof strong{display:block;font-size:var(--fs-22);font-weight:var(--fw-extrabold);color:var(--white);}

/* hero visual — orbiting ecosystem with broadcast pulse */
.orbit-sys{
  position:relative;width:470px;height:470px;
  display:grid;place-items:center;margin:0 auto;
}
.orbit-sys>*{grid-area:1/1;}

.os-ripple{
  width:160px;height:160px;border-radius:var(--radius-round);
  border:1.5px solid var(--on-dark-50);
  animation:osRipple 3.8s var(--ease-ripple) infinite;
  z-index:1;
}
.os-ripple--delayed{animation-delay:1.8s;}
@keyframes osRipple{
  0%{transform:scale(1);opacity:.6;}
  100%{transform:scale(3);opacity:0;}
}

.os-ring{border:1.5px dashed var(--on-dark-22);border-radius:var(--radius-round);}
.os-ring.outer{width:450px;height:450px;}
.os-ring.inner{width:290px;height:290px;}

.os-carrier{
  border-radius:var(--radius-round);
  animation:osSpin linear infinite;
  pointer-events:none;
}
.os-carrier.outer{width:450px;height:450px;}
.os-carrier.inner{width:290px;height:290px;animation-direction:reverse;}
@keyframes osSpin{to{transform:rotate(360deg);}}

/* Orbit timing: outer ring 36s and inner ring 26s, three evenly spaced nodes each.
   Carrier and node share duration + delay so the label stays upright. */
.os-carrier.outer,.os-carrier.outer .os-node{animation-duration:36s;}
.os-carrier.inner,.os-carrier.inner .os-node{animation-duration:26s;}
.os-slot-2,.os-slot-2 .os-node{animation-delay:-12s;}
.os-slot-3,.os-slot-3 .os-node{animation-delay:-24s;}
.os-slot-b,.os-slot-b .os-node{animation-delay:-8.667s;}
.os-slot-c,.os-slot-c .os-node{animation-delay:-17.333s;}

.os-node{
  position:absolute;top:0;left:50%;z-index:2;
  display:inline-flex;align-items:center;gap:var(--sp-8);
  background:var(--navy-glass-45);border:1px solid var(--on-dark-32);
  backdrop-filter:blur(6px);
  border-radius:var(--radius-pill);padding:var(--sp-8) var(--sp-18);
  font-size:var(--fs-13);font-weight:var(--fw-bold);color:var(--on-dark-95);
  white-space:nowrap;
  box-shadow:var(--shadow-pill-dark);
  animation:osNode linear infinite;
}
.os-node::before{content:"";width:8px;height:8px;border-radius:var(--radius-round);background:var(--c,var(--white));box-shadow:0 0 10px var(--c,var(--white));}
.os-node--nxt{--c:var(--node-nxt);}
.os-node--paynow{--c:var(--node-paynow);}
.os-node--digital{--c:var(--node-digital);}
.os-node--traffic{--c:var(--node-traffic);}
.os-node--taas{--c:var(--node-taas);}
.os-node--es{--c:var(--success-green);}
@keyframes osNode{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotate(-360deg);}
}
.os-carrier.inner .os-node{animation-name:osNodeRev;}
@keyframes osNodeRev{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotate(360deg);}
}

.os-core{
  position:relative;z-index:3;
  width:160px;height:160px;border-radius:var(--radius-round);
  background:var(--navy-glass-50);
  border:1px solid var(--on-dark-32);
  backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-7);
  box-shadow:var(--shadow-core);
}
.os-mark{height:96px;width:auto;display:block;filter:var(--shadow-mark);}
.os-name{font-size:var(--fs-10-5);font-weight:var(--fw-bold);letter-spacing:var(--ls-core);color:var(--on-dark-85);}

/* ===== Trust strip (in the stylesheet; not used on the homepage) ===== */
.trust{background:var(--white);padding:var(--sp-34) 0;border-bottom:1px solid var(--gray-100);}
.trust p{
  text-align:center;font-size:var(--fs-12-5);font-weight:var(--fw-bold);letter-spacing:var(--ls-caption);
  text-transform:uppercase;color:var(--gray-500);margin-bottom:var(--sp-20);
}
.trust-logos{display:flex;justify-content:center;align-items:center;gap:var(--sp-54);flex-wrap:wrap;}
.trust-logos span{
  font-weight:var(--fw-extrabold);font-size:var(--fs-17);color:var(--gray-400);letter-spacing:var(--ls-wordmark);
  transition:color var(--dur-base);
}
.trust-logos span:hover{color:var(--corporate-blue);}

/* ===== Section scaffolding ===== */
.section{padding:var(--section-y) 0;}
.section-head{max-width:680px;margin-bottom:var(--sp-56);}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head .lead{margin-top:var(--sp-16);}

/* ===== Product cards (in the stylesheet; not used on the homepage) ===== */
.platform{background:var(--gray-50);}
.platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-24);}
.p-card{
  background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius);
  padding:var(--sp-32) var(--sp-28) var(--sp-28);position:relative;overflow:hidden;
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);
  display:flex;flex-direction:column;
}
.p-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--accent,var(--corporate-blue));}
.p-card:hover{transform:var(--lift-md);box-shadow:var(--shadow-md);}
.p-card .icon{
  width:50px;height:50px;border-radius:var(--radius-md);margin-bottom:var(--sp-20);
  background:color-mix(in srgb,var(--accent,var(--corporate-blue)) 12%,var(--white));
  color:var(--accent,var(--corporate-blue));
  display:grid;place-items:center;font-size:var(--fs-22);
}
.p-card .tag{
  position:absolute;top:var(--sp-22);right:var(--sp-22);
  font-size:var(--fs-10-5);font-weight:var(--fw-extrabold);letter-spacing:var(--ls-tag);text-transform:uppercase;
  color:var(--accent,var(--corporate-blue));
  background:color-mix(in srgb,var(--accent,var(--corporate-blue)) 10%,var(--white));
  padding:var(--sp-4) var(--sp-10);border-radius:var(--radius-pill);
}
.p-card h3{margin-bottom:var(--sp-10);}
.p-card p{font-size:var(--fs-14-5);color:var(--gray-500);flex:1;margin-bottom:var(--sp-18);}
.p-card .text-link{color:var(--accent,var(--corporate-blue));font-size:var(--fs-14);}

/* Product accents — shared by cards, panels, personas */
.p-card.nxt,.accent-nxt{--accent:var(--digital-blue);}
.p-card.traffic,.accent-traffic{--accent:var(--corporate-blue);}
.p-card.paynow,.accent-paynow{--accent:var(--paynow-purple);}
.p-card.taas,.accent-taas{--accent:var(--taas-gold);}
.p-card.digital,.accent-digital{--accent:var(--mid-blue);}
.p-card.integrations{--accent:var(--teal);}
.accent-taas-deep{--accent:var(--taas-gold-deep);}
.accent-navy{--accent:var(--deep-navy);}

/* ===== Full Platform — tabbed slider ===== */
.pf-tabs{
  display:flex;gap:var(--sp-8);flex-wrap:nowrap;overflow-x:auto;
  border-bottom:1px solid var(--gray-300);margin-bottom:var(--sp-48);
  scrollbar-width:none;
}
.pf-tabs::-webkit-scrollbar{display:none;}
.pf-tab{
  display:inline-flex;align-items:center;gap:var(--sp-9);
  background:none;border:0;cursor:pointer;
  font-family:var(--font);font-size:var(--fs-15);font-weight:var(--fw-bold);
  color:var(--gray-500);
  padding:var(--sp-14) var(--sp-18);white-space:nowrap;
  border-bottom:2.5px solid transparent;margin-bottom:calc(var(--sp-1) * -1);
  transition:color var(--dur-base);
}
.pf-tab::before{
  content:"";width:8px;height:8px;border-radius:var(--radius-round);
  background:var(--gray-300);transition:background var(--dur-base);
}
.pf-tab:hover{color:var(--charcoal);}
.pf-tab.active{color:var(--charcoal);border-bottom-color:var(--charcoal);}
.pf-tab.active::before{background:var(--tab-accent,var(--corporate-blue));}

.pf-viewport{overflow:hidden;}
.pf-track{
  display:flex;
  transition:transform var(--dur-slide) var(--ease-slide);
}
.pf-panel{
  flex:0 0 100%;min-width:100%;
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-64);align-items:center;
  padding:var(--sp-8) var(--sp-4);
}
.pf-badge{
  display:inline-block;
  font-size:var(--fs-11-5);font-weight:var(--fw-extrabold);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--accent,var(--corporate-blue));
  background:color-mix(in srgb,var(--accent,var(--corporate-blue)) 10%,var(--white));
  border:1px solid color-mix(in srgb,var(--accent,var(--corporate-blue)) 22%,var(--white));
  padding:var(--sp-6) var(--sp-14);border-radius:var(--radius-pill);margin-bottom:var(--sp-20);
}
.pf-title{font-size:var(--fs-panel-title);font-weight:var(--fw-extrabold);margin-bottom:var(--sp-16);}
.pf-copy>p{font-size:var(--fs-16-5);color:var(--gray-500);line-height:var(--lh-loose);margin-bottom:var(--sp-24);max-width:560px;}
.pf-checks{margin-bottom:var(--sp-30);}
.pf-checks li{
  position:relative;padding-left:var(--sp-34);margin-bottom:var(--sp-13);
  font-size:var(--fs-15);font-weight:var(--fw-medium);
}
.pf-checks li::before{
  content:"\2713";position:absolute;left:0;top:var(--sp-1);
  width:22px;height:22px;border-radius:var(--radius-round);
  background:var(--accent,var(--corporate-blue));color:var(--white);
  font-size:var(--fs-12);font-weight:var(--fw-extrabold);
  display:grid;place-items:center;
}
.btn-dark{background:var(--deep-navy);color:var(--white);border-radius:var(--radius-pill);}
.btn-dark:hover{background:var(--charcoal);transform:var(--lift-sm);box-shadow:var(--shadow-btn-dark);}

.pf-stat{
  border-radius:var(--radius-xl);color:var(--white);
  padding:var(--sp-44) var(--sp-40);min-height:400px;
  display:flex;flex-direction:column;
}
.pf-stat--taas{background:var(--grad-taas);}
.pf-stat--traffic{background:var(--grad-traffic);}
.pf-stat--nxt{background:var(--grad-nxt);}
.pf-stat--paynow{background:var(--grad-paynow);}
.pf-stat--integrations{background:var(--grad-integrations);}
.pf-stat strong{
  font-size:var(--fs-stat-xl);font-weight:var(--fw-extrabold);line-height:var(--lh-none);
  margin-bottom:var(--sp-12);letter-spacing:var(--ls-snug);
}
.pf-stat>span{font-size:var(--fs-15-5);color:var(--on-dark-82);max-width:340px;}
.pf-chips{margin-top:auto;padding-top:var(--sp-36);display:flex;flex-wrap:wrap;gap:var(--sp-10);}
.pf-chips em{
  font-style:normal;font-size:var(--fs-13-5);font-weight:var(--fw-semibold);
  background:var(--on-dark-14);border:1px solid var(--on-dark-28);
  border-radius:var(--radius-sm);padding:var(--sp-7) var(--sp-14);
}

/* ===== Persona / who we help ===== */
.persona-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-24);}
.persona-card{
  background:var(--white);
  border:1px solid var(--gray-100);
  border-radius:var(--radius);padding:var(--sp-32) var(--sp-26) var(--sp-28);
  display:flex;flex-direction:column;
  transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease);
}
.persona-card:hover{transform:var(--lift-md);box-shadow:var(--shadow-md);}
.pc-photo{
  width:92px;height:92px;border-radius:var(--radius-round);
  padding:var(--sp-5);margin-bottom:var(--sp-20);
  background:color-mix(in srgb,var(--accent,var(--corporate-blue)) 14%,var(--white));
  border:2.5px solid var(--accent,var(--corporate-blue));
}
.pc-photo img{
  width:100%;height:100%;object-fit:cover;border-radius:var(--radius-round);
}
.persona-card h3{font-size:var(--fs-18);margin-bottom:var(--sp-10);color:var(--charcoal);}
.persona-card p{font-size:var(--fs-14);line-height:var(--lh-body);color:var(--gray-500);flex:1;margin-bottom:var(--sp-16);}
.persona-card .text-link{color:var(--accent,var(--corporate-blue));font-size:var(--fs-13-5);}

/* ===== Stats band — ombre ===== */
.stats{
  background:var(--grad-ombre);
  color:var(--deep-navy);padding:var(--sp-84) 0;
}
.stat:first-child strong{color:var(--white);}
.stat:first-child span{color:var(--on-dark-85);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-32);text-align:center;}
.stat strong{
  display:block;font-size:var(--fs-stat-lg);font-weight:var(--fw-extrabold);line-height:var(--lh-none);
  color:var(--deep-navy);margin-bottom:var(--sp-10);font-variant-numeric:tabular-nums;
}
.stat span{font-size:var(--fs-14-5);color:var(--navy-text-74);font-weight:var(--fw-medium);max-width:200px;margin:0 auto;display:block;}

/* ===== Testimonials — faces of radio mosaic ===== */
.quotes{
  position:relative;overflow:hidden;
  background:var(--deep-navy);color:var(--white);
}
.quotes-mosaic{
  position:absolute;inset:0;
  display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);
}
.quotes-mosaic img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(35%);
}
.quotes::after{
  content:"";position:absolute;inset:0;
  background:var(--grad-photo-scrim);
}
.quotes-inner{position:relative;z-index:2;}
.quotes h2{color:var(--white);}
.quote-slider{position:relative;max-width:860px;margin:0 auto;}
.quote-card{
  display:none;text-align:center;padding:0 var(--sp-24);
  animation:fadeIn var(--dur-fade) var(--ease);
}
.quote-card.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.quote-card .avatar{
  width:72px;height:72px;border-radius:var(--radius-round);object-fit:cover;
  border:3px solid var(--taas-gold);
  margin:0 auto var(--sp-22);display:block;
  box-shadow:var(--shadow-avatar);
}
.quote-card blockquote{font-size:var(--fs-quote);font-weight:var(--fw-semibold);line-height:var(--lh-quote);color:var(--white);margin-bottom:var(--sp-28);}
.quote-card cite{font-style:normal;font-size:var(--fs-14-5);color:var(--on-dark-70);}
.quote-card cite strong{display:block;font-size:var(--fs-15-5);color:var(--taas-gold);}
.quote-nav{display:flex;justify-content:center;gap:var(--sp-10);margin-top:var(--sp-36);}
.quote-dot{width:10px;height:10px;border-radius:var(--radius-round);background:var(--on-dark-30);border:0;cursor:pointer;transition:all var(--dur-base);}
.quote-dot.active{background:var(--taas-gold);transform:scale(1.25);}

/* ===== Resources — ombre marquee ===== */
.resources{
  position:relative;overflow:hidden;
  background:var(--grad-ombre-fade);
  padding-bottom:var(--sp-104);
}
.res-marquee{
  overflow:hidden;width:100%;
  -webkit-mask-image:var(--mask-edge-fade);
  mask-image:var(--mask-edge-fade);
}
.res-row{
  display:flex;gap:var(--sp-24);width:max-content;
  padding:var(--sp-12) 0;
  animation:resScroll 48s linear infinite;
}
.res-marquee:hover .res-row{animation-play-state:paused;}
@keyframes resScroll{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-50% - 12px));}
}
.res-card{
  flex:0 0 290px;
  background:var(--white);
  border-radius:var(--radius-lg);padding:var(--sp-10) var(--sp-10) var(--sp-18);
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-float);
  transition:transform var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease);
}
.res-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-float-hover);}
.res-card img{
  width:100%;height:200px;object-fit:cover;
  border-radius:var(--radius-md);margin-bottom:var(--sp-16);
}
.res-card .kind{
  font-size:var(--fs-10-5);font-weight:var(--fw-extrabold);letter-spacing:var(--ls-kind);text-transform:uppercase;
  color:var(--mid-blue);padding:0 var(--sp-8);margin-bottom:var(--sp-5);
}
.res-card h3{font-size:var(--fs-16-5);line-height:var(--lh-card-title);padding:0 var(--sp-8);color:var(--charcoal);}

/* ===== Final CTA ===== */
.final-cta{
  background:var(--grad-navy);
  color:var(--white);text-align:center;padding:var(--sp-110) 0;position:relative;overflow:hidden;
}
.final-cta::before{
  content:"";position:absolute;inset:0;
  background:var(--grad-navy-glow);
}
.final-cta .container{position:relative;max-width:760px;}
.final-cta h2{
  font-size:var(--fs-cta-title);font-weight:var(--fw-extrabold);
  margin-bottom:var(--sp-20);
}
.final-cta p{font-size:var(--fs-18);color:var(--on-dark-82);margin-bottom:var(--sp-38);}
.final-cta .hero-ctas{justify-content:center;}
.final-cta .note{font-size:var(--fs-13);color:var(--on-dark-60);margin-top:var(--sp-22);}
.final-cta .note a{color:var(--taas-gold);font-weight:var(--fw-bold);}

/* ===== Footer ===== */
.site-footer{background:var(--deep-navy);color:var(--on-dark-72);padding:var(--sp-72) 0 var(--sp-36);font-size:var(--fs-14);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:var(--sp-40);margin-bottom:var(--sp-54);}
.footer-brand .logo{color:var(--white);margin-bottom:var(--sp-16);}
.footer-brand p{font-size:var(--fs-13-5);line-height:var(--lh-loose);max-width:260px;}
.site-footer h4{
  color:var(--white);font-size:var(--fs-12-5);font-weight:var(--fw-extrabold);letter-spacing:var(--ls-label);
  text-transform:uppercase;margin-bottom:var(--sp-18);
}
.site-footer li{margin-bottom:var(--sp-11);}
.site-footer li a:hover{color:var(--taas-gold);}
.footer-bottom{
  border-top:1px solid var(--on-dark-12);padding-top:var(--sp-28);
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-18);flex-wrap:wrap;
  font-size:var(--fs-13);color:var(--on-dark-50);
}
.footer-bottom a:hover{color:var(--taas-gold);}

/* ===== Scroll reveal ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease);}
.reveal.visible{opacity:1;transform:none;}

/* ===== Responsive ===== */
@media(max-width:1024px){
  /* minmax(0,1fr): without it the 470px orbit sets the column's minimum width
     and the hero text is clipped on phones. The orbit is centered with a calculated margin (auto margins and
     justify-self:center both stop centering once it is wider than the column). */
  .hero .container{grid-template-columns:minmax(0,1fr);gap:var(--sp-48);}
  .orbit-sys{transform:scale(.85);justify-self:start;margin-left:calc((100% - 470px) / 2);}
  .pf-panel{grid-template-columns:1fr;gap:var(--sp-36);}
  .pf-stat{min-height:320px;}
  .persona-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-44);}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;}
}
@media(max-width:720px){
  .nav-links,.nav-cta .login{display:none;}
  .hamburger{display:flex;}
  .mobile-menu{
    display:none;flex-direction:column;gap:var(--sp-4);
    padding:var(--sp-14) var(--sp-24) var(--sp-24);background:var(--white);border-top:1px solid var(--gray-100);
  }
  .mobile-menu.open{display:flex;}
  .mobile-menu a{padding:var(--sp-12) var(--sp-4);font-weight:var(--fw-semibold);font-size:var(--fs-16);border-bottom:1px solid var(--gray-100);}
  .hero{padding:var(--sp-64) 0 var(--sp-80);}
  .section{padding:var(--section-y-mobile) 0;}
  .persona-grid{grid-template-columns:1fr;}
  .res-card{flex-basis:240px;}
  .res-card img{height:160px;}
  .orbit-sys{transform:scale(.62);margin:calc(var(--sp-70) * -1) 0 calc(var(--sp-70) * -1) calc((100% - 470px) / 2);}
  .quotes-mosaic{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(min-width:721px){.mobile-menu{display:none!important;}}

/* ============================================================
   PROPOSED — pending approval (not on the homepage)
   Form fields, derived from .btn-outline: same 2px gray-300 border,
   10px radius, 15px type and height as a button, corporate-blue on
   hover/focus. Error state deliberately omitted until an error
   color is chosen (the 2026 palette has no red).
   ============================================================ */
.field{display:flex;flex-direction:column;gap:var(--sp-8);}
.field-label{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--charcoal);}
.field-label .req{color:var(--corporate-blue);margin-left:var(--sp-2);}
.field-help{font-size:var(--fs-13);color:var(--gray-500);}
.input,.select select,.textarea{
  width:100%;font-family:var(--font);font-size:var(--fs-15);font-weight:var(--fw-medium);color:var(--charcoal);
  background:var(--white);border:2px solid var(--gray-300);border-radius:var(--radius-btn);
  padding:var(--sp-15) var(--sp-16);line-height:var(--lh-body);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--gray-500);font-weight:var(--fw-regular);}
.input:hover,.select select:hover,.textarea:hover{border-color:var(--corporate-blue);}
.input:focus,.select select:focus,.textarea:focus{outline:none;border-color:var(--corporate-blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--corporate-blue) 16%,transparent);}
.textarea{min-height:140px;resize:vertical;}
.select{position:relative;}
.select select{appearance:none;-webkit-appearance:none;padding-right:var(--sp-44);cursor:pointer;}
.select::after{content:"\25BE";position:absolute;right:var(--sp-18);top:50%;transform:translateY(-50%);font-size:var(--fs-12);color:var(--gray-500);pointer-events:none;}
.check{display:flex;align-items:flex-start;gap:var(--sp-10);font-size:var(--fs-14-5);font-weight:var(--fw-medium);cursor:pointer;}
.check input{width:20px;height:20px;margin-top:var(--sp-1);accent-color:var(--corporate-blue);flex:0 0 auto;cursor:pointer;}
.input:disabled,.select select:disabled,.textarea:disabled{background:var(--gray-50);color:var(--gray-500);cursor:not-allowed;border-color:var(--gray-100);}
.search-field{position:relative;}
.search-field .input{padding-left:var(--sp-44);border-radius:var(--radius-pill);}
.search-field svg{position:absolute;left:var(--sp-16);top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--gray-500);pointer-events:none;}