/* ============================================================
   CARBOUNTY · URBANFLEET TECHNOLOGY
   Design System v2 — Clean, premium, fintech-adjacent
   Palette: Midnight charcoal + Pure white + Forest teal accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── Tokens ─── */
:root {
  /* Core palette */
  --ink:        #111827;   /* near-black — primary text, dark sections */
  --ink-90:     #1f2937;   /* slightly lighter dark */
  --ink-80:     #374151;   /* tertiary dark */
  --slate:      #4b5563;   /* body text on light */
  --muted:      #9ca3af;   /* captions, placeholders */
  --border:     #e5e7eb;   /* dividers */
  --surface:    #f9fafb;   /* alt section bg */
  --white:      #ffffff;

  /* Accent — Forest Teal */
  --teal:       #0d9488;   /* primary accent */
  --teal-dark:  #0f766e;   /* hover */
  --teal-light: #99f6e4;   /* tint on dark */
  --teal-pale:  #f0fdfa;   /* very light tint on white */

  /* Gold — secondary accent, use sparingly */
  --gold:       #b45309;
  --gold-light: #fef3c7;

  /* Semantic */
  --error:      #dc2626;
  --success:    #16a34a;

  /* Typography */
  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
  --text-2xl:  clamp(1.875rem, 1rem + 3vw, 3.25rem);
  --text-3xl:  clamp(2.5rem,   1rem + 5vw, 5rem);

  /* Spacing */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-8: 2rem;     --sp-10: 2.5rem; --sp-12: 3rem;
  --sp-16: 4rem;    --sp-20: 5rem;   --sp-24: 6rem;

  /* Layout */
  --max-w: 1200px;
  --r: 10px;
  --r-lg: 18px;
  --r-xl: 28px;
  --shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
}

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:var(--text-base);color:var(--slate);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-dark)}
a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
button{cursor:pointer;font-family:var(--sans)}
ul{list-style:none}
input,textarea,select{font-family:var(--sans);font-size:var(--text-base)}

/* ─── Typography ─── */
h1,h2{font-family:var(--serif);color:var(--ink);line-height:1.15;font-weight:400}
h3,h4,h5{font-family:var(--sans);color:var(--ink);line-height:1.25;font-weight:700}
h1{font-size:var(--text-3xl)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-lg)}
h4{font-size:var(--text-base)}
p{max-width:66ch}
p+p{margin-top:var(--sp-4)}
.lead{font-size:var(--text-lg);color:var(--slate);line-height:1.65;max-width:54ch}
.eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--sp-3);display:block}
.eyebrow--light{color:var(--teal-light)}
.tbc{color:var(--error);font-weight:700;background:rgba(220,38,38,.08);padding:1px 5px;border-radius:3px;font-size:.9em}

/* ─── Layout ─── */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-6)}
.section{padding:var(--sp-20) 0}
.section--sm{padding:var(--sp-12) 0}
.section--alt{background:var(--surface)}
.section--dark{background:var(--ink);color:var(--white)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--white)}
.section--dark p,.section--dark li{color:rgba(255,255,255,.7)}
.section--ink90{background:var(--ink-90);color:var(--white)}
.section--ink90 h1,.section--ink90 h2,.section--ink90 h3{color:var(--white)}
.section--ink90 p{color:rgba(255,255,255,.72)}
.section--teal{background:var(--teal);color:var(--white)}
.section--teal h1,.section--teal h2,.section--teal h3{color:var(--white)}
.section--teal p{color:rgba(255,255,255,.85)}

