/* ==========================================================================
   Branchtide Limited — Design System
   Tokens, layout primitives, and component styles.
   ========================================================================== */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---- Tokens ---- */
:root{
  /* Brand colour palette (fixed per brand guidelines) */
  --c-primary:#0F172A;
  --c-accent:#2563EB;
  --c-accent-2:#1D4ED8;
  --c-secondary:#38BDF8;
  --c-bg:#F8FAFC;
  --c-dark:#020617;
  --c-success:#16A34A;
  --c-warning:#F59E0B;

  /* Derived neutrals */
  --c-surface:#FFFFFF;
  --c-surface-alt:#F1F5F9;
  --c-border:#E2E8F0;
  --c-border-soft:#EDF2F7;
  --c-text:#0F172A;
  --c-text-muted:#475569;
  --c-text-faint:#94A3B8;
  --c-on-dark:#F8FAFC;
  --c-on-dark-muted:#94A3B8;

  /* Type */
  --f-display:'Manrope', system-ui, sans-serif;
  --f-body:'Plus Jakarta Sans', system-ui, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;

  /* Scale */
  --step--1: clamp(0.833rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1:  clamp(1.2rem, 1.14rem + 0.3vw, 1.35rem);
  --step-2:  clamp(1.44rem, 1.34rem + 0.5vw, 1.75rem);
  --step-3:  clamp(1.8rem, 1.6rem + 1vw, 2.4rem);
  --step-4:  clamp(2.3rem, 1.95rem + 1.6vw, 3.2rem);
  --step-5:  clamp(2.9rem, 2.3rem + 2.6vw, 4.5rem);

  /* Radii */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;
  --r-full:999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --shadow-md: 0 8px 24px -8px rgba(15,23,42,.12), 0 2px 8px -2px rgba(15,23,42,.06);
  --shadow-lg: 0 24px 48px -12px rgba(15,23,42,.18), 0 8px 24px -8px rgba(15,23,42,.08);
  --shadow-accent: 0 16px 40px -12px rgba(37,99,235,.35);

  /* Layout */
  --container: 1240px;
  --container-narrow: 820px;
  --nav-h: 84px;

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --dur-fast: .2s;
  --dur-med: .5s;
  --dur-slow: .9s;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}
body{
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.12;letter-spacing:-0.02em;color:var(--c-primary);}
h1{font-size:var(--step-5);}
h2{font-size:var(--step-4);}
h3{font-size:var(--step-2);}
h4{font-size:var(--step-1);}
p{color:var(--c-text-muted);}
:focus-visible{outline:2.5px solid var(--c-accent);outline-offset:3px;border-radius:4px;}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px;}
.container-narrow{width:100%;max-width:var(--container-narrow);margin-inline:auto;padding-inline:24px;}
@media (max-width:640px){.container,.container-narrow{padding-inline:20px;}}

.section{padding-block:clamp(64px,9vw,128px);}
.section-tight{padding-block:clamp(48px,6vw,84px);}
.section-dark{background:var(--c-dark);color:var(--c-on-dark);}
.section-dark h2,.section-dark h3,.section-dark h4{color:#fff;}
.section-dark p{color:var(--c-on-dark-muted);}
.section-alt{background:var(--c-surface-alt);}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-accent);font-weight:500;margin-bottom:16px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 4px rgba(37,99,235,.15);}
.section-dark .eyebrow{color:var(--c-secondary);}
.section-dark .eyebrow::before{background:var(--c-secondary);box-shadow:0 0 0 4px rgba(56,189,248,.18);}

.section-head{max-width:680px;margin-bottom:56px;}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head p{margin-top:16px;font-size:var(--step-1);}

