/* ==========================================================================
   VRYOU — design system
   Blueprint-inspired: navy ink, drafting blue, copper accent, paper ground.
   Written with CSS logical properties so one sheet serves both RTL and LTR.
   ========================================================================== */

:root {
  /* brand */
  --navy: #182238;
  --navy-800: #1E2B47;
  --navy-700: #2A3A5C;
  --blue: #2F5CA6;
  --blue-600: #3E6EBC;
  --blue-300: #8FA9D6;
  --copper: #BD8A4C;
  --copper-400: #D3A468;
  --paper: #EEF1F5;

  /* neutrals */
  --white: #FFFFFF;
  --surface: #F7F9FC;
  --line: #DCE3EE;
  --line-strong: #C6D1E2;
  --text: #182238;
  --text-muted: #56637E;
  --text-invert: #EEF1F5;
  --muted-invert: #A9B7D0;

  /* type — العربية بخط كلاسيكي، والإنجليزية بلاتيني حديث:
     العناوين  Amiri (ar) / Space Grotesk (en)
     النصوص    Noto Naskh Arabic (ar) / IBM Plex Sans (en)
     شعار VRYOU اللاتيني يبقى Space Grotesk في الصفحتين.

     أميري إحياء لخط مطبعة بولاق، وNoto Naskh نسخٌ مضبوط للشاشة.
     الخط الكلاسيكي يبدو أصغر من السانس عند نفس القيمة ويحتاج فراغاً
     أوسع بين السطور — لذلك المقاسات هنا أكبر و--lh-body أوسع مما
     كان مع Cairo. قيم اللاتينية الأصلية تُعاد تحت html[lang="en"]
     كما هي، فالصفحة الإنجليزية لم تتغيّر. */
  --font-body: "Noto Naskh Arabic", "Amiri", Georgia, serif;
  --font-head: "Amiri", "Noto Naskh Arabic", Georgia, serif;
  --font-mark: "Space Grotesk", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Arabic-capable stack for Arabic strings sitting inside an English page */
  --font-ar: "Noto Naskh Arabic", "Amiri", Georgia, serif;
  --lh-body: 1.9;    /* النسخ يحتاج فراغاً أوسع من السانس */
  --lh-head: 1.5;
  --h1: clamp(2.1rem, 1.35rem + 3.1vw, 3.4rem);
  --h2: clamp(1.75rem, 1.2rem + 2.3vw, 2.7rem);
  --h3: clamp(1.28rem, 1.1rem + 0.7vw, 1.55rem);
  --lead: clamp(1.12rem, 1.02rem + 0.45vw, 1.32rem);

  /* space + shape */
  --wrap: 1180px;
  --gutter: clamp(1.15rem, 0.6rem + 2vw, 2.5rem);
  --section-y: clamp(3.75rem, 2.4rem + 5vw, 6.75rem);
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(24, 34, 56, .06), 0 2px 8px rgba(24, 34, 56, .04);
  --shadow: 0 2px 4px rgba(24, 34, 56, .05), 0 12px 32px rgba(24, 34, 56, .08);
  --shadow-lg: 0 8px 24px rgba(24, 34, 56, .10), 0 28px 64px rgba(24, 34, 56, .14);
  --ring: 0 0 0 3px rgba(47, 92, 166, .32);
}

html[lang="en"] {
  --font-body: "IBM Plex Sans", "Noto Naskh Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Space Grotesk", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lh-body: 1.6;
  --lh-head: 1.2;
  /* المقاسات الأصلية: التكبير أعلاه للنسخ العربي وحده */
  --h1: clamp(1.95rem, 1.25rem + 2.9vw, 3.15rem);
  --h2: clamp(1.6rem, 1.1rem + 2.1vw, 2.5rem);
  --h3: clamp(1.15rem, 1rem + 0.65vw, 1.4rem);
  --lead: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  line-height: var(--lh-head);
  font-weight: 700;
  letter-spacing: normal;   /* السالب يسحق وصلات العربية — يُعاد للاتينية أدناه */
  overflow-wrap: break-word;
}

/* display / label type shares the headline family; the wordmark never changes */
.eyebrow, .trust__item dd, .plan-card__name, .plan-card__flag,
.role__tag, .faq summary, .site-footer h4 { font-family: var(--font-head); }

.brand__name { font-family: var(--font-mark); }