.section-header{max-width:680px;margin-bottom:var(--sp-16)}
.section-header--center{text-align:center;margin:0 auto var(--sp-16)}
.section-header h2{margin-bottom:var(--sp-4)}
.section-header p{color:var(--slate);margin:0 auto}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-8)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0.75rem 1.75rem;border-radius:var(--r);font-size:var(--text-sm);font-weight:600;border:1.5px solid transparent;transition:all .18s ease;cursor:pointer;line-height:1;white-space:nowrap;text-decoration:none}
.btn--teal{background:var(--teal);color:var(--white);border-color:var(--teal)}
.btn--teal:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:var(--white)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--white)}
.btn--outline-white{background:transparent;color:var(--white);border-color:rgba(255,255,255,.45)}
.btn--outline-white:hover{background:rgba(255,255,255,.1);border-color:var(--white)}
.btn--outline-teal{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn--outline-teal:hover{background:var(--teal);color:var(--white)}
.btn--lg{padding:1rem 2.25rem;font-size:var(--text-base)}
.btn--sm{padding:.5rem 1.25rem;font-size:var(--text-xs)}

/* ─── Navigation ─── */
/* nav bg overridden below */
.nav__inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--sp-8)}
.nav__logo{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;flex-shrink:0;padding:4px 0}
.nav__logo img{height:40px;width:auto;display:block}
/* Dark nav bg needed since logo has white text */
.nav{background:rgba(17,24,39,.97);border-bottom:1px solid rgba(255,255,255,.08)}
.nav__links a{color:rgba(255,255,255,.75)}
.nav__links a:hover,.nav__links a.active{color:#ffffff}

.nav .btn--outline{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.35)}
.nav .btn--outline:hover{background:rgba(255,255,255,.1);color:white;border-color:white}

.nav__links{display:flex;align-items:center;gap:var(--sp-6)}

.dropdown{position:relative}
.dropdown-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;background:var(--ink-90);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);box-shadow:0 8px 32px rgba(0,0,0,.4);min-width:210px;padding:var(--sp-2) 0;z-index:300}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:var(--sp-3) var(--sp-5);font-size:var(--text-sm);color:rgba(255,255,255,.7)}
.dropdown-menu a:hover{background:rgba(255,255,255,.06);color:white}

.nav__cta{display:flex;align-items:center;gap:var(--sp-3)}
.nav__hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:var(--sp-2);cursor:pointer}
.nav__hamburger span{display:block;width:22px;height:2px;background:rgba(255,255,255,.8);border-radius:2px;transition:all .2s}
.nav__mobile{display:none;background:var(--ink-90);border-top:1px solid rgba(255,255,255,.08);padding:var(--sp-5) var(--sp-6)}
.nav__mobile.open{display:block}
.nav__mobile a{display:block;padding:var(--sp-3) 0;font-size:var(--text-base);font-weight:500;color:rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none}
.nav__mobile .btn{margin-top:var(--sp-4);width:100%;justify-content:center}

/* ─── Hero ─── */
.hero{background:var(--ink);overflow:hidden;position:relative}
.hero__pattern{position:absolute;inset:0;opacity:.04;background-image:radial-gradient(circle at 1px 1px, white 1px, transparent 0);background-size:32px 32px}
.hero__glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(13,148,136,.35) 0%,transparent 70%);top:-100px;right:-100px;pointer-events:none}
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 480px;gap:var(--sp-16);align-items:center;padding:var(--sp-24) 0 var(--sp-20)}
.hero h1{color:var(--white);font-size:var(--text-3xl);margin-bottom:var(--sp-6);line-height:1.1}
.hero h1 em{font-style:italic;color:var(--teal-light)}
.hero__sub{font-size:var(--text-lg);color:rgba(255,255,255,.65);line-height:1.7;margin-bottom:var(--sp-10);max-width:52ch}
.hero__ctas{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.hero__card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:var(--sp-8);backdrop-filter:blur(4px)}
.hero__card-title{font-family:var(--sans);font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-light);margin-bottom:var(--sp-5)}
.hero__step{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-4) 0;border-bottom:1px solid rgba(255,255,255,.07)}
.hero__step:last-child{border-bottom:none;padding-bottom:0}
.hero__step-num{width:32px;height:32px;border-radius:50%;background:var(--teal);color:var(--white);font-size:var(--text-xs);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero__step h4{font-size:var(--text-sm);color:var(--white);margin-bottom:2px}
.hero__step p{font-size:var(--text-xs);color:rgba(255,255,255,.55);max-width:100%;margin:0}

/* ─── Badges / Trust ─── */
.trust-bar{padding:var(--sp-5) 0;border-bottom:1px solid var(--border)}
.trust-bar__inner{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;justify-content:center}
.trust-badge{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);font-weight:600;color:var(--slate);padding:var(--sp-2) var(--sp-4);border:1px solid var(--border);border-radius:50px;background:var(--white)}
.trust-badge svg{color:var(--teal);flex-shrink:0}
.trust-label{font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ─── Problem strip ─── */
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.problem-card{background:var(--white);padding:var(--sp-8)}
.problem-card__num{font-family:var(--serif);font-size:2.75rem;color:var(--teal);line-height:1;margin-bottom:var(--sp-3);display:block}
.problem-card h3{font-size:var(--text-sm);font-weight:700;color:var(--ink);margin-bottom:var(--sp-3);font-family:var(--sans)}
.problem-card p{font-size:var(--text-sm);color:var(--slate);max-width:100%;margin:0}

/* ─── How it works steps ─── */
.steps-row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-2);position:relative;padding-top:var(--sp-8)}
.steps-row::before{content:'';position:absolute;top:28px;left:14px;right:14px;height:1px;background:linear-gradient(90deg,var(--border),var(--teal),var(--border));z-index:0}
.step-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-4);position:relative;z-index:1}
.step-item__bubble{width:44px;height:44px;border-radius:50%;background:var(--white);border:2px solid var(--teal);color:var(--teal);font-weight:700;font-size:var(--text-sm);display:flex;align-items:center;justify-content:center}
.step-item--active .step-item__bubble{background:var(--teal);color:var(--white)}
.step-item__label{font-size:var(--text-xs);font-weight:600;color:var(--ink);line-height:1.35}
.step-item__sub{font-size:10px;color:var(--muted);line-height:1.3;margin-top:2px}

