/* ============================================================
   etoimo.gr — landing page
   Black + orange, 2026 premium tech
   ============================================================ */

:root {
  --black: #0A0A0A;
  --black-2: #1A1A1A;
  --orange: #FF5722;
  --warm-white: #FAFAFA;
  --white: #ffffff;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emph: cubic-bezier(0.22, 1, 0.36, 1);
  --container-w: 1280px;
}

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

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

body {
  margin: 0;
  font-family: 'Inter', 'Geist', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-feature-settings: "kern" 1, "liga" 1;
  background: var(--black);
  color: var(--warm-white);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------- Page-wide workflow photo (behind ALL sections) ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url('./uploads/upload-1-photo-1605379399642-870262d3d051.avif');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 10, 0.45);  /* darken the page-wide photo; section overlays do the rest */
  pointer-events: none;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

::selection { background: var(--orange); color: var(--white); }

/* ---------- Containers ---------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 80px);   /* renzo-style gutters on wide screens */
}

/* ============================================================
   SITE NAV (sticky — transparent over hero, solid on scroll)
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-nav.scrolled {
  background: rgba(10, 10, 10, 0.95);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.site-nav-inner {
  max-width: var(--container-w);
  margin-inline: auto;
  padding: 16px clamp(24px, 5vw, 80px);
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
}
.site-nav-logo img {
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
}
.site-nav-logo .logo-fallback {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--warm-white);
}
.site-nav-links {
  display: flex;
  gap: 28px;
  margin-inline: auto;          /* center cluster on desktop */
}
.site-nav-link {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--warm-white);
  transition: color 0.2s ease;
}
.site-nav-link:hover { color: var(--orange); }
.site-nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-nav-lang-slot { width: 0; }   /* reserved for Round 2B EN/GR toggle — no functional toggle yet */
.site-nav-cta {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--black);
  background: var(--orange);
  padding: 11px 18px;
  transition: filter 0.2s ease;
}
.site-nav-cta:hover { filter: brightness(1.1); }
.site-nav-link-cta { display: none; }   /* desktop uses the .site-nav-actions CTA; this in-menu CTA shows only ≤900px (hamburger) */
.site-nav-toggle { display: none; }

@media (max-width: 900px) {
  .site-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px; height: 40px;
  }
  .site-nav-toggle span {
    display: block;
    width: 22px; height: 2px;
    background: var(--warm-white);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .site-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .site-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-nav-actions { margin-left: auto; }   /* push CTA + hamburger right */

  .site-nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    background: rgba(10, 10, 10, 0.97);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .site-nav-links.is-open { max-height: 360px; }
  .site-nav-link {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 13px;
  }
  .site-nav-cta { display: none; }   /* mobile: drop the nav-bar CTA → logo + hamburger only; lang-slot stays reserved for EN/GR */
  .site-nav-link-cta {              /* mobile: CTA now lives in the hamburger menu, styled as the primary action */
    display: block;
    background: var(--orange);
    color: var(--black);
  }
  .site-nav-link-cta:hover { color: var(--black); filter: brightness(1.08); }
}

@media (max-width: 480px) {
  .site-nav-inner { padding: 12px 20px; gap: 14px; }
  .site-nav-cta { padding: 9px 14px; }
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(72px, 10vw, 140px) 0;
}

/* alternating bg — semi-transparent so the page-wide photo shows through subtly.
   Black 0.88 / orange 0.90 keep text legibility identical to solid; rhythm intact. */
/* ===== Marquee (κράχτης) — seamless infinite scroll, orange bar / dark text ===== */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: #FAFAFA;
  border-block: 1px solid rgba(255, 87, 34, 0.30);
}
.marquee-track {
  display: inline-flex;
  width: max-content;
  will-change: transform;
}
.marquee-set {
  display: inline-block;
  padding: 11px 0;
  font: 700 19px/1 'Geist', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FF5722;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee-scroll 95s linear infinite; }
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* #price merged into #includes (2026-05-28); cascade-flipped below to keep strict
   black/orange alternation: hero-b → includes-o → process-b → faq-o → cta-b → closing-o → footer-b */