/* an Arabic string inside the English page must not fall back to a Latin-only face */
[lang="ar"]:not(html) { font-family: var(--font-ar); letter-spacing: normal; }

/* التقريب السالب يليق بالعناوين اللاتينية ويضرّ العربية، فهو مقصور عليها */
html[lang="en"] :is(h1,h2,h3,h4,h5,h6) { letter-spacing: -.01em; }
html[lang="en"] h1 { letter-spacing: -.02em; }
html[lang="en"] h2 { letter-spacing: -.015em; }
html[lang="en"] .trust__item dd { letter-spacing: -.02em; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p  { margin: 0; }
img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-600); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

::selection { background: var(--copper); color: #fff; }

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 1rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--navy);
  color: var(--text-invert);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
}
.skip-link:focus { inset-block-start: 0; color: var(--text-invert); }

/* --------------------------------------------------------------- layout */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.25rem); }
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }

.section--ink {
  background: var(--navy);
  color: var(--text-invert);
  position: relative;
  isolation: isolate;
}
.section--ink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(143, 169, 214, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 169, 214, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 35%, transparent 100%);
}
.section--ink h2, .section--ink h3 { color: var(--white); }
.section--ink .section-head p, .section--ink .muted { color: var(--muted-invert); }

/* section heading block */
.section-head { max-width: 62ch; margin-block-end: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-block-end: .9rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--copper);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  inline-size: 26px;
  block-size: 2px;
  background: var(--copper);
  flex: none;
}
.section-head--center .eyebrow { justify-content: center; }

.section-head p {
  margin-block-start: 1rem;
  font-size: var(--lead);
  color: var(--text-muted);
  text-wrap: pretty;
}

.grid { display: grid; gap: clamp(1rem, .7rem + 1vw, 1.5rem); }
.grid > * { min-inline-size: 0; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }

.btn--primary { background: var(--copper); color: #22160A; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--copper-400); color: #22160A; }

.btn--ink { background: var(--navy); color: var(--text-invert); }
.btn--ink:hover { background: var(--navy-700); color: var(--text-invert); }

.btn--ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--navy); background: rgba(24, 34, 56, .04); color: var(--text); }

.btn--ghost-invert { border-color: rgba(238, 241, 245, .32); color: var(--text-invert); background: transparent; }
.btn--ghost-invert:hover { border-color: var(--text-invert); background: rgba(238, 241, 245, .1); color: var(--text-invert); }

.btn--block { inline-size: 100%; }
.btn--sm { padding: .58rem 1.15rem; font-size: .92rem; }

/* --------------------------------------------------------------- header */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: rgba(238, 241, 245, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-block-end: 1px solid transparent;
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.site-header.is-stuck {
  border-block-end-color: var(--line);
  box-shadow: 0 4px 20px rgba(24, 34, 56, .06);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 2rem);
  min-block-size: 74px;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); }
.brand:hover { color: var(--text); }
.brand img { inline-size: 34px; block-size: 34px; }

/* الترويسة تحمل اللوكب الكامل صورةً واحدة — الاسم والوصفان داخلها،
   فلا نص بجانبها. الارتفاع ينمو مع الشاشة: دون ٣٦ بكسل يذوب السطران
   التعريفيان. والفوتر يبقى على الحدوة وحدها ونصٍّ أبيض، لأن اسم
   اللوكب كحليّ فيختفي على خلفية كحلية. */