.text-gradient{
  background:linear-gradient(100deg,var(--c-primary) 15%, var(--c-accent) 55%, var(--c-secondary) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-dark .text-gradient{
  background:linear-gradient(100deg,#fff 15%, var(--c-secondary) 65%, var(--c-accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:var(--r-full);font-weight:700;font-size:.95rem;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex-shrink:0;transition:transform var(--dur-fast) var(--ease);}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{background:var(--c-accent);color:#fff;box-shadow:var(--shadow-accent);}
.btn-primary:hover{background:var(--c-accent-2);transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(37,99,235,.45);}
.btn-dark{background:var(--c-primary);color:#fff;}
.btn-dark:hover{background:var(--c-dark);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--c-primary);border:1.5px solid var(--c-border);}
.btn-outline:hover{border-color:var(--c-accent);color:var(--c-accent);transform:translateY(-2px);}
.section-dark .btn-outline{color:#fff;border-color:rgba(255,255,255,.22);}
.section-dark .btn-outline:hover{border-color:var(--c-secondary);color:var(--c-secondary);}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px);}
.btn-sm{padding:11px 20px;font-size:.85rem;}
.btn-block{width:100%;}

/* ---- Navigation ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);
  display:flex;align-items:center;
  transition:background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), height var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  border-bottom:1px solid transparent;
}
.nav-inner{
  width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav.is-scrolled{
  height:72px;
  background:rgba(248,250,252,.78);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom-color:var(--c-border);
  box-shadow:0 1px 0 rgba(15,23,42,.02);
}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:1.15rem;color:var(--c-primary);flex-shrink:0;}
.nav-logo svg{width:34px;height:34px;}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-links a{
  padding:10px 16px;border-radius:var(--r-full);font-size:.92rem;font-weight:600;color:var(--c-text-muted);
  transition:color var(--dur-fast), background var(--dur-fast);
}
.nav-links a:hover{color:var(--c-primary);background:rgba(15,23,42,.05);}
.nav-links a.is-active{color:var(--c-accent);background:rgba(37,99,235,.08);}
.nav-cta{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-sm);}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:20px;height:2px;background:var(--c-primary);border-radius:2px;position:relative;transition:all var(--dur-fast) var(--ease);
}
.nav-toggle span::before{position:absolute;top:-6px;}
.nav-toggle span::after{position:absolute;top:6px;}
.nav-toggle.is-open span{background:transparent;}
.nav-toggle.is-open span::before{transform:rotate(45deg);top:0;}
.nav-toggle.is-open span::after{transform:rotate(-45deg);top:0;}

@media (max-width:960px){
  .nav-links{
    position:fixed;top:72px;left:0;right:0;bottom:0;
    background:var(--c-bg);flex-direction:column;align-items:stretch;gap:2px;
    padding:20px 24px 32px;overflow-y:auto;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:all var(--dur-fast) var(--ease);
  }
  .nav-links.is-open{transform:translateY(0);opacity:1;visibility:visible;}
  .nav-links a{padding:16px 6px;border-radius:0;border-bottom:1px solid var(--c-border-soft);font-size:1.05rem;}
  .nav-toggle{display:flex;}
  .nav-cta .btn-outline{display:none;}
}

/* ---- Hero ---- */
.hero{
  position:relative;padding-top:calc(var(--nav-h) + 56px);padding-bottom:88px;
  overflow:hidden;background:var(--c-bg);
}
.hero-bg-graphic{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:1;
}
.hero-eyebrow{margin-bottom:20px;}
.hero h1{margin-bottom:22px;}
.hero-lede{font-size:var(--step-1);max-width:52ch;margin-bottom:36px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px;}
.hero-proof{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.hero-proof-label{font-size:.8rem;color:var(--c-text-faint);font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.hero-media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5;}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-media-tag{
  position:absolute;left:20px;bottom:20px;right:20px;
  background:rgba(2,6,23,.55);backdrop-filter:blur(10px);color:#fff;
  padding:16px 18px;border-radius:var(--r-md);display:flex;align-items:center;gap:12px;
  border:1px solid rgba(255,255,255,.12);
}
.hero-media-tag .dot{width:9px;height:9px;border-radius:50%;background:var(--c-success);box-shadow:0 0 0 4px rgba(22,163,74,.25);flex-shrink:0;}
.hero-media-tag strong{display:block;font-size:.85rem;}
.hero-media-tag span{font-size:.75rem;color:rgba(255,255,255,.65);}
.hero-float-card{
  position:absolute;top:-24px;right:-24px;background:#fff;border-radius:var(--r-md);
  padding:16px 18px;box-shadow:var(--shadow-md);border:1px solid var(--c-border-soft);
  display:flex;align-items:center;gap:12px;max-width:220px;
}
.hero-float-card .icon-badge{width:38px;height:38px;flex-shrink:0;}
.hero-float-card strong{font-size:1.1rem;font-family:var(--f-display);color:var(--c-primary);display:block;line-height:1;}
.hero-float-card span{font-size:.72rem;color:var(--c-text-faint);}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{order:-1;aspect-ratio:16/10;}
  .hero-float-card{display:none;}
}

/* ---- Stats ---- */
.stats-bar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-border);
  border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;margin-top:64px;
}
.stat-cell{background:var(--c-surface);padding:28px 22px;text-align:center;}
.stat-num{font-family:var(--f-display);font-weight:800;font-size:var(--step-3);color:var(--c-primary);letter-spacing:-.02em;}
.stat-label{font-size:.82rem;color:var(--c-text-muted);margin-top:4px;font-weight:500;}
@media (max-width:760px){.stats-bar{grid-template-columns:repeat(2,1fr);}}

/* ---- Icon badges ---- */
.icon-badge{
  width:52px;height:52px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg, rgba(37,99,235,.12), rgba(56,189,248,.12));
  color:var(--c-accent);flex-shrink:0;
}
.icon-badge svg{width:24px;height:24px;}
.icon-badge.lg{width:64px;height:64px;border-radius:var(--r-md);}
.icon-badge.lg svg{width:28px;height:28px;}
.icon-badge.dark{background:rgba(255,255,255,.08);color:var(--c-secondary);}

