/* ==========================================================================
   Yol Yoldaşı — Brend Dizayn Sistemi
   yolyodasi.az
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brend rəngləri */
  --ink:        #081226;
  --ink-2:      #0E1B33;
  --ink-3:      #16274a;

  --brand:      #00B389;
  --brand-2:    #05D9A5;
  --brand-3:    #7BF3D0;
  --brand-soft: #E6FAF4;

  --accent:     #FFB020;
  --accent-2:   #FF7A2F;
  --accent-soft:#FFF4DF;

  --paper:      #FFFFFF;
  --mist:       #F5F8FB;
  --mist-2:     #EDF2F7;

  --text:       #081226;
  --muted:      #5B6B85;
  --muted-2:    #8A99B0;
  --line:       rgba(8,18,38,.10);
  --line-2:     rgba(8,18,38,.06);

  --danger:     #E5484D;
  --ok:         #12A150;

  /* Qradiyentlər */
  --grad-brand: linear-gradient(135deg, #00B389 0%, #05D9A5 55%, #7BF3D0 100%);
  --grad-warm:  linear-gradient(135deg, #FFB020 0%, #FF7A2F 100%);
  --grad-ink:   linear-gradient(160deg, #081226 0%, #0E1B33 55%, #10243F 100%);

  /* Kölgələr */
  --sh-xs: 0 1px 2px rgba(8,18,38,.06);
  --sh-sm: 0 2px 8px rgba(8,18,38,.06), 0 1px 2px rgba(8,18,38,.04);
  --sh-md: 0 12px 32px -12px rgba(8,18,38,.18), 0 2px 8px rgba(8,18,38,.05);
  --sh-lg: 0 32px 64px -24px rgba(8,18,38,.28), 0 8px 20px -12px rgba(8,18,38,.12);
  --sh-brand: 0 18px 40px -16px rgba(0,179,137,.55);

  /* Ölçülər */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --nav-h: 76px;

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

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

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* scroll-behavior:smooth QƏSDƏN YOXDUR — ScrollTrigger scrub animasiyaları ilə toqquşur.
   Daxili keçidlər js/main.js → smoothAnchors() tərəfindən idarə olunur. */
html{ -webkit-text-size-adjust:100%; scroll-padding-top: calc(var(--nav-h) + 20px); }
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
h1,h2,h3,h4{ margin:0; line-height:1.12; letter-spacing:-.025em; font-weight:800; text-wrap:balance; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; }
::selection{ background:var(--brand); color:#fff; }

/* ---------- 3. Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block: clamp(72px, 9vw, 128px); position:relative; }
.section--tight{ padding-block: clamp(56px, 6vw, 88px); }
.section--mist{ background:var(--mist); }
.section--ink{ background:var(--grad-ink); color:#fff; }

.sec-head{ max-width:720px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head--center{ margin-inline:auto; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft);
  padding:7px 14px; border-radius:var(--r-pill); margin-bottom:20px;
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand); }
.section--ink .eyebrow{ color:var(--brand-3); background:rgba(5,217,165,.12); }
.section--ink .eyebrow::before{ background:var(--brand-3); }

h1,.h1{ font-size: clamp(38px, 6.2vw, 70px); font-weight:800; }
h2,.h2{ font-size: clamp(30px, 4.2vw, 48px); }
h3,.h3{ font-size: clamp(20px, 2.2vw, 25px); letter-spacing:-.02em; }
.lead{ font-size: clamp(17px, 1.6vw, 20px); color:var(--muted); line-height:1.65; margin-top:18px; text-wrap:pretty; }
.section--ink .lead{ color:rgba(255,255,255,.72); }
.muted{ color:var(--muted); }
.grad-text{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-text .split-word{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- 4. Düymələr ---------- */
.btn{
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:var(--r-pill);
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:700; font-size:15.5px; letter-spacing:-.01em;
  border:1px solid transparent; white-space:nowrap; overflow:hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:18px; height:18px; flex:none; transition:transform .35s var(--ease-out); }
.btn:hover svg{ transform:translateX(3px); }

.btn--brand{ --btn-bg:transparent; background-image:var(--grad-brand); color:#04301f; box-shadow:var(--sh-brand); }
.btn--brand:hover{ box-shadow:0 26px 52px -18px rgba(0,179,137,.7); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--text); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }
.section--ink .btn--ghost, .hero .btn--ghost, .nav .btn--ghost{ --btn-fg:#fff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.05); }
.section--ink .btn--ghost:hover, .hero .btn--ghost:hover, .nav .btn--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--white{ --btn-bg:#fff; --btn-fg:var(--ink); box-shadow:var(--sh-md); }
.btn--lg{ padding:18px 34px; font-size:16.5px; }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

.btn-link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--brand); font-size:15.5px; }
.btn-link svg{ width:16px; height:16px; transition:transform .3s var(--ease-out); }
.btn-link:hover svg{ transform:translateX(4px); }

/* ---------- 5. Naviqasiya ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease), border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav__inner{ display:flex; align-items:center; gap:28px; width:100%; }
.nav.is-stuck{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom-color:var(--line-2);
  height:66px;
  box-shadow:0 1px 24px rgba(8,18,38,.06);
}
.nav.is-stuck .nav__link{ color:var(--muted); }
.nav.is-stuck .nav__link:hover, .nav.is-stuck .nav__link.is-active{ color:var(--text); }
.nav.is-stuck .brand__name{ color:var(--text); }
.nav.is-stuck .nav__burger span{ background:var(--text); }
.nav.is-stuck .btn--ghost{ --btn-fg:var(--text); border-color:var(--line); background:transparent; }

.brand{ display:inline-flex; align-items:center; gap:11px; flex:none; }
.brand__mark{ width:40px; height:40px; flex:none; }
.brand__name{ font-weight:800; font-size:19px; letter-spacing:-.03em; color:#fff; transition:color .3s ease; }
.brand__name em{ font-style:normal; color:var(--brand-2); }
.nav--light .brand__name, .page-head .brand__name{ color:var(--text); }

.nav__links{ display:flex; align-items:center; gap:4px; margin-inline:auto; list-style:none; }
.nav__link{
  position:relative; display:block; padding:9px 15px; border-radius:var(--r-pill);
  font-size:15px; font-weight:600; color:rgba(255,255,255,.74);
  transition:color .25s ease, background .25s ease;
}
.nav__link:hover, .nav__link.is-active{ color:#fff; background:rgba(255,255,255,.08); }
.nav.is-stuck .nav__link:hover, .nav.is-stuck .nav__link.is-active{ background:var(--mist); }
.nav__actions{ display:flex; align-items:center; gap:10px; flex:none; }
.nav__burger{ display:none; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.nav__burger span{ display:block; width:20px; height:2px; border-radius:2px; background:#fff; transition:transform .35s var(--ease), opacity .25s ease, background .3s ease; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__progress{ position:absolute; left:0; bottom:-1px; height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--grad-brand); }

/* Mobil menyu */
.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--grad-ink); color:#fff;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 40px;
  display:flex; flex-direction:column; gap:6px;
  clip-path: inset(0 0 100% 0); pointer-events:none;
}
.mobile-menu.is-open{ pointer-events:auto; }
.mobile-menu a{ font-size:26px; font-weight:800; letter-spacing:-.03em; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08); opacity:0; }
.mobile-menu .btn{ margin-top:24px; opacity:0; }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative; min-height: min(100svh, 940px);
  padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 84px));
  padding-bottom: clamp(64px, 8vw, 110px);
  background:var(--grad-ink); color:#fff; overflow:hidden; isolation:isolate;
  display:flex; align-items:center;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.hero__glow--1{ width:52vw; height:52vw; max-width:640px; max-height:640px; background:radial-gradient(circle,#00B389,transparent 66%); top:-14%; right:-8%; }
.hero__glow--2{ width:42vw; height:42vw; max-width:520px; max-height:520px; background:radial-gradient(circle,#FFB020,transparent 66%); bottom:-18%; left:-10%; opacity:.3; }
.hero__grid{
  position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
}
.hero__inner{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items:center; width:100%; }

.hero__badge{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 9px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); font-size:13.5px; font-weight:600; color:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); margin-bottom:26px;
}
.hero__badge b{ background:var(--grad-brand); color:#04301f; padding:4px 11px; border-radius:var(--r-pill); font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }

.hero h1{ font-size: clamp(40px, 5.6vw, 72px); line-height:1.04; }
.hero__sub{ font-size: clamp(17px, 1.5vw, 19.5px); color:rgba(255,255,255,.7); margin-top:24px; max-width:520px; line-height:1.6; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero__stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 34px; max-width:520px; margin-top:48px; padding-top:32px; border-top:1px solid rgba(255,255,255,.1); }
.hero__stat b{ display:block; font-size: clamp(26px,3vw,34px); font-weight:800; letter-spacing:-.03em; line-height:1; }
.hero__stat span{ display:block; font-size:13.5px; color:rgba(255,255,255,.55); margin-top:8px; font-weight:500; }

/* Söz açılışı animasiyası */
.split-line{ display:block; overflow:hidden; }
.split-word{ display:inline-block; will-change:transform; }

/* Telefon maketi */
.hero__visual{ position:relative; display:flex; justify-content:center; align-items:center; }
.phone{
  position:relative; width: min(320px, 78vw); aspect-ratio: 320/660;
  border-radius:44px; background:#05101f; padding:11px;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.8), 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.06);
  will-change:transform;
}
.phone::before{ content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:96px; height:26px; border-radius:var(--r-pill); background:#05101f; z-index:3; }
.phone__screen{ position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden; background:#0B1729; display:flex; flex-direction:column; }
.phone__top{ padding:38px 20px 14px; background:linear-gradient(180deg,#0F2440,#0B1729); }
.phone__route{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:#fff; }
.phone__route span{ color:rgba(255,255,255,.4); font-weight:500; }
.phone__body{ flex:1; padding:14px; display:flex; flex-direction:column; gap:11px; background:#0B1729; overflow:hidden; }
.ride-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  border-radius:16px; padding:13px; display:flex; gap:11px; align-items:center; will-change:transform,opacity;
}
.ride-card__ava{ width:38px; height:38px; border-radius:12px; background:var(--grad-brand); flex:none; display:grid; place-items:center; font-weight:800; font-size:14px; color:#04301f; }
.ride-card__body{ flex:1; min-width:0; }
.ride-card__name{ font-size:13px; font-weight:700; color:#fff; display:flex; align-items:center; gap:6px; }
.ride-card__name i{ font-style:normal; font-size:10.5px; color:var(--accent); font-weight:700; }
.ride-card__meta{ font-size:11.5px; color:rgba(255,255,255,.45); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ride-card__price{ font-size:14.5px; font-weight:800; color:var(--brand-2); flex:none; }
.phone__cta{ margin-top:auto; padding:12px; border-radius:14px; background:var(--grad-brand); color:#04301f; font-weight:800; font-size:13.5px; text-align:center; }

.float-chip{
  position:absolute; display:flex; align-items:center; gap:9px; padding:11px 15px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-pill);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  font-size:13px; font-weight:700; color:#fff; box-shadow:0 20px 40px -20px rgba(0,0,0,.7); white-space:nowrap;
}
.float-chip i{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:12px; flex:none; }
.float-chip--1{ top:6%; left:-15%; }
.float-chip--1 i{ background:var(--grad-brand); color:#04301f; }
.float-chip--2{ bottom:12%; right:-15%; }
.float-chip--2 i{ background:var(--grad-warm); color:#3b2200; }

/* ---------- 7. Marquee (marşrutlar) ---------- */
.marquee{ position:relative; overflow:hidden; padding:22px 0; border-block:1px solid var(--line-2); background:var(--paper); }
.marquee__track{ display:flex; gap:14px; width:max-content; will-change:transform; }
.marquee__item{
  display:inline-flex; align-items:center; gap:10px; padding:10px 20px; border-radius:var(--r-pill);
  background:var(--mist); border:1px solid var(--line-2); font-size:14.5px; font-weight:700; color:var(--text); white-space:nowrap;
}
.marquee__item svg{ width:15px; height:15px; color:var(--brand); flex:none; }
.marquee__item b{ color:var(--brand); font-weight:800; }
.marquee::before,.marquee::after{ content:""; position:absolute; top:0; bottom:0; width:12%; z-index:2; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg,var(--paper),transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--paper),transparent); }

/* ---------- 8. Addımlar ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(20px,2.6vw,32px); position:relative; }
.step{ position:relative; }
.step__num{
  width:56px; height:56px; border-radius:20px; display:grid; place-items:center;
  font-size:19px; font-weight:800; color:#fff; background:var(--ink);
  margin-bottom:22px; box-shadow:var(--sh-md); position:relative; z-index:2;
}
.step:nth-child(2) .step__num{ background-image:var(--grad-brand); color:#04301f; }
.step:nth-child(3) .step__num{ background-image:var(--grad-warm); color:#3b2200; }
.step h3{ margin-bottom:10px; }
.step p{ color:var(--muted); font-size:15.5px; }
.steps__line{ position:absolute; top:6px; left:2.5%; width:73.5%; height:44px; z-index:0; }
.steps__line path{ stroke:var(--line); stroke-width:2; stroke-dasharray:7 7; fill:none; }

/* ---------- 9. Kartlar / xüsusiyyətlər ---------- */
.grid{ display:grid; gap: clamp(18px, 2.2vw, 26px); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.card{
  position:relative; padding: clamp(26px,2.8vw,34px); border-radius:var(--r-lg);
  background:var(--paper); border:1px solid var(--line); overflow:hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent; }
.card h3{ margin-bottom:10px; font-size:20px; }
.card p{ color:var(--muted); font-size:15.5px; }
.card__icon{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); margin-bottom:20px;
}
.card__icon svg{ width:24px; height:24px; }
.card--warm .card__icon{ background:var(--accent-soft); color:var(--accent-2); }
.card--ink .card__icon{ background:var(--mist-2); color:var(--ink); }
.card::after{
  content:""; position:absolute; inset:auto -40% -70% auto; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,179,137,.12), transparent 70%);
  opacity:0; transition:opacity .5s ease;
}
.card:hover::after{ opacity:1; }

.section--ink .card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.09); }
.section--ink .card:hover{ background:rgba(255,255,255,.07); box-shadow:none; border-color:rgba(255,255,255,.18); }
.section--ink .card p{ color:rgba(255,255,255,.62); }
.section--ink .card__icon{ background:rgba(5,217,165,.12); color:var(--brand-2); }

/* ---------- 10. Rol blokları ---------- */
.tabs{ display:inline-flex; padding:5px; border-radius:var(--r-pill); background:var(--mist-2); gap:4px; margin-bottom:44px; }
.tab{ padding:11px 26px; border-radius:var(--r-pill); font-weight:700; font-size:15px; color:var(--muted); transition:color .3s ease; position:relative; z-index:1; }
.tab.is-active{ color:var(--ink); }
.tabs{ position:relative; }
.tabs__pill{ position:absolute; top:5px; bottom:5px; border-radius:var(--r-pill); background:#fff; box-shadow:var(--sh-sm); z-index:0; }

.panel{ display:none; }
.panel.is-active{ display:block; }
.role{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(32px,5vw,70px); align-items:center; }
.role__list{ list-style:none; display:flex; flex-direction:column; gap:18px; margin-top:32px; }
.role__list li{ display:flex; gap:14px; align-items:flex-start; font-size:16px; }
.role__list i{
  flex:none; width:26px; height:26px; border-radius:9px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; font-style:normal; margin-top:2px;
}
.role__list i svg{ width:14px; height:14px; }
.role__list b{ display:block; font-weight:700; }
.role__list span{ color:var(--muted); font-size:15px; }

.mock{
  border-radius:var(--r-xl); background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh-lg); padding:26px; position:relative; overflow:hidden;
}
.mock__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.mock__title{ font-weight:800; font-size:17px; letter-spacing:-.02em; }
.mock__dot{ display:flex; gap:6px; }
.mock__dot span{ width:9px; height:9px; border-radius:50%; background:var(--mist-2); }
.mock__field{ padding:14px 16px; border-radius:14px; background:var(--mist); border:1px solid var(--line-2); margin-bottom:11px; display:flex; align-items:center; gap:12px; }
.mock__field svg{ width:18px; height:18px; color:var(--brand); flex:none; }
.mock__field label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); font-weight:700; }
.mock__field b{ font-size:15px; font-weight:700; }
.mock__row{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.mock__row .mock__field{ margin-bottom:11px; }
.mock__btn{ padding:15px; border-radius:14px; background-image:var(--grad-brand); color:#04301f; font-weight:800; text-align:center; margin-top:8px; box-shadow:var(--sh-brand); }

/* ---------- 11. Təhlükəsizlik / trust ---------- */
.trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.trust__item{ background:var(--paper); padding: clamp(24px,2.6vw,32px); }
.trust__item b{ display:block; font-size: clamp(28px,3.4vw,40px); font-weight:800; letter-spacing:-.03em; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.trust__item span{ display:block; color:var(--muted); font-size:14.5px; margin-top:8px; font-weight:600; }

/* ---------- 12. FAQ ---------- */
.faq{ max-width:840px; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:26px 0; text-align:left; font-size: clamp(16.5px,1.7vw,19px); font-weight:700; letter-spacing:-.02em;
}
.faq__q i{ flex:none; width:32px; height:32px; border-radius:50%; background:var(--mist); display:grid; place-items:center; transition:background .3s ease, transform .4s var(--ease); }
.faq__q i svg{ width:14px; height:14px; transition:transform .4s var(--ease); }
.faq__item.is-open .faq__q i{ background:var(--ink); color:#fff; }
.faq__item.is-open .faq__q i svg{ transform:rotate(45deg); }
.faq__a{ height:0; overflow:hidden; }
.faq__a p{ padding-bottom:26px; color:var(--muted); font-size:16px; max-width:92%; }

/* ---------- 13. CTA ---------- */
.cta{ position:relative; overflow:hidden; border-radius: clamp(24px,3vw,40px); padding: clamp(44px,6vw,84px); background:var(--grad-ink); color:#fff; text-align:center; isolation:isolate; }
.cta__glow{ position:absolute; width:60%; aspect-ratio:1; border-radius:50%; filter:blur(100px); opacity:.42; z-index:-1; }
.cta__glow--1{ background:#00B389; top:-30%; left:-10%; }
.cta__glow--2{ background:#FF7A2F; bottom:-40%; right:-10%; opacity:.26; }
.cta h2{ max-width:16ch; margin-inline:auto; }
.cta .lead{ max-width:52ch; margin-inline:auto; color:rgba(255,255,255,.72); }
.cta .eyebrow{ color:var(--brand-3); background:rgba(5,217,165,.12); }
.cta .eyebrow::before{ background:var(--brand-3); }
.cta__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }

.store-btn{
  display:inline-flex; align-items:center; gap:12px; padding:12px 22px; border-radius:16px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff;
  transition:background .3s ease, transform .35s var(--ease-out), border-color .3s ease;
}
.store-btn:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); border-color:rgba(255,255,255,.3); }
.store-btn svg{ width:26px; height:26px; flex:none; }
.store-btn span{ display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.6; font-weight:600; }
.store-btn b{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.02em; margin-top:1px; }

/* ---------- 14. Footer ---------- */
.footer{ background:var(--ink); color:#fff; padding-top: clamp(56px,6vw,80px); }
.footer__top{ display:grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(28px,4vw,48px); padding-bottom:48px; }
.footer__about p{ color:rgba(255,255,255,.55); font-size:15px; margin-top:18px; max-width:34ch; }
.footer h4{ font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.42); margin-bottom:18px; font-weight:700; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer a{ color:rgba(255,255,255,.72); font-size:15px; transition:color .25s ease; }
.footer a:hover{ color:var(--brand-2); }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  padding-block:26px; border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.42); font-size:14px;
}
.socials{ display:flex; gap:10px; }
.socials a{ width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.06); display:grid; place-items:center; transition:background .3s ease, transform .3s var(--ease-out); }
.socials a:hover{ background:var(--brand); transform:translateY(-3px); }
.socials svg{ width:17px; height:17px; }

/* ---------- 15. Animasiya köməkçiləri ---------- */
.has-js .reveal{ opacity:0; }
.has-js [data-split]{ opacity:0; }
.has-js.no-gsap .reveal, .has-js.no-gsap [data-split]{ opacity:1 !important; transform:none !important; }
.noscroll{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ==========================================================================
   16. Daxili səhifələr (qeydiyyat, hüquqi mətnlər)
   ========================================================================== */
.page-head{
  position:relative; padding-top: calc(var(--nav-h) + clamp(48px,6vw,84px)); padding-bottom: clamp(40px,5vw,64px);
  background:var(--grad-ink); color:#fff; overflow:hidden; isolation:isolate;
}
.page-head .hero__glow--1{ width:44vw; height:44vw; max-width:520px; max-height:520px; top:-30%; right:-6%; opacity:.42; }
.page-head h1{ font-size: clamp(32px,4.6vw,54px); max-width:20ch; }
.page-head .lead{ color:rgba(255,255,255,.68); max-width:60ch; }
.crumbs{ display:flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.5); margin-bottom:20px; }
.crumbs a:hover{ color:#fff; }
.crumbs span{ opacity:.5; }

/* Form */
.auth{ display:grid; grid-template-columns: 1fr .85fr; gap: clamp(32px,5vw,64px); align-items:start; }
.form-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  padding: clamp(26px,3.4vw,44px); box-shadow:var(--sh-lg);
}
.form-card__head{ margin-bottom:28px; }
.form-card__head h2{ font-size: clamp(24px,2.6vw,30px); }
.form-card__head p{ color:var(--muted); font-size:15.5px; margin-top:10px; }

.field{ margin-bottom:18px; }
.field > label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; letter-spacing:-.01em; }
.field__hint{ font-size:13px; color:var(--muted-2); margin-top:7px; }
.input, .select, .textarea{
  width:100%; padding:15px 17px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--mist); font-size:16px; font-weight:600; color:var(--text);
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.input::placeholder, .textarea::placeholder{ color:var(--muted-2); font-weight:500; }
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(0,179,137,.12);
}
.textarea{ min-height:130px; resize:vertical; line-height:1.6; font-weight:500; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235B6B85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; }

.phone-input{ display:flex; align-items:center; gap:0; border:1.5px solid var(--line); border-radius:14px; background:var(--mist); overflow:hidden; transition:border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.phone-input:focus-within{ border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(0,179,137,.12); }
.phone-input__cc{ display:flex; align-items:center; gap:8px; padding:15px 14px; font-weight:800; font-size:16px; border-right:1.5px solid var(--line); color:var(--muted); flex:none; }
.phone-input__cc img, .phone-input__cc svg{ width:22px; height:16px; border-radius:3px; }
.phone-input input{ flex:1; border:0; background:transparent; padding:15px 16px; font-size:16px; font-weight:600; letter-spacing:.04em; }
.phone-input input:focus{ outline:none; }

/* Rol seçimi */
.roles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.role-opt{ position:relative; }
.role-opt input{ position:absolute; opacity:0; width:0; height:0; }
.role-opt label{
  display:block; padding:18px 18px 16px; border-radius:18px; border:1.5px solid var(--line);
  background:var(--paper); cursor:pointer; transition:border-color .25s ease, background .25s ease, transform .3s var(--ease-out), box-shadow .3s ease;
}
.role-opt label:hover{ transform:translateY(-2px); box-shadow:var(--sh-sm); }
.role-opt i{ display:grid; place-items:center; width:42px; height:42px; border-radius:13px; background:var(--mist); color:var(--muted); margin-bottom:12px; transition:background .25s ease, color .25s ease; }
.role-opt i svg{ width:20px; height:20px; }
.role-opt b{ display:block; font-size:16px; font-weight:800; letter-spacing:-.02em; }
.role-opt span{ display:block; font-size:13px; color:var(--muted); margin-top:3px; line-height:1.45; }
.role-opt input:checked + label{ border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 3px rgba(0,179,137,.1); }
.role-opt input:checked + label i{ background:var(--brand); color:#fff; }
.role-opt input:focus-visible + label{ box-shadow:0 0 0 4px rgba(0,179,137,.22); }

/* OTP */
.otp{ display:flex; gap:10px; justify-content:space-between; margin-bottom:8px; }
.otp input{
  width:100%; aspect-ratio:1/1.15; max-width:60px; text-align:center; font-size:24px; font-weight:800;
  border-radius:14px; border:1.5px solid var(--line); background:var(--mist); transition:all .2s ease;
}
.otp input:focus{ outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(0,179,137,.12); transform:translateY(-2px); }
.otp input.is-filled{ border-color:var(--brand); background:#fff; }

.checkbox{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--muted); margin-bottom:22px; cursor:pointer; }
.checkbox input{ appearance:none; flex:none; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line); background:var(--mist); margin-top:1px; cursor:pointer; transition:all .2s ease; position:relative; }
.checkbox input:checked{ background:var(--brand); border-color:var(--brand); }
.checkbox input:checked::after{ content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid #fff; border-width:0 2.4px 2.4px 0; transform:rotate(45deg); }
.checkbox a{ color:var(--brand); font-weight:700; text-decoration:underline; text-underline-offset:2px; }

.steps-bar{ display:flex; align-items:center; gap:10px; margin-bottom:30px; }
.steps-bar__item{ flex:1; height:4px; border-radius:4px; background:var(--mist-2); overflow:hidden; }
.steps-bar__item i{ display:block; height:100%; width:0; background-image:var(--grad-brand); border-radius:4px; transition:width .6s var(--ease-out); }
.steps-bar__item.is-done i, .steps-bar__item.is-active i{ width:100%; }

.alert{ display:none; gap:12px; padding:14px 16px; border-radius:14px; font-size:14.5px; font-weight:600; margin-bottom:20px; line-height:1.5; }
.alert.is-shown{ display:flex; }
.alert svg{ width:18px; height:18px; flex:none; margin-top:2px; }
.alert--err{ background:#FEF1F1; color:#B02A2E; border:1px solid #F6D5D6; }
.alert--ok{ background:var(--brand-soft); color:#06694F; border:1px solid #B9EBDC; }
.alert--info{ background:#F0F5FF; color:#2A4C99; border:1px solid #D6E2F8; }

.form-steps > .form-step{ display:none; }
.form-steps > .form-step.is-active{ display:block; }

/* Yan panel (fayda siyahısı) */
.aside-card{ background:var(--ink); color:#fff; border-radius:var(--r-xl); padding: clamp(26px,3vw,36px); position:sticky; top:96px; overflow:hidden; isolation:isolate; }
.aside-card .hero__glow--1{ width:320px; height:320px; top:-40%; right:-30%; opacity:.34; }
.aside-card h3{ font-size:22px; margin-bottom:6px; }
.aside-card > p{ color:rgba(255,255,255,.6); font-size:15px; }
.aside-list{ list-style:none; display:flex; flex-direction:column; gap:16px; margin-top:26px; }
.aside-list li{ display:flex; gap:13px; align-items:flex-start; font-size:15px; color:rgba(255,255,255,.82); }
.aside-list i{ flex:none; width:26px; height:26px; border-radius:9px; background:rgba(5,217,165,.16); color:var(--brand-2); display:grid; place-items:center; font-style:normal; }
.aside-list i svg{ width:14px; height:14px; }
.aside-note{ margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:13.5px; color:rgba(255,255,255,.5); }

/* Hüquqi mətn səhifələri */
.legal{ display:grid; grid-template-columns: 260px 1fr; gap: clamp(32px,5vw,64px); align-items:start; }
.toc{ position:sticky; top:96px; }
.toc h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-2); margin-bottom:16px; font-weight:700; }
.toc ul{ list-style:none; display:flex; flex-direction:column; gap:2px; border-left:2px solid var(--line); }
.toc a{ display:block; padding:8px 0 8px 16px; font-size:14.5px; color:var(--muted); margin-left:-2px; border-left:2px solid transparent; transition:color .25s ease, border-color .25s ease; }
.toc a:hover{ color:var(--text); }
.toc a.is-active{ color:var(--brand); border-left-color:var(--brand); font-weight:700; }

.prose{ max-width:76ch; }
.prose h2{ font-size: clamp(22px,2.4vw,28px); margin-top:52px; margin-bottom:16px; scroll-margin-top:100px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:18.5px; margin-top:30px; margin-bottom:10px; }
.prose p{ color:var(--muted); margin-bottom:16px; font-size:16.5px; }
.prose ul, .prose ol{ padding-left:22px; margin-bottom:20px; display:flex; flex-direction:column; gap:10px; color:var(--muted); font-size:16.5px; }
.prose li{ padding-left:4px; }
.prose li::marker{ color:var(--brand); font-weight:700; }
.prose strong{ color:var(--text); font-weight:700; }
.prose a{ color:var(--brand); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.prose table{ width:100%; border-collapse:collapse; margin-bottom:24px; font-size:15.5px; }
.prose th, .prose td{ text-align:left; padding:13px 14px; border:1px solid var(--line); vertical-align:top; }
.prose th{ background:var(--mist); font-weight:700; font-size:14px; }
.prose td{ color:var(--muted); }
.callout{ padding:20px 22px; border-radius:var(--r-md); background:var(--brand-soft); border:1px solid #B9EBDC; margin-bottom:24px; }
.callout p{ color:#06694F; margin:0; font-size:15.5px; font-weight:600; }
.callout--warn{ background:var(--accent-soft); border-color:#F7DFB2; }
.callout--warn p{ color:#8A5A00; }
.update-chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-size:13.5px; font-weight:600; color:rgba(255,255,255,.8); }

/* Əlaqə */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:48px; }
.contact-card{ padding:26px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--paper); transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.contact-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.contact-card i{ display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:var(--brand-soft); color:var(--brand); margin-bottom:16px; }
.contact-card i svg{ width:21px; height:21px; }
.contact-card b{ display:block; font-size:17px; font-weight:800; letter-spacing:-.02em; }
.contact-card a, .contact-card span{ display:block; color:var(--muted); font-size:15px; margin-top:6px; }
.contact-card a:hover{ color:var(--brand); }

/* ---------- 17. Responsiv ---------- */
@media (max-width: 1080px){
  .hero__inner{ grid-template-columns:1fr; gap:56px; text-align:center; }
  .hero__sub{ margin-inline:auto; }
  .hero__cta{ justify-content:center; }
  .hero__stats{ margin-inline:auto; }
  .hero__stats{ text-align:center; }
  .hero__badge{ margin-inline:auto; }
  .float-chip--1{ left:-4%; }
  .float-chip--2{ right:-4%; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .legal{ grid-template-columns:1fr; }
  .toc{ position:static; }
  .toc ul{ flex-direction:row; flex-wrap:wrap; border-left:0; gap:8px; }
  .toc a{ padding:8px 14px; border:1px solid var(--line); border-radius:var(--r-pill); margin-left:0; }
  .toc a.is-active{ border-color:var(--brand); }
}
@media (max-width: 900px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__actions .btn--ghost{ display:none; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .steps__line{ display:none; }
  .grid--3, .grid--2{ grid-template-columns:1fr 1fr; }
  .role{ grid-template-columns:1fr; gap:40px; }
  .trust{ grid-template-columns:1fr 1fr; }
  .auth{ grid-template-columns:1fr; }
  .aside-card{ position:static; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width: 620px){
  body{ font-size:16px; }
  .nav__inner{ gap:12px; }
  .nav__actions{ gap:6px; margin-left:auto; }
  .nav__actions .btn{ padding:11px 16px; font-size:14px; }
  .brand__name{ font-size:17px; }
  .brand__mark{ width:34px; height:34px; }
  .grid--3, .grid--2, .grid--4{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; gap:32px; }
  .hero__stats{ gap:22px 18px; }
  .hero__stat{ flex:1 1 40%; }
  .roles{ grid-template-columns:1fr; }
  .otp input{ max-width:100%; font-size:20px; }
  .btn{ padding:14px 22px; font-size:15px; }
  .cta__btns .btn, .hero__cta .btn{ width:100%; }
  .float-chip{ font-size:11.5px; padding:9px 12px; }
  .float-chip--1{ top:-26px; left:0; }
  .float-chip--2{ bottom:-18px; right:0; }
  .hero__visual{ margin-block:22px; }
  .mock__row{ grid-template-columns:1fr; }
  .trust{ grid-template-columns:1fr; }
  .prose table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ---------- 14. Naviqasiya düzəlişi ----------
   Menyuya "Haqqımızda" əlavə olunandan sonra altı bənd + iki düymə
   1200px-lik konteynerə sığmırdı və bəndlərin mətni iki sətrə düşürdü.
   Aşağıdakı qaydalar bütün mövcud media bloklarından sonra gəlir ki,
   köhnə 900px kəsiyini əvəz edə bilsin. */

.nav__links{ flex-wrap:nowrap; }
.nav__link{ white-space:nowrap; }
.brand__name{ white-space:nowrap; }

/* Geniş ekran: bəndləri bir az sıxlaşdırırıq, hamısı bir sətirdə qalsın. */
@media (min-width:1101px){
  .nav__inner{ gap:20px; }
  .nav__links{ gap:2px; }
  .nav__link{ padding:9px 12px; font-size:14.5px; }
}

/* 1240px-dən aşağıda "Əlaqə" düyməsi menyuya yer verir —
   link altlıqda və burger menyusunda qalır. */
@media (max-width:1240px){
  .nav__actions .btn--ghost{ display:none; }
}

/* Altı bənd sığmayan enlikdə üfüqi menyunu burger əvəz edir. */
@media (max-width:1100px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
}

/* Mobil menyu: bənd sayı artdığı üçün alçaq ekranlarda sürüşdürülə bilsin. */
.mobile-menu{ overflow-y:auto; overscroll-behavior:contain; }
.mobile-menu a{ flex:none; }

@media (max-height:700px){
  .mobile-menu a{ font-size:21px; padding:10px 0; }
  .mobile-menu .btn{ margin-top:16px; }
}

/* Grid bəndinin standart `min-width:auto` dəyəri uzun məzmunun (cədvəl,
   kəsilməyən söz) sıxılmasına imkan vermir və sütunu konteynerdən kənara
   itələyir — dar ekranda hüquqi səhifələrin sağ kənarı kəsilirdi.
   `min-width:0` sütunu konteyner eninə qaytarır; cədvəlin öz üfüqi
   sürüşməsi (.prose table) onsuz da var. */
.legal > *{ min-width:0; }
.prose{ overflow-wrap:anywhere; }