.brand.brand--full { gap: 0; }
.brand.brand--full img {
  inline-size: auto;
  block-size: clamp(36px, 1.4vw + 31px, 48px);
}
.brand__name { font-size: 1.3rem; font-weight: 700; letter-spacing: .07em; }
.brand__tag {
  font-size: .74rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
  display: block;
  line-height: 1.1;
  margin-block-start: 1px;
}

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.4rem, 1.2vw, 1.35rem); }
.nav__list a {
  display: block;
  padding: .45rem .3rem;
  color: var(--text-muted);
  font-size: .95rem;
  font-weight: 500;
  border-block-end: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav__list a:hover, .nav__list a.is-active {
  color: var(--text);
  border-block-end-color: var(--copper);
}

.header__actions { display: flex; align-items: center; gap: .55rem; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .48rem .95rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: .88rem;
  font-weight: 600;
  transition: border-color .18s, color .18s, background-color .18s;
}
.lang-switch:hover { border-color: var(--navy); color: var(--text); background: rgba(24, 34, 56, .04); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 42px;
  block-size: 42px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  inline-size: 18px;
  block-size: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s, opacity .22s;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; inset-block-start: -6px; }
.nav-toggle span::after  { position: absolute; inset-block-start: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset-block-start: 74px;
    inset-inline: 0;
    background: var(--white);
    border-block-end: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: .75rem var(--gutter) 1.4rem;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
    max-block-size: calc(100dvh - 74px);
    overflow-y: auto;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a {
    padding: .85rem .25rem;
    font-size: 1.02rem;
    border-block-end: 1px solid var(--line);
  }
  .nav__list a:hover, .nav__list a.is-active { border-block-end-color: var(--line); color: var(--blue); }
  .header__actions .btn--cta { display: none; }
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  background: var(--navy);
  color: var(--text-invert);
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(3.5rem, 2.4rem + 5vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(143, 169, 214, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 169, 214, .08) 1px, transparent 1px);
  background-size: 52px 52px;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inline-size: 60vw;
  block-size: 60vw;
  max-inline-size: 720px;
  max-block-size: 720px;
  inset-block-start: -28%;
  inset-inline-end: -14%;
  background: radial-gradient(circle, rgba(47, 92, 166, .55), transparent 68%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem 1rem .42rem .55rem;
  margin-block-end: 1.5rem;
  border: 1px solid rgba(238, 241, 245, .22);
  border-radius: 999px;
  background: rgba(238, 241, 245, .06);
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-invert);
}
.hero__badge b {
  flex: none;
  white-space: nowrap;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--copper);
  color: #22160A;
  font-size: .76rem;
  font-weight: 700;
}

.hero h1 { color: var(--white); text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--copper-400); }

.hero__lead {
  margin-block-start: 1.35rem;
  font-size: var(--lead);
  color: var(--muted-invert);
  max-inline-size: 56ch;
  text-wrap: pretty;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 2.1rem; }

.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  margin-block-start: 2.25rem;
  padding-block-start: 1.6rem;
  border-block-start: 1px solid rgba(238, 241, 245, .14);
}
.hero__points li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .93rem;
  color: var(--muted-invert);
}
.hero__points svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--copper); flex: none; }

.hero__art {
  position: relative;
  border: 1px solid rgba(238, 241, 245, .14);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(238, 241, 245, .1), rgba(238, 241, 245, .03));
  padding: clamp(.9rem, .5rem + 1.4vw, 1.6rem);
  box-shadow: var(--shadow-lg);
}
.hero__art img { inline-size: 100%; block-size: auto; }
.hero__art figcaption {
  margin-block-start: .85rem;
  font-size: .84rem;
  color: var(--muted-invert);
  text-align: center;
}

/* ------------------------------------------------------------ trust bar */
.trust {
  border-block-end: 1px solid var(--line);
  background: var(--white);
}
.trust__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(1rem, .6rem + 1.5vw, 2rem);
  padding-block: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
}
.trust__item { display: flex; flex-direction: column; gap: .2rem; }
.trust__item dt { font-size: .86rem; color: var(--text-muted); order: 2; }
.trust__item dd {
  margin: 0;
  order: 1;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
  color: var(--navy);
}

/* ----------------------------------------------------------------- card */
.card {
  position: relative;
  padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card h3 { margin-block-end: .55rem; }
.card p { color: var(--text-muted); font-size: .96rem; }

/* drafting corner ticks */
.card--ticked::before, .card--ticked::after {
  content: "";
  position: absolute;
  inline-size: 12px;
  block-size: 12px;
  border: 2px solid var(--copper);
  opacity: .55;
}
.card--ticked::before {
  inset-block-start: 10px;
  inset-inline-start: 10px;
  border-inline-end: 0;
  border-block-end: 0;
}
.card--ticked::after {
  inset-block-end: 10px;
  inset-inline-end: 10px;
  border-inline-start: 0;
  border-block-start: 0;
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  margin-block-end: 1.1rem;
  border-radius: 12px;
  background: rgba(47, 92, 166, .1);
  color: var(--blue);
}
.card__icon svg { inline-size: 23px; block-size: 23px; }
.card--accent .card__icon { background: rgba(189, 138, 76, .16); color: #8C6432; }

.card--ink {
  background: var(--navy-800);
  border-color: rgba(238, 241, 245, .12);
  color: var(--text-invert);
}
.card--ink p { color: var(--muted-invert); }
.card--ink .card__icon { background: rgba(143, 169, 214, .16); color: var(--blue-300); }

/* ---------------------------------------------------------------- steps */
.steps { counter-reset: step; gap: clamp(1rem, .6rem + 1.6vw, 1.75rem); }
.step { position: relative; padding-block-start: 2.85rem; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--copper);
  color: var(--copper);
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step::after {
  content: "";
  position: absolute;
  inset-block-start: 23px;
  inset-inline-start: 58px;
  inline-size: calc(100% - 58px + clamp(1rem, .6rem + 1.6vw, 1.75rem));
  block-size: 1px;
  border-block-start: 1.5px dashed var(--line-strong);
}
.step:last-child::after { display: none; }
@media (max-width: 900px) { .step::after { display: none; } }
.step h3 { margin-block-end: .5rem; }
.step p { color: var(--text-muted); font-size: .96rem; }

/* -------------------------------------------------------------- gallery */
.gallery__item {
  overflow: hidden;
  padding: 0;
  background: var(--white);
}
.gallery__art {
  padding: clamp(1rem, .6rem + 1.5vw, 1.75rem);
  background: linear-gradient(155deg, #F2F5FA, #E3E9F3);
  border-block-end: 1px solid var(--line);
  /* a fixed box keeps every card the same height whatever gets uploaded.
     object-fit does the letterboxing: a grid/flex child would refuse to
     shrink below its intrinsic size and blow the ratio open. */
  aspect-ratio: 4 / 3;
}
.gallery__art img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
.gallery__body { padding: clamp(1.1rem, .9rem + .8vw, 1.5rem); }
.gallery__body h3 { margin-block-end: .4rem; }
.gallery__body p { color: var(--text-muted); font-size: .94rem; }

/* -------------------------------------------------------------- vendors */
.vendor { display: flex; gap: 1.1rem; align-items: flex-start; }
.vendor__swatches { display: flex; gap: .35rem; margin-block-start: 1rem; }
.vendor__swatches span {
  inline-size: 26px;
  block-size: 26px;
  border-radius: 7px;
  border: 1px solid rgba(24, 34, 56, .12);
}

/* ------------------------------------------------------------ split rows */
.split {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 3vw, 3.5rem);
  align-items: center;
}
.split > * { min-inline-size: 0; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; } }
.split__list { display: grid; gap: 1rem; margin-block-start: 1.75rem; }
.split__list li { display: flex; gap: .8rem; align-items: flex-start; }
.split__list svg {
  inline-size: 1.35rem;
  block-size: 1.35rem;
  flex: none;
  margin-block-start: .22rem;
  color: var(--copper);
}
.split__list b { display: block; font-weight: 600; }
.split__list span { color: var(--text-muted); font-size: .95rem; }
.section--ink .split__list span { color: var(--muted-invert); }

/* --------------------------------------------------------------- plans */
.plan-card { display: flex; flex-direction: column; }
.plan-card__name { font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--copper); }
.plan-card h3 { margin-block: .55rem .7rem; }
.plan-card > p { color: var(--text-muted); font-size: .96rem; }
.plan-card ul {
  display: grid;
  gap: .6rem;
  margin-block: 1.4rem;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--line);
}
.plan-card li { display: flex; gap: .6rem; align-items: flex-start; font-size: .94rem; }
.plan-card li svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; margin-block-start: .3rem; color: var(--blue); }
.plan-card .btn { margin-block-start: auto; }
.plan-card--featured {
  border-color: var(--copper);
  box-shadow: 0 0 0 1px var(--copper), var(--shadow);
}
.plan-card__flag {
  position: absolute;
  inset-block-start: -12px;
  inset-inline-end: clamp(1.35rem, 1rem + 1vw, 1.85rem);
  padding: .18rem .78rem;
  border-radius: 999px;
  background: var(--copper);
  color: #22160A;
  font-size: .76rem;
  font-weight: 700;
}
.plans-note {
  margin-block-start: 1.5rem;
  font-size: .92rem;
  color: var(--text-muted);
  text-align: center;
}

/* ----------------------------------------------------------------- team */
.role__tag {
  display: inline-block;
  padding: .22rem .7rem;
  margin-block-end: .9rem;
  border-radius: 999px;
  background: rgba(47, 92, 166, .1);
  color: var(--blue);
  font-size: .78rem;
  font-weight: 600;
}