.includes    { background: rgba(255, 87, 34, 0.90); color: var(--white); }
.process     { background: rgba(10, 10, 10, 0.88);  color: var(--warm-white); }
.faq         { background: rgba(255, 87, 34, 0.90); color: var(--white); }
.cta-final   { background: rgba(10, 10, 10, 0.88);  color: var(--warm-white); }
.closing     { background: rgba(255, 87, 34, 0.90); color: var(--white); }
section.closing { padding-block: clamp(20px, 2.7vw, 38px); }   /* ~27% of original clamp(72px,10vw,140px) — compact outro, brand + tagline only, thin comfortable margin */

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background: var(--black);
  min-height: 100vh;
  min-height: 100svh;   /* stable small viewport: hero/canvas doesn't resize when the
                           mobile address bar shows/hides → no particle re-seed flash */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('./uploads/upload-1-photo-1605379399642-870262d3d051.avif');
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.75) 60%, rgba(10,10,10,0.95) 100%);
  z-index: 0;
  pointer-events: none;
}

#net {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;            /* above .hero::after darkening gradient (0), below content (2) */
  pointer-events: none;
}

.hero > *:not(#net):not(::before):not(::after) {
  position: relative;
  z-index: 1;
}

.logo-fallback {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
  font-size: 22px;
  color: var(--warm-white);
}


.hero-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--container-w);
  width: 100%;
  margin-inline: auto;
  padding: 60px clamp(24px, 5vw, 80px) 80px;
  position: relative;
  z-index: 2;
}

.eyebrow {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 28px;
}
/* FAQ eyebrow doubles as the section title (heading removed 2026-05-28) — enlarged, Geist kept */
.eyebrow.faq-title {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 40px;
}
/* hero eyebrow ~1.5× bigger (label above H1); FAQ eyebrow keeps base 12px.
   clamp + nowrap → caps 18px on desktop (one line), shrinks to fit one legible
   line on 360/375/390px mobile (paired with tighter tracking in the ≤480 query) */
.hero .eyebrow { font-size: clamp(11px, 3vw, 18px); white-space: nowrap; }

/* hero eyebrow as an OVAL PILL with the same left→right sweep as the CTA "ΕΤΟΙΜΟΣ;" badge.
   align-self: flex-start → hugs the text (it's a flex child of .hero-inner; default stretch would full-width it) */
.hero .eyebrow.eyebrow-pill {
  align-self: flex-start;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--orange);
  border-radius: 999px;
  padding: 8px 18px;
}
.eyebrow-pill > span { position: relative; z-index: 1; }   /* text above the sweep */
@media (prefers-reduced-motion: no-preference) {
  .eyebrow-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 87, 34, 0.35), transparent);
    transform: translateX(-100%);
    animation: cta-sweep 2.8s ease-in-out infinite;   /* reuse the CTA badge keyframes */
  }
}
@media (prefers-reduced-motion: reduce) { .eyebrow-pill::before { display: none; } }

