/* ==========================================================================
   ZETA — landing page
   Self-contained stylesheet (no Bootstrap). Vanilla CSS, CSS Grid.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand blue — deep mark (#2D4B9B) → vivid app blue (#346af9) */
  --blue-700: #223a7a;
  --blue-600: #2d4b9b;
  --blue-500: #3a5fd0;
  --blue-400: #4f7cff;
  --blue-300: #86a6ff;

  --ink:      #101828;   /* near-black, cool */
  --ink-2:    #384152;   /* body text */
  --ink-3:    #667085;   /* muted */

  --paper:    #f6f8fc;   /* off-white page */
  --surface:  #ffffff;
  --line:     #e6eaf2;   /* hairlines */

  /* Dark band */
  --navy-900: #0c1430;
  --navy-800: #121c42;

  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 28px;

  /* Tinted shadows (carry the blue hue, not black) */
  --shadow-sm: 0 2px 8px rgba(21, 39, 96, .06);
  --shadow:    0 14px 34px -14px rgba(21, 39, 96, .22);
  --shadow-lg: 0 40px 80px -30px rgba(21, 39, 96, .38);

  --container: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);

  --font-body: 'Product Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Product Sans', var(--font-body);

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

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

html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }
a { color: var(--blue-500); text-decoration: none; }

:focus-visible {
  outline: 2.5px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 200;
  background: var(--ink); color: #fff; padding: .6rem 1rem;
  border-radius: 10px; font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* Grain overlay */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--blue-600);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display);
  font-weight: 600; font-size: .98rem; letter-spacing: -0.01em;
  padding: .85rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), background-color .2s var(--ease);
}
.btn--sm { padding: .55rem 1.1rem; font-size: .9rem; }
.btn--primary {
  background: var(--btn-bg); color: #fff;
  box-shadow: 0 10px 24px -10px rgba(45, 75, 155, .7);
}
.btn--primary:hover { background: var(--blue-500); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(45, 75, 155, .75); }
.btn--primary:active { transform: translateY(0) scale(.98); }

/* ---------- Store badges (from <store-button> component) ----------
   The two official PNGs have different baked-in padding: the Google Play
   badge has ~11.6% transparent margin top/bottom, Apple has none. We size
   each so the *visible* black button matches (--badge-h), scaling Google up
   by 250/192 to cancel its padding. Result: equal visible height. */
.store-badges {
  --badge-h: 46px;
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin: 1.6rem 0 0;
}
.store-badges a {
  display: inline-flex; border-radius: 12px;
  transition: transform .18s var(--ease), filter .2s var(--ease);
}
.store-badges a:hover { transform: translateY(-2px); }
.store-badges a:active { transform: translateY(0) scale(.98); }
.store-badges img { display: block; width: auto; }
.store-badges__img--ios { height: var(--badge-h); }
.store-badges__img--android { height: calc(var(--badge-h) * 1.302); }