/* ------------------------------------------------------------------ faq */
.faq { display: grid; gap: .7rem; max-width: 860px; margin-inline: auto; }
.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.1rem, .9rem + .6vw, 1.5rem);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  inline-size: 11px;
  block-size: 11px;
  flex: none;
  border-right: 2px solid var(--copper);
  border-bottom: 2px solid var(--copper);
  transform: rotate(45deg);
  margin-block-start: -5px;
  transition: transform .22s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-block-start: 3px; }
.faq p {
  padding: 0 clamp(1.1rem, .9rem + .6vw, 1.5rem) 1.3rem;
  color: var(--text-muted);
  font-size: .96rem;
}

/* ----------------------------------------------------------------- form */
.demo { display: grid; gap: clamp(1.75rem, 1.2rem + 3vw, 3.5rem); align-items: start; }
.demo > * { min-inline-size: 0; }
@media (min-width: 980px) { .demo { grid-template-columns: 1fr 1.05fr; } }

.form-card {
  color: var(--text);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.15rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.field { display: grid; gap: .42rem; margin-block-end: 1.05rem; }
.field label { font-size: .9rem; font-weight: 600; }
.field label span { color: var(--text-muted); font-weight: 400; }
.field input, .field select, .field textarea {
  inline-size: 100%;
  padding: .78rem .95rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  font-size: .97rem;
  color: var(--text);
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.field textarea { resize: vertical; min-block-size: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--blue);
  box-shadow: var(--ring);
}
.field input::placeholder, .field textarea::placeholder { color: #93A0B8; }
.field select {
  appearance: none;
  padding-inline-end: 2.7rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2356637E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='m1 1.6 5 4.8 5-4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 8px;
  background-position: right 1.05rem center;
}
[dir="rtl"] .field select { background-position: left 1.05rem center; }
.field--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 0 1rem; }
.form-note { margin-block-start: .95rem; font-size: .85rem; color: var(--text-muted); text-align: center; }

.contact-list { display: grid; gap: 1rem; margin-block-start: 1.9rem; }
/* only the row itself is a flex line — the inner span must stay a block so its
   <small> wraps onto its own line instead of forcing the row wider */
.contact-list li > a,
.contact-list li > span {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--text-invert);
  font-weight: 500;
}
.contact-list li > a > span,
.contact-list li > span > span { display: block; min-inline-size: 0; }
.contact-list svg { inline-size: 1.2rem; block-size: 1.2rem; color: var(--copper); flex: none; }
.contact-list small { display: block; font-size: .8rem; font-weight: 400; color: var(--muted-invert); }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--navy); color: var(--muted-invert); padding-block: clamp(2.75rem, 2rem + 3vw, 4rem) 2rem; }
.site-footer__top {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  padding-block-end: 2.25rem;
  border-block-end: 1px solid rgba(238, 241, 245, .12);
}
.site-footer h4 {
  margin-block-end: 1rem;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-invert);
}
.site-footer li { margin-block-end: .55rem; }
.site-footer a { color: var(--muted-invert); font-size: .94rem; }
.site-footer a:hover { color: var(--text-invert); }
.site-footer__brand .brand { margin-block-end: 1rem; color: var(--text-invert); }
.site-footer__brand .brand:hover { color: var(--text-invert); }
.site-footer__brand .brand__tag { color: var(--muted-invert); }
.site-footer__brand p { font-size: .93rem; max-inline-size: 34ch; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-block-start: 1.75rem;
  font-size: .87rem;
}

/* ----------------------------------------------------- floating whatsapp */
.wa-float {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.2rem;
  border-radius: 999px;
  background: #1FA855;
  color: #fff;
  font-weight: 600;
  font-size: .93rem;
  box-shadow: 0 8px 26px rgba(31, 168, 85, .38);
  transform: translateY(140%);
  transition: transform .3s ease, background-color .18s;
}
.wa-float.is-visible { transform: none; }
.wa-float:hover { background: #17924A; color: #fff; }
.wa-float svg { inline-size: 1.3rem; block-size: 1.3rem; flex: none; }
@media (max-width: 560px) { .wa-float__label { display: none; } .wa-float { padding: .95rem; } }

/* -------------------------------------------------------------- reveals */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .wa-float { transition: none; }
  .card:hover { transform: none; }
}

.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}