.hero-headline {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(44px, 8.6vw, 124px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  max-width: 16ch;
}

/* Each line is its own block (also under reduced-motion) → 2-line stack + per-line glitch boxes.
   Solid brand-orange fill, uniform across both lines (gradient removed); glitch channels + neon glow add life on hover. */
.hero-headline .glitch-line {
  position: relative;
  display: block;
  width: fit-content;          /* box hugs the text → hover area = glyphs (+ ghost padding), not the empty space beside a short line; block keeps each line on its own row + wraps within max-width */
  padding: 0.06em 0.16em;
  margin-left: -0.16em;
  background: none;                  /* gradient removed → solid fill */
  -webkit-text-fill-color: #FF5722;  /* solid brand orange, uniform across both lines */
  color: #FF5722;
}

/* "48 ώρες" folds into the line gradient (no separate solid-orange fill) */
.accent-word {
  -webkit-text-fill-color: inherit;
  color: inherit;
}

/* "48 ώρες." / "48 hours." = unbreakable unit. nowrap +   keep the number,
   word and period together so the natural wrap drops the whole unit to its own
   line on mobile (no orphan "ώρες."). Desktop unaffected — it never wrapped here. */
.hero-unit { white-space: nowrap; }

.hero-sub {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: rgba(250, 250, 250, 0.85);
  margin: 0 0 48px;
  max-width: 50ch;
}

/* Mobile: keep the subline on ONE line (no orphan "€300."). Font scales with
   viewport so it stays ≥12px and never overflows. 2026-05-30 */
@media (max-width: 767px) {
  .hero-sub {
    white-space: nowrap;
    font-size: clamp(12px, 3.4vw, 18px);
    letter-spacing: -0.01em;
    max-width: none;
  }
  /* mobile only: center hero content (eyebrow pill + headline + sub + CTAs) */
  .hero-inner { align-items: center; text-align: center; }
  .hero .eyebrow.eyebrow-pill { align-self: center; }
  .hero-headline { max-width: none; }
  .hero-headline .glitch-line { margin-left: auto; margin-right: auto; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.005em;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.btn-primary {
  color: var(--orange);
  border: 1.5px solid var(--orange);
  background: transparent;
}
.btn-primary:hover {
  color: var(--white);
}

.btn-text {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--warm-white);
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
  transition: color 0.25s ease;
}
.btn-text:hover { color: var(--orange); }

/* Button FX (fill from left) */
.btn-fx {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s ease, box-shadow 0.3s ease;
}
.btn-fx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #FF5722;
  width: 0;
  transition: width 0.3s ease;
}
.btn-fx:hover::before { width: 100%; }
.btn-fx:hover { box-shadow: 0 0 24px #FF572266; }

@media (prefers-reduced-motion: reduce) {
  .btn-fx, .btn-fx::before { transition: none; }
}

/* ============================================================
   BADGES (shared)
   ============================================================ */
.badge {
  display: inline-block;
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  margin-bottom: 24px;
}
.badge-outline {
  border: 1px solid var(--white);
  color: var(--white);
}
.badge-solid {
  background: var(--black);
  color: var(--white);
  margin: 24px 0 48px;
}

/* ============================================================
   INCLUDES — merged price anchor (orange section, €300 in black)
   ============================================================ */
.includes-price {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto 56px;
}
.includes-price-amount {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1.0;
  letter-spacing: 0;   /* was -0.025em — tight tracking collided "Α/π" in "Από" at display size; natural metrics (kerning already on via body) clear it. 2026-05-28 */
  color: var(--black);              /* €300 pops black on orange */
  margin: 0 0 16px;
  white-space: nowrap;   /* keep "Από €300." / "From €300." on ONE line — the €0→€300 counter grows the text width; without this it reflowed 1→2 lines mid-count (glitch), and GR/EN wrapped at different points. 2026-05-31 */
}
.includes-price-amount #priceCounter { font-variant-numeric: tabular-nums; }
.includes-price-lead {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0 0 12px;
}
.includes-price-note {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

/* ============================================================
   INCLUDES SECTION
   ============================================================ */
/* premium offer card framing the price anchor + checkmarks (renzo-style) */
.offer-card {
  max-width: 920px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: clamp(28px, 5vw, 56px);
  background: rgba(10, 10, 10, 0.10);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
}
.offer-card .includes-price { margin-bottom: 40px; }

/* subtle "we also do" strip — acknowledges range, no prices/buttons, single-offer intact */
.also-do {
  margin: 40px auto 0;               /* auto sides → capped row stays centered in the section */
  max-width: 640px;                  /* cap forces an even 4+4 wrap (both EL & EN) instead of a lopsided 7+1 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
}
.also-do-label {
  flex-basis: 100%;                  /* own full-width line so pills wrap below as a symmetric centered row (no 1+2 orphan) */
  width: 100%;
  text-align: center;
  margin-bottom: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);               /* clean white lead-in — clearly visible, still not a pill */
  letter-spacing: 0.01em;
}
.also-do-pill {                        /* light chip on orange — bigger but translucent so it stays secondary to €300 */
  display: inline-block;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  background: rgba(255, 255, 255, 0.18);   /* translucent — NOT solid, must not out-shine the offer */
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 9px 18px;
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.also-do-pill:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 600px) {
  /* Structural fix: variable-width pills in flex-wrap produced lopsided staggered rows.
     Uniform 2-col grid (4×2), equal cells, centered — labels kept short so none overflow. */
  .also-do {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
    justify-items: stretch;
  }
  .also-do-label {
    grid-column: 1 / -1;       /* label keeps its own full-width line above the grid */
  }
  .also-do-pill {
    font-size: 14px;
    padding: 9px 12px;
    text-align: center;        /* equal cells, centered text → symmetric pairs */
  }
}

.section-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 56px;
  max-width: 22ch;
}
.section-heading--center {
  margin-inline: auto;
  text-align: center;
}

/* ---------- ΓΙΑΤΙ ΕΜΑΣ — comparison (us vs others) ---------- */
.why-us { background: rgba(10, 10, 10, 0.88); color: var(--warm-white); }   /* dark comparison — separate /why-us page, over photo bg */
.why-us .section-heading { color: var(--white); }
.why-subhead {
  max-width: 620px;
  margin: 0 auto 48px;
  text-align: center;
  font-family: 'Geist', sans-serif;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(250, 250, 250, 0.82);
}
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;        /* both cards take the height of the taller one (explicit — grid default) */
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
.compare-col {
  height: 100%;                /* fill the equal-height grid area → top+bottom edges align */
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 36px);
  background: rgba(255, 255, 255, 0.03);
}
.compare-us {                                  /* favored column */
  border-color: rgba(255, 87, 34, 0.55);
  background: rgba(255, 87, 34, 0.06);
}
.compare-title {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.compare-us .compare-title { color: var(--orange); }
.compare-others .compare-title { color: rgba(250, 250, 250, 0.5); }
.compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
}
.compare-us .compare-list li { color: var(--warm-white); }
.compare-others .compare-list li { color: rgba(250, 250, 250, 0.55); }   /* muted */
.compare-list .check-svg,
.compare-list .x-svg { flex-shrink: 0; margin-top: 1px; }
.why-cta { text-align: center; margin-top: 44px; }

