/* ==========================================================================
   Golestan-SMS — public marketing site
   Self-hosted only (no CDN). RTL-first with logical properties so the same
   sheet serves the LTR (English) locale unchanged.
   ========================================================================== */

@import url('../../fonts/vazirmatn/vazirmatn.css');

/* ---------- design tokens ---------- */
:root {
  --brand-900: #062b4a;
  --brand-800: #0b3c66;
  --brand-700: #0f4c81;
  --brand-600: #1565a5;
  --brand-500: #1e83c9;
  --brand-400: #43a3e0;
  --brand-300: #7cc3ef;

  --teal-600: #0d8f8f;
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;

  --ink-900: #0b1620;
  --ink-800: #16232f;
  --ink-700: #24384a;
  --ink-500: #55708a;
  --ink-400: #7d93a8;
  --ink-300: #a9bbcc;

  --surface: #ffffff;
  --surface-2: #f4f8fb;
  --surface-3: #e8f1f8;
  --line: #dbe7f0;

  --ok: #15803d;
  --warn: #b45309;
  --danger: #b91c1c;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(6, 43, 74, .06), 0 2px 8px rgba(6, 43, 74, .05);
  --shadow: 0 4px 12px rgba(6, 43, 74, .08), 0 12px 32px rgba(6, 43, 74, .07);
  --shadow-lg: 0 8px 24px rgba(6, 43, 74, .10), 0 30px 60px rgba(6, 43, 74, .12);

  --maxw: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* travel distance of the horizontal scroll-reveal */
  --reveal-x: 42px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* the sticky header must not cover anchor targets */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
  /* Safety net against sideways scrolling. `clip` — never `hidden` — because
     `overflow-x: hidden` turns the element into a scroll container, which is
     the classic reason `position: sticky` silently stops pinning. `clip`
     clips without creating one, so the header keeps sticking. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-700);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

body[dir='ltr'] { line-height: 1.7; }

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  color: var(--ink-900);
  line-height: 1.35;
  margin: 0 0 .6em;
  font-weight: 800;
  letter-spacing: -.01em;
}

p { margin: 0 0 1.1em; }

::selection { background: var(--brand-300); color: var(--brand-900); }

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

/* ---------- layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* `overflow-x: clip` keeps decorative/animated overshoot inside the section
   without turning it into a scroll container (see the note on `html`), so the
   sticky step column inside `.section--deep` keeps working. */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; overflow-x: clip; }
.section--tint { background: var(--surface-2); }
.section--deep {
  background: linear-gradient(160deg, var(--brand-900), var(--brand-700) 55%, var(--brand-600));
  color: #dbeafe;
}
.section--deep h2, .section--deep h3 { color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--brand-600);
  background: var(--surface-3);
  border: 1px solid var(--line);
  padding: .35rem .9rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.section--deep .eyebrow {
  color: var(--teal-400);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
}

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.section-head p { font-size: 1.06rem; color: var(--ink-500); margin: 0; }
.section--deep .section-head p { color: #b9d4ea; }
.section-head--center { margin-inline: auto; text-align: center; }

.lead { font-size: 1.15rem; color: var(--ink-500); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  border: 1.5px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
  color: #fff;
  box-shadow: 0 6px 18px rgba(21, 101, 165, .35);
}
.btn--primary:hover { box-shadow: 0 12px 28px rgba(21, 101, 165, .45); }

.btn--ghost {
  border-color: var(--line);
  color: var(--ink-800);
  background: var(--surface);
}
.btn--ghost:hover { border-color: var(--brand-400); color: var(--brand-700); }

.btn--onDark {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
  backdrop-filter: blur(6px);
}
.btn--onDark:hover { background: rgba(255, 255, 255, .18); }

.btn--sm { padding: .55rem 1.15rem; font-size: .92rem; }

/* ==========================================================================
   scroll progress + header
   ========================================================================== */
.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: var(--progress-origin, right);
  background: linear-gradient(90deg, var(--teal-500), var(--brand-500));
  z-index: 100;
  will-change: transform;
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 90;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(140%) blur(14px);
  border-block-end: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck {
  border-block-end-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink-900);
  white-space: nowrap;
}
.brand__mark {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-700), var(--teal-600));
  color: #fff;
  box-shadow: 0 4px 14px rgba(15, 76, 129, .32);
}
.brand__mark svg { width: 21px; height: 21px; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-inline-start: auto;
  font-size: .96rem;
  font-weight: 500;
}
.nav__links a { color: var(--ink-500); position: relative; transition: color .2s var(--ease); }
.nav__links a::after {
  content: '';
  position: absolute;
  inset-block-end: -6px;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: var(--brand-500);
  transform: scaleX(0);
  transform-origin: inherit;
  transition: transform .3s var(--ease);
}
.nav__links a:hover { color: var(--brand-700); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: .6rem; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-500);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4rem .85rem;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.lang-switch:hover { border-color: var(--brand-400); color: var(--brand-700); }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .45rem .6rem;
  color: var(--ink-700);
}