/* ---------- Eyebrow / kicker ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: .8rem; letter-spacing: .01em; text-transform: none;
  color: var(--blue-600);
  background: rgba(79, 124, 255, .1);
  padding: .4rem .85rem; border-radius: 999px; margin: 0 0 1.4rem;
}
.eyebrow--light { color: #cfe0ff; background: rgba(134, 166, 255, .16); }
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue-500);
  box-shadow: 0 0 0 0 rgba(79, 124, 255, .55); animation: pulse 2.2s infinite;
}
.eyebrow--light .eyebrow__dot { background: #86a6ff; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(79,124,255,.5); }
  70% { box-shadow: 0 0 0 8px rgba(79,124,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,124,255,0); }
}

.grad {
  background: linear-gradient(120deg, var(--blue-600), var(--blue-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 74px;
}
.site-header[data-state="scrolled"] {
  background: rgba(246, 248, 252, .78);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
}
.brand img { width: 128px; height: auto; }

.nav__list { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: block; font-weight: 500; font-size: .95rem; color: var(--ink-2);
  padding: .5rem .85rem; border-radius: 999px; position: relative;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link:hover { color: var(--ink); background: rgba(45, 75, 155, .06); }
.nav__link.is-active { color: var(--blue-600); }
.nav__link.is-active::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; translate: -50% 0;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue-500);
}

.site-header__actions { display: flex; align-items: center; gap: .75rem; }
.lang {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  color: var(--ink-2); padding: .4rem .6rem; border-radius: 999px;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.lang:hover { background: rgba(45, 75, 155, .06); color: var(--ink); }
.lang img { border-radius: 3px; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 12px; cursor: pointer;
}
.nav-toggle span { height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding: clamp(5.5rem, 10vh, 7.5rem) 0 clamp(3rem, 8vh, 6rem); }
.hero__copy { margin-top: -2.5rem; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 82% 8%, rgba(79, 124, 255, .18), transparent 60%),
    radial-gradient(45% 45% at 8% 30%, rgba(45, 75, 155, .10), transparent 60%);
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__title {
  font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 700;
  margin: 0 0 1.3rem; max-width: 12ch;
}
.hero__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-2);
  max-width: 46ch; margin-bottom: .5rem;
}
.hero__trust {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  list-style: none; margin: 2rem 0 0; padding: 0;
  font-size: .92rem; font-weight: 500; color: var(--ink-2);
}
.hero__trust li { display: inline-flex; align-items: center; gap: .5rem; }
.tick {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 30% 30%, var(--blue-400), var(--blue-600));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/70% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* Phone visual */
.hero__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 520px; }
.phone { filter: drop-shadow(0 40px 60px rgba(21, 39, 96, .3)); }
.phone--front {
  position: relative; z-index: 2; width: 92%; max-width: 520px;
  animation: float 7s var(--ease) infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

/* ==========================================================================
   Section head
   ========================================================================== */
.section-head { max-width: 60ch; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.section-head--left { text-align: left; margin-inline: 0; }
.section-head__kicker {
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue-500);
  margin: 0 0 .9rem;
}
.section-head__title { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700; }
.section-head__lede { margin-top: 1rem; font-size: 1.08rem; color: var(--ink-3); }

/* ==========================================================================
   Features (asymmetric bento grid)
   ========================================================================== */
.features { padding: clamp(3rem, 7vw, 6rem) 0; }
.feature-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem;
}
.feature-card {
  grid-column: span 3;
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 2rem;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
/* Bento rhythm: alternating wide (span 4) + narrow (span 2) cards */
.feature-card:nth-child(1) { grid-column: span 4; }
.feature-card:nth-child(2) { grid-column: span 2; }
.feature-card:nth-child(3) { grid-column: span 2; }
.feature-card:nth-child(4) { grid-column: span 4; }
.feature-card:nth-child(5) { grid-column: span 4; }
.feature-card:nth-child(6) { grid-column: span 2; }

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 124, 255, .4);
  box-shadow: var(--shadow);
}
.feature-card__icon {
  width: 48px; height: 48px; flex: none; margin-bottom: 1.25rem;
  border-radius: 14px; background: linear-gradient(135deg, var(--blue-500), var(--blue-400));
  position: relative; box-shadow: 0 8px 18px -8px rgba(45, 75, 155, .8);
}
.feature-card__icon::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 26px; height: 26px; background: #fff;
  -webkit-mask: var(--icon) center/contain no-repeat;
          mask: var(--icon) center/contain no-repeat;
}
/* Icon glyphs inlined as data URIs: immune to path/base-URL resolution issues
   (relative url() in custom properties resolves against the stylesheet, not the page). */