@media (max-width: 760px) {
  .compare { grid-template-columns: 1fr; }   /* stack — ΕΜΕΙΣ first (DOM order) */
}

.includes-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 40px;
}

.includes-item {
  display: flex;
  align-items: flex-start;   /* check stays top-aligned even when the label wraps to 2 lines */
  gap: 10px;
  font-size: 17px;
  color: var(--warm-white);
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}

/* inline SVG check — fixed size, never clipped, aligned to first text line */
.check-svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;           /* optical-center with the first line */
}

.includes-note {
  margin: 56px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);    /* legible on orange */
  max-width: 70ch;
}

/* ============================================================
   PROCESS SECTION
   ============================================================ */
.process .section-heading { color: var(--white); }

/* Mobile: keep "Από την ιδέα μέχρι live." on ONE line (the explicit <br> still
   forces "4 βήματα." onto its own line). Font scales with viewport, stays ≥20px,
   never overflows. max-width override needed so the 22ch cap doesn't clip nowrap. 2026-05-30 */
@media (max-width: 767px) {
  .process .section-heading {
    white-space: nowrap;
    font-size: clamp(20px, 6.25vw, 36px);
    letter-spacing: -0.01em;
    max-width: none;
  }
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
  padding-top: 32px;
}

.steps-line {
  position: absolute;
  top: 88px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
}
.steps-line-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--orange);    /* process is now a black section → orange progress-fill */
  transition: width 1.2s var(--ease-emph);
}
.steps.is-visible .steps-line-fill {
  width: 100%;
}

.step {
  position: relative;
  z-index: 1;
}

.step-num {
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--black);
  margin-bottom: 28px;
  display: inline-block;
  background: var(--orange);
  padding-right: 12px;
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.5s var(--ease-emph), opacity 0.4s ease;
}
.steps.is-visible .step:nth-child(2) .step-num { transition-delay: 0.1s; }
.steps.is-visible .step:nth-child(3) .step-num { transition-delay: 0.2s; }
.steps.is-visible .step:nth-child(4) .step-num { transition-delay: 0.3s; }
.steps.is-visible .step:nth-child(5) .step-num { transition-delay: 0.4s; }
.steps.is-visible .step .step-num {
  transform: scale(1);
  opacity: 1;
}

.step-title {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--white);
}

.step-body {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq .eyebrow { margin-bottom: 16px; color: var(--white); }  /* orange section → white, not orange-on-orange */

.faq-list {
  margin-top: 16px;
}

.faq-item {
  border-top: 1px solid rgba(255,255,255,0.2);
}
.faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.2); }

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  text-align: left;
  font-family: 'Geist', sans-serif;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 600;
  color: var(--warm-white);
  letter-spacing: -0.005em;
  transition: color 0.25s ease;
}
.faq-q:hover { color: var(--black); }   /* orange section → black hover (orange would vanish) */
.faq-q:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.faq-q[aria-expanded="true"] {           /* OPEN: dark + bold — active question pops vs the off-white answer (chev follows via currentColor) */
  color: #0A0A0A;
  font-weight: 700;
}

.chev {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease-out);
}
.faq-q[aria-expanded="true"] .chev {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}
.faq-a p {
  padding: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);   /* legible on orange */
  margin: 0;
  max-width: 70ch;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-final .container { text-align: center; }

/* ---------- "ΕΤΟΙΜΟΣ;" pill badge with left→right orange sweep ---------- */
.cta-badge {
  position: relative;
  display: inline-block;
  margin: 0 0 16px;
  border: 1px solid var(--orange);
  border-radius: 999px;
  padding: 10px 24px;
  overflow: hidden;
  color: var(--orange);
  font: 600 15px/1 'Geist', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cta-badge > span { position: relative; z-index: 1; }   /* text above the sweep */
@media (prefers-reduced-motion: no-preference) {
  .cta-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 87, 34, 0.35), transparent);
    transform: translateX(-100%);
    animation: cta-sweep 2.8s ease-in-out infinite;
  }
  @keyframes cta-sweep {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
  }
}
@media (prefers-reduced-motion: reduce) { .cta-badge::before { display: none; } }

/* ---------- CTA reassurance subhead (Geist, supporting copy) ---------- */
.cta-subhead {
  max-width: 520px;
  margin: 0 auto 34px;
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
  color: rgba(250, 250, 250, 0.82);
}

/* ---------- Form card (matches the €300 offer-card language) ---------- */
.contact-card {
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: clamp(28px, 5vw, 48px);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.25);
}

/* ---------- Honeypot anti-spam (invisible to humans) ---------- */
.hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Compact underline contact form (renzo-style) ---------- */
.cta-form {
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.cta-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.cta-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cta-field-label {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
.cta-field-input {
  font-family: inherit;
  font-size: 16px;
  color: var(--warm-white);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  padding: 10px 2px;
  width: 100%;
  transition: border-color 0.2s ease;
}
.cta-field-input::placeholder { color: rgba(250, 250, 250, 0.35); }
.cta-field-input:focus {
  outline: none;
  border-bottom-color: var(--orange);
}
.cta-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  line-height: 1.4;
}
.cta-consent input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--orange);
  flex-shrink: 0;
}
.cta-form-status {
  margin: 0;
  font-size: 14px;
  min-height: 1.2em;
  text-align: center;
  color: var(--orange);
}
.cta-form-status.success { color: #4ADE80; }   /* delivered — green on dark CTA */
.cta-form-status.error   { color: #FF6B6B; }   /* validation / network error — red on dark CTA */
/* When empty (the default), drop it from the flex flow so it doesn't
   create a double-gap between consent and the CTA. Reappears when JS
   sets a validation message. */
.cta-form-status:empty { display: none; }
.cta-submit {
  width: 100%;
  justify-content: center;
  background: var(--orange);   /* solid orange block (overrides .btn-primary outline default) */
  color: var(--black);
  border-color: var(--orange);
  margin-top: 4px;
}

@media (max-width: 560px) {
  .cta-form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   CLOSING
   ============================================================ */
.closing .container { text-align: center; }

.closing-brand {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.025em;
  color: var(--black);          /* orange section → black brand pops */
  margin: 0 0 12px;
}

.closing-tagline {
  font-family: 'Geist', sans-serif;
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(10, 10, 10, 0.72);   /* orange section → dark tagline */
  margin: 0;
  min-height: 1.4em;
}
.closing-tagline.is-done::after {
  content: '|';
  margin-left: 4px;
  opacity: 0;
}
.typewriter-cursor {
  display: inline-block;
  margin-left: 2px;
  color: var(--black);          /* orange section → black cursor (orange would vanish) */
  animation: blink 0.7s step-end infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: rgba(10, 10, 10, 0.88);
  padding: 36px 0;
  border-top: 1px solid rgba(250,250,250,0.08);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* equal sides → middle email is TRUE-centered under the closing brand */
  align-items: center;
  gap: 24px;
  font-size: 14px;
  color: rgba(250,250,250,0.65);
}
.footer-col { display: flex; align-items: center; gap: 12px; }
.footer-logo    { justify-self: start; }
.footer-contact { justify-self: center; }
.footer-copy    { justify-self: end; }
.footer-col img { height: 20px; filter: brightness(0) invert(1); opacity: 0.85; }
.footer-contact a:hover { color: var(--orange); }
.footer-sep { opacity: 0.4; }

/* ============================================================
   HERO EYEBROW FLICKER + HEADLINE ELECTRIC GLITCH
   (animated, intermittent; both disabled under reduced-motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* eyebrow opacity-pulse removed 2026-05-28 — replaced by the pill sweep (.eyebrow-pill::before) */

  /* --- headline: orange neon glow on hover (glitch removed 2026-05-28).
     Per-line, clean at rest, clears instantly on mouse-leave. text-shadow renders
     around the solid-orange glyphs; no transition → instant on/off. --- */
  .glitch-line:hover {
    text-shadow:
      0 0 2px  rgba(255, 255, 255, 1),      /* WHITE hot core — bright whitish lit rim */
      0 0 5px  rgba(255, 245, 235, 0.95),   /* near-white inner */
      0 0 10px rgba(255, 190, 140, 0.9),    /* warm transition */
      0 0 20px rgba(255, 87, 34, 0.85),     /* orange */
      0 0 38px rgba(255, 87, 34, 0.65),     /* halo */
      0 0 64px rgba(255, 87, 34, 0.45);     /* outer bloom — lush orange spread */
  }
}

/* ============================================================
   ENTRANCE (hero only — fade + rise stagger)
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.entrance {
  opacity: 0;
  animation: fadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.entrance-1 { animation-delay: 0ms; }
.entrance-2 { animation-delay: 120ms; }
.entrance-3 { animation-delay: 240ms; }
.entrance-4 { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .entrance,
  [class*="entrance-"] {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   SCROLL REVEAL (below the fold)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint — smooth glide + soft landing (covers .reveal-left/right/step-* which inherit this) */
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Directional scroll-in — reuses the existing .reveal observer + .is-visible toggle.
   Comparison cards (why-us) use these at ALL viewports: ΕΜΕΙΣ from left, ΑΛΛΟΙ from right.
   Process steps use the -step- variants below, which slide horizontally ONLY on the
   mobile zigzag (≤900px) and fall back to the base fade-up on desktop. */
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-left.is-visible,
.reveal-right.is-visible { transform: none; }

/* process steps: tasteful cascade on desktop (all four enter the row together) */
.steps .step.reveal:nth-child(2) { transition-delay: 0ms; }
.steps .step.reveal:nth-child(3) { transition-delay: 90ms; }
.steps .step.reveal:nth-child(4) { transition-delay: 180ms; }
.steps .step.reveal:nth-child(5) { transition-delay: 270ms; }

/* MANDATORY reduced-motion: every reveal just appears — no slide, no transform, no delay */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right,
  .reveal-step-left, .reveal-step-right {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* per-item stagger for grid children */
.includes-grid .includes-item.reveal { transition-delay: 0ms; }
.includes-grid .includes-item.is-visible:nth-child(1) { transition-delay: 60ms; }
.includes-grid .includes-item.is-visible:nth-child(2) { transition-delay: 120ms; }
.includes-grid .includes-item.is-visible:nth-child(3) { transition-delay: 180ms; }
.includes-grid .includes-item.is-visible:nth-child(4) { transition-delay: 240ms; }
.includes-grid .includes-item.is-visible:nth-child(5) { transition-delay: 300ms; }
.includes-grid .includes-item.is-visible:nth-child(6) { transition-delay: 360ms; }
.includes-grid .includes-item.is-visible:nth-child(7) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .steps-line-fill { width: 100% !important; transition: none; }
  .step .step-num { transform: none !important; opacity: 1 !important; transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .includes-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Mobile process: ZIGZAG TIMELINE — steps alternate around a central orange spine */
  .steps {
    display: block;
    grid-template-columns: none;
    gap: 0;
    padding: 8px 0 0;
    position: relative;
  }
  /* per-step connector: each badge links DOWN to the next (canonical timeline).
     :first-child has no upward stub, :last-child has no downward stub →
     no line above 01, no dangle below the final step. Replaces the old shared
     .steps::before spine that overhung both ends. 2026-06-07 */
  .step::after {
    content: '';
    position: absolute;
    top: 16px;            /* badge center: badge top -2px + height/2 18px */
    bottom: -16px;        /* extend into next step to meet its badge center */
    width: 2px;
    background: var(--orange);
    z-index: 1;           /* under the opaque badge (z-index:2) */
  }
  .step:nth-child(even)::after { right: -1px; }  /* left-side step → connector on container center */
  .step:nth-child(odd)::after  { left: -1px; }   /* right-side step → connector on container center */
  .step:last-child::after { display: none; }     /* kill the bottom stub toward a nonexistent next step */
  .steps-line { display: none; } /* horizontal line-draw doesn't work vertically */

  .step {
    position: relative;
    width: 50%;
    box-sizing: border-box;
    padding-bottom: 42px;
    /* NO transform/opacity reset here — let .reveal own the at-rest hidden state
       so the fade-up actually animates on mobile. Badge artifact is handled by
       the .step-num mobile reset below (transform:none;opacity:1). 2026-05-28 */
  }
  .step:last-child { padding-bottom: 0; }

  /* .steps-line is child 1 → .step elements are children 2-5:
     even children = step 01 & 03 (LEFT) · odd children = step 02 & 04 (RIGHT) */
  .step:nth-child(even) {        /* LEFT side */
    margin-left: 0;
    padding-right: 34px;
    text-align: right;
  }
  .step:nth-child(odd) {         /* RIGHT side */
    margin-left: 50%;
    padding-left: 34px;
    text-align: left;
  }

  /* process steps now use a calm uniform fade-up (base .reveal translateY) on mobile too —
     zigzag left/right removed 2026-05-28 (read busy); desktop nth-child stagger applies here as well */

  /* number badge centered ON the spine — opaque, so the line never slashes a digit */
  .step-num {
    position: absolute;
    top: -2px;
    width: 36px; height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    border-radius: 50%;
    background: var(--orange);    /* process is a black section → orange badge, black numeral */
    color: var(--black);
    padding: 0;
    margin: 0;
    transform: none;
    opacity: 1;
    z-index: 2;
  }
  .step:nth-child(even) .step-num { right: -18px; }  /* sits on the spine (half of 36px) */
  .step:nth-child(odd)  .step-num { left: -18px; }

  .step-title { margin: 0 0 6px; font-size: 18px; }
  .step-body  { font-size: 14px; line-height: 1.5; }

  .hero-headline { max-width: 100%; }
  .hero-cta { gap: 24px; }
  .btn { padding: 16px 26px; font-size: 15px; }

  .footer-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 16px;
  }
  .footer-logo, .footer-contact, .footer-copy { justify-self: center; }
}

@media (max-width: 480px) {
  .section { padding: 64px 0; }
  .hero-inner { padding: 40px 20px 64px; }
  .container { padding-inline: 20px; }
  .badge { margin-bottom: 32px; }
  .section-heading { margin-bottom: 40px; }
  .hero .eyebrow { letter-spacing: 0.05em; font-size: clamp(10px, 2.85vw, 18px); }   /* tighter tracking + slightly smaller → one legible line at 360/375/390px even with the pill chrome */
  .hero .eyebrow.eyebrow-pill { padding: 5px 11px; }   /* slimmer pill on mobile so border+padding don't push the one-line text to overflow */

  .faq-q { padding: 22px 0; gap: 16px; }
}

@media (min-width: 1280px) {
  .hero-inner { padding-block: 80px 100px; }
}

/* left-rail phone override removed 2026-05-30 (FLIP): ALL phones now use the
   ≤900px zigzag/alternating timeline (text alternates L/R around the central
   spine), matching the preview. Zigzag = ≤900px · horizontal = >900px. */

/* ============================================================
   FOCUS STATES
   ============================================================ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.includes a:focus-visible,
.faq a:focus-visible,
.faq button:focus-visible,
.closing a:focus-visible {
  outline-color: var(--white);
}

/* ============================================================
   BILINGUAL (Round 2B) — GR default; toggle flips html[lang]
   ============================================================ */
html[lang="el"] .t-en { display: none; }
html[lang="en"] .t-gr { display: none; }
/* hero headline wrappers hold block-level .glitch-line children →
   display:contents so the wrapper doesn't break the two-line block flow.
   The html[lang] display:none rules above out-specify this and still hide
   the inactive language (see css-frontend.md at-rest-override note). */
.hero-headline .t-block { display: contents; }

/* nav language toggle — lives where the reserved lang-slot was */
.site-nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.lang-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(250, 250, 250, 0.5);
  padding: 4px 1px;
  line-height: 1;
  transition: color 0.2s ease;
}
.lang-btn:hover { color: rgba(250, 250, 250, 0.85); }
.lang-btn.is-active { color: var(--orange); }
.lang-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
.lang-sep { color: rgba(250, 250, 250, 0.28); font-size: 12px; line-height: 1; }

/* hero "48" digits — lower optical size so the high-contrast Fraunces thin strokes
   (esp. the 4's diagonal) thicken up. Same family/size/colour as the headline;
   wght stays 700 (loaded max), only opsz drops. SOFT/WONK left at default 0 to
   match the rest of the headline. 2026-05-28 */
.hero-headline .hero-num {
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 36, 'wght' 700;
}

/* "Από" Α/π collision — Fraunces has no kern pair for this Greek Α+π, so they touch
   even at natural metrics. Right-side letter-spacing on just the Α pushes the π off it.
   GR-only (the .kern-a span exists only in the GR offer headline); €300 stays tight. 2026-05-28 */
.includes-price-amount .kern-a { letter-spacing: 0.03em; }