/* ─── Cards ─── */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-8);transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card--dark{background:var(--ink-90);border-color:rgba(255,255,255,.08);color:var(--white)}
.card--dark h3,.card--dark h4{color:var(--white)}
.card--dark p{color:rgba(255,255,255,.65)}
.card--teal-pale{background:var(--teal-pale);border-color:rgba(13,148,136,.15)}
.card__icon{width:44px;height:44px;border-radius:var(--r);background:var(--teal-pale);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-5);flex-shrink:0}
.card__icon--dark{background:rgba(153,246,228,.1);color:var(--teal-light)}
.card__num{font-family:var(--serif);font-size:2.5rem;color:var(--teal);line-height:1;margin-bottom:var(--sp-2);display:block}

/* ─── Wallet section ─── */
.wallet-events{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-8)}
.wallet-event{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-4) var(--sp-5);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r)}
.wallet-event:first-child,.wallet-event:nth-child(2),.wallet-event:nth-child(3){border-left:3px solid var(--teal)}
.wallet-event:last-child{border-left:3px solid rgba(255,255,255,.15);opacity:.55}
.wallet-event__dot{width:8px;height:8px;border-radius:50%;background:var(--teal);margin-top:7px;flex-shrink:0}
.wallet-event__dot--off{background:rgba(255,255,255,.3)}
.wallet-event h4{font-size:var(--text-sm);font-weight:700;color:var(--white);margin-bottom:2px}
.wallet-event p{font-size:var(--text-xs);color:rgba(255,255,255,.55);max-width:100%;margin:0}
.wallet-event--strike h4{text-decoration:line-through;color:rgba(255,255,255,.35)}

/* ─── Comparison table ─── */
.comparison-wrap{overflow-x:auto}
.comparison-table{width:100%;border-collapse:collapse;min-width:640px}
.comparison-table th{padding:var(--sp-4) var(--sp-5);font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;background:var(--surface);color:var(--slate)}
.comparison-table th:nth-child(2){background:var(--teal);color:var(--white)}
.comparison-table td{padding:var(--sp-4) var(--sp-5);font-size:var(--text-sm);border-top:1px solid var(--border);vertical-align:top}
.comparison-table td:nth-child(2){background:var(--teal-pale);font-weight:600;color:var(--ink)}
.comparison-table tr:hover td{background:var(--surface)}
.comparison-table tr:hover td:nth-child(2){background:rgba(13,148,136,.08)}
.check{color:var(--success);font-weight:700}
.cross{color:var(--muted)}