/* the panel CTA is a mobile-only duplicate of the header button */
.nav__cta { display: none; }

@media (max-width: 900px) {
  /* visual order: brand … language switch, hamburger */
  .nav { gap: .75rem; }
  .nav__toggle { display: inline-flex; order: 3; }
  .nav__actions { order: 2; margin-inline-start: auto; }

  /* Anchored to the header itself (`100%` = "right below it") instead of a
     hard-coded 72px, so the panel stays glued even if the bar grows taller. */
  .nav__links {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-block-end: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.2rem;
    box-shadow: var(--shadow);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    max-block-size: calc(100dvh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding-block: .8rem; border-block-end: 1px solid var(--surface-3); }
  .nav__links a::after { display: none; }

  /* the header stays uncluttered; the panel carries the call to action */
  .nav__actions .btn { display: none; }
  .nav__cta {
    display: inline-flex;
    justify-content: center;
    margin-block-start: 1rem;
    padding: .8rem 1.2rem;
    border-radius: 999px;
    font-weight: 700;
    color: #fff !important;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    border-block-end: 0 !important;
  }
}

/* ==========================================================================
   hero
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4rem, 10vw, 8rem);
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(45, 212, 191, .16), transparent 60%),
    radial-gradient(900px 500px at 12% 6%, rgba(30, 131, 201, .16), transparent 62%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 980px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  line-height: 1.22;
  margin-bottom: .5em;
}
.hero h1 .grad {
  background: linear-gradient(120deg, var(--brand-600), var(--teal-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--ink-500); max-width: 54ch; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px dashed var(--line);
  font-size: .9rem;
  color: var(--ink-500);
}
.hero__trust span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__trust svg { width: 17px; height: 17px; color: var(--teal-600); flex: none; }

/* floating device mock */
.hero__visual { position: relative; }

.phone {
  position: relative;
  margin-inline: auto;
  width: min(310px, 84%);
  background: linear-gradient(160deg, var(--brand-900), var(--ink-900));
  border-radius: 38px;
  padding: 14px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, .09);
}
.phone__screen {
  background: linear-gradient(180deg, #0e1c28, #132635);
  border-radius: 26px;
  padding: 1.2rem 1rem;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.phone__notch {
  width: 96px; height: 5px;
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  margin: 0 auto .9rem;
}

.sms {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px 14px 14px 4px;
  padding: .75rem .9rem;
  color: #dbeafe;
  font-size: .86rem;
  line-height: 1.7;
  opacity: 0;
  transform: translateY(10px);
}
.sms__meta {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: #7fa5c4;
  margin-bottom: .35rem;
}
.sms__code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--teal-400);
  direction: ltr;
  display: block;
  margin-top: .2rem;
}
.phone.is-live .sms { animation: smsIn .8s var(--ease-out) forwards; }
.phone.is-live .sms:nth-child(2) { animation-delay: .45s; }
.phone.is-live .sms:nth-child(3) { animation-delay: 1.85s; }
.phone.is-live .sms:nth-child(4) { animation-delay: 3.25s; }

@keyframes smsIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: .5;
  pointer-events: none;
  will-change: transform;
}
.hero__orb--a { width: 260px; height: 260px; background: var(--teal-400); inset-block-start: -40px; inset-inline-end: -30px; }
.hero__orb--b { width: 220px; height: 220px; background: var(--brand-400); inset-block-end: -50px; inset-inline-start: -40px; }