/* ---- Cards / grids ---- */
.grid{display:grid;gap:24px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{
  background:var(--c-surface);border:1px solid var(--c-border-soft);border-radius:var(--r-lg);
  padding:32px 28px;transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent;}
.card h3{font-size:var(--step-1);margin-block:16px 10px;}
.card p{font-size:.94rem;}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:700;font-size:.88rem;color:var(--c-accent);}
.card-link svg{width:14px;height:14px;transition:transform var(--dur-fast) var(--ease);}
.card:hover .card-link svg{transform:translateX(3px);}

.card-photo{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--c-border-soft);background:var(--c-surface);transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);}
.card-photo:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.card-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.card-photo .card-photo-body{padding:24px;}

/* ---- Feature split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.split.reverse .split-media{order:2;}
.split-media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:5/4;}
.split-list{margin-top:28px;display:flex;flex-direction:column;gap:16px;}
.split-list li{display:flex;gap:14px;align-items:flex-start;color:var(--c-text-muted);font-size:.95rem;}
.split-list .check{
  width:22px;height:22px;border-radius:50%;background:rgba(22,163,74,.12);color:var(--c-success);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;
}
.split-list .check svg{width:12px;height:12px;}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:40px;}.split.reverse .split-media{order:0;}}

/* ---- Timeline (process) ---- */
.process-list{position:relative;margin-top:24px;}
.process-list::before{
  content:"";position:absolute;left:29px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--c-border) 0%, var(--c-border) 100%);
}
.process-item{position:relative;display:flex;gap:28px;padding-block:32px;}
.process-item:first-child{padding-top:0;}
.process-num{
  width:60px;height:60px;border-radius:50%;background:var(--c-surface);border:1.5px solid var(--c-border);
  display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-weight:600;font-size:1.1rem;
  color:var(--c-accent);flex-shrink:0;z-index:1;transition:background var(--dur-med) var(--ease), color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.process-item.is-active .process-num{background:var(--c-accent);color:#fff;border-color:var(--c-accent);}
.process-body h3{margin-bottom:8px;}
.process-body p{max-width:56ch;}

/* ---- Timeline (about, horizontal) ---- */
.timeline{display:flex;flex-direction:column;gap:0;margin-top:24px;}
.timeline-row{display:grid;grid-template-columns:110px 1fr;gap:24px;padding-block:26px;border-top:1px solid var(--c-border-soft);}
.timeline-row:first-child{border-top:none;}
.timeline-year{font-family:var(--f-mono);font-weight:600;color:var(--c-accent);font-size:1rem;}
.timeline-row h4{margin-bottom:6px;}

/* ---- Testimonial ---- */
.testimonial-card{
  background:var(--c-surface);border:1px solid var(--c-border-soft);border-radius:var(--r-lg);
  padding:34px;display:flex;flex-direction:column;gap:20px;height:100%;
}
.testimonial-stars{display:flex;gap:3px;color:var(--c-warning);}
.testimonial-stars svg{width:16px;height:16px;}
.testimonial-quote{font-family:var(--f-display);font-weight:600;font-size:1.08rem;color:var(--c-primary);line-height:1.5;}
.testimonial-meta{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px;}
.testimonial-avatar{
  width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--c-accent),var(--c-secondary));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:var(--f-display);font-size:.85rem;flex-shrink:0;
}
.testimonial-meta strong{display:block;font-size:.88rem;color:var(--c-primary);}
.testimonial-meta span{font-size:.78rem;color:var(--c-text-faint);}