/* ─── FAQ ─── */
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-5) 0;cursor:pointer;font-size:var(--text-base);font-weight:600;color:var(--ink);gap:var(--sp-4);background:none;border:none;width:100%;text-align:left;font-family:var(--sans);transition:color .15s}
.faq-q:hover{color:var(--teal)}
.faq-q .faq-icon{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.faq-q.open .faq-icon{transform:rotate(45deg);background:var(--teal);border-color:var(--teal);color:var(--white)}
.faq-a{display:none;padding:0 0 var(--sp-5);color:var(--slate);line-height:1.75;font-size:var(--text-sm);max-width:72ch}
.faq-a.open{display:block}

/* ─── Timeline ─── */
.timeline{position:relative;padding-left:var(--sp-10)}
.timeline::before{content:'';position:absolute;left:6px;top:8px;bottom:0;width:2px;background:linear-gradient(180deg,var(--teal),transparent)}
.timeline-item{position:relative;margin-bottom:var(--sp-10)}
.timeline-item::before{content:'';position:absolute;left:calc(-2.5rem - 1px);top:6px;width:14px;height:14px;border-radius:50%;background:var(--teal);border:3px solid var(--white);box-shadow:0 0 0 2px var(--teal)}
.timeline-item__date{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--sp-2)}
.timeline-item h3{font-size:var(--text-sm);font-weight:700;font-family:var(--sans);color:var(--ink);margin-bottom:var(--sp-2)}

/* ─── PDI checklist ─── */
.pdi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-6)}
.pdi-check{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--text-sm);color:var(--slate)}
.pdi-check::before{content:'✓';color:var(--teal);font-weight:700;flex-shrink:0;margin-top:1px}

/* ─── Forms ─── */
.form-group{margin-bottom:var(--sp-5)}
.form-label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--ink);margin-bottom:var(--sp-2)}
.form-input{width:100%;padding:.75rem 1rem;border:1.5px solid var(--border);border-radius:var(--r);font-size:var(--text-sm);color:var(--ink);background:var(--white);transition:border-color .15s}
.form-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.12)}
.form-input::placeholder{color:var(--muted)}
textarea.form-input{resize:vertical;min-height:120px}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.form-consent{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--text-xs);color:var(--muted);line-height:1.5;margin-top:var(--sp-4)}
.form-consent input{margin-top:2px;flex-shrink:0;accent-color:var(--teal)}
.form-note{font-size:var(--text-xs);color:var(--muted);margin-top:var(--sp-3);font-style:italic}

/* ─── Highlight box ─── */
.highlight-box{background:var(--teal-pale);border-left:3px solid var(--teal);border-radius:0 var(--r) var(--r) 0;padding:var(--sp-5) var(--sp-6);margin:var(--sp-8) 0}
.highlight-box p{font-size:var(--text-sm);color:var(--ink);max-width:100%;margin:0}
.highlight-box--warn{background:rgba(220,38,38,.06);border-left-color:var(--error)}
.highlight-box--warn p{color:var(--error);font-weight:600}

/* ─── City pills ─── */
.city-grid{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}
.city-pill{padding:var(--sp-2) var(--sp-4);border-radius:50px;font-size:var(--text-xs);font-weight:700}
.city-pill--live{background:var(--teal);color:var(--white)}
.city-pill--soon{background:var(--surface);color:var(--slate);border:1px solid var(--border)}

