:root {
     --ink: #0A1F3D;
     --ink-soft: #22406B;
     --marigold: #0A1F3D;
     --marigold-dark: #0A1F3D;
     --teal: #12335C;
     --teal-light: #EAF0F8;
     --paper: #FBF9F4;
     --paper-alt: #F3EFE4;
     --line: #E6E1D3;
     --white: #FFFFFF;
     --text-muted: #5B6478;
     --radius-sm: 10px;
     --radius-md: 18px;
     --radius-lg: 28px;
     --shadow-soft: 0 12px 30px -14px rgba(20, 33, 61, 0.25);
     --shadow-hard: 0 20px 45px -18px rgba(20, 33, 61, 0.4);
     --nav-h: 66px;
 }

 * {
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     margin: 0;
     font-family: Helvetica, Arial, sans-serif;
     color: var(--ink);
     background: var(--paper);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
 }

 h1,
 h2,
 h3,
 h4,
 .display {
     font-family: 'Poppins', Helvetica, Arial, sans-serif;
     margin: 0;
     color: var(--ink);
     letter-spacing: -0.01em;
 }

 p {
     margin: 0;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 ul {
     margin: 0;
     padding: 0;
     list-style: none;
 }

 img {
     max-width: 100%;
     display: block;
 }

 button {
     font-family: inherit;
     cursor: pointer;
 }

 section {
     position: relative;
 }

 .container-fluid {
     padding: 0 12%;
 }
 

 /* ---------- Reveal on scroll ---------- */
 .reveal {
     opacity: 0;
     transition: opacity .8s ease, transform .8s cubic-bezier(.22, .68, .36, 1);
 }

 .reveal-left {
     transform: translateX(-48px);
 }

 .reveal-right {
     transform: translateX(48px);
 }

 .reveal-up {
     transform: translateY(36px);
 }

 .reveal.in-view {
     opacity: 1;
     transform: translate(0, 0);
 }

 .breadcrumb {
     position: relative;
     z-index: 2;
     font-size: 13.5px;
     color: rgba(255, 255, 255, 0.55);
     margin-bottom: 18px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .breadcrumb a {
     color: rgba(255, 255, 255, 0.8);
 }

 .breadcrumb a:hover {
     color: var(--marigold);
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 12px 26px;
     border-radius: 100px;
     font-weight: 400;
     font-size: 13px;
     border: none;
     transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
 }

 .btn-primary {
     background: var(--marigold);
     color: white;
 }

 .btn-primary:hover {
     background: white;
     color: var(--ink);
     transform: translateY(-3px);
     box-shadow: 0 14px 26px -10px rgba(254, 94, 18, 0.55);
 }

 .btn-ghost {
     background: transparent;
     color: var(--white);
     border: 1.5px solid rgba(255, 255, 255, 0.35);
 }

 .btn-ghost:hover {
     border-color: var(--white);
     color: white;
     transform: translateY(-3px);
 }

 .btn-dark {
     background: var(--ink);
     color: var(--white);
 }

 .btn-dark:hover {
     background: var(--teal);
     color: white;
     transform: translateY(-3px);
 }

 .btn-outline {
     background: transparent;
     color: var(--ink);
     border: 1.5px solid var(--line);
 }

 .btn-outline:hover {
     border-color: var(--ink);
     transform: translateY(-3px);
 }

 .btn[disabled] {
     opacity: .6;
     cursor: not-allowed;
     transform: none !important;
 }

 .section {
     padding: 30px 0; 
 }

 .section-alt {
     background: var(--paper-alt);
 }

 /* =========================================================
   HERO — responsive (matches existing 980px / 720px system)
========================================================= */

 /* ---------- ≤980px : same breakpoint your grid/steps/cat-grid etc. already use ---------- */
 @media (max-width: 980px) {
     .hero {
         padding: calc(var(--nav-h) + 64px) 0 0;
     }

     .hero.hero-page {
         padding: calc(var(--nav-h) + 52px) 0 56px;
     }

     .hero-grid {
         grid-template-columns: 1fr;
         /* already true in your base CSS — restated here for hero-specific follow-ups */
         gap: 40px;
     }

     .hero-visual {
         max-width: 440px;
         /* matches your existing rule */
         order: 2;
         aspect-ratio: 4/3.4;
         max-height: 380px;
         margin: 0 auto;
     }

     .hero h1 {
         max-width: 100%;
     }

     .hero p.sub {
         max-width: 100%;
     }

     .hero-btns {
         margin-top: 28px;
     }

     .blob-1 {
         width: 220px;
         height: 220px;
     }

     .blob-2 {
         width: 260px;
         height: 260px;
     }

     .hero-lines {
         opacity: .55;
     }

     .pin-4 {
         display: none;
     }

     .marquee-wrap {
         margin-top: 52px;
         padding: 16px 0;
     }

     .marquee-track {
         gap: 34px;
         animation-duration: 20s;
     }

     .marquee-track span {
         font-size: 13.5px;
     }
 }

 /* ---------- ≤720px : same breakpoint as your nav/section/footer collapse ---------- */
 @media (max-width: 720px) {
 
     /* small-device container padding, as requested */
     .container-fluid {
         padding: 2% 8%;
     }

     .hero::before {
         background-size: 20px 20px;
     }

     .eyebrow-pin {
         white-space: normal;
         text-align: left;
         line-height: 1.4;
         margin-bottom: 20px;
     }

     .hero h1 {
         font-size: clamp(28px, 8vw, 38px);
     }

     .hero.hero-page h1 {
         font-size: clamp(26px, 7.5vw, 34px);
     }

     .hero p.sub {
         font-size: 15.5px;
         margin-top: 16px;
     }

     .hero-btns {
         gap: 12px;
         margin-top: 24px;
     }

     .hero-btns .btn {
         width: 100%;
         justify-content: center;
     }

     .hero-visual {
         aspect-ratio: 4/3.4;
         max-height: 300px;
         border-radius: 16px;
     }

     .hero-visual .tag-card {
         left: 12px;
         right: 12px;
         bottom: 12px;
         padding: 12px 14px;
         border-radius: 12px;
     }

     .tag-card .pin-badge {
         width: 32px;
         height: 32px;
     }

     .tag-card .tag-text b {
         font-size: 13px;
     }

     .tag-card .tag-text span {
         font-size: 11.5px;
     }

     .blob-1 {
         width: 160px;
         height: 160px;
         left: -6%;
     }

     .blob-2 {
         width: 200px;
         height: 200px;
         right: -6%;
     }

     .pin-2,
     .pin-3 {
         display: none;
     }

     .hero-lines {
         display: none;
     }

     .marquee-track {
         gap: 26px;
         animation-duration: 16s;
     }

     .marquee-track span {
         font-size: 12.5px;
         gap: 7px;
     }

     .accent-rotator {
         min-width: 9.5ch;
     }
 }
 @media (max-width: 450px) {
 .section {
     padding: 40px 0; 
 }
  .container-fluid {
         padding: 0% 7%;
     }
}
 /* ---------- ≤380px : very small phones, still under the 2%/4% container rule above ---------- */
 @media (max-width: 380px) {
 .section {
     padding: 30px 0;
     background: blue;
 }
     .hero h1 {
         font-size: clamp(24px, 8.5vw, 30px);
     }

     .accent-rotator {
         min-width: 8.5ch;
     }

     .hero-visual {
         max-height: 260px;
     }

     .blob-1,
     .blob-2 {
         display: none;
     }
 }

 /* ---------- Touch/low-power devices: ease animation cost, not motion itself ---------- */
 @media (hover: none) and (pointer: coarse) {
     .hero-grad {
         animation-duration: 30s;
     }

     .marquee-track {
         animation-duration: 22s;
     }
 }