/* live latency chip */
.latency {
  position: absolute;
  inset-block-end: 8%;
  inset-inline-start: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem 1rem;
  box-shadow: var(--shadow);
  font-size: .82rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.latency__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 0 rgba(20, 184, 166, .6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 12px rgba(20, 184, 166, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
}
@media (max-width: 980px) { .latency { display: none; } }

/* ==========================================================================
   metrics strip
   ========================================================================== */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 780px) { .metrics { grid-template-columns: repeat(2, 1fr); } }

.metric { background: var(--surface); padding: 1.6rem 1.2rem; text-align: center; }
.metric__value {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 800;
  color: var(--brand-700);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.metric__label { font-size: .88rem; color: var(--ink-500); }

/* ==========================================================================
   problem → promise (the narrative pivot)
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.panel {
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  background: var(--surface);
}
.panel--pain { background: #fff7f5; border-color: #f5d9d2; }
.panel--gain {
  background: linear-gradient(155deg, var(--brand-800), var(--brand-600));
  border-color: transparent;
  color: #dbeafe;
  box-shadow: var(--shadow);
}
.panel--gain h3 { color: #fff; }

.panel h3 { font-size: 1.25rem; display: flex; align-items: center; gap: .6rem; }
.panel h3 svg { width: 22px; height: 22px; flex: none; }
.panel--pain h3 svg { color: var(--danger); }
.panel--gain h3 svg { color: var(--teal-400); }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.checks li { display: flex; gap: .7rem; align-items: flex-start; font-size: .98rem; }
.checks svg { width: 19px; height: 19px; flex: none; margin-top: .35rem; }
.panel--pain .checks svg { color: #d97066; }
.panel--gain .checks svg { color: var(--teal-400); }

/* ==========================================================================
   service cards
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--teal-500));
  transform: scaleX(0);
  transform-origin: inherit;
  transition: transform .4s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.card:hover::before { transform: scaleX(1); }

.card__icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--surface-3);
  color: var(--brand-600);
  margin-bottom: 1.1rem;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.card__icon svg { width: 25px; height: 25px; }
.card:hover .card__icon {
  background: linear-gradient(135deg, var(--brand-600), var(--teal-500));
  color: #fff;
}
.card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.card p { font-size: .96rem; color: var(--ink-500); margin: 0; }

.card__tag {
  display: inline-block;
  margin-top: 1rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--teal-600);
  background: #e6f7f5;
  border-radius: 999px;
  padding: .25rem .75rem;
}

/* ==========================================================================
   how it works — sticky narrative
   ========================================================================== */
.steps { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

.steps__sticky { position: sticky; top: 120px; }
@media (max-width: 900px) { .steps__sticky { position: static; } }

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  padding-block: 1.5rem;
  border-block-end: 1px solid rgba(255, 255, 255, .12);
  opacity: .42;
  transition: opacity .45s var(--ease);
}
.step:last-child { border-block-end: 0; }
.step.is-active { opacity: 1; }

.step__num {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  transition: background .45s var(--ease), transform .45s var(--ease);
}
.step.is-active .step__num {
  background: linear-gradient(135deg, var(--teal-500), var(--brand-400));
  border-color: transparent;
  transform: scale(1.06);
}
.step h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.step p { font-size: .96rem; color: #b9d4ea; margin: 0; }

/* ==========================================================================
   code showcase
   ========================================================================== */
.code-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0d1b26;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-lg);
  direction: ltr;
  text-align: left;
}
.code-card__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  background: rgba(255, 255, 255, .04);
  border-block-end: 1px solid rgba(255, 255, 255, .08);
}
.code-card__dot { width: 11px; height: 11px; border-radius: 50%; }
.code-card__tabs { display: flex; gap: .3rem; margin-inline-start: auto; }
.code-tab {
  background: none;
  border: 1px solid transparent;
  color: #7fa5c4;
  font-size: .8rem;
  font-weight: 600;
  padding: .28rem .8rem;
  border-radius: 999px;
  transition: all .2s var(--ease);
}
.code-tab.is-active { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); }

.code-card pre {
  margin: 0;
  padding: 1.3rem 1.4rem;
  overflow-x: auto;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .87rem;
  line-height: 1.85;
  color: #cfe3f2;
  tab-size: 2;
}
.code-card pre::-webkit-scrollbar { height: 8px; }
.code-card pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 999px; }