/* ---- Logo strip ---- */
.logo-strip{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;opacity:.85;}
.logo-placeholder{
  height:34px;padding-inline:6px;display:flex;align-items:center;font-family:var(--f-display);font-weight:800;
  letter-spacing:-.02em;color:var(--c-text-faint);font-size:1.05rem;filter:grayscale(1);opacity:.7;transition:opacity var(--dur-fast);
}
.logo-placeholder:hover{opacity:1;}

/* ---- FAQ accordion ---- */
.faq-list{border-top:1px solid var(--c-border);}
.faq-item{border-bottom:1px solid var(--c-border);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 4px;text-align:left;font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:var(--c-primary);
}
.faq-q .plus{
  width:28px;height:28px;border-radius:50%;border:1.5px solid var(--c-border);flex-shrink:0;position:relative;transition:all var(--dur-fast) var(--ease);
}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--c-primary);top:50%;left:50%;transition:transform var(--dur-fast) var(--ease);}
.faq-q .plus::before{width:10px;height:1.5px;transform:translate(-50%,-50%);}
.faq-q .plus::after{width:1.5px;height:10px;transform:translate(-50%,-50%);}
.faq-item.is-open .faq-q .plus{background:var(--c-accent);border-color:var(--c-accent);}
.faq-item.is-open .faq-q .plus::before,.faq-item.is-open .faq-q .plus::after{background:#fff;}
.faq-item.is-open .faq-q .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-med) var(--ease);}
.faq-a-inner{padding:0 44px 24px 4px;color:var(--c-text-muted);font-size:.95rem;}

/* ---- Blog ---- */
.blog-hero-card{
  display:grid;grid-template-columns:1.1fr .9fr;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--c-border-soft);background:var(--c-surface);box-shadow:var(--shadow-sm);
}
.blog-hero-card img{width:100%;height:100%;object-fit:cover;min-height:320px;}
.blog-hero-body{padding:44px;display:flex;flex-direction:column;justify-content:center;}
.blog-tag{
  display:inline-flex;align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:rgba(37,99,235,.1);color:var(--c-accent);padding:6px 12px;border-radius:var(--r-full);margin-bottom:16px;
}
.blog-meta{display:flex;gap:14px;align-items:center;font-size:.8rem;color:var(--c-text-faint);margin-top:18px;}
.blog-filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px;}
.filter-pill{padding:9px 18px;border-radius:var(--r-full);border:1.5px solid var(--c-border);font-size:.85rem;font-weight:600;color:var(--c-text-muted);transition:all var(--dur-fast);}
.filter-pill.is-active,.filter-pill:hover{border-color:var(--c-accent);color:var(--c-accent);background:rgba(37,99,235,.06);}
.search-box{position:relative;max-width:340px;margin-left:auto;}
.search-box input{width:100%;padding:11px 16px 11px 42px;border-radius:var(--r-full);border:1.5px solid var(--c-border);background:var(--c-surface);font-size:.88rem;}
.search-box input:focus{border-color:var(--c-accent);}
.search-box svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--c-text-faint);}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:56px;}
.pagination a,.pagination span{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.88rem;color:var(--c-text-muted);border:1.5px solid transparent;
}
.pagination a:hover{border-color:var(--c-border);}
.pagination .is-current{background:var(--c-primary);color:#fff;}

.article-body{max-width:720px;margin-inline:auto;}
.article-body h2{font-size:var(--step-3);margin-top:48px;margin-bottom:18px;}
.article-body h3{font-size:var(--step-2);margin-top:36px;margin-bottom:14px;}
.article-body p{margin-bottom:20px;font-size:1.02rem;line-height:1.75;}
.article-body ul{margin:0 0 20px 0;display:flex;flex-direction:column;gap:10px;}
.article-body ul li{padding-left:26px;position:relative;color:var(--c-text-muted);}
.article-body ul li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--c-accent);}
.article-body blockquote{
  border-left:3px solid var(--c-accent);padding:6px 0 6px 24px;margin:32px 0;font-family:var(--f-display);
  font-weight:600;font-size:1.15rem;color:var(--c-primary);font-style:normal;
}
.article-hero-img{width:100%;border-radius:var(--r-xl);overflow:hidden;margin-bottom:40px;box-shadow:var(--shadow-md);}
.article-hero-img img{width:100%;aspect-ratio:16/8;object-fit:cover;}
.article-share{display:flex;gap:10px;margin-top:48px;padding-top:32px;border-top:1px solid var(--c-border);}
.share-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--c-border);display:flex;align-items:center;justify-content:center;transition:all var(--dur-fast);}
.share-btn:hover{border-color:var(--c-accent);color:var(--c-accent);}
.share-btn svg{width:17px;height:17px;}

