/* ════════════════════════════════════════════════════════════════
   SayBoot — landing page
   Aesthetic: dark editorial-tech terminal
   Display: Fraunces (variable serif, expressive italic + soft axis)
   Body:    Manrope (clean modern sans)
   Mono:    JetBrains Mono (terminal touches)
   ──────────────────────────────────────────────────────────────── */

:root {
  /* Palette */
  --c-bg:        #070b14;
  --c-bg-elev:   #0d1424;
  --c-bg-soft:   #111a2e;
  --c-line:      #1f2a3f;
  --c-line-soft: rgba(255, 255, 255, 0.06);
  --c-text:      #e6edf7;
  --c-muted:     #8b95a8;
  --c-mute2:     #5e6a82;

  /* SayBoot brand accent: #069bca. Drives every accent on the site
     (glows, buttons, links, CTA, step numbers, drop cap, radar rings,
     plan cards, faq chevrons, footer dot, etc.) via the existing
     --c-cyan references. Variable name kept for minimal-diff. */
  --c-cyan:      #069bca;
  --c-cyan-deep: #03657f;
  --c-amber:     #fbbf24;
  --c-amber-deep:#b45309;
  --c-emerald:   #34d399;

  /* Typography — Fraunces is the primary display serif; Playfair Display
     is only loaded on the Russian page and acts as a cyrillic fallback
     for glyphs Fraunces doesn't ship. Browsers use the first font in
     the chain that provides each glyph, so mixed Latin/Cyrillic copy
     renders automatically with the right family per character. */
  --f-display: 'Fraunces', 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --f-body:    'Manrope', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --radius: 14px;
  --radius-sm: 8px;
}

/* ──────────── Reset ──────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; }
ul, ol { list-style: none; padding: 0; margin: 0; }
::selection { background: var(--c-cyan); color: #001017; }

/* ──────────── Decorative background layers ──────────── */
.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
  z-index: 0;
}
.bg-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 0;
}
.bg-glow {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.32;
  z-index: 0;
}
.bg-glow--cyan {
  width: 720px; height: 720px;
  top: -240px; left: -180px;
  background: radial-gradient(circle, var(--c-cyan) 0%, transparent 65%);
}
.bg-glow--amber {
  width: 540px; height: 540px;
  top: 30%; right: -180px;
  background: radial-gradient(circle, var(--c-amber) 0%, transparent 65%);
  opacity: 0.18;
}

/* ──────────── Layout primitives ──────────── */
main, header, footer, section { position: relative; z-index: 1; }

.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(80px, 12vw, 160px) var(--gutter);
}

.section__head {
  max-width: 740px;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.section__head--row {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: end;
}
@media (min-width: 880px) {
  .section__head--row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; }
}
.section__lede--right { justify-self: end; max-width: 460px; }

.kicker {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cyan);
  margin: 0 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}
.kicker--center { text-align: center; }
.kicker--center::before { display: none; }

.section__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  color: var(--c-text);
}
.section__title em {
  font-style: italic;
  color: var(--c-cyan);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

.section__lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--c-muted);
  max-width: 60ch;
  margin: 0;
}

/* ──────────── Buttons ──────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: linear-gradient(180deg, var(--c-cyan) 0%, var(--c-cyan-deep) 100%);
  color: #001017;
  box-shadow: 0 12px 36px -12px rgba(34, 211, 238, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn--primary:hover {
  box-shadow: 0 18px 48px -12px rgba(34, 211, 238, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--c-line);
  color: var(--c-text);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}

.btn--lg { padding: 18px 30px; font-size: 15px; }

/* ──────────── Nav ──────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7, 11, 20, 0.86) 0%, rgba(7, 11, 20, 0.62) 100%);
  border-bottom: 1px solid var(--c-line-soft);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.nav__brand-mark {
  /* SayBoot brand badge: the inline SVG already draws its own rounded
     square #069bca bg + white icon, so the wrapper is just a sizing
     container. The drop-shadow gives it a soft glow against the nav. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  filter: drop-shadow(0 6px 18px rgba(6, 155, 202, 0.45));
}
.nav__brand-mark svg { width: 100%; height: 100%; display: block; }

/* SayBoot wordmark two-tone: "Say" stays white, "Boot" picks up the
   brand cyan so the name reads as two stitched halves that echo the
   badge gradient right next to it. Applies in both the nav and the
   footer — each brand text wraps the letters in these span classes. */