.feature-card__icon--carro { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M40-280v-160h328L120-636v116H40v-240h40l440 242v-282h200l200 240v280H820q0 50-35 85t-85 35q-50 0-85-35t-35-85H360q0 50-35 85t-85 35q-50 0-85-35t-35-85H40Zm200 60q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm460 0q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17ZM600-560h216L682-720h-82v160Z'/%3E%3C/svg%3E"); }
.feature-card__icon--documenti { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M360-240h240q17 0 28.5-11.5T640-280q0-17-11.5-28.5T600-320H360q-17 0-28.5 11.5T320-280q0 17 11.5 28.5T360-240Zm0-160h240q17 0 28.5-11.5T640-440q0-17-11.5-28.5T600-480H360q-17 0-28.5 11.5T320-440q0 17 11.5 28.5T360-400ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v447q0 33-23.5 56.5T720-80H240Zm280-560v-160H240v640h480v-440H560q-17 0-28.5-11.5T520-640ZM240-800v200-200 640-640Z'/%3E%3C/svg%3E"); }
.feature-card__icon--database { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-520q150 0 255-47t105-113q0-66-105-113t-255-47q-150 0-255 47T120-680q0 66 105 113t255 47Zm0 100q41 0 102.5-8.5T701-456q57-19 98-49.5t41-74.5v100q0 44-41 74.5T701-356q-57 19-118.5 27.5T480-320q-41 0-102.5-8.5T259-356q-57-19-98-49.5T120-480v-100q0 44 41 74.5t98 49.5q57 19 118.5 27.5T480-420Zm0 200q41 0 102.5-8.5T701-256q57-19 98-49.5t41-74.5v100q0 44-41 74.5T701-156q-57 19-118.5 27.5T480-120q-41 0-102.5-8.5T259-156q-57-19-98-49.5T120-280v-100q0 44 41 74.5t98 49.5q57 19 118.5 27.5T480-220Z'/%3E%3C/svg%3E"); }
.feature-card__icon--chat { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M240-400h320v-80H240v80Zm0-120h480v-80H240v80Zm0-120h480v-80H240v80ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z'/%3E%3C/svg%3E"); }
.feature-card__icon--famiglia { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0 320Zm0-400Z'/%3E%3C/svg%3E"); }
.feature-card__icon--search { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E"); }
.feature-card__body { flex: 1; }
.feature-card h3 { font-size: 1.3rem; margin-bottom: .55rem; letter-spacing: -0.015em; }
.feature-card p { color: var(--ink-3); font-size: .98rem; }
/* Uniform image size across all cards, regardless of card width:
   capped width + fixed height so wide cards don't enlarge/zoom the image. */
.feature-card__shot {
  margin-top: 1.5rem; border-radius: 14px; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  width: 100%; max-width: 300px; height: 190px;
  object-fit: cover; object-position: top center;
  align-self: center;
}

/* ==========================================================================
   Download (committed dark band)
   ========================================================================== */
.download {
  position: relative; overflow: hidden; margin: clamp(2rem, 5vw, 4rem) 0;
  background: radial-gradient(120% 120% at 80% 0%, var(--navy-800), var(--navy-900) 60%);
  color: #dfe6f5;
}
.download::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(50% 60% at 15% 100%, rgba(79, 124, 255, .35), transparent 60%);
}
.download__grid {
  position: relative; display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
}
.download__copy h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.download__lede { margin: 1.1rem 0 0; color: #aeb9d6; font-size: 1.08rem; max-width: 42ch; }
.download__visual { position: relative; display: flex; justify-content: center; }
.download__visual img { width: min(360px, 80%); filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .5)); position: relative; z-index: 1; }
.download__glow {
  position: absolute; inset: 0; margin: auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(79, 124, 255, .55), transparent 65%);
  filter: blur(30px);
}

/* ==========================================================================
   FAQ (native <details>)
   ========================================================================== */
.faq { padding: clamp(3rem, 7vw, 6rem) 0; }
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.faq__list { display: flex; flex-direction: column; gap: .9rem; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0 1.5rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-item[open] { border-color: rgba(79, 124, 255, .4); box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; font-family: var(--font-display); font-weight: 600;
  font-size: 1.06rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 22px; height: 22px;
  background: var(--blue-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item__body { padding: 0 0 1.35rem; color: var(--ink-2); animation: faqIn .3s var(--ease); }
.faq-item__body ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.faq-item__body li { margin-bottom: .35rem; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: #aeb6c7; padding-top: clamp(3rem, 6vw, 4.5rem); }
.site-footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1.3fr; gap: 2.5rem;
  padding-bottom: 3rem;
}
.site-footer__brand img { width: 120px; margin-bottom: 1.1rem; filter: brightness(0) invert(1); opacity: .92; }
.site-footer__brand p { max-width: 42ch; font-size: .92rem; line-height: 1.7; }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1.1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.site-footer a { color: #aeb6c7; font-size: .95rem; transition: color .18s var(--ease); }
.site-footer a:hover { color: #fff; }
.site-footer__contact { font-style: normal; }
.site-footer__contact p {
  font-size: .95rem; line-height: 1.7; margin-bottom: .85rem;
  display: flex; align-items: flex-start; gap: .6rem;
}
.site-footer__cicon {
  flex: none; width: 16px; height: 16px; margin-top: .3em;
  background: var(--blue-400);
  -webkit-mask: var(--ico) center/contain no-repeat;
          mask: var(--ico) center/contain no-repeat;
}
.site-footer__cicon--location { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-186q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 79q-14 0-28-5t-25-15q-65-60-115-117t-83.5-110.5q-33.5-53.5-51-103T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 45-17.5 94.5t-51 103Q698-301 648-244T533-127q-11 10-25 15t-28 5Zm0-453Zm0 80q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Z'/%3E%3C/svg%3E"); }
.site-footer__cicon--call { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M798-120q-125 0-247-54.5T329-329Q229-429 174.5-551T120-798q0-18 12-30t30-12h162q14 0 25 9.5t13 22.5l26 140q2 16-1 27t-11 19l-97 98q20 37 47.5 71.5T387-386q31 31 65 57.5t72 48.5l94-94q9-9 23.5-13.5T670-390l138 28q14 4 23 14.5t9 23.5v162q0 18-12 30t-30 12Z'/%3E%3C/svg%3E"); }
.site-footer__cicon--mail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm640-480L501-453q-5 3-10.5 4.5T480-447q-5 0-10.5-1.5T459-453L160-640v400h640v-400ZM480-520l320-200H160l320 200ZM160-640v10-59 1-32 32-.5 58.5-10 400-400Z'/%3E%3C/svg%3E"); }
.site-footer__bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding: 1.4rem var(--gutter); border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .85rem; color: #7c8499;
}
.site-footer__legal { display: flex; gap: 1.3rem; }

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--blue-600); color: #fff; border-radius: 14px;
  box-shadow: 0 12px 26px -10px rgba(45, 75, 155, .8);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background-color .2s var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--blue-500); transform: translateY(-3px); }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 992px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__copy { display: flex; flex-direction: column; align-items: center; margin-top: 0; }
  .hero__title { max-width: none; }
  .hero__visual { order: -1; min-height: 380px; margin-bottom: 1rem; }
  .phone--front { width: 62%; max-width: 300px; }
  .download__grid { grid-template-columns: 1fr; text-align: center; }
  .download__visual { order: -1; }
  .download__copy .eyebrow, .download__copy .store-badges { margin-inline: auto; }
  .faq__grid { grid-template-columns: 1fr; }
  .section-head--left { text-align: center; }
}

@media (max-width: 768px) {
  .nav, .site-header__actions .btn, .lang { display: none; }
  .nav-toggle { display: flex; }

  /* Mobile nav panel */
  .nav.is-open {
    display: block; position: fixed; inset: 74px 0 auto; z-index: 99;
    background: rgba(246, 248, 252, .96); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: 1rem var(--gutter) 1.5rem;
    animation: faqIn .25s var(--ease);
  }
  .nav.is-open .nav__list { flex-direction: column; gap: .2rem; }
  .nav.is-open .nav__link { padding: .85rem 1rem; font-size: 1.05rem; }

  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { grid-column: 1 / -1; }
  .feature-card__shot { max-width: none; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .site-footer__bar { justify-content: center; text-align: center; }
}

@media (max-width: 480px) {
  .hero { padding-top: 6rem; }
  .store-badges img { height: 44px; }
  .feature-card { padding: 1.5rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .phone--front, .phone--back { animation: none; }
}