/* ---- Breadcrumb ---- */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--c-text-faint);flex-wrap:wrap;}
.breadcrumb a{color:var(--c-text-faint);transition:color var(--dur-fast);}
.breadcrumb a:hover{color:var(--c-accent);}
.breadcrumb .sep{opacity:.5;}
.breadcrumb .current{color:var(--c-text-muted);font-weight:600;}
.page-header{padding-top:calc(var(--nav-h) + 40px);padding-bottom:56px;}
.page-header h1{margin-top:14px;max-width:16ch;}
.page-header p{margin-top:16px;font-size:var(--step-1);max-width:60ch;}

/* ---- Forms ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-field{display:flex;flex-direction:column;gap:8px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:.85rem;font-weight:700;color:var(--c-primary);}
.form-field .req{color:var(--c-accent);}
.form-field input,.form-field select,.form-field textarea{
  padding:14px 16px;border-radius:var(--r-sm);border:1.5px solid var(--c-border);background:var(--c-surface);
  font-size:.95rem;transition:border-color var(--dur-fast);width:100%;
}
.form-field textarea{resize:vertical;min-height:130px;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--c-accent);}
.form-field.has-error input,.form-field.has-error textarea{border-color:#DC2626;}
.field-error{font-size:.78rem;color:#DC2626;display:none;}
.form-field.has-error .field-error{display:block;}
.form-note{font-size:.78rem;color:var(--c-text-faint);margin-top:6px;}
.form-success{
  display:none;background:rgba(22,163,74,.08);border:1.5px solid rgba(22,163,74,.25);color:#15803D;
  padding:18px 20px;border-radius:var(--r-md);font-weight:600;font-size:.92rem;margin-top:20px;align-items:center;gap:12px;
}
.form-success.is-visible{display:flex;}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--c-text-muted);}
.checkbox-row input{width:17px;height:17px;margin-top:2px;accent-color:var(--c-accent);flex-shrink:0;}

.contact-info-card{background:var(--c-primary);color:#fff;border-radius:var(--r-xl);padding:40px;height:100%;}
.contact-info-card h3{color:#fff;margin-bottom:6px;}
.contact-info-card p{color:var(--c-on-dark-muted);}
.contact-info-row{display:flex;gap:16px;align-items:flex-start;padding-block:20px;border-top:1px solid rgba(255,255,255,.1);}
.contact-info-row:first-of-type{margin-top:28px;}
.contact-info-row .icon-badge{background:rgba(255,255,255,.08);color:var(--c-secondary);}
.contact-info-row strong{display:block;font-size:.92rem;margin-bottom:2px;color:#fff;}
.contact-info-row span,.contact-info-row a{font-size:.88rem;color:var(--c-on-dark-muted);}
.map-frame{border-radius:var(--r-lg);overflow:hidden;height:340px;position:relative;border:1px solid var(--c-border-soft);}
.map-placeholder{width:100%;height:100%;background:var(--c-surface-alt);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--c-text-faint);}
.map-placeholder svg{width:32px;height:32px;}

/* ---- CTA banner ---- */
.cta-banner{
  position:relative;border-radius:var(--r-xl);overflow:hidden;padding:clamp(48px,7vw,80px);
  background:var(--c-primary);text-align:center;isolation:isolate;
}
.cta-banner::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(560px circle at 15% 20%, rgba(37,99,235,.45), transparent 60%),
             radial-gradient(560px circle at 85% 85%, rgba(56,189,248,.3), transparent 60%);
}
.cta-banner h2{color:#fff;max-width:18ch;margin-inline:auto;}
.cta-banner p{color:var(--c-on-dark-muted);max-width:52ch;margin:16px auto 32px;font-size:var(--step-1);}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---- Newsletter ---- */
.newsletter-box{
  background:var(--c-surface);border:1px solid var(--c-border-soft);border-radius:var(--r-xl);
  padding:clamp(32px,5vw,52px);display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;
}
.newsletter-form{display:flex;gap:10px;}
.newsletter-form input{flex:1;padding:15px 20px;border-radius:var(--r-full);border:1.5px solid var(--c-border);}
.newsletter-form input:focus{border-color:var(--c-accent);}
@media (max-width:800px){.newsletter-box{grid-template-columns:1fr;}.newsletter-form{flex-direction:column;}}

/* ---- Footer ---- */
.footer{background:var(--c-dark);color:var(--c-on-dark-muted);padding-top:80px;}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand .nav-logo{color:#fff;}
.footer-brand p{margin-top:18px;max-width:32ch;font-size:.88rem;}
.footer-social{display:flex;gap:10px;margin-top:24px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;transition:all var(--dur-fast);
}
.footer-social a:hover{background:var(--c-accent);border-color:var(--c-accent);}
.footer-social svg{width:16px;height:16px;}
.footer-col h5{color:#fff;font-family:var(--f-display);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:20px;}
.footer-col ul{display:flex;flex-direction:column;gap:13px;}
.footer-col a{font-size:.9rem;transition:color var(--dur-fast);}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-block:28px;font-size:.82rem;}
.footer-legal{display:flex;gap:20px;flex-wrap:wrap;}
.footer-legal a:hover{color:#fff;}
@media (max-width:960px){.footer-top{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.footer-top{grid-template-columns:1fr;}}

/* ---- Cookie banner ---- */
.cookie-banner{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:2000;max-width:520px;
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:1px solid var(--c-border-soft);
  padding:26px;transform:translateY(140%);transition:transform var(--dur-med) var(--ease);
}
.cookie-banner.is-visible{transform:translateY(0);}
.cookie-banner h4{margin-bottom:8px;font-size:1rem;}
.cookie-banner p{font-size:.85rem;margin-bottom:18px;}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ---- 404 ---- */
.error-page{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 24px 60px;}
.error-code{font-family:var(--f-display);font-weight:800;font-size:clamp(5rem,16vw,9rem);line-height:1;letter-spacing:-.03em;}

/* ---- Legal pages ---- */
.legal-body{max-width:760px;margin-inline:auto;}
.legal-body h2{font-size:var(--step-2);margin-top:44px;margin-bottom:14px;}
.legal-body h3{font-size:1.15rem;margin-top:28px;margin-bottom:10px;}
.legal-body p{margin-bottom:16px;font-size:.98rem;}
.legal-body ul{margin:0 0 16px 20px;list-style:disc;display:flex;flex-direction:column;gap:8px;}
.legal-body li{color:var(--c-text-muted);}
.legal-body a{color:var(--c-accent);text-decoration:underline;text-underline-offset:3px;}
.legal-meta{font-size:.85rem;color:var(--c-text-faint);margin-bottom:8px;}
.legal-toc{background:var(--c-surface-alt);border-radius:var(--r-md);padding:24px 28px;margin-bottom:40px;}
.legal-toc h4{margin-bottom:12px;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;}
.legal-toc ol{display:flex;flex-direction:column;gap:8px;padding-left:18px;list-style:decimal;}
.legal-toc a{font-size:.9rem;color:var(--c-text-muted);}
.legal-toc a:hover{color:var(--c-accent);}

/* ---- Sitemap page ---- */
.sitemap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.sitemap-grid a{font-size:.95rem;color:var(--c-text-muted);display:block;padding-block:6px;}
.sitemap-grid a:hover{color:var(--c-accent);}
@media (max-width:760px){.sitemap-grid{grid-template-columns:1fr 1fr;}}

/* ---- Scroll reveal ---- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
[data-reveal-group] > *{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
[data-reveal-group].is-visible > *{opacity:1;transform:translateY(0);}
[data-reveal-group].is-visible > *:nth-child(1){transition-delay:.05s;}
[data-reveal-group].is-visible > *:nth-child(2){transition-delay:.12s;}
[data-reveal-group].is-visible > *:nth-child(3){transition-delay:.19s;}
[data-reveal-group].is-visible > *:nth-child(4){transition-delay:.26s;}
[data-reveal-group].is-visible > *:nth-child(5){transition-delay:.33s;}

/* ---- Utility ---- */
.mt-0{margin-top:0;}
.text-center{text-align:center;}
.flex{display:flex;}
.items-center{align-items:center;}
.gap-sm{gap:10px;}
.small{font-size:.85rem;}
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--c-accent);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;z-index:3000;
}
.skip-link:focus{left:0;}