.sb-say  { color: #ffffff; }
.sb-boot { color: var(--c-cyan); }

.nav__links {
  display: none;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-size: 14px;
  color: var(--c-muted);
}
.nav__links a { transition: color .2s ease; }
.nav__links a:hover { color: var(--c-text); }
@media (min-width: 880px) {
  .nav__links { display: inline-flex; }
  .nav__cta { margin-left: 0; }
}
.nav__cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 880px) { .nav__cta { margin-left: 0; } }

/* ──────────── Language switcher ──────────── */
/*
 * Native <details>/<summary> dropdown. No JS required for the open/close
 * interaction itself — we only use JS to stamp a cookie on click so the
 * auto-redirect respects the user's explicit choice next visit.
 */
.lang-switcher {
  position: relative;
}
.lang-switcher[open] .lang-switcher__toggle {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
}
.lang-switcher__toggle {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.lang-switcher__toggle:hover { color: var(--c-text); }
.lang-switcher__toggle::-webkit-details-marker { display: none; }
.lang-switcher__globe {
  display: inline-flex;
  width: 14px; height: 14px;
  color: var(--c-cyan);
}
.lang-switcher__globe svg { width: 100%; height: 100%; }
.lang-switcher__current { color: var(--c-text); }

.lang-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: rgba(13, 20, 36, 0.96);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  z-index: 60;
}
.lang-switcher__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--c-muted);
  transition: background .2s ease, color .2s ease;
}
.lang-switcher__item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--c-text);
}
.lang-switcher__item.is-active {
  color: var(--c-cyan);
  background: rgba(34, 211, 238, 0.08);
}
.lang-switcher__item.is-active::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-cyan);
  box-shadow: 0 0 10px var(--c-cyan);
}
.lang-switcher__item:not(.is-active)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-mute2);
  opacity: 0.3;
}

/* ──────────── HERO ──────────── */
.hero {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(60px, 10vw, 140px) var(--gutter) clamp(80px, 12vw, 160px);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 8vw, 96px);
  align-items: center;
}
@media (min-width: 1020px) {
  .hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding: 8px 16px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 32px;
}
.eyebrow__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-emerald);
  box-shadow: 0 0 14px var(--c-emerald);
  animation: pulse-soft 2.4s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

.hero__headline {
  font-family: var(--f-display);
  font-weight: 350;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0 0 36px;
  color: var(--c-text);
  font-variation-settings: 'opsz' 144, 'SOFT' 40;
}
.hero__line-1, .hero__line-2, .hero__line-3 { display: block; }
.hero__line-2 {
  font-style: italic;
  color: var(--c-cyan);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-weight: 300;
}
.hero__line-2 em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  position: relative;
  display: inline-block;
}
.hero__line-2 em::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 8%;
  height: 16%;
  background: var(--c-cyan);
  opacity: 0.18;
  z-index: -1;
  border-radius: 2px;
}

.hero__sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--c-muted);
  max-width: 56ch;
  margin: 0 0 40px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 56px;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 36px);
  padding-top: 32px;
  margin: 0;
  border-top: 1px solid var(--c-line);
}
.hero__stats > div { display: flex; flex-direction: column; gap: 6px; }
.hero__stats dt {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-mute2);
}
.hero__stats dd {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  color: var(--c-text);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hero__stats dd span {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}

/* Hero visual: radar + terminal */
.hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Radar pulse */
.radar {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin: 0 auto;
}
.radar__core {
  position: absolute;
  top: 50%; left: 50%;
  width: 88px; height: 88px;
  border-radius: 50%;
  /* SayBoot brand cyan — solid, matches the favicon badge + nav mark. */
  background: #069bca;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 18px 50px -14px rgba(6, 155, 202, 0.65),
              inset 0 1px 0 rgba(255, 255, 255, 0.35),
              0 0 0 1px rgba(6, 155, 202, 0.3);
  z-index: 5;
}
.radar__core svg { width: 52px; height: 52px; }
.radar__ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid var(--c-cyan);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: radar-pulse 5s ease-out infinite;
}
.radar__ring--1 { width: 120px; height: 120px; animation-delay: 0s;   }
.radar__ring--2 { width: 120px; height: 120px; animation-delay: 1.25s; }
.radar__ring--3 { width: 120px; height: 120px; animation-delay: 2.5s;  }
.radar__ring--4 { width: 120px; height: 120px; animation-delay: 3.75s; }
@keyframes radar-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0;   border-width: 2px; }
  10%  { opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0;   border-width: 0.5px; }
}

.radar__label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  padding: 6px 12px;
  background: rgba(7, 11, 20, 0.85);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.radar__label-tag {
  color: var(--c-cyan);
  font-weight: 600;
}
.radar__label--echo  { top: 6%;  left: 6%;  }
.radar__label--cloud { top: 6%;  right: 6%; }
.radar__label--lan   { bottom: 6%; left: 6%; }
.radar__label--pc    { bottom: 6%; right: 6%; }

/* ──────────── Speech bubble (Say → Boot flow) ──────────── */
/*
 * Sits between the radar and the terminal in the hero__visual column.
 * Represents the "Say" half of the SayBoot name — the user's voice
 * command. The .sb-flow block underneath is a short vertical line +
 * chevron + "boot" tag that narrates the transition from the bubble
 * into the terminal log, which is the "Boot" half.
 */
.sb-bubble {
  position: relative;
  align-self: flex-start;
  max-width: 90%;
  margin: 0 auto -8px 18px;
  padding: 14px 20px 14px 18px;
  border-radius: 18px 18px 18px 4px;
  background: linear-gradient(135deg, #1fc4ea 0%, #069bca 55%, #034c66 100%);
  color: #ffffff;
  box-shadow:
    0 18px 48px -16px rgba(6, 155, 202, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  animation: sb-bubble-float 5s ease-in-out infinite;
}
@keyframes sb-bubble-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Bubble tail — small triangle at the bottom-left pointing down,
   built entirely with a clipped pseudo-element. */
.sb-bubble::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 16px;
  height: 14px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 55% 100%);
  /* Keep the radius illusion by matching the nearest corner */
  border-bottom-left-radius: 4px;
}

.sb-bubble__tag {
  flex: none;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.sb-bubble__text {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.35;
  color: #ffffff;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}

/* Flow indicator between the bubble and the terminal. */
.sb-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 -4px 40px;
  color: var(--c-mute2);
}
.sb-flow__line {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, rgba(6, 155, 202, 0.8), transparent);
  position: relative;
}
.sb-flow__arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--c-cyan);
  border-bottom: 1.5px solid var(--c-cyan);
  transform: rotate(45deg) translate(-14px, 6px);
}
.sb-flow__label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-cyan);
  padding: 3px 9px;
  border: 1px solid rgba(6, 155, 202, 0.4);
  border-radius: 999px;
  background: rgba(6, 155, 202, 0.08);
}

@media (max-width: 760px) {
  .sb-bubble { max-width: 100%; margin-left: 0; }
  .sb-bubble__text { font-size: 14px; }
}

/* Terminal */
.terminal {
  background: #050810;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 28px 80px -32px rgba(0, 0, 0, 0.7),
              inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: var(--f-mono);
}
.terminal__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--c-line);
}
.terminal__dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--c-line);
}
.terminal__dot:nth-child(1) { background: #ff5f57; }
.terminal__dot:nth-child(2) { background: #febc2e; }
.terminal__dot:nth-child(3) { background: #28c840; }
.terminal__title {
  margin-left: 12px;
  font-size: 11px;
  color: var(--c-mute2);
  letter-spacing: 0.04em;
}
.terminal__body {
  margin: 0;
  padding: 18px 20px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--c-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.terminal__body code { color: inherit; font-family: inherit; }
.t-dim     { color: var(--c-mute2); }
.t-cyan    { color: var(--c-cyan);  }
.t-amber   { color: var(--c-amber); }
.t-emerald { color: var(--c-emerald); }

/* Hero scroll cue */
.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mute2);
}
.hero__scroll-line {
  width: 64px;
  height: 1px;
  background: var(--c-line);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--c-cyan), transparent);
  animation: slide 2.6s ease-in-out infinite;
}
@keyframes slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}
@media (max-width: 700px) { .hero__scroll { display: none; } }

/* ──────────── COME FUNZIONA ──────────── */
.section--how { padding-top: clamp(40px, 6vw, 80px); }

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  counter-reset: step;
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

.step {
  position: relative;
  background: linear-gradient(180deg, var(--c-bg-elev) 0%, rgba(13, 20, 36, 0.4) 100%);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 36px 28px 32px;
  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease;
}
.step:hover {
  border-color: rgba(34, 211, 238, 0.35);
  transform: translateY(-3px);
}
.step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-cyan), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
.step:hover::before { opacity: 0.6; }

.step__num {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-size: 96px;
  line-height: 0.85;
  color: var(--c-cyan);
  margin-bottom: 16px;
  opacity: 0.92;
}
.step__title {
  font-family: var(--f-body);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  color: var(--c-text);
}
.step__body {
  margin: 0 0 24px;
  color: var(--c-muted);
  font-size: 15px;
  line-height: 1.6;
}
.step__code {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.25);
  color: var(--c-cyan);
}

/* ──────────── STORIA / FOUNDER NOTE ──────────── */
/*
 * Single-column editorial layout. The portrait is a small circular
 * "scope" (halo + rotating tick-mark ring tying back to the hero radar)
 * that floats inside the body text via shape-outside, so the first
 * paragraphs wrap naturally around it — magazine-article style, no
 * rigid two-column grid.
 */
.section--story {
  padding-top: clamp(60px, 8vw, 120px);
}

.story {
  max-width: 740px;
  margin: 0 auto;
}

.story__head {
  margin-bottom: 48px;
}

.story__title {
  font-size: clamp(44px, 6vw, 80px);
  margin: 0;
}

/* ── Body text ── */
.story__body {
  font-size: 17px;
  line-height: 1.78;
  color: var(--c-muted);
  margin: 0 0 64px;
}
.story__body p { margin: 0 0 22px; }
.story__body p:last-child { margin-bottom: 0; }
.story__body em { color: var(--c-text); font-style: italic; font-weight: 500; }

.story__lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--c-text);
}

.story__quote {
  margin: 40px 0;
  padding: 28px 0 28px 32px;
  border-left: 2px solid var(--c-cyan);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.42;
  color: var(--c-text);
  font-variation-settings: 'opsz' 144, 'SOFT' 80;
  clear: left; /* ensure the quote block breaks the float wrap above */
  position: relative;
}
.story__quote::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 24px;
  background: var(--c-cyan);
  box-shadow: 0 0 12px var(--c-cyan);
}

/* ── Circular portrait: floats into the paragraph flow ── */
.story__avatar {
  /* Desktop/tablet: float left, text wraps around with shape-outside. */
  float: left;
  width: 200px;
  height: 200px;
  margin: 6px 32px 18px 0;
  /* shape-outside uses a circle sized a touch bigger than the photo so
     the text leaves a little breathing room around the halo. */
  shape-outside: circle(54% at 50% 50%);
  -webkit-shape-outside: circle(54% at 50% 50%);
  shape-margin: 12px;
  position: relative;
  display: block;
}

/* Mobile: float is claustrophobic on narrow screens — center the
   portrait above the first paragraph instead. */
@media (max-width: 640px) {
  .story__avatar {
    float: none;
    margin: 0 auto 36px;
    width: 180px;
    height: 180px;
  }
}

/* Soft cyan halo that bleeds outside the circle — gives the portrait
   depth and ties it back to the radar glow in the hero. */
.story__avatar-halo {
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(34, 211, 238, 0.28) 0%,
    rgba(34, 211, 238, 0.08) 40%,
    transparent 72%);
  filter: blur(12px);
  z-index: 0;
  pointer-events: none;
  animation: halo-breathe 6s ease-in-out infinite;
}
@keyframes halo-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}

/* Rotating tick-mark ring. repeating-conic-gradient paints 24 thin
   ticks (1° on, 14° off) around the full circle. A radial mask narrows
   visibility to a ~3% wide band at the circle edge so only the marks
   near the ring radius render. 60s rotation reads as "slow scan". */