.tok-key { color: #7cc3ef; }
.tok-str { color: #86e5c8; }
.tok-num { color: #f0b67f; }
.tok-cmt { color: #5d7d95; font-style: italic; }
.tok-fn  { color: #d8b4fe; }

.copy-btn {
  position: absolute;
  inset-block-start: .6rem;
  inset-inline-end: .6rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #cfe3f2;
  border-radius: 8px;
  padding: .35rem .7rem;
  font-size: .78rem;
  transition: background .2s var(--ease);
}
.copy-btn:hover { background: rgba(255, 255, 255, .16); }
.copy-btn.is-done { color: var(--teal-400); border-color: var(--teal-500); }

.code-wrap { position: relative; }

/* ==========================================================================
   security grid
   ========================================================================== */
.sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: rgba(255,255,255,.12); border-radius: var(--radius-lg); overflow: hidden; }
.sec-item { background: rgba(255, 255, 255, .04); padding: 1.6rem; backdrop-filter: blur(4px); }
.sec-item svg { width: 26px; height: 26px; color: var(--teal-400); margin-bottom: .8rem; }
.sec-item h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.sec-item p { font-size: .93rem; color: #b9d4ea; margin: 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: .8rem; max-width: 860px; margin-inline: auto; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq__item[open] { border-color: var(--brand-400); box-shadow: var(--shadow-sm); }
.faq__q {
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  color: var(--ink-800);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .8rem;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '';
  inline-size: 9px;
  block-size: 9px;
  margin-inline-start: auto;
  border-inline-end: 2px solid var(--ink-400);
  border-block-end: 2px solid var(--ink-400);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
  flex: none;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a { padding: 0 1.4rem 1.3rem; color: var(--ink-500); font-size: .97rem; }

/* ==========================================================================
   contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-list { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; list-style: none; }
.contact-list svg { width: 20px; height: 20px; color: var(--brand-600); flex: none; margin-top: .3rem; }
.contact-list strong { display: block; color: var(--ink-800); font-size: .95rem; }
.contact-list span { font-size: .93rem; color: var(--ink-500); }

.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-sm);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .9rem; font-weight: 600; color: var(--ink-800); margin-bottom: .4rem; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: .96rem;
  color: var(--ink-800);
  background: var(--surface-2);
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--brand-400);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(67, 163, 224, .15);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.8; }
.field__err { color: var(--danger); font-size: .84rem; margin-top: .35rem; }
/* Honeypot: hidden from people, still filled by bots. Parked with clip-path
   rather than a -9999px offset — that offset made the document wider than the
   viewport and produced a sideways scrollbar. */
.field--hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.alert {
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  font-size: .95rem;
  margin-bottom: 1.4rem;
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.alert svg { width: 20px; height: 20px; flex: none; margin-top: .2rem; }
.alert--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }

/* ==========================================================================
   CTA band + footer
   ========================================================================== */
.cta-band {
  border-radius: var(--radius-xl);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(45, 212, 191, .25), transparent 60%),
    linear-gradient(140deg, var(--brand-800), var(--brand-600));
  color: #dbeafe;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.cta-band p { color: #b9d4ea; max-width: 58ch; margin-inline: auto; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.8rem; }

.site-footer {
  background: var(--ink-900);
  color: #93a9bd;
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  font-size: .93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block-end: 2.2rem;
  border-block-end: 1px solid rgba(255, 255, 255, .09);
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h4 { color: #fff; font-size: .98rem; margin-bottom: 1rem; }
.site-footer .brand { color: #fff; margin-bottom: .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { transition: color .2s var(--ease); }
.site-footer a:hover { color: var(--teal-400); }

.footer-bottom {
  padding-block-start: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .87rem;
  color: #6c8399;
}

/* ==========================================================================
   scroll motion engine
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 1.15s var(--ease-out),
    transform 1.15s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
/* Horizontal reveals start off-screen, which makes the document wider than the
   viewport until they animate in. On narrow screens the gutter is far smaller
   than the offset, so they are swapped for the vertical reveal instead of
   relying on clipping to hide the damage. */
[data-reveal='left']  { transform: translateX(calc(var(--reveal-x) * -1)); }
[data-reveal='right'] { transform: translateX(var(--reveal-x)); }
[data-reveal='zoom']  { transform: scale(.93); }
[data-reveal='blur']  { filter: blur(8px); transition-property: opacity, transform, filter; }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (max-width: 900px) {
  [data-reveal='left'], [data-reveal='right'] { transform: translateY(28px); }
}

/* a11y: honour the OS "reduce motion" setting completely */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .sms { opacity: 1 !important; transform: none !important; }
}

/* ---------- misc pages (legal / about) ---------- */
.prose { max-width: 78ch; }
.prose h2 { font-size: 1.45rem; margin-top: 2.4rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.8rem; }
.prose ul, .prose ol { padding-inline-start: 1.4rem; }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }

.page-hero {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, var(--surface-3), var(--surface));
  border-block-end: 1px solid var(--line);
}
.page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin-bottom: .3em; }
.page-hero p { color: var(--ink-500); margin: 0; }

.breadcrumb { font-size: .88rem; color: var(--ink-400); margin-bottom: .9rem; }
.breadcrumb a:hover { color: var(--brand-600); }