/* ─── Feature list ─── */
.feature-list{display:flex;flex-direction:column;gap:var(--sp-5)}
.feature-item{display:flex;gap:var(--sp-4);align-items:flex-start}
.feature-item__icon{width:40px;height:40px;border-radius:var(--r);background:var(--teal-pale);color:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feature-item h4{font-size:var(--text-sm);font-weight:700;color:var(--ink);margin-bottom:2px}
.feature-item p{font-size:var(--text-sm);color:var(--slate);max-width:100%;margin:0}

/* ─── Page hero (inner pages) ─── */
.page-hero{background:var(--ink);padding:var(--sp-20) 0;position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:.4}
.page-hero__pattern{position:absolute;inset:0;opacity:.04;background-image:radial-gradient(circle at 1px 1px,white 1px,transparent 0);background-size:32px 32px}
.page-hero__inner{position:relative;z-index:1}
.page-hero h1{color:var(--white);margin-bottom:var(--sp-4)}
.page-hero .lead{color:rgba(255,255,255,.65)}

/* ─── Breadcrumb ─── */
.breadcrumb{display:flex;gap:var(--sp-2);font-size:var(--text-xs);color:rgba(255,255,255,.4);margin-bottom:var(--sp-4)}
.breadcrumb a{color:rgba(255,255,255,.4);text-decoration:none}
.breadcrumb a:hover{color:var(--teal-light)}
.breadcrumb span{color:var(--teal-light)}

/* ─── Stat callouts ─── */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border)}
.stat-item{background:var(--white);padding:var(--sp-8);text-align:center}
.stat-item__num{font-family:var(--serif);font-size:2.75rem;color:var(--teal);line-height:1;display:block;margin-bottom:var(--sp-2)}
.stat-item__label{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* ─── Footer ─── */
.footer{background:var(--ink);color:rgba(255,255,255,.65)}
.footer__top{padding:var(--sp-16) 0;border-bottom:1px solid rgba(255,255,255,.08)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-10)}
.footer__logo{font-family:var(--sans);font-size:1.1rem;font-weight:700;color:var(--white);display:inline-flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);text-decoration:none}
.footer__logo-text span{color:var(--teal-light)}
.footer__desc{font-size:var(--text-sm);line-height:1.7;color:rgba(255,255,255,.5);max-width:30ch}
.footer__col-title{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--white);margin-bottom:var(--sp-5)}
.footer__links{display:flex;flex-direction:column;gap:var(--sp-3)}
.footer__links a{font-size:var(--text-sm);color:rgba(255,255,255,.5);text-decoration:none;transition:color .15s}
.footer__links a:hover{color:var(--teal-light)}
.footer__bottom{padding:var(--sp-6) 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-4)}
.footer__bottom p{font-size:var(--text-xs);color:rgba(255,255,255,.35);max-width:100%}
.footer__legal{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.footer__legal a{font-size:var(--text-xs);color:rgba(255,255,255,.35);text-decoration:none}
.footer__legal a:hover{color:var(--teal-light)}

/* ─── Role cards (careers) ─── */
.role-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}
.role-card__meta{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.role-tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:50px}
.role-tag--field{background:#fef3c7;color:#92400e}
.role-tag--ops{background:#d1fae5;color:#065f46}
.role-tag--tech{background:#dbeafe;color:#1e40af}
.role-card h3{font-size:var(--text-base);font-weight:700;font-family:var(--sans);color:var(--ink)}
.role-card p{font-size:var(--text-sm);color:var(--slate);max-width:100%;margin:0}

/* ─── Video placeholder ─── */
.video-placeholder{aspect-ratio:16/9;background:var(--surface);border-radius:var(--r-lg);border:2px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);color:var(--muted);text-align:center;padding:var(--sp-8)}
.video-placeholder p{font-size:var(--text-sm);max-width:30ch;margin:0}

/* ─── Divider ─── */
.divider{height:1px;background:var(--border);margin:var(--sp-10) 0}
.divider--teal{background:linear-gradient(90deg,transparent,var(--teal),transparent)}

/* ─── Fade-in ─── */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ─── Responsive ─── */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .hero__inner{grid-template-columns:1fr}
  .hero__card{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .steps-row{grid-template-columns:repeat(4,1fr)}
  .steps-row::before{display:none}
}
@media(max-width:768px){
  :root{--sp-20:4rem;--sp-24:4rem;--sp-16:3rem}
  .nav__links,.nav__cta{display:none}
  .nav__hamburger{display:flex}
  .grid-2,.grid-3,.problem-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
  .steps-row{grid-template-columns:1fr;gap:var(--sp-4);padding-top:0}
  .steps-row::before{display:none}
  .step-item{flex-direction:row;text-align:left;gap:var(--sp-4)}
  .pdi-grid{grid-template-columns:1fr 1fr}
  .city-grid{gap:var(--sp-2)}
  .comparison-table thead{display:none}
  .comparison-table tr{display:block;border:1px solid var(--border);border-radius:var(--r);margin-bottom:var(--sp-3);padding:var(--sp-4)}
  .comparison-table td{display:flex;justify-content:space-between;border:none;padding:var(--sp-2) 0;font-size:var(--text-xs)}
  .comparison-table td::before{content:attr(data-label);font-weight:700;color:var(--muted);flex-shrink:0}
  .comparison-table td:nth-child(2){background:transparent;color:var(--teal)}
  .footer__grid{grid-template-columns:1fr}
  .form-grid-2{grid-template-columns:1fr}
  .hero__ctas{flex-direction:column}
  .btn--lg{width:100%;justify-content:center}
  .page-hero{padding:var(--sp-12) 0}
}
@media(max-width:480px){
  .pdi-grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column}
}