.story__avatar-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: repeating-conic-gradient(
    from 0deg,
    var(--c-cyan) 0deg 1deg,
    transparent 1deg 15deg
  );
  mask: radial-gradient(circle,
    transparent 0%, transparent 48%,
    #000 49%, #000 52%,
    transparent 53%, transparent 100%);
  -webkit-mask: radial-gradient(circle,
    transparent 0%, transparent 48%,
    #000 49%, #000 52%,
    transparent 53%, transparent 100%);
  animation: ring-rotate 60s linear infinite;
  opacity: 0.7;
}
@keyframes ring-rotate {
  to { transform: rotate(360deg); }
}

/* A second stationary ring — solid thin circle, half opacity — gives
   the tick marks something to "ride" on without making them feel
   unmoored. Drawn with border on ::before of the photo. */
.story__avatar-photo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(34, 211, 238, 0.55);
  box-shadow:
    0 24px 60px -24px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 32px -6px rgba(34, 211, 238, 0.35);
  z-index: 2;
  isolation: isolate;
}
.story__avatar-photo::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(34, 211, 238, 0.18);
  pointer-events: none;
  z-index: 2;
}
.story__avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Push the face up slightly so it sits in the optical centre
     of the circle rather than drifting down with the jacket. */
  object-position: center 22%;
  filter: contrast(1.04) saturate(0.95);
  transition: transform .8s ease, filter .8s ease;
}
.story__avatar:hover .story__avatar-photo img {
  transform: scale(1.03);
  filter: contrast(1.08) saturate(1);
}

/* ── Use cases ── */
.story__usecases {
  margin-bottom: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--c-line);
  clear: left;
}
.kicker--small { font-size: 11px; margin-bottom: 32px; }

.story__usecase-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.story__usecase-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-line-soft);
}
.story__usecase-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.story__usecase-num {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-size: 44px;
  line-height: 0.85;
  color: var(--c-cyan);
  min-width: 60px;
}

.story__usecase-list h4 {
  margin: 6px 0 6px;
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: -0.005em;
}
.story__usecase-list p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-muted);
}

/* ── Signature ── */
.story__sign {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 28px;
  border-top: 1px solid var(--c-line);
  margin: 0;
}
.story__sign-name {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-size: 32px;
  line-height: 1;
  color: var(--c-text);
}
.story__sign-role {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-mute2);
}

@media (max-width: 760px) {
  .story__quote { padding-left: 20px; margin: 32px 0; }
  .story__usecase-num { font-size: 36px; min-width: 48px; }
}

/* ──────────── CARATTERISTICHE ──────────── */
.features {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 24px;
}
@media (min-width: 760px)  { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.feature {
  position: relative;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 32px 30px;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.feature:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.14); }

@media (min-width: 1020px) {
  .feature--xl { grid-column: span 2; }
}

.feature--accent {
  background: linear-gradient(160deg, rgba(251, 191, 36, 0.1) 0%, var(--c-bg-elev) 60%);
  border-color: rgba(251, 191, 36, 0.32);
}
.feature--accent .feature__icon { color: var(--c-amber); border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.08); }
.feature--accent code { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); color: var(--c-amber); }

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(34, 211, 238, 0.25);
  background: rgba(34, 211, 238, 0.06);
  color: var(--c-cyan);
  margin-bottom: 20px;
}
.feature__icon svg { width: 22px; height: 22px; }

.feature h3 {
  margin: 0 0 12px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.005em;
}
.feature p {
  margin: 0 0 16px;
  color: var(--c-muted);
  font-size: 15px;
  line-height: 1.6;
}
.feature p:last-child { margin-bottom: 0; }
.feature em { color: var(--c-text); font-style: normal; font-weight: 500; }
.feature code {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(34, 211, 238, 0.06);
  border: 1px solid rgba(34, 211, 238, 0.2);
  color: var(--c-cyan);
}

/* ──────────── PREZZI ──────────── */
.pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 760px) { .pricing { grid-template-columns: 1fr 1fr; } }

.plan {
  position: relative;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
}
.plan--free {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.08) 0%, var(--c-bg-elev) 50%);
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: 0 28px 80px -40px rgba(34, 211, 238, 0.3);
}
.plan--premium { }

.plan__ribbon {
  position: absolute;
  top: -1px;
  right: 24px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--c-amber);
  color: #1a1100;
  padding: 5px 12px;
  border-radius: 0 0 6px 6px;
  font-weight: 700;
}

