/* ===== AlyonaAuto design tokens ===== */
/* Color logic: keep Denza's "dark + saturated hero color" DNA,
   but shift the hue from green #1F913D to blue #1F2391.
   For CTAs, a brighter version of that blue reads better on dark. */

@font-face { font-family: 'Aeroport'; src: url('../fonts/Aeroport-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeroport'; src: url('../fonts/Aeroport-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeroport'; src: url('../fonts/Aeroport-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aeroport'; src: url('../fonts/Aeroport-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Craftwork'; src: url('../fonts/CraftworkGrotesk-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Craftwork'; src: url('../fonts/CraftworkGrotesk-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Craftwork'; src: url('../fonts/CraftworkGrotesk-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Neutrals — Denza lineage */
  --ink:        #0A0E1A;     /* page bg — deep blue-black */
  --ink-2:      #0E1225;     /* alternating dark */
  --surface:    #181820;     /* cards */
  --surface-2:  #1F1F28;     /* card hover */
  --paper:      #F2EFE8;     /* light section bg — warm off-white */
  --paper-ink:  #0E0E10;     /* text on paper */

  /* Brand (blue). Deep = #1F2391. Bright (on-black CTA) = ~#2B3BD9 */
  --brand-deep:    #1F2391;  /* hero-block flood color */
  --brand:         #2F3FD9;  /* buttons on dark */
  --brand-bright:  #4459FF;  /* hover + highlights */
  --brand-soft:    rgba(68,89,255,0.14);
  --brand-line:    rgba(68,89,255,0.32);

  /* Text */
  /* === ROLLBACK NIGHT-MODE: раскомментируй строку ниже чтобы вернуть белый === */
  /* --t-hi: #FFFFFF; */
  --t-hi:   #B5B9C5;
  --t-md:   #B9B9C4;
  --t-lo:   #6A6A78;

  /* Lines */
  --line:   rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);

  /* Radii */
  --r-pill: 999px;
  --r-card: 18px;
  --r-lg:   28px;

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Type */
  --f-display: 'Craftwork', 'Inter', system-ui, sans-serif;
  --f-body:    'Aeroport', 'Inter', system-ui, sans-serif;

  /* Signature Denza-ish gradient — turned blue (B prev: muted + vertical fade) */
  --grad-brand:
    linear-gradient(180deg, rgba(10,14,26,0.55) 0%, transparent 18%, transparent 82%, rgba(10,14,26,0.55) 100%),
    linear-gradient(0.056turn, #14188A 0%, #232CC0 58%, #3344E5 100%);
  --grad-brand-soft: linear-gradient(180deg, rgba(31,35,145,0) 0%, rgba(31,35,145,0.75) 100%);

  /* === ROLLBACK: раскомментируй строку ниже, чтобы убрать фоновые пятна === */
  /* --bg-spots: none; */

  --bg-spots:
    radial-gradient(circle 700px at 12% 5%,  rgba(68,89,255,0.10), transparent 60%),
    radial-gradient(circle 520px at 88% 13%, rgba(68,89,255,0.07), transparent 65%),
    radial-gradient(circle 600px at 28% 26%, rgba(120,90,255,0.06), transparent 60%),
    radial-gradient(circle 480px at 78% 38%, rgba(68,89,255,0.08), transparent 65%),
    radial-gradient(circle 560px at 8%  52%, rgba(68,89,255,0.07), transparent 60%),
    radial-gradient(circle 500px at 92% 64%, rgba(120,90,255,0.06), transparent 60%),
    radial-gradient(circle 540px at 30% 78%, rgba(68,89,255,0.08), transparent 60%),
    radial-gradient(circle 460px at 80% 90%, rgba(68,89,255,0.06), transparent 65%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { overflow-x: hidden; }
body {
  background-color: var(--ink);
  background-image: var(--bg-spots, none);
  color: var(--t-hi);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; margin: 0; line-height: 1.08; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.eyebrow { font-family: var(--f-body); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-md); }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: var(--r-pill); font-family: var(--f-body); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .25s ease, border-color .2s ease; white-space: nowrap; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-bright); transform: translateY(-1px); box-shadow: 0 14px 40px -10px rgba(68,89,255,.5); }
.btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.22); }
.btn--ghost:hover { border-color: #fff; transform: translateY(-1px); }
.btn--dark { background: #0E0E10; color: #fff; }
.btn--dark:hover { background: #000; transform: translateY(-1px); }
.btn--light { background: #fff; color: #0E0E10; }
.btn--light:hover { background: var(--paper); transform: translateY(-1px); }
.btn--lg { padding: 18px 32px; font-size: 15px; }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.pill--brand { background: var(--brand-soft); color: var(--brand-bright); border: 1px solid var(--brand-line); }
.pill--mute { background: rgba(255,255,255,.06); color: var(--t-md); border: 1px solid var(--line); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }