:root {
      --blue: #1A5490;
      --blue-dark: #0f3460;
      --blue-light: #2471a3;
      --orange: #c4622a;
      --orange-light: #d4844a;
      --bg: #0d1628;
      --bg2: #111d35;
      --card: rgba(255,255,255,0.08);
      --card-border: rgba(255,255,255,0.16);
      --text: #ffffff;
      --muted: rgba(255,255,255,0.72);
      --heading-font: 'Barlow Condensed', sans-serif;
      --body-font: 'DM Sans', sans-serif;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      font-family: var(--body-font);
      background: #1a2f4a;
      color: var(--text);
      overflow-x: hidden;
    }

    body::before {
      content:'';
      position:fixed; inset:0; pointer-events:none; z-index:0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
      opacity: 0.4;
    }

    /* ── TOPBAR ── */
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;padding:0 24px;height:68px;background:linear-gradient(90deg, #deeef8 0%, #4A6D8C 320px, #4A6D8C 100%);box-shadow:0 4px 24px rgba(0,0,0,0.45);border-bottom:1px solid rgba(255,255,255,0.03);}
.topbar-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;flex-shrink:0;margin-right:20px;}
.topbar-logo-icon{width:30px;height:30px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;}
.topbar-logo-text{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:#fff;line-height:1;}
.topbar-logo-sub{font-size:8px;color:rgba(255,255,255,0.6);letter-spacing:1.5px;text-transform:uppercase;display:block;margin-top:1px;}
.topbar-nav{margin-left:64px;display:flex;align-items:center;gap:28px;margin-right:auto;}

.topbar-nav a:hover{color:#fff;}
.bundle-rotator{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.18);border-radius:20px;padding:5px 12px 5px 10px;min-width:320px;flex-shrink:0;margin-right:28px;}
.bundle-rotator-icon{font-size:13px;flex-shrink:0;}
.bundle-rotator-track{position:relative;height:19px;overflow:hidden;flex:1;}
.bundle-rotator-item{position:absolute;top:0;left:0;width:100%;font-size:12px;font-weight:600;color:rgba(255,255,255,0.9);white-space:nowrap;opacity:0;transform:translateY(100%);transition:opacity 0.5s,transform 0.5s;}
.bundle-rotator-item.active{opacity:1;transform:translateY(0);}
.bundle-rotator-item.exit{opacity:0;transform:translateY(-100%);}
.bundle-rotator-cta{font-size:11px;font-weight:700;color:#fff;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);border-radius:10px;padding:3px 9px;cursor:pointer;flex-shrink:0;}
.topbar-actions{display:flex;align-items:center;gap:28px;flex-shrink:0;}
.btn-signin,.btn-trial{background:none;border:none;padding:0;color:rgba(255,255,255,0.85);font-size:16px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:none;}

/* ── HERO ── */
    .hero {
      min-height:auto; display:flex; align-items:center;
      position:relative; overflow:visible;
      padding: 120px 48px 100px;
    }
    
    
    .orb {
      position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none;
      animation: orbFloat 12s ease-in-out infinite;
    }
    .orb-1 { width:600px; height:600px; background:rgba(26,84,144,0.25); top:-100px; right:-100px; }
    .orb-2 { width:400px; height:400px; background:rgba(196,98,42,0.15); bottom:-50px; left:10%; animation-delay:-4s; }
    .orb-3 { width:300px; height:300px; background:rgba(26,84,144,0.15); top:40%; left:-50px; animation-delay:-8s; }
    @keyframes orbFloat { 0%,100%{transform:translate(0,0)} 33%{transform:translate(20px,-30px)} 66%{transform:translate(-15px,20px)} }

    .hero-content {
      position:relative; z-index:1; max-width:1300px; margin:0 auto; width:100%;
      display:grid; grid-template-columns:1fr 680px; gap:60px; align-items:flex-start;
    }
    .hero-eyebrow {
      grid-column:1/-1;
      display:block; width:100%; text-align:center;
      color:var(--orange);
      font-size:24px; font-weight:700; letter-spacing:0.5px; line-height:1.3;
      margin:0; transform:translateY(-20px);
    }
    .hero-eyebrow .he-light { color:rgba(255,255,255,0.85); }
    .hero-eyebrow .he-pipe  { color:rgba(255,255,255,0.4); }
    .hero-eyebrow .he-gold  { color:var(--orange); }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.5)} }
    .hero-headline{font-family:var(--heading-font);font-size:80px;font-weight:900;line-height:0.95;letter-spacing:-1px;text-transform:uppercase;margin-bottom:28px;}
    
    .h-line{display:block;background:linear-gradient(to right,#ffffff,#e8d5b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.word-accent{background:linear-gradient(135deg,#c4622a,#d4844a,#d4a04a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.problem-item .word-accent,.ai-capability .word-accent,.section-title .word-accent{-webkit-text-fill-color:transparent !important;background:linear-gradient(135deg,#c4622a,#d4844a,#d4a04a) !important;-webkit-background-clip:text !important;background-clip:text !important;}
    .hero-sub {
      font-size:18px; line-height:1.7; color:var(--muted);
      margin-bottom:40px; max-width:480px;
    }
    .hero-stax-way {
      display: block;
      margin-top: 10px;
      font-family: "Barlow Condensed", sans-serif;
      font-weight: 900;
      font-size: 25px;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.90);
    }
    .hero-sub strong { color:white; font-weight:600; }
    .hero-actions { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
    .btn-primary {
      display:inline-flex; align-items:center; gap:10px;
      padding:16px 32px; background:var(--orange); color:white;
      border:none; border-radius:8px; font-size:16px; font-weight:700;
      cursor:pointer; text-decoration:none; transition:all 0.25s;
      font-family:var(--body-font); position:relative; overflow:hidden;
    }
    .btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent); }
    .btn-primary:hover { }
    .hero-trust { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
    .trust-item { display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,0.7); }
    .trust-item::before { content:'✓'; color:var(--orange); font-weight:700; }

    /* Floating tool cards */
    .hero-visual {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
    }
    .stax-stack {
      position: relative;
      width: 680px;
      height: 480px;
      margin-left: auto;
      margin-right: 0;
      margin-top: 50px;
      overflow: visible;
    }
    .stax-card {
      position: absolute;
      top: 0; left: 0;
      width: 680px;
      height: 460px;               /* 2:1 image (680x340) + info sized to the tallest blurb */
      display: flex;
      flex-direction: column;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 12px 40px rgba(0,0,0,0.50);
      cursor: pointer;
      overflow: hidden;
    }
    .stax-card-screenshot {
      display: block;
      width: 100%;
      aspect-ratio: 2 / 1;
      flex-shrink: 0;
      object-fit: cover;
      background: #ffffff;
    }
    .stax-card-placeholder {
      width: 100%;
      aspect-ratio: 2 / 1;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .stax-card-placeholder-icon {
      font-size: 64px;
      opacity: 0.22;
      line-height: 1;
      margin-bottom: 10px;
    }
    .stax-card-placeholder-name {
      font-family: "Barlow Condensed", sans-serif;
      font-weight: 800;
      font-size: 20px;
      color: #ffffff;
      text-align: center;
      padding: 0 20px;
    }
    .stax-card-placeholder-sub {
      font-family: "DM Sans", sans-serif;
      font-size: 12px;
      color: rgba(255,255,255,0.55);
      margin-top: 6px;
    }
    .stax-card-info {
      flex: 1;
      background: #ffffff;
      padding: 16px 20px;
      display: flex;
      align-items: center;   /* centre shorter blurbs in the extra white space */
      gap: 12px;
    }
    .stax-card-info-icon { font-size: 30px; line-height: 1; flex-shrink: 0; }
    .stax-card-info-text { overflow: hidden; }
    .stax-card-info-name {
      font-family: "Barlow Condensed", sans-serif;
      font-weight: 700;
      font-size: 16px;
      color: #1a1a2e;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .stax-card-info-benefit {
      font-family: "DM Sans", sans-serif;
      font-size: 13px;
      color: rgba(0,0,0,0.55);
      line-height: 1.45;
      margin-top: 3px;
    }
    .stax-tagline {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-top: 60px;
      margin-bottom: 0px;
      margin-left: auto;
      margin-right: 110px;
    }
    .stax-tagline-pre,
    .stax-tagline-post {
      font-family: "Barlow Condensed", sans-serif;
      font-weight: 700;
      font-size: 22px;
      letter-spacing: 0.10em;
      color: rgba(255,255,255,0.45);
    }
    .stax-tagline-stax {
      font-family: "Barlow Condensed", sans-serif;
      font-weight: 900;
      font-size: 42px;
      letter-spacing: 0.06em;
      line-height: 1;
      background: linear-gradient(135deg, #c4622a, #d4844a, #d4a04a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    /* Below 1400 the wider card no longer fits beside the headline, so drop the
       hero to a single stacked column and centre the card. */
    @media (max-width: 1400px) {
      .hero-content { grid-template-columns: 1fr; gap: 48px; }
      .stax-stack { margin: 40px auto 0; }
      .stax-tagline { margin-left: 0; justify-content: center; }
    }
    @media (max-width: 767px) {
      .stax-stack { width: 320px; height: 320px; }
      .stax-card { width: 300px; height: auto; }
      .stax-tagline { display: none; }
    }
    
    .stats-strip {
      background:#4A6D8C; padding:40px 48px; position:relative; overflow:hidden;
    }
    .stats-strip::before {
      content:''; position:absolute; top:0; left:0; right:0; height:1px;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
    }
    .stats-inner {
      max-width:1200px; margin:0 auto;
      display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
    }
    .stat-item { text-align:center; }
    .stat-num { font-family:var(--heading-font); font-size:52px; font-weight:900; color:white; line-height:1; }
    .stat-num span { color:rgba(196,98,42,0.85); }
    .stat-from { font-size:36px; }
    .stat-label { font-size:13px; color:rgba(255,255,255,0.75); margin-top:4px; font-weight:500; text-transform:uppercase; letter-spacing:1px; }
    .stat-divider { width:1px; height:60px; background:rgba(255,255,255,0.2); }

    /* ── SECTIONS ── */
    section { padding:100px 48px; position:relative; }
    .section-inner { max-width:1200px; margin:0 auto; }
    .section-tag{display:flex;align-items:center;justify-content:center;gap:12px;font-size:28px;font-weight:700;text-transform:uppercase;letter-spacing:3px;margin:20px auto 28px;background:linear-gradient(135deg,#d4844a,#d4a04a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:'Barlow Condensed',sans-serif}
.section-tag::before,.section-tag::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#d4844a,transparent);max-width:60px}
    .section-title { font-family:var(--heading-font); font-size:clamp(36px,5vw,60px); font-weight:900; line-height:1; margin-bottom:20px; text-align:center; }.cta-section .h-line{background:none;-webkit-text-fill-color:#ffffff;color:#ffffff;}
    .section-sub { font-size:17px; color:var(--muted); line-height:1.7; max-width:560px; text-align:center; margin:0 auto; }

    /* ── PROBLEM ── */
    .problem { background:#1a2f4a; }
    /* Trimmed top padding for the layout — but that also left the section 60px
       short of the headroom the other two anchor targets get, so the sticky
       68px topbar clipped the SOLUTION heading on arrival. scroll-margin-top
       makes up the difference: 40px padding + 60px margin lands the heading in
       the same place as the sections that keep the default 100px padding. */
    .pillars { background:#1a2f4a; padding-top:40px; scroll-margin-top:60px; }
    /* The image sits centred within a wider stage; the pillar taglines overlay the
       image (centred under each heading) while the bullet lists sit out in the side
       margins, clear of the pill graphic. All positioned as a % of the stage so
       they scale and stay aligned. Pillar-name text shows only in the mobile
       stacked fallback below. */
    .pillars-figure { position:relative; width:100%; max-width:1200px; margin:0 auto; }
    .pillars-img { display:block; width:64%; height:auto; margin:0 auto; }
    .pillar-ann { position:absolute; left:0; right:0; height:20%; }
    .pillar-ann--1 { top:8.6%; }
    .pillar-ann--2 { top:29.3%; }
    .pillar-ann--3 { top:49.6%; }
    .pillar-ann--4 { top:69.7%; }
    .pillar-name { display:none; }
    .pillar-tagline {
      position:absolute; top:64%; left:53%; transform:translateX(-50%);
      width:40%; text-align:center;
      font-family:var(--body-font); font-weight:600;
      font-size:clamp(13px,1.5vw,17px); line-height:1.35;
      color:rgba(255,255,255,0.9);
    }
    .pillar-ann--1 .pillar-tagline { left:52.3%; }
    .pillar-ann--2 .pillar-tagline { left:53.6%; }
    .pillar-ann--3 .pillar-tagline { left:54.0%; }
    .pillar-ann--4 .pillar-tagline { left:52.8%; }
    .pillar-bullets {
      position:absolute; top:50%; transform:translateY(-50%);
      list-style:none; margin:0; padding:0;
      display:flex; flex-direction:column; gap:8px;
      font-family:var(--body-font);
      font-size:18px; line-height:1.6;
      color:rgba(255,255,255,0.65);
    }
    .pillar-bullets li { position:relative; padding-left:22px; }
    .pillar-bullets li::before { content:'\00BB'; position:absolute; left:0; top:0; color:#c4622a; font-weight:700; font-size:1.15em; }
    .pillar-bullets.side-right { right:0.5%; width:17%; text-align:left; }
    .pillar-bullets.side-left { left:0.5%; width:17%; text-align:left; }
    /* Mobile/tablet: overlay can't stay clear once the image fills the width, so
       stack the annotations as a labelled list beneath it. */
    @media(max-width:900px) {
      .pillars-figure { display:flex; flex-direction:column; }
      .pillars-img { width:100%; max-width:460px; }
      .pillar-ann { position:static; height:auto; margin-top:26px; }
      .pillar-name { display:block; font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase; font-size:20px; color:#e8d5b8; margin-bottom:6px; }
      .pillar-tagline, .pillar-ann--1 .pillar-tagline, .pillar-ann--2 .pillar-tagline, .pillar-ann--3 .pillar-tagline, .pillar-ann--4 .pillar-tagline { position:static; transform:none; left:auto; top:auto; width:auto; text-align:left; margin-bottom:10px; }
      .pillar-bullets, .pillar-bullets.side-right, .pillar-bullets.side-left { position:static; transform:none; left:auto; right:auto; width:auto; }
    }
    .problem-grid { display:flex; flex-direction:column; gap:14px; margin-top:60px; } .prob-row { display:grid; grid-template-columns:1fr 56px 1fr; align-items:stretch; gap:0; } .prob-arrow { display:flex; align-items:center; justify-content:center; align-self:stretch; }
    .problem-list { display:flex; flex-direction:column; gap:14px; }
    .problem-item {
      background:#c8cfd8; color:#1a2535;
      display:flex; gap:16px; align-items:flex-start; padding:20px; border-radius:12px;
      background:rgba(255,255,255,0.05); border:1px solid rgba(196,98,42,0.20);
      border-left:3px solid #c4622a; transition:all 0.3s; box-sizing:border-box;
    }
    .problem-item:hover { background:rgba(255,255,255,0.08); border-color:rgba(196,98,42,0.3); }
    .problem-icon { font-size:22px; flex-shrink:0; margin-top:2px; }
    .problem-text strong { display:block; font-size:25px; color:white; margin-bottom:6px; font-family:"Barlow Condensed",sans-serif; font-weight:800; }
    .problem-text span { font-size:18px; color:rgba(255,255,255,0.65); line-height:1.6; }

    /* AI Advantage panel */
    .ai-advantage { background:none; border:none; border-radius:0; padding:0; }
    .ai-advantage-title { font-family:var(--heading-font); font-size:26px; font-weight:900; color:white; margin-bottom:8px; line-height:1.1; }
    .ai-advantage-title span { color:var(--orange); }
    .ai-advantage-sub { font-size:13px; color:var(--muted); margin-bottom:24px; line-height:1.6; }
    .ai-capability-list { display:flex; flex-direction:column; gap:10px; }
    .ai-capability {
      background:#c8cfd8; color:#1a2535;
      display:flex; align-items:flex-start; gap:16px; padding:20px;
      background:rgba(255,255,255,0.05); border:1px solid rgba(74,109,140,0.20);
      border-left:3px solid #4A6D8C; border-radius:12px; transition:all 0.3s; box-sizing:border-box;
    }
    .ai-capability:hover { background:rgba(255,255,255,0.08); border-color:rgba(74,109,140,0.4); }
    .ai-cap-icon { font-size:18px; flex-shrink:0; margin-top:2px; }
    .ai-cap-text h3 { color:white; font-family:"Barlow Condensed",sans-serif; font-size:25px; font-weight:800; margin:0 0 6px 0; }
    .ai-cap-text p { font-size:18px; color:rgba(255,255,255,0.65); line-height:1.6; margin:0; }
    .ai-cap-text h3 .word-accent { font-size:inherit; font-family:inherit; font-weight:inherit; }
    .ai-cap-text p .word-accent { font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:inherit; }
    .ai-badge {
      margin-top:20px; padding:14px 20px;
      background:rgba(196,98,42,0.1); border:1px solid rgba(196,98,42,0.22);
      border-radius:10px; text-align:center; font-size:13px; color:rgba(255,255,255,0.75); line-height:1.7;
    }
    .ai-badge strong { color:var(--orange); display:block; font-size:15px; font-family:var(--heading-font); font-weight:800; }

    /* ── HOW IT WORKS ── */
    .steps { display:flex; gap:0; margin-top:60px; position:relative; }
    .steps::before {
      content:''; position:absolute; top:40px; left:40px; right:40px; height:2px;
      background:var(--blue); z-index:0;
    }
    .step { flex:1; text-align:center; padding:0 24px; position:relative; z-index:1; }
    .step-num {
      width:80px; height:80px; border-radius:50%;
      background:#1a2f4a; border:2px solid rgba(255,255,255,0.2);
      display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
      font-family:var(--heading-font); font-size:32px; font-weight:900; color:white; position:relative;
    }
    .step-num::after { content:''; position:absolute; inset:-6px; border-radius:50%; background:var(--bg); z-index:-1; }
    .step-icon { font-size:24px; position:absolute; bottom:-8px; right:-8px; }
    .step h3 { font-family:var(--heading-font); font-size:25px; font-weight:800; margin-bottom:10px; }
    .step p { font-size:18px; color:rgba(255,255,255,0.92); line-height:1.6; }

    /* ── TOOLS ── */
    .tools-bg { background:var(--bg2); }
    .tools-header { display:flex; flex-direction:column; align-items:center; margin-bottom:50px; gap:20px; }
    .tools-header .section-title { text-align:center; }
    .tools-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
    .tool-tile {
      background:var(--card); border:1px solid var(--card-border);
      border-radius:16px; padding:28px; cursor:pointer;
      transition:all 0.3s; position:relative; overflow:hidden;
      text-decoration:none; color:inherit; display:block;
    }
    .tool-tile::before {
      content:''; position:absolute; top:0; left:0; right:0; height:3px;
      background:linear-gradient(90deg,var(--blue),var(--orange));
      transform:scaleX(0); transition:transform 0.3s; transform-origin:left;
    }
    .tool-tile:hover { background:rgba(255,255,255,0.1); transform:translateY(-4px); border-color:rgba(26,84,144,0.5); }
    .tool-tile:hover::before { transform:scaleX(1); }
    .tile-icon { font-size:32px; margin-bottom:14px; }
    .tile-name { font-size:16px; font-weight:700; color:white; margin-bottom:8px; }
    .tile-desc { font-size:13px; color:rgba(255,255,255,0.65); line-height:1.6; margin-bottom:16px; }
    .tile-tags { display:flex; gap:8px; flex-wrap:wrap; }
    .tile-tag {
      font-size:11px; color:var(--orange); font-weight:700;
      background:rgba(196,98,42,0.12); padding:4px 10px; border-radius:20px;
      border:1px solid rgba(196,98,42,0.2);
    }

    /* ── INDUSTRIES ── */
    .industries-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:50px; }
    .industry-card {
      background:var(--card); border:1px solid var(--card-border);
      border-radius:14px; padding:24px 20px; text-align:center;
      cursor:pointer; transition:all 0.3s; text-decoration:none;
    }
    .industry-card:hover { background:rgba(26,84,144,0.2); border-color:rgba(26,84,144,0.5); transform:translateY(-4px); }
    .industry-emoji { font-size:32px; margin-bottom:10px; }
    .industry-name { font-size:14px; font-weight:700; color:white; margin-bottom:4px; }
    .industry-count { font-size:12px; color:var(--orange); font-weight:600; }

    /* ── TESTIMONIALS ── */
    .testimonials-bg { background:#1a2f4a; }
    .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px; }
    .testimonial {
      background:var(--card); border:1px solid var(--card-border);
      border-radius:16px; padding:28px; transition:all 0.3s;
    }
    .testimonial:hover { background:rgba(255,255,255,0.1); transform:translateY(-4px); }
    .testimonial-quote { font-size:36px; color:var(--orange); line-height:1; margin-bottom:12px; }
    .testimonial-text { font-size:15px; line-height:1.7; color:rgba(255,255,255,0.85); margin-bottom:20px; }
    .testimonial-author { display:flex; align-items:center; gap:12px; }
    .author-avatar { width:44px; height:44px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:white; flex-shrink:0; }
    .author-name { font-size:14px; font-weight:700; color:white; }
    .author-biz { font-size:12px; color:var(--muted); }
    .author-stars { color:var(--orange); font-size:12px; }

    /* ── CTA ── */
    .cta-section {
      text-align:center;
      background:#4A6D8C;
      position:relative; overflow:hidden;
    }
    .cta-section::before {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(196,98,42,0.1), transparent);
    }
    .cta-content { position:relative; z-index:1; }
    .cta-title { font-family:var(--heading-font); font-size:clamp(40px,6vw,72px); font-weight:900; margin-bottom:20px; line-height:1; }
    .cta-sub { font-size:18px; color:rgba(255,255,255,0.92); max-width:500px; margin:0 auto 40px; line-height:1.7; }
    .cta-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
    .cta-note { font-size:13px; color:var(--muted); }

    /* ── FOOTER ── */
    footer {
      background:#1a2f4a; padding:32px 48px 20px;
      border-top:1px solid rgba(255,255,255,0.08);
    }
    .footer-inner { max-width:1200px; margin:0 auto; }
    .footer-top { display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px; margin-bottom:24px; }
    .footer-brand p { font-size:14px; font-family:'DM Sans',sans-serif; font-weight:400; color:rgba(255,255,255,0.75); line-height:1.6; margin-top:8px; max-width:300px; }
    .footer-col h4 { font-size:13px; font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:3px; text-transform:uppercase; background:linear-gradient(135deg,#d4844a,#d4a04a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:10px; }
    .footer-col a { display:block; font-size:14px; font-family:'DM Sans',sans-serif; font-weight:600; color:rgba(255,255,255,0.75); text-decoration:none; margin-bottom:6px; transition:color 0.2s; }
    .footer-col a:hover { color:white; }
    .footer-bottom {
      display:flex; justify-content:space-between; align-items:center;
      padding-top:16px; border-top:1px solid rgba(255,255,255,0.08);
      font-size:13px; font-family:'DM Sans',sans-serif; font-weight:400; color:rgba(255,255,255,0.75); flex-wrap:wrap; gap:10px;
    }

    /* ── MOBILE ── */
    @media(max-width:900px) {
      nav { padding:16px 24px; }
      .nav-links { display:none; }
      .hero { padding:100px 24px 60px; }
      .hero-content { grid-template-columns:1fr; gap:50px; }
      .hero-eyebrow { font-size:19px; }
      .stats-strip { padding:40px 24px; }
      .stats-inner { justify-content:center; gap:30px; }
      .stat-divider { display:none; }
      section { padding:70px 24px; }
      .problem-grid { grid-template-columns:1fr; gap:40px; }
      .steps { flex-direction:column; gap:40px; }
      .steps::before { display:none; }
      .tools-grid { grid-template-columns:1fr 1fr; }
      .industries-grid { grid-template-columns:repeat(2,1fr); }
      .testimonials-grid { grid-template-columns:1fr; }
      .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
      .footer-brand { grid-column:1/-1; }
    }
    @media(max-width:560px) {
      .tools-grid { grid-template-columns:1fr; }
      .hero-headline { font-size:48px; }
      .hero-eyebrow { font-size:16px; }
    }

    /* ── SCROLL ANIMATIONS ── */
    .fade-up { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
    .fade-up.visible { opacity:1; transform:translateY(0); }
    .fade-up:nth-child(2) { transition-delay:0.1s; }
    .fade-up:nth-child(3) { transition-delay:0.2s; }
    .fade-up:nth-child(4) { transition-delay:0.3s; }
  .atmo{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}

.atmo-orb{position:absolute;border-radius:50%;filter:blur(120px);}
.atmo-orb.o1{width:500px;height:500px;background:#1e3a5f;opacity:0.18;top:-200px;left:50%;transform:translateX(-50%);animation:orb1 14s ease-in-out infinite;}
.atmo-orb.o2{width:400px;height:400px;background:#2c5a82;opacity:0.13;top:40%;left:-100px;animation:orb2 16s ease-in-out infinite;}
.atmo-orb.o3{width:350px;height:350px;background:#2c5a82;opacity:0.11;bottom:-80px;right:-80px;animation:orb3 12s ease-in-out infinite;}
@keyframes orb1{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-40px)}}
@keyframes orb2{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}
@keyframes orb3{0%,100%{transform:translateY(0)}50%{transform:translateY(30px)}}

/* TOPBAR */

.topbar-nav{display:flex;align-items:center;gap:24px;margin-left:64px;}.topbar-nav a{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:rgba(255,255,255,0.80);text-decoration:none;letter-spacing:0.02em;transition:color 0.2s;}.topbar-nav a:hover{color:#fff;}.topbar-spacer{flex:1;}
/* The topbar is one row with no menu behind it — logo, section links, bundle
   rotator, sign-in buttons. The three section links need about 1010px before
   everything stops fitting side by side, so below that they drop out and the
   remaining items keep their spacing. The sections themselves are unaffected
   and are still reached by scrolling. */
@media (max-width: 1200px) { .topbar-nav { display: none; } }

/* ===== REVIEW BANNER ===== */
.review-banner-wrap {
  position: relative;
  overflow: hidden;
  padding: 20px 0 48px;
  width: 100%;
}
.review-track {
  display: flex;
  gap: 24px;
  padding: 8px 0 16px;
  animation: reviewStep 48s linear infinite;
  will-change: transform;
}
.review-track:hover {
  animation-play-state: paused;
}
@keyframes reviewStep {
  0%       { transform: translateX(0px); }
  13.542%  { transform: translateX(0px); }
  16.667%  { transform: translateX(-364px); }
  30.208%  { transform: translateX(-364px); }
  33.333%  { transform: translateX(-728px); }
  46.875%  { transform: translateX(-728px); }
  50%      { transform: translateX(-1092px); }
  63.542%  { transform: translateX(-1092px); }
  66.667%  { transform: translateX(-1456px); }
  80.208%  { transform: translateX(-1456px); }
  83.333%  { transform: translateX(-1820px); }
  96.875%  { transform: translateX(-1820px); }
  100%     { transform: translateX(-2184px); }
}
.review-card {
  width: 340px;
  flex-shrink: 0;
}
.review-card-inner {
  background: #c8cfd8; color: #1a2535;
  border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
  border-left: 3px solid #c4622a;
  border-radius: 12px;
  padding: 24px 22px 20px;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-card-inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.review-top-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.reviewer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--heading-font, 'Barlow Condensed', sans-serif);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.04em;
  border: 2px solid rgba(26,37,53,0.15);
}
.reviewer-meta {
  flex: 1;
  min-width: 0;
}
.reviewer-tool {
  font-family: var(--body-font, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: rgba(26,37,53,0.6);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: normal;
  line-height: 1.3;
  margin-bottom: 4px;
}
.reviewer-pillar {
  font-family: var(--body-font, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: rgba(26,37,53,0.7);
}
.review-stars {
  color: #c4622a;
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.review-text {
  font-family: var(--body-font, 'DM Sans', sans-serif);
  font-size: 15px;
  font-weight: 400;
  color: #1a2535;
  line-height: 1.65;
  margin: 0 0 16px;
}
.reviewer-id {
  font-family: var(--body-font, 'DM Sans', sans-serif);
  font-size: 13px;
  color: rgba(26,37,53,0.62);
  font-weight: 400;
}
.review-fade-left,
.review-fade-right { display:none; }
.review-fade-left { display:none; }
.review-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--dark, #0d1b2a) 0%, transparent 100%);
}
@media (max-width: 768px) {
  .review-card { width: 290px; }
  .review-fade-left, .review-fade-right { width: 40px; }
}
/* ===== END REVIEW BANNER ===== */

    .footer-eyebrow { display:flex; align-items:center; gap:8px; font-size:13px; font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:3px; text-transform:uppercase; background:linear-gradient(135deg,#d4844a,#d4a04a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:10px; margin-left:-28px; }
    .footer-eyebrow::before { content:''; width:20px; height:1px; background:linear-gradient(90deg,transparent,#d4844a); flex-shrink:0; }
    .footer-eyebrow::after { content:''; width:20px; height:1px; background:linear-gradient(90deg,#d4844a,transparent); flex-shrink:0; }

    /* ── INTEGRATIONS STRIP (P34) ── */
    .integrations-strip { background:#4A6D8C; padding:26px 48px 22px; position:relative; }
    .integrations-strip::before {
      content:''; position:absolute; top:0; left:0; right:0; height:1px;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
    }
    .integrations-inner {
      max-width:1200px; margin:0 auto;
      display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
      gap:18px 32px;
    }
    .integration-logo { height:26px; width:auto; display:block; flex:none; }
    .integration-name {
      font-family:'DM Sans',sans-serif; font-size:17px; font-weight:600;
      color:rgba(255,255,255,0.90); line-height:26px; white-space:nowrap;
    }
    .footer-tm {
      margin:12px 0 0;
      font-family:'DM Sans',sans-serif; font-size:11px; font-weight:400;
      line-height:1.5; color:rgba(255,255,255,0.55);
    }
    @media(max-width:900px) {
      .integrations-strip { padding:24px 24px 20px; }
      .integrations-inner { gap:16px 24px; }
    }
    @media(max-width:560px) {
      .integration-logo { height:22px; }
      .integration-name { font-size:15px; line-height:22px; }
      .integrations-inner { gap:14px 20px; }
    }