.plan__head { margin-bottom: 28px; }
.plan__tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mute2);
  margin: 0 0 14px;
}
.plan--free .plan__tag { color: var(--c-cyan); }
.plan__name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  margin: 0 0 18px;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}
.plan__amount {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: var(--c-cyan);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.plan--premium .plan__amount { color: var(--c-text); font-size: 32px; }
.plan__period {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-mute2);
}

.plan__list {
  margin: 0 0 32px;
  flex: 1;
}
.plan__list li {
  position: relative;
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: 15px;
  color: var(--c-muted);
}
.plan__list li:last-child { border-bottom: 0; }
.plan__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 17px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.4);
}
.plan__list li::after {
  content: '';
  position: absolute;
  left: 4px; top: 21px;
  width: 6px; height: 3px;
  border-left: 1.5px solid var(--c-cyan);
  border-bottom: 1.5px solid var(--c-cyan);
  transform: rotate(-45deg);
}
.plan__list strong { color: var(--c-text); font-weight: 600; }

.plan__cta { width: 100%; justify-content: center; }

/* ──────────── FAQ ──────────── */
.faq { max-width: 800px; margin: 0 auto; }
.faq__item {
  border-bottom: 1px solid var(--c-line);
  padding: 0;
}
.faq__item[open] .faq__chev { transform: rotate(45deg); color: var(--c-cyan); }
.faq__item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  transition: color .25s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover .faq__q { color: var(--c-text); }
.faq__q {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.35;
  color: var(--c-text);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.faq__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 300;
  color: var(--c-muted);
  flex: none;
  transition: transform .3s ease, color .3s ease, border-color .3s ease;
}
.faq__a {
  padding: 0 0 28px;
  color: var(--c-muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 65ch;
}
.faq__a code {
  font-family: var(--f-mono);
  font-size: 13px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  color: var(--c-text);
}
.faq__a em { color: var(--c-text); font-style: italic; }
.faq__a strong { color: var(--c-text); }

/* ──────────── CTA finale ──────────── */
.section--cta {
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(80px, 12vw, 160px);
}
.cta-card {
  position: relative;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 24px;
  padding: clamp(60px, 10vw, 120px) clamp(40px, 8vw, 100px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-card__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(34, 211, 238, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(251, 191, 36, 0.12) 0%, transparent 50%);
  z-index: -1;
}
.cta-card__title {
  font-family: var(--f-display);
  font-weight: 350;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 24px 0 24px;
  font-variation-settings: 'opsz' 144, 'SOFT' 40;
}
.cta-card__title em { color: var(--c-cyan); font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100; }
.cta-card__sub {
  margin: 0 auto 40px;
  max-width: 56ch;
  color: var(--c-muted);
  font-size: 17px;
  line-height: 1.6;
}
.cta-card__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ──────────── Footer ──────────── */
.footer {
  border-top: 1px solid var(--c-line);
  padding: 64px var(--gutter) 56px;
  background: rgba(7, 11, 20, 0.6);
}
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 760px) {
  .footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 56px; }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  filter: drop-shadow(0 6px 18px rgba(6, 155, 202, 0.40));
}
.footer__mark svg { width: 100%; height: 100%; display: block; }
.footer__brand-text {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.footer__tag {
  margin: 0;
  font-size: 14px;
  color: var(--c-muted);
  max-width: 28ch;
}

.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col-title {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-mute2);
  margin: 0 0 6px;
}
.footer__col a {
  font-size: 14px;
  color: var(--c-muted);
  transition: color .2s ease;
}
.footer__col a:hover { color: var(--c-text); }

.footer__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--c-muted);
}
.footer__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-emerald);
  box-shadow: 0 0 12px var(--c-emerald);
}
.footer__copy {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--c-mute2);
  line-height: 1.6;
}

/* ──────────── Responsive tightening ──────────── */
@media (max-width: 760px) {
  .hero__line-2 em::after { display: none; }
  .radar { max-width: 320px; }
  .radar__core { width: 72px; height: 72px; }
  .radar__label { font-size: 10px; padding: 5px 10px; }
  .terminal__body { font-size: 11.5px; }
  .step__num { font-size: 80px; }
}

/* ──────────── Reduced motion ──────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}