/* ============================================================
   1. BRAND TOKENS — all sampled directly from the logo file
   ============================================================ */
:root{
  /* --- the five logo colours, exact --- */
  --brand:       #0974B0;   /* infinity mark, blue      */
  --red:         #CE2232;   /* infinity mark, red       */
  --green:       #219E4A;   /* infinity mark, green     */
  --yellow:      #FFE004;   /* infinity mark, yellow    */
  --ink:         #000000;   /* wordmark black           */

  /* --- derived working values --- */
  --brand-deep:  #065C8C;   /* button hover                       */
  --gold:        #B98A00;   /* the yellow, darkened to stay legible
                               on light backgrounds                */
  --panel:       #062A40;   /* dark sections, brand blue deepened */
  --panel-line:  #12455F;
  --panel-text:  #B8CBD8;
  --panel-muted: #7E97A8;

  --canvas:      #F4F6F7;
  --surface:     #FFFFFF;
  --body:        #4A555F;
  --muted:       #78838F;
  --rule:        #DBE1E5;

  /* --- pastel tints, for cards/badges on a light surface --- */
  --brand-tint:  #E9F3FA;
  --red-tint:    #FBEAEB;
  --green-tint:  #E9F7EE;
  --gold-tint:   #FBF3DC;

  /* --- chrome that needs a per-theme value, not just a token flip --- */
  --masthead-bg: rgba(244,246,247,.92);
  --invert-bg:   #000000;
  --invert-text: #FFFFFF;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;

  --measure: 64ch;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7rem);
  --radius: 4px;

  color-scheme: light;
}

/* ---- dark theme: follows the OS by default, or an explicit toggle choice ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:         #F3F7F9;
    --canvas:      #0A1B26;
    --surface:     #102B3C;
    --body:        #C3D2DA;
    --muted:       #8AA0AC;
    --rule:        #1E3E52;

    --panel:       #123449;
    --panel-line:  #23506A;
    --panel-text:  #C9DCE8;
    --panel-muted: #86A2B2;

    --brand-tint:  #142F42;
    --red-tint:    #34181B;
    --green-tint:  #12301F;
    --gold-tint:   #332807;

    --masthead-bg: rgba(10,27,38,.88);
    --invert-bg:   #F3F7F9;
    --invert-text: #0A1B26;

    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:         #F3F7F9;
  --canvas:      #0A1B26;
  --surface:     #102B3C;
  --body:        #C3D2DA;
  --muted:       #8AA0AC;
  --rule:        #1E3E52;

  --panel:       #123449;
  --panel-line:  #23506A;
  --panel-text:  #C9DCE8;
  --panel-muted: #86A2B2;

  --brand-tint:  #142F42;
  --red-tint:    #34181B;
  --green-tint:  #12301F;
  --gold-tint:   #332807;

  --masthead-bg: rgba(10,27,38,.88);
  --invert-bg:   #F3F7F9;
  --invert-text: #0A1B26;

  color-scheme: dark;
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--canvas);
  color:var(--body);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  transition:background-color .2s ease, color .2s ease;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.12;
}
h1{ font-size:clamp(2.35rem,5.4vw,4rem); font-weight:700; letter-spacing:-0.033em; line-height:1.04; }
h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); }
h3{ font-size:1.0625rem; letter-spacing:-0.01em; }
p{ margin:0 0 1rem; max-width:var(--measure); }
p:last-child{ margin-bottom:0; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-deep); }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg{ max-width:100%; }

:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ width:100%; max-width:1120px; margin-inline:auto; padding-inline:var(--gutter); }
.band{ padding-block:var(--section-y); border-top:1px solid var(--rule); }
.band--plain{ border-top:none; }

.lede{ font-size:1.125rem; max-width:58ch; }
.meta{ font-size:.8125rem; color:var(--muted); }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--invert-bg); color:var(--invert-text); padding:.75rem 1rem; z-index:100;
}
.skip:focus{ left:.5rem; top:.5rem; color:var(--invert-text); }

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.9375rem;
  letter-spacing:-0.01em;
  padding:.8rem 1.4rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn--primary{ background:var(--brand); color:#fff; }
.btn--primary:hover{ background:var(--brand-deep); color:#fff; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }
.btn--light{ background:#fff; color:#0B1B26; }
.btn--light:hover{ background:#DDE5EA; color:#0B1B26; }
.btn--wide{ width:100%; text-align:center; }

/* ============================================================
   4. HEADER
   ============================================================ */
.masthead{
  position:sticky; top:0; z-index:50;
  background:var(--masthead-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.masthead__inner{
  display:flex; align-items:center; gap:1.5rem;
  min-height:72px;
}
.brandmark{ margin-right:auto; display:flex; align-items:center; }
.brandmark img{ height:30px; width:auto; display:block; }
@media (max-width:420px){ .brandmark img{ height:24px; } }
.brandmark .brandmark__dark{ display:none; }
:root[data-theme="dark"] .brandmark .brandmark__light{ display:none; }
:root[data-theme="dark"] .brandmark .brandmark__dark{ display:block; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brandmark .brandmark__light{ display:none; }
  :root:not([data-theme="light"]) .brandmark .brandmark__dark{ display:block; }
}

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink);
  cursor:pointer; transition:border-color .16s ease, background-color .16s ease;
}
.theme-toggle:hover{ border-color:var(--ink); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:none; }
}

.nav{ display:flex; align-items:center; gap:1.75rem; }
/* :not(.btn) matters — otherwise this cancels the CTA's own colours */
.nav a:not(.btn){
  font-size:.9375rem; color:var(--body); font-weight:500;
}
.nav a:not(.btn):hover{ color:var(--ink); }

.navtoggle{
  display:none; background:none; border:1px solid var(--rule);
  border-radius:var(--radius); padding:.5rem .75rem; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:.875rem; color:var(--ink);
}

@media (max-width:840px){
  .navtoggle{ display:block; }
  .nav{
    display:none;
    position:absolute; inset-inline:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface);
    border-bottom:1px solid var(--rule);
    padding:.5rem var(--gutter) 1.25rem;
  }
  .nav[data-open="true"]{ display:flex; }
  .nav a{ padding:.7rem 0; border-bottom:1px solid var(--rule); }
  .nav .btn{ margin-top:1rem; text-align:center; }
}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{ padding-block:clamp(3rem,7vw,5.5rem) clamp(3rem,6vw,4.5rem); }
.hero__grid{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  align-items:center;
}
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
}
.hero p{ margin-top:1.5rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);
  margin-top:clamp(3rem,6vw,4.5rem);
}
@media (max-width:700px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stats li{
  padding:1.5rem 1.25rem 0 0;
}
.stats b{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  color:var(--ink); letter-spacing:-0.03em; line-height:1;
}
.stats span{ display:block; margin-top:.5rem; font-size:.875rem; color:var(--muted); max-width:20ch; }

/* ---- the system map ---- */
.map{ width:100%; height:auto; }
.map__node rect{
  fill:var(--surface); stroke:var(--rule); stroke-width:1;
  transition:stroke .18s ease;
}
.map__node text{
  font-family:var(--font-body); font-size:13px; font-weight:500;
  fill:var(--ink); text-anchor:middle; dominant-baseline:middle;
}
.map__node:hover rect{ stroke:var(--brand); }
.map__hub text{ fill:#fff; font-weight:600; }
.map__wire{
  stroke:var(--rule); stroke-width:1.5; fill:none;
  stroke-dasharray:220; stroke-dashoffset:220;
  animation:draw .9s ease forwards;
}
.map__dot{ fill:var(--brand); animation:travel 4.2s ease-in-out infinite; opacity:0; }
.map__hub rect{ fill:var(--brand); stroke:var(--brand); }
/* the SVG scales with the column, so labels need to grow as it shrinks */
@media (max-width:900px){ .map__node text{ font-size:18px; } }
.map__caption{
  font-size:.8125rem; color:var(--muted); margin-top:1rem; text-align:center;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes travel{
  0%   { transform:translate(0,0); opacity:0; }
  12%  { opacity:1; }
  76%  { opacity:1; }
  88%,100%{ transform:translate(var(--tx),var(--ty)); opacity:0; }
}

/* ============================================================
   6. APP CATEGORIES
   ============================================================ */
.cats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:2rem 1.5rem;
  border-top:1px solid var(--rule);
  padding-top:2rem;
  margin-top:2.75rem;
}
@media (max-width:960px){ .cats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:620px){ .cats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cat{ padding-left:1rem; border-left:3px solid var(--marker,var(--brand)); }
.cat h3{ margin-bottom:.75rem; }
.cat li{ font-size:.9375rem; padding:.3rem 0; color:var(--body); }

/* ============================================================
   7. SERVICES
   ============================================================ */
.services{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:2.75rem;
}
.service{
  background:var(--tint,var(--brand-tint));
  border-radius:14px; padding:1.75rem 1.5rem;
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.service:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -18px rgba(6,42,64,.3); }
.service:nth-child(4n+2){ --tint:var(--red-tint); --accent:var(--red); }
.service:nth-child(4n+3){ --tint:var(--green-tint); --accent:var(--green); }
.service:nth-child(4n+4){ --tint:var(--gold-tint); --accent:var(--gold); }

.service__icon{
  width:44px; height:44px; margin-bottom:1.1rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border-radius:10px;
  color:var(--accent,var(--brand));
}
.service__icon svg{ width:22px; height:22px; }
.service h3{ font-size:1.0625rem; margin-bottom:.5rem; }
.service h3 a{ color:inherit; }
.service h3 a:hover{ color:var(--accent,var(--brand)); }
.service p{ margin:0; font-size:.9375rem; flex:1; }
.service__link{
  display:inline-block; margin-top:1.1rem; font-family:var(--font-display);
  font-weight:600; font-size:.875rem; color:var(--accent,var(--brand));
}
.service__link:hover{ color:var(--ink); }

/* ============================================================
   8. PROCESS — numbered because it is genuinely a sequence
   ============================================================ */
.steps{
  display:grid; gap:2.25rem 1.75rem;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:2.75rem;
}
@media (max-width:940px){ .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:600px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.step{ position:relative; }
.step:not(:last-child)::after{
  content:"\2192"; position:absolute; top:15px; right:-1.4rem;
  color:var(--rule); font-size:1.1rem; line-height:1;
}
@media (max-width:940px){ .step:not(:last-child)::after{ display:none; } }
.step__icon{
  width:52px; height:52px; border-radius:50%;
  background:var(--accent,var(--brand)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.step__icon svg{ width:24px; height:24px; }
.step:nth-child(2){ --accent:var(--red); }
.step:nth-child(3){ --accent:var(--green); }
.step:nth-child(4){ --accent:var(--gold); }
.step b{
  font-family:var(--font-display); font-size:.8125rem; font-weight:600;
  color:var(--accent,var(--brand)); display:block; margin-bottom:.35rem;
}
.step h3{ margin-bottom:.5rem; }
.step p{ font-size:.9375rem; margin:0; }

/* ============================================================
   9. PROOF
   ============================================================ */
.proof{ margin-top:2.5rem; }
.proof li{
  padding:1.5rem 0; border-bottom:1px solid var(--rule);
  display:grid; gap:.35rem 2.5rem;
  grid-template-columns:minmax(0,1fr) minmax(0,13rem);
  align-items:baseline;
}
@media (max-width:700px){ .proof li{ grid-template-columns:1fr; } }
.proof q{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.0625rem,1.9vw,1.3125rem);
  color:var(--ink); line-height:1.4; quotes:'\201C' '\201D';
  display:block; max-width:52ch;
}
.proof cite{ font-style:normal; font-size:.875rem; color:var(--muted); }

/* ============================================================
   10. PRICING
   ============================================================ */
.pricehead{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:flex-end; justify-content:space-between;
}
.switch{
  display:inline-flex; border:1px solid var(--rule);
  border-radius:var(--radius); overflow:hidden; background:var(--surface);
}
.switch button{
  font-family:var(--font-display); font-weight:600; font-size:.875rem;
  padding:.55rem 1rem; border:0; background:none; color:var(--muted); cursor:pointer;
}
.switch button[aria-pressed="true"]{ background:var(--invert-bg); color:var(--invert-text); }

.plans{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin-top:2.5rem;
}
.plan{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius); padding:1.75rem 1.5rem 1.5rem;
  display:flex; flex-direction:column;
}
.plan--lead{ background:var(--panel); border-color:var(--panel); color:var(--panel-text); }
.plan--lead h3, .plan--lead .plan__fig{ color:#fff; }
.plan--lead .plan__list li{ color:var(--panel-text); border-color:var(--panel-line); }
.plan--lead .plan__note{ color:var(--panel-muted); }

.plan__tag{ font-size:.8125rem; color:var(--muted); margin-bottom:.75rem; }
.plan--lead .plan__tag{ color:var(--yellow); }
.plan__fig{
  font-family:var(--font-display); font-weight:700;
  font-size:2rem; letter-spacing:-0.03em; color:var(--ink);
  margin:1rem 0 .25rem; line-height:1;
}
.plan__note{ font-size:.8125rem; color:var(--muted); margin-bottom:1.25rem; }
.plan__list{ margin:0 0 1.75rem; flex:1; }
.plan__list li{
  font-size:.9375rem; padding:.6rem 0; border-top:1px solid var(--rule);
}
.pricefoot{ font-size:.875rem; color:var(--muted); margin-top:1.5rem; }

/* ============================================================
   11. FAQ
   ============================================================ */
.faq{ margin-top:2.5rem; max-width:46rem; border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.25rem 0;
  font-family:var(--font-display); font-weight:600; font-size:1.0625rem;
  color:var(--ink); letter-spacing:-0.01em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; font-weight:500; font-size:1.375rem; line-height:1;
  color:var(--muted); flex:none; transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ padding-bottom:1.25rem; font-size:.9375rem; }

/* ============================================================
   12. CONTACT
   ============================================================ */
.contact{ background:var(--panel); color:var(--panel-text); border-top:none; }
.contact h2{ color:#fff; }
.contact .lede{ color:var(--panel-text); }
.contact__grid{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
}
@media (max-width:860px){ .contact__grid{ grid-template-columns:1fr; } }
.contact__detail{ margin-top:2rem; font-size:.9375rem; }
.contact__detail dt{ color:var(--panel-muted); font-size:.8125rem; margin-top:1rem; }
.contact__detail dd{ margin:.15rem 0 0; color:#fff; }
.contact__detail a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

.field{ margin-bottom:1rem; }
.field label{ display:block; font-size:.875rem; color:var(--panel-text); margin-bottom:.4rem; }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:1rem;
  padding:.7rem .85rem; border-radius:var(--radius);
  border:1px solid var(--panel-line); background:#04202F; color:#fff;
}
.field textarea{ resize:vertical; min-height:104px; }
.field input::placeholder, .field textarea::placeholder{ color:#5C7A8C; }
.duo{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
@media (max-width:520px){ .duo{ grid-template-columns:1fr; } }
.formnote{ font-size:.8125rem; color:var(--panel-muted); margin-top:.85rem; }

/* ============================================================
   13. FOOTER
   ============================================================ */
.site-footer{
  /* fixed, always a shade deeper than --panel, so the footer stays visually
     distinct even when it follows a dark cta-panel/contact section */
  background:#04141F; color:var(--panel-text);
  border-top:1px solid var(--brand);
}
.footer-container{ width:min(1180px, calc(100% - 48px)); margin:0 auto; }

.footer-main{ padding:4.5rem 0 4rem; }
.footer-main .footer-container{
  display:grid; grid-template-columns:1.6fr 1fr 1.3fr 1fr 1.4fr; gap:2.5rem;
}

.footer-logo{ display:inline-flex; align-items:center; }
.footer-logo img{ height:44px; width:auto; max-width:100%; display:block; }

.footer-column h3, .footer-newsletter h3{
  position:relative;
  color:#fff; font-family:var(--font-display); font-weight:600;
  font-size:1.0625rem; margin:0 0 1.75rem; padding-bottom:.75rem;
}
.footer-column h3::after, .footer-newsletter h3::after{
  content:""; position:absolute; left:0; bottom:0;
  width:34px; height:3px; background:var(--brand); border-radius:10px;
}
.footer-column ul{ list-style:none; padding:0; margin:0; }
.footer-column li{ margin-bottom:.875rem; }
.footer-column a{
  color:var(--panel-muted); text-decoration:none; font-size:.875rem;
  transition:color .2s ease, padding-left .2s ease;
}
.footer-column a:hover{ color:#fff; padding-left:4px; }
.footer-seeall{ color:var(--yellow) !important; font-weight:600; font-size:.8125rem !important; }

.footer-contact-list{ list-style:none; padding:0; margin:0; font-size:.875rem; color:var(--panel-muted); }
.footer-contact-list li{ margin-bottom:.875rem; line-height:1.55; }
.footer-contact-list a{ color:var(--panel-muted); text-decoration:none; }
.footer-contact-list a:hover{ color:#fff; }

.footer-newsletter p{ color:var(--panel-muted); font-size:.875rem; line-height:1.7; margin:0 0 1.25rem; }
.newsletter-form{
  display:flex; height:52px;
  border:1px solid var(--panel-line); border-radius:11px;
  background:rgba(0,0,0,.15); overflow:hidden;
}
.newsletter-form input[type="email"]{
  min-width:0; flex:1; padding:0 1.1rem; border:0; outline:none;
  background:transparent; color:#fff; font-size:.875rem; font-family:var(--font-body);
}
.newsletter-form input::placeholder{ color:var(--panel-muted); }
.newsletter-form button{
  width:54px; border:0; background:var(--brand); color:#fff;
  font-size:1.375rem; cursor:pointer; transition:background-color .2s ease;
}
.newsletter-form button:hover{ background:var(--brand-deep); }
.footer-newsletter > small{ display:block; margin-top:.75rem; color:var(--panel-muted); font-size:.6875rem; }

.footer-trust{ border-top:1px solid var(--panel-line); border-bottom:1px solid var(--panel-line); padding:2.25rem 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.trust-item{ display:flex; align-items:center; gap:1.1rem; padding:0 2.5rem; border-right:1px solid var(--panel-line); }
.trust-item:first-child{ padding-left:0; }
.trust-item:last-child{ border-right:0; }
.trust-icon{
  width:52px; height:52px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--panel-line); color:var(--accent,var(--brand));
}
.trust-icon svg{ width:22px; height:22px; }
.trust-item:nth-child(2) .trust-icon{ --accent:var(--green); }
.trust-item:nth-child(3) .trust-icon{ --accent:var(--gold); }
.trust-item strong{ display:block; color:#fff; font-size:.9375rem; margin-bottom:.35rem; }
.trust-item span{ display:block; color:var(--panel-muted); font-size:.8125rem; }

.footer-bottom{ padding:1.5rem 0; }
.footer-group-line{
  color:var(--panel-muted); font-size:.8125rem; text-align:center; margin:0 0 1rem;
}
.footer-group-line a{ color:var(--panel-muted); text-decoration:underline; text-underline-offset:2px; }
.footer-group-line a:hover{ color:#fff; }
.footer-bottom-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem;
}
.footer-bottom-inner p{ margin:0; color:var(--panel-muted); font-size:.75rem; }
.legal-links{ display:flex; align-items:center; gap:.75rem; }
.legal-links a{ color:var(--panel-muted); text-decoration:none; font-size:.75rem; transition:color .2s ease; }
.legal-links a:hover{ color:#fff; }
.legal-links span{ color:var(--panel-line); }
.footer-made span{ color:var(--brand); font-size:1rem; }

@media (max-width:1050px){
  .footer-main .footer-container{ grid-template-columns:1.5fr 1fr 1fr; }
  .footer-newsletter{ grid-column:span 2; }
}
@media (max-width:760px){
  .footer-container{ width:min(100% - 32px, 600px); }
  .footer-main{ padding:3.25rem 0; }
  .footer-main .footer-container{ grid-template-columns:1fr 1fr; gap:2.5rem 1.75rem; }
  .footer-brand{ grid-column:span 2; }
  .footer-newsletter{ grid-column:span 2; }
  .trust-grid{ grid-template-columns:1fr; gap:1.75rem; }
  .trust-item, .trust-item:first-child{ padding:0; border-right:0; }
  .footer-bottom-inner{ flex-direction:column; text-align:center; }
}
@media (max-width:480px){
  .footer-main .footer-container{ grid-template-columns:1fr; }
  .footer-brand, .footer-newsletter, .footer-column{ grid-column:auto; }
  .legal-links{ flex-wrap:wrap; justify-content:center; }
}

/* ============================================================
   14. SERVICE DETAIL
   ============================================================ */
.back-link{
  display:inline-block; font-size:.875rem; color:var(--muted);
  margin-bottom:1.5rem;
}
.back-link:hover{ color:var(--ink); }

.eyebrow-icon{ width:44px; height:44px; margin-bottom:1.25rem; display:block; }

.includes{
  display:grid; gap:1.75rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:2.5rem;
}
.includes li{ padding-left:1rem; border-left:3px solid var(--marker,var(--brand)); }
.includes li strong{ display:block; font-size:1rem; margin-bottom:.35rem; color:var(--ink); }
.includes li span{ font-size:.875rem; color:var(--body); }

.steps--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:760px){ .steps--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.fit-grid{
  display:grid; gap:2rem;
  grid-template-columns:1fr 1fr;
  margin-top:2.5rem;
}
@media (max-width:700px){ .fit-grid{ grid-template-columns:1fr; } }
.fit-grid .cat li{ padding:.3rem 0; border:0; }

.cta-panel{ background:var(--panel); color:var(--panel-text); border-top:none; }
.cta-panel h2{ color:#fff; }
.cta-panel .lede{ color:var(--panel-text); }
.cta-panel__inner{
  display:flex; flex-wrap:wrap; gap:2rem;
  align-items:center; justify-content:space-between;
}
.cta-panel__actions{ display:flex; flex-wrap:wrap; gap:.75rem; flex-shrink:0; }

/* ============================================================
   15. HOME — SERVICE TILES
   ============================================================ */
.service-tiles{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  margin-top:2.5rem;
}
.service-tile{
  display:flex; flex-direction:column; align-items:flex-start; gap:.85rem;
  padding:1.25rem; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius); color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px -16px rgba(6,42,64,.25);
  color:inherit;
}
.service-tile svg{ width:26px; height:26px; color:var(--accent,var(--brand)); }
.service-tile span{
  font-family:var(--font-display); font-weight:600; font-size:.9375rem;
}
.service-tile:nth-child(4n+2){ --accent:var(--red); }
.service-tile:nth-child(4n+3){ --accent:var(--green); }
.service-tile:nth-child(4n+4){ --accent:var(--gold); }

/* ============================================================
   16. RICH SERVICE HERO (breadcrumb, badges, benefits)
   ============================================================ */
.breadcrumb{
  font-size:.8125rem; color:var(--muted); margin-bottom:1.25rem;
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
}
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb span[aria-current]{ color:var(--body); }

.h1-accent{ color:var(--brand); }

.trust-row{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--rule);
}
.trust-row li{
  display:flex; align-items:center; gap:.5rem;
  font-size:.8125rem; color:var(--body); font-weight:500;
}
.trust-row svg{ width:18px; height:18px; color:var(--brand); flex-shrink:0; }

.hero-visual{
  background:var(--brand-tint); border-radius:20px;
  padding:2rem; display:flex; align-items:center; justify-content:center;
  min-height:100%;
}
.app-badges{
  display:grid; gap:1rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%; max-width:340px;
}
.app-badge{
  background:var(--surface); border-radius:14px; padding:1rem .75rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-align:center; box-shadow:0 8px 20px -14px rgba(6,42,64,.35);
}
.app-badge--lead{
  grid-column:span 3; flex-direction:row; justify-content:center;
  padding:1rem; font-family:var(--font-display); font-weight:700;
  font-size:1.25rem; color:var(--brand); gap:.6rem;
}
.app-badge svg{ width:26px; height:26px; color:var(--accent,var(--brand)); }
.app-badge span:not(.app-badge__ph){ font-size:.75rem; font-weight:600; color:var(--body); }
.app-badge__ph{
  font-size:.625rem; color:var(--muted); font-style:italic;
}
.app-badge:nth-of-type(3n+1){ --accent:var(--red); }
.app-badge:nth-of-type(3n+2){ --accent:var(--green); }
.app-badge:nth-of-type(3n+3){ --accent:var(--gold); }

.benefits-row{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-top:2.5rem; text-align:center;
}
.benefit{ display:flex; flex-direction:column; align-items:center; gap:.75rem; }
.benefit__icon{
  width:48px; height:48px; border-radius:50%;
  background:var(--tint,var(--brand-tint)); color:var(--accent,var(--brand));
  display:flex; align-items:center; justify-content:center;
}
.benefit__icon svg{ width:22px; height:22px; }
.benefit span{ font-size:.8125rem; font-weight:600; color:var(--body); }
.benefit:nth-child(4n+2){ --tint:var(--red-tint); --accent:var(--red); }
.benefit:nth-child(4n+3){ --tint:var(--green-tint); --accent:var(--green); }
.benefit:nth-child(4n+4){ --tint:var(--gold-tint); --accent:var(--gold); }

/* ============================================================
   18. HOME — HERO REDESIGN
   ============================================================ */
.eyebrow{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand); margin-bottom:1rem;
}
.h1-split{ display:block; }
.h1-split + .h1-split{ margin-top:.1em; }

.trust-row--divided{ gap:0; border-top:none; padding-top:0; margin-top:2rem; }
.trust-row--divided li{
  padding:0 1.25rem; border-left:1px solid var(--rule);
}
.trust-row--divided li:first-child{ padding-left:0; border-left:0; }
.trust-row--divided svg{ color:var(--ink); }

.split{
  display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  align-items:center;
}
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.split--reverse .split__visual{ order:-1; }
@media (max-width:900px){ .split--reverse .split__visual{ order:0; } }

.product-mock{
  background:var(--surface); border-radius:16px; padding:1.5rem;
  box-shadow:0 20px 40px -22px rgba(6,42,64,.35);
  width:100%; max-width:340px;
}
.product-mock__head{ font-family:var(--font-display); font-weight:700; font-size:1.125rem; color:var(--ink); margin-bottom:.15rem; }
.product-mock__sub{ font-size:.8125rem; color:var(--muted); margin-bottom:1.25rem; }
.product-mock__apps{ display:flex; flex-direction:column; gap:.65rem; }
.product-mock__apps li{ display:flex; align-items:center; gap:.6rem; font-size:.8125rem; font-weight:600; color:var(--body); }
.product-mock__apps svg{ width:18px; height:18px; flex-shrink:0; color:var(--accent,var(--brand)); }
.product-mock__apps li:nth-child(2){ --accent:var(--green); }
.product-mock__apps li:nth-child(3){ --accent:var(--red); }
.product-mock__apps li:nth-child(4){ --accent:var(--gold); }

.stack-tags{ display:flex; gap:.6rem; margin-top:1.25rem; width:100%; max-width:340px; }
.stack-tags li{
  flex:1; background:var(--surface); border:1px solid var(--rule); border-radius:8px;
  padding:.6rem .5rem; font-family:var(--font-display); font-weight:600;
  font-size:.75rem; color:var(--ink); text-align:center;
}

.wall-visual{
  background:var(--panel); border-radius:20px; padding:clamp(2rem,4vw,2.75rem);
  color:#fff; min-height:320px; display:flex; flex-direction:column; justify-content:center;
}
.wall-visual .eyebrow{ color:var(--yellow); }
.wall-visual q{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.375rem,2.6vw,1.75rem); line-height:1.3;
  color:#fff; quotes:none; display:block;
}
.wall-visual q span{ display:block; }
.wall-visual q span.accent{ color:var(--yellow); text-decoration:underline; text-underline-offset:5px; }

/* ============================================================
   20. DIRECTOR PROFILE
   ============================================================ */
.director{
  display:flex; gap:2rem; align-items:flex-start;
  margin-top:2.5rem;
}
@media (max-width:640px){ .director{ flex-direction:column; align-items:center; text-align:center; } }
.director__avatar{
  width:96px; height:96px; border-radius:50%; flex-shrink:0;
  object-fit:cover; display:block;
}
.director__name{ font-size:1.375rem; }

/* ============================================================
   21. REVIEW GRID (verified-review cards, filterable)
   ============================================================ */
.filter-row{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:2rem;
}
.filter-pill{
  font-family:var(--font-display); font-weight:600; font-size:.8125rem;
  padding:.55rem 1.15rem; border-radius:999px; border:1px solid var(--rule);
  background:var(--surface); color:var(--body); cursor:pointer;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}
.filter-pill:hover{ border-color:var(--ink); color:var(--ink); }
.filter-pill[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }

.review-grid{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:2.5rem;
}
.review-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:1.75rem; display:flex; flex-direction:column; gap:1rem;
  transition:transform .18s ease, box-shadow .18s ease;
}
.review-card:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -18px rgba(6,42,64,.3); }
.review-card[hidden]{ display:none; }

.review-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.review-card__quote-icon{ width:26px; height:26px; color:var(--tint,var(--brand-tint)); flex-shrink:0; }
.review-card__quote-icon svg{ width:100%; height:100%; }
.review-card__badge{
  font-family:var(--font-display); font-weight:600; font-size:.6875rem;
  letter-spacing:.02em; color:var(--accent,var(--brand)); background:var(--tint,var(--brand-tint));
  padding:.3rem .65rem; border-radius:999px; white-space:nowrap;
}
.review-card__stars{ color:var(--gold); letter-spacing:2px; font-size:.875rem; }
.review-card__quote{ font-size:.9375rem; color:var(--body); margin:0; flex:1; line-height:1.55; }

.review-card__person{
  padding-top:1rem; border-top:1px solid var(--rule);
}
.review-card__person strong{ display:block; font-size:.9375rem; color:var(--ink); font-weight:600; }
.review-card__person span{ display:block; font-size:.8125rem; color:var(--muted); margin-top:.1rem; }

.review-card:nth-child(4n+2){ --tint:var(--red-tint); --accent:var(--red); }
.review-card:nth-child(4n+3){ --tint:var(--green-tint); --accent:var(--green); }
.review-card:nth-child(4n+4){ --tint:var(--gold-tint); --accent:var(--gold); }

/* ============================================================
   22. MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .map__wire{ stroke-dashoffset:0; }
  .map__dot{ opacity:0; }
}

/* ---------- Home: video banner ---------- */
.video-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:725px;
  display:flex;
  align-items:center;
  background:var(--panel);
  color:#fff;
  text-align:center;
}
.video-hero__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
.video-hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:rgba(0,0,0,.45);
}
.video-hero__inner{
  display:flex; flex-direction:column; align-items:center;
  padding-block:clamp(5rem,12vw,10rem) clamp(3rem,8vw,6rem);
}
.video-hero h1{
  color:#fff;
  max-width:18ch;
  margin:0 0 1.25rem;
}
.video-hero__lede{
  color:#fff;
  font-size:1.125rem;
  max-width:44ch;
  margin:0 0 2rem;
}
.video-hero__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px;
  padding:0 2.25rem;
  border-radius:28px;
  background:#23396b;
  color:#fff;
  font-weight:500;
  font-size:1rem;
  text-decoration:none;
  transition:filter .2s ease;
}
.video-hero__btn:hover,
.video-hero__btn:focus-visible{ filter:brightness(1.15); color:#fff; }
.video-hero__stars{
  margin:1.75rem 0 .25rem;
  font-size:1.25rem;
  letter-spacing:.15em;
  color:#fff;
}
.video-hero__rating{ margin:0; font-size:.875rem; color:#fff; }

@media (max-width:640px){
  .video-hero{ min-height:auto; }
  .video-hero__btn{ width:100%; max-width:22rem; min-height:56px; }
}
@media (prefers-reduced-motion:reduce){
  .video-hero__bg{ display:none; }
  .video-hero{
    background:var(--panel) url("https://images.pexels.com/videos/8170425/pexels-photo-8170425.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=630") center/cover no-repeat;
  }
}

/* ---------- SEO heading swaps: keep the original look ---------- */
h1.page-title{ font-size:clamp(1.7rem,3.2vw,2.4rem); font-weight:600; letter-spacing:-0.02em; line-height:1.12; }
.contact h1.page-title{ color:#fff; }
h2.h1-size{ font-size:clamp(2.35rem,5.4vw,4rem); font-weight:700; letter-spacing:-0.033em; line-height:1.04; }

/* ---------- Thank-you page ---------- */
.ty{ position:relative; overflow:hidden; isolation:isolate; }
.ty__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.ty__blob{ position:absolute; border-radius:50%; background:var(--brand-tint); filter:blur(2px); }
.ty__blob--tl{ width:620px; height:520px; top:-260px; left:-240px; border-radius:40% 60% 55% 45% / 55% 45% 55% 45%; }
.ty__blob--br{ width:560px; height:560px; bottom:-280px; right:-220px; border-radius:55% 45% 40% 60% / 45% 55% 45% 55%; }
.ty__trail{ position:absolute; color:var(--brand); opacity:.45; }
.ty__trail--left{ width:170px; left:0; top:42%; }
.ty__trail--right{ width:300px; right:2%; top:6%; }
.ty__plane{ fill:var(--brand); stroke:var(--brand); opacity:1; }

.ty__hero{ text-align:center; padding-block:clamp(2rem,5vw,3.5rem) 2.5rem; display:flex; flex-direction:column; align-items:center; }
.ty__art{
  width:min(420px,88vw); aspect-ratio:1; max-height:340px;
  display:grid; place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 50% 45%, var(--brand-tint) 0 60%, transparent 71%);
  margin-bottom:.5rem;
}
.ty__art svg{ width:78%; height:auto; overflow:visible; }
.ty__env-back{ fill:var(--rule); }
.ty__letter{ fill:var(--surface); stroke:var(--rule); stroke-width:1.5; filter:drop-shadow(0 6px 10px rgba(6,42,64,.10)); }
.ty__line{ fill:var(--rule); }
.ty__env-front{ fill:var(--surface); stroke:var(--rule); stroke-width:1.5; filter:drop-shadow(0 10px 18px rgba(6,42,64,.14)); }
.ty__env-fold{ stroke:var(--rule); stroke-width:1.5; }
.ty__check-bg{ fill:var(--green); filter:drop-shadow(0 8px 14px rgba(33,158,74,.35)); }
.ty__spark--brand{ stroke:var(--brand); }
.ty__spark--red{ stroke:var(--red); }
.ty__spark--yellow{ stroke:var(--gold); }

.ty__title{ font-size:clamp(2.75rem,7vw,4.5rem); margin:0 0 .75rem; }
.ty__subtitle{
  font-family:var(--font-display); font-weight:600; color:var(--ink);
  font-size:clamp(1.25rem,2.6vw,1.9rem); letter-spacing:-0.02em; line-height:1.2;
  margin:0 0 1rem;
}
.ty__lede{ font-size:clamp(1rem,1.6vw,1.2rem); max-width:46ch; margin:0 auto 2.25rem; color:var(--body); }

.ty__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.ty__btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-width:15rem; min-height:3.4rem; font-size:1.0625rem; }
.ty__btn svg{ width:20px; height:20px; flex:none; }
.ty__btn--outline{ background:transparent; color:var(--brand); border:1.5px solid var(--brand); }
.ty__btn--outline:hover{ background:var(--brand-tint); color:var(--brand); }

.ty__cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem;
  padding-block:1.5rem var(--section-y);
}
.ty__card{
  display:flex; gap:1.25rem; align-items:flex-start;
  background:var(--surface); border:1px solid var(--rule); border-radius:12px;
  padding:1.75rem 1.5rem;
  box-shadow:0 12px 30px -20px rgba(6,42,64,.25);
}
.ty__card h2{ font-size:1.2rem; margin:.35rem 0 .5rem; }
.ty__card p{ margin:0; font-size:.95rem; color:var(--muted); line-height:1.55; }
.ty__icon{ flex:none; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; }
.ty__icon svg{ width:28px; height:28px; }
.ty__icon--red{ background:var(--red-tint); color:var(--red); }
.ty__icon--brand{ background:var(--brand-tint); color:var(--brand); }
.ty__icon--green{ background:var(--green-tint); color:var(--green); }

@media (max-width:640px){
  .ty__trail{ display:none; }
  .ty__btn{ width:100%; min-width:0; }
  .ty__actions{ width:100%; max-width:22rem; }
}

/* ---------- SEO service pages ---------- */
.includes li h3{ display:block; font-size:1rem; margin-bottom:.35rem; color:var(--ink); }
.related-links{ display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; margin-top:1.25rem; }
.related-links a{ font-weight:600; color:var(--brand); }
.related-links a:hover{ color:var(--brand-deep); }
.video-hero__eyebrow{
  margin:0 0 .9rem; color:#fff; opacity:.9;
  font-size:.8125rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.video-hero h1{ max-width:22ch; }

/* ---------- 404 ---------- */
.notfound{ text-align:center; padding-block:var(--section-y); }
.notfound__code{ font-family:var(--font-display); font-weight:700; font-size:clamp(4.5rem,14vw,8rem); line-height:1; color:var(--brand); margin:0 0 .5rem; }
.notfound .lede{ margin-inline:auto; }
.notfound .hero__actions{ justify-content:center; }
.notfound__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.5rem; margin-top:2.5rem; }