/* ===================================================================
   efyges.gr — etoimo-energy applied to travel
   Navy / White / Orange. Generous photography. Hard cuts between sections.
   =================================================================== */

/* JS-fallback safety: keep reveal/hidden content visible if JS fails */
html.no-js [data-reveal],
html.no-js .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ─── Reset + foundations ────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100%;
}
html { scroll-behavior: smooth; }

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, p { margin: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0;
}

/* ─── Tokens ─────────────────────────────────────────────────────── */

:root {
  --ink: #1A1F3A;
  --black: #0B0D14;
  --canvas: #FAFAFA;
  --accent: #FF6B2C;
  --accent-deep: #D4521C;
  --surface-2: #F2EFE8;
  --border: #E8E5DE;
  --ink-muted: #6B7280;

  --canvas-08: rgba(250, 250, 250, 0.08);
  --canvas-14: rgba(250, 250, 250, 0.14);
  --canvas-32: rgba(250, 250, 250, 0.32);
  --canvas-55: rgba(250, 250, 250, 0.55);
  --canvas-78: rgba(250, 250, 250, 0.78);
  --canvas-94: rgba(250, 250, 250, 0.94);

  --ink-04: rgba(26, 31, 58, 0.04);
  --ink-08: rgba(26, 31, 58, 0.08);
  --ink-28: rgba(26, 31, 58, 0.28);
  --ink-40: rgba(26, 31, 58, 0.40);
  --ink-55: rgba(26, 31, 58, 0.55);
  --ink-62: rgba(26, 31, 58, 0.62);
  --ink-65: rgba(26, 31, 58, 0.65);
  --ink-96: rgba(26, 31, 58, 0.96);

  --accent-22: rgba(255, 107, 44, 0.22);
  --accent-32: rgba(255, 107, 44, 0.32);
  --accent-45: rgba(255, 107, 44, 0.45);
  --accent-62: rgba(255, 107, 44, 0.62);

  --blue: #0E9BF5;
  --blue-22: rgba(14, 155, 245, 0.22);
  --blue-40: rgba(14, 155, 245, 0.40);

  --ease: cubic-bezier(.4, 0, .2, 1);

  --content-max: 1280px;
  --content-pad: clamp(20px, 5vw, 64px);

  --display: 'Geist', 'Inter Tight', system-ui, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
}

body {
  /* dark navy (not light #FAFAFA): every section is dark/orange, so the page bg is never meant
     to show — a light bg bled through sub-pixel section seams as hairlines on mobile (fractional
     DPR), top/bottom + left/right. navy makes any seam blend invisibly everywhere. */
  background: var(--ink);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

em {
  font-style: italic;
  font-weight: inherit;
  color: var(--accent);
  font-family: var(--display);
}

/* Global focus-visible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Reveal anim (JS-gated via html.js) */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 760ms var(--ease), transform 760ms var(--ease);
  will-change: opacity, transform;
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
html.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
html.js [data-stagger].is-in > * {
  opacity: 1; transform: none;
}
html.js [data-stagger].is-in > *:nth-child(1) { transition-delay: 60ms; }
html.js [data-stagger].is-in > *:nth-child(2) { transition-delay: 140ms; }
html.js [data-stagger].is-in > *:nth-child(3) { transition-delay: 220ms; }
html.js [data-stagger].is-in > *:nth-child(4) { transition-delay: 300ms; }
html.js [data-stagger].is-in > *:nth-child(5) { transition-delay: 380ms; }
html.js [data-stagger].is-in > *:nth-child(6) { transition-delay: 460ms; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .hero__card .eyebrow { animation: none !important; opacity: 1 !important; }
}

/* ─── Layout primitives ──────────────────────────────────────────── */

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

.section {
  padding-block: clamp(80px, 12vh, 160px);
  width: 100%;
  max-width: 100%;
}
/* 1px vertical overlap between every band → no clean section boundary for the rasterizer to
   anti-alias → kills fractional-DPR hairlines at every boundary, any DPR. Hard-cut look intact
   (1px imperceptible); content sits deep inside section padding so nothing clips. */
main > section,
main > .marquee { margin-bottom: -2px; }
footer { margin-top: -2px; }
/* marquee is white (highest-contrast band) → overlap BOTH edges (top into hero, bottom into categories) */
main > .marquee { margin-top: -2px; }
.section--light  { background: var(--canvas); color: var(--ink); }
.section--dark   { background: var(--ink); color: var(--canvas); }
.section--black  { background: var(--black); color: var(--canvas); }
.section--orange { background: var(--accent); color: var(--ink); }
.section--linen  { background: var(--surface-2); color: var(--ink); }

/* Hard-cut alternation: orange sections flip eyebrow/title/text to dark-on-orange. */
.section--orange .section__title,
.section--orange .section__title--on-dark { color: var(--ink); }
.section--orange .eyebrow,
.section--orange .eyebrow--on-dark { color: var(--ink); }
.section--orange .eyebrow__rule { background: var(--ink); }
.section--orange .section__lead { color: var(--ink); opacity: 0.82; }

/* Textured-navy: travel photo behind a heavy navy scrim (etoimo-style bg). */
.section--bg { position: relative; isolation: isolate; overflow: hidden; }
.section--bg > .container { position: relative; z-index: 2; }
.section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26,31,58,0.82), rgba(26,31,58,0.88)),
    radial-gradient(120% 90% at 82% 4%, rgba(14,155,245,0.14), transparent 58%);
}

.section__head {
  margin-bottom: clamp(48px, 7vh, 80px);
  max-width: 880px;
}
.section__head--row {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: clamp(20px, 4vw, 56px);
  margin-bottom: clamp(32px, 4.5vh, 52px);
}
.section__lead {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--canvas-78);
  max-width: 38ch;
  padding-bottom: 0.4rem;
}
#categories {
  padding-block: clamp(64px, 8.5vh, 116px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* dark base under the photo — overrides section--orange so no orange flash before the avif paints */
  background-color: #0C0D11;
}
#categories::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* bottom fades to #how's RENDERED top navy (rgb(37,49,77) = ink .93 + photo + blue radial),
       so the seam edge matches #how exactly → zero luminance step → no warm hairline AND no navy
       step at any DPR; fade sits in the empty bottom padding, warm photo texture above intact */
    linear-gradient(180deg, rgba(11, 13, 20, 0.86) 0%, rgba(15, 15, 18, 0.80) 88%, rgb(37, 49, 77) 100%),
    url('uploads/upload-5-photo-1506197603052-3cc9c3a201bd.avif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#categories > .container { position: relative; z-index: 1; }
#categories .section__title,
#categories .eyebrow,
#categories .section__lead { color: var(--canvas); }
#categories .eyebrow__rule { background: var(--accent); }
#categories .section__lead { opacity: 0.82; }

/* Steps section (#how) — travel photo behind navy, για depth (navy-dominant) */
#how {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#how::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(100% 70% at 82% 0%, rgba(14, 155, 245, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(26, 31, 58, 0.93) 0%, rgba(26, 31, 58, 0.86) 100%),
    url('uploads/upload-4-photo-1539635278303-d4002c07eae3.avif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#how > .container { position: relative; z-index: 1; }
.section__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: inherit;
}
.section__title--on-dark { color: var(--canvas); }
.section__title .nb { display: inline-block; }

.section__foot { margin-top: clamp(32px, 5vh, 56px); }

/* ─── Eyebrow ────────────────────────────────────────────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(0.75rem, 1.1vw, 0.8125rem);
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.eyebrow__rule {
  display: inline-block;
  width: 28px;
  height: 1.5px;
  background: var(--accent);
}
.eyebrow--on-photo { color: var(--accent); }
.eyebrow--on-dark { color: var(--accent); }

/* ─── Buttons ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 1rem 2rem;
  border-radius: 4px;
  min-height: 44px;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 220ms var(--ease),
    box-shadow 220ms var(--ease),
    background 180ms var(--ease),
    color 180ms var(--ease),
    border-color 200ms var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: var(--canvas);
  box-shadow: 0 4px 18px var(--accent-22);
}
.btn--primary:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-32);
}
.btn--blue {
  background: var(--blue);
  color: var(--canvas);
  box-shadow: 0 4px 18px rgba(14, 155, 245, 0.22);
}
.btn--blue:hover,
.btn--blue:focus-visible {
  background: #0B82CE;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 155, 245, 0.32);
}
.btn--primary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px var(--accent-22);
}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--secondary {
  background: transparent;
  color: var(--canvas);
  border: 1.5px solid var(--canvas-55);
  padding: calc(1rem - 1.5px) calc(2rem - 1.5px);
}
.btn--secondary:hover {
  border-color: var(--accent);
  background: rgba(255, 107, 44, 0.08);
  color: var(--accent);
}
.btn--secondary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.btn--secondary:active {
  background: var(--accent-22);
  transform: translateY(1px);
}
.btn--secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn--link {
  padding: 0.5rem 0;
  background: transparent;
  color: var(--canvas);
  border: 0;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;
  box-shadow: none;
  font-weight: 500;
}
.btn--link:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: none;
  box-shadow: none;
}
.btn--link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.btn--link:active { opacity: 0.85; }

.btn--link-on-photo { color: var(--canvas); }
.btn--link-on-light { color: var(--ink); }
.btn--link-on-light:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

.btn--sm { padding: 0.625rem 1.25rem; font-size: 0.875rem; min-height: 40px; }

/* ─── NAV ────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  padding-block: 0.55rem;
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(26, 31, 58, 0.08);
  transition: background 280ms var(--ease), padding-block 220ms var(--ease), color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.nav[data-state="transparent"] {
  background: transparent;
  box-shadow: none;
  color: var(--canvas);
}
.nav[data-state="solid"] {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-block: 0.5rem;
  box-shadow: 0 1px 0 rgba(26, 31, 58, 0.08), 0 8px 24px -16px rgba(26, 31, 58, 0.35);
}
.nav__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--content-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: inherit;
}
/* Brand logo (EFYGAS 1 inline <use>) — st0 outline + wordmark follow currentColor;
   blue/orange/white accents stay fixed. Color set per context below. */
.brand-logo {
  display: block;
  width: auto;
  aspect-ratio: 3281 / 2557;
  color: #011933;                 /* brand navy — default (readable on light) */
  flex-shrink: 0;
}
.nav__brand { height: 54px; }
/* top nav over dark hero (before scroll) → white letters + white outline */
.nav[data-state="transparent"] .brand-logo { color: #FFFFFF; }
/* solid white nav bar (scrolled) → navy logo (reads on white) */
.nav[data-state="solid"] .brand-logo { color: #011933; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav__links a {
  display: inline-block;
  padding: 0.625rem 0.875rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: inherit;
  transition: color 180ms var(--ease);
  border-radius: 4px;
}
.nav__links a:hover { color: var(--accent); }
.nav__links a:active { opacity: 0.8; }
.nav__cta { display: inline-flex; }
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: inherit;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 260ms var(--ease), opacity 220ms var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── Bilingual EL/EN (mirror etoimo-8 · dual-DOM + CSS show/hide) ──────── */
html[lang="el"] .t-en { display: none; }
html[lang="en"] .t-gr { display: none; }
.nav__right { display: flex; align-items: center; gap: 1.25rem; }
.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: var(--body); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.06em; color: currentColor; opacity: 0.55; padding: 4px 2px;
  line-height: 1; transition: color 180ms var(--ease), opacity 180ms var(--ease);
}
.lang-btn:hover { opacity: 0.85; }
.lang-btn.is-active { color: var(--accent); opacity: 1; }
.lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.lang-sep { opacity: 0.3; font-size: 0.8125rem; line-height: 1; }
.mnav__lang { margin-top: 1.75rem; gap: 8px; }

/* Mobile nav overlay */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--ink);
  color: var(--canvas);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms var(--ease), visibility 320ms var(--ease);
}
.mnav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mnav__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 6rem 2rem 4rem;
  gap: 1.5rem;
}
.mnav__link {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.875rem, 7vw, 2.75rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--canvas);
  transition: color 180ms var(--ease);
}
.mnav__link:hover, .mnav__link:focus-visible { color: var(--accent); }
.mnav__cta { margin-top: 1.5rem; align-self: stretch; max-width: 360px; }

/* ─── HERO ───────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;   /* svh = small (stable) viewport: doesn't resize when the mobile
                           address bar shows/hides → no hero resize → no scroll flash/jump */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(96px, 13vh, 168px) clamp(24px, 6vw, 96px) clamp(56px, 9vh, 120px);
  color: var(--canvas);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ken-burns 22s var(--ease) both;
}
@keyframes ken-burns {
  from { transform: scale(1.04); }
  to { transform: scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__photo img { animation: none; transform: none; }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(26, 31, 58, 0.52) 0%,
      rgba(26, 31, 58, 0.38) 38%,
      rgba(26, 31, 58, 0.52) 76%,
      rgba(26, 31, 58, 0.80) 100%),
    linear-gradient(90deg,
      rgba(26, 31, 58, 0.80) 0%,
      rgba(26, 31, 58, 0.44) 50%,
      rgba(26, 31, 58, 0.08) 82%);
}

.hero__card {
  position: relative;
  max-width: min(880px, 94vw);
  color: var(--canvas);
  text-align: center;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.48), 0 1px 4px rgba(0, 0, 0, 0.4);
}
.hero__card .eyebrow {
  color: var(--blue);
  margin-bottom: 1.5rem;
  font-weight: 700;                                      /* +1 step (max Manrope loaded) */
  font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);        /* slightly larger, still subordinate to headline */
  animation: eyebrowPulse 2.5s ease-in-out infinite;    /* soft breathe, not hard blink */
}
.eyebrow--pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--blue);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  background: rgba(14, 155, 245, 0.12);                 /* neutral-blue tint, not orange */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@keyframes eyebrowPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(4.5rem, 15vw, 9.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  /* two-tone gradient fill (white → bright blue) across the whole 3-line block.
     bright --blue, NOT navy, so the deep end stays readable on the dark hero scrim. */
  background: linear-gradient(105deg, var(--canvas) 0%, var(--canvas) 32%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* drop-shadow on the element keeps a readable shadow of the gradient glyphs
     (text-shadow is unreliable under background-clip:text → neutralized below). */
  text-shadow: none;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.5)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
  padding: 0.04em 0.18em 0.08em 0.02em;
  margin-left: -0.02em;
}
.hero__line { display: block; overflow: visible; }
.hero__title em {
  font-style: italic;
  color: transparent;           /* reveal the title's gradient through the word glyphs */
  font-weight: 800;
  font-family: var(--display);
}
/* tight negative letter-spacing on the display titles pulls trailing punctuation
   (; . ! ?) into the italic word → small gap after the em word. EL + EN (same markup). */
.hero__title em, .break__title em { margin-right: 0.1em; }
.hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.55;
  color: var(--canvas);
  margin-top: 1.5rem;
  max-width: 480px;
  margin-inline: auto;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}
.hero__card .btn--link {
  color: var(--canvas);
  border-color: var(--canvas-55);
}
.hero__card .btn--link:hover { color: var(--blue); border-color: var(--blue); }
.hero__card .btn--link:focus-visible { outline-color: var(--blue); }
.hero__trust {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--canvas-78);
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--canvas-32);
}

/* ─── MARQUEE TICKER (κάτω από hero) ─────────────────────────────── */

.marquee {
  /* white by default (not transparent): on the navy body the dark ticker text was invisible until
     the JS .scrolled toggle faded it white mid-scroll ("στρωνει"). Always-white = readable + no settle. */
  background: #FFFFFF;
  border-top: 1px solid transparent;
  border-bottom: 2px solid transparent;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.marquee.scrolled {
  background: #FFFFFF;
  border-top-color: rgba(26, 31, 58, 0.10);
  border-bottom-color: transparent;
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 8vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg,  #FFFFFF, rgba(255,255,255,0)); }
.marquee::after  { right: 0; background: linear-gradient(270deg, #FFFFFF, rgba(255,255,255,0)); }
.marquee__track {
  display: inline-flex;
  align-items: center;
  animation: marqueeScroll 42s linear infinite;
  will-change: transform;
}
/* marquee runs continuously — no hover-pause */
.marquee__group { display: inline-flex; align-items: center; }
.marquee__item {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 19px);
  color: var(--ink);
  letter-spacing: 0.01em;
  padding: 16px 0;
  display: inline-block;
}
.marquee__sep {
  color: var(--accent);
  opacity: 0.95;
  font-size: clamp(20px, 2.2vw, 26px);   /* larger ✈ — was 13px (smaller than items) */
  line-height: 1;
  margin: 0 clamp(18px, 3vw, 38px);
  display: inline-flex;
  align-items: center;
  transform: translateY(0.06em);          /* optical baseline centering vs the text run */
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__group:nth-child(2) { display: none; }
}

/* ─── STEPS (Πώς δουλεύει) ──────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
  position: relative;
  padding-top: clamp(24px, 4vh, 48px);
}
.steps::before {
  content: '';
  position: absolute;
  top: calc(clamp(24px, 4vh, 48px) + clamp(3.25rem, 7.5vw, 5rem) * 1.1 + 0.55rem);
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent) calc(var(--progress, 0%) ),
    var(--canvas-32) calc(var(--progress, 0%) ),
    var(--canvas-32) 100%);
  z-index: 0;
  transition: --progress 1200ms var(--ease);
}
.steps.is-in::before { --progress: 100%; }
@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}
.step__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.25rem, 7.5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  align-self: center;
  padding: 0.02em 0.34em 0.08em;
  background: var(--accent);
  border-radius: 6px;
  box-shadow: 0 14px 34px -14px rgba(255, 107, 44, 0.55);
}
.step__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: var(--canvas);
}
.step__body {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--canvas-78);
  max-width: 30ch;
  margin-inline: auto;
}
.step__body em {
  color: var(--accent);
  font-weight: 700;
  font-style: italic;
  font-family: var(--display);
}

/* ─── STEPS DESKTOP — equal circles + vertical zigzag (mobile L-R zigzag untouched) ─── */
@media (min-width: 1024px) {
  .step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(5rem, 8vw, 6.5rem);
    height: clamp(5rem, 8vw, 6.5rem);
    box-sizing: border-box;
    padding: 0;
    font-size: clamp(2.25rem, 4vw, 3rem);
    border-radius: 50%;
  }
  .step:nth-child(odd) { transform: translateY(-2.6rem); }
  .step:nth-child(even) { transform: translateY(2.6rem); }
  .steps::before { top: calc(clamp(24px, 4vh, 48px) + clamp(5rem, 8vw, 6.5rem) / 2); }
}

/* ─── CATEGORY BENTO ─────────────────────────────────────────────── */

.category-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* minmax(0,..) prevents fractional-DPR column sliver */
  grid-template-rows: auto auto;
  gap: clamp(24px, 3vw, 40px);
}
.tile {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  background: var(--ink);
  transition: transform 320ms var(--ease);
}
/* GPU layer promotion: isolates the rounded-clip rasterization onto its own compositing layer →
   clean clip edge at fractional DPR (no per-edge hairline). NOTE: these frames are reveal-animated
   ([data-reveal]/[data-stagger] set `transform`), so a base `transform: translateZ(0)` is overridden.
   `will-change: transform` promotes the layer independently of the reveal's transform value. */
.tile, .teaser__visual {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  isolation: isolate;
}
.tile--feature { grid-column: span 2; aspect-ratio: 16 / 11; }
.tile:nth-child(3),
.tile:nth-child(4),
.tile:nth-child(5),
.tile:nth-child(6) { grid-column: span 1; }
/* ── Framed images (shared) — DPR-agnostic anti-hairline ────────────
   Real Chrome on fractional display scaling (125/150% → DPR 1.25/1.5)
   leaves a 1px clip seam exposing the frame bg. Two-layer defense:
   (a) dark frame bg (.tile/.teaser__visual) so any seam is invisible;
   (b) 2px image overfill so the rounded clip is always fully covered.
   One rule for every framed image — not per-type. (display:block is global.) */
.tile img,
.teaser__visual img {
  /* clean centered zoom: inset:0 (not negative) + transform-origin/object-position center →
     scales symmetrically from the centre, hiding BOTH edges past the rounded clip at any DPR. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
  transform-origin: center center;
  transition: transform 0.5s ease;   /* smooth ken-burns on hover */
}
.tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 31, 58, 0.20) 0%, rgba(26, 31, 58, 0.65) 100%);
  transition: background 320ms var(--ease);
}
.tile__content {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(18px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--canvas);
}
.tile__eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 280ms var(--ease);
}
.tile__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--canvas);
}
/* small (non-feature) tiles: reserve 2 lines so all titles align at the same height */
.tile:not(.tile--feature) .tile__title { min-height: 2.2em; }
/* mobile-only line break (feature card title aligns to its 2-line neighbour on phones) */
.br-mobile { display: none; }
.tile__arrow {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--canvas);
  position: absolute;
  top: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  opacity: 0.7;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.tile:hover {
  transform: translateY(-4px) scale(1.015);
}
.tile:hover .tile__overlay {
  background: linear-gradient(180deg, rgba(26, 31, 58, 0.10) 0%, rgba(26, 31, 58, 0.50) 100%);
}
.tile:hover .tile__eyebrow { color: var(--canvas); }
.tile:hover .tile__arrow { opacity: 1; transform: translate(3px, -3px); }
.tile:hover img { transform: scale(1.13); }
/* :focus-visible (keyboard only) → tap/touch leaves no box; blue ring, not orange */
.tile:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}
.tile:active { transform: translateY(-1px) scale(1.0); }

/* ─── PHOTO BREAK SECTIONS ───────────────────────────────────────── */

.break {
  position: relative;
  min-height: clamp(360px, 50vh, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(72px, 9vh, 112px);
  padding-inline: var(--content-pad);
  overflow: hidden;
  isolation: isolate;
  color: var(--canvas);
  text-align: center;
}
.break__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.break__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(0);
  will-change: transform;
}
.break__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.break--orange { background-color: var(--accent); }   /* solid backing → edge seams blend to orange, not body */
.break--orange .break__overlay {
  background: linear-gradient(135deg, rgba(255, 107, 44, 0.88) 0%, rgba(255, 107, 44, 0.92) 100%);
}
/* dark text on the orange statement break (scoped away from the navy-glass card) */
.break--orange .break__content:not(.break__content--card) .break__title { color: var(--ink); }
.break--orange .break__content:not(.break__content--card) .break__title em {
  color: var(--canvas);
  border-bottom-color: var(--canvas);
}
.break--orange .break__content:not(.break__content--card) .break__title .break__dot { color: var(--canvas); }
.break--orange .break__content:not(.break__content--card) .break__sub { color: var(--ink); opacity: 0.85; }
.break--navy .break__overlay,
.break__overlay--navy {
  background: linear-gradient(180deg, rgba(26, 31, 58, 0.78) 0%, rgba(26, 31, 58, 0.88) 100%);
}
.break__content {
  position: relative;
  max-width: 880px;
}
.break__content--card {
  max-width: 580px;
  background: rgba(26, 31, 58, 0.55);
  color: var(--canvas);
  padding: clamp(32px, 4vw, 56px);
  border-radius: 8px;
  border: 1px solid var(--canvas-14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.55);
  text-align: left;
}
.break__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.25rem, 6.5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--canvas);
}
.break__title--card { color: var(--canvas); font-size: clamp(2rem, 4vw, 2.75rem); }
.break__line { display: block; }
.break__title em { font-style: italic; color: var(--canvas); border-bottom: 4px solid var(--canvas); padding-bottom: 0.05em; font-family: var(--display); }
.break--navy .break__title em { color: var(--accent); border-color: transparent; }
.break__sub {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--canvas);
  opacity: 0.9;
  margin-top: 1.25rem;
  max-width: 640px;
  margin-inline: auto;
}
.break__sub--card { color: var(--canvas-78); opacity: 1; margin-top: 1rem; margin-inline: 0; }

/* Statement-break density: value pills + CTA */
.break__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem 0.75rem;
  margin-top: 1.75rem;
}
.break__pill {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 0.5rem 1rem;
  border: 1.5px solid rgba(26, 31, 58, 0.55);
  border-radius: 999px;
  background: rgba(26, 31, 58, 0.06);
}
.btn--statement {
  margin-top: 1.75rem;
  background: var(--ink);
  color: var(--canvas);
  box-shadow: 0 10px 28px -12px rgba(11, 13, 20, 0.6);
}
.btn--statement:hover {
  background: var(--black);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -12px rgba(11, 13, 20, 0.7);
}
.btn--statement:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn--statement:active { transform: translateY(0); }

/* ─── WHY (sticky-aside) ─────────────────────────────────────────── */

.why {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(36px, 4.5vw, 72px);
  align-items: start;
}
.why__aside {
  position: sticky;
  top: clamp(96px, 14vh, 140px);
}
.why__aside .section__title { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.why__lead {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.65;
  color: var(--canvas-78);
  font-weight: 600;
  margin-top: 1.5rem;
  max-width: 30ch;
}
.why__cta { margin-top: 1.75rem; }
.why__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3vw, 44px);
}
.why__prop {
  position: relative;
  border-top: 2px solid var(--blue-22);
  padding-top: clamp(20px, 2.6vh, 28px);
}
.why__ix {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--blue);
  margin-bottom: 0.5rem;
}
.why__prop-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
  color: var(--canvas);
  margin-bottom: 0.75rem;
}
.why__prop p {
  font-size: clamp(0.95rem, 1.25vw, 1.0625rem);
  line-height: 1.6;
  font-weight: 700;
  color: var(--canvas-78);
}
.why__prop em { color: var(--accent); font-family: var(--display); }

/* ─── TEASER (offset-asymmetric) ─────────────────────────────────── */

.teaser {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.teaser__text { max-width: 480px; }
.teaser__body {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.65;
  color: var(--canvas);
  margin-top: 1.25rem;
}
.teaser__form,
.teaser__cta-row {
  display: flex;
  gap: 0.625rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.teaser__form .input { flex: 1; min-width: 200px; }
.teaser__note {
  font-size: 0.8125rem;
  color: var(--canvas);
  margin-top: 1rem;
  letter-spacing: 0.02em;
}
.teaser__visual {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
}
.teaser__visual-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
/* .teaser__visual img — sizing handled by the shared framed-image rule above */
.teaser__badge {
  position: absolute;
  left: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  background: var(--ink);
  color: var(--canvas);
  padding: 0.875rem 1.25rem;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.4);
}
.teaser__badge-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.teaser__badge-title {
  font-family: var(--display);
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

/* Teaser (#tool) — faint travel photo + HEAVY deep-navy overlay: σπάει το flat μαύρο,
   μένει πιο σκούρο από το #why (distinct) ώστε το μπλε card να ποπάρει */
#tool {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
#tool::before {
  display: none;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(95% 75% at 16% -5%, rgba(14,155,245,0.26), transparent 56%),
    radial-gradient(110% 90% at 90% 108%, rgba(26,31,58,0.34), transparent 62%),
    linear-gradient(180deg, rgba(26,31,58,0.72) 0%, rgba(20,32,60,0.66) 100%),
    url('uploads/upload-9-premium_photo-1683141023289-49fdc6fa7506.avif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#tool > .container { position: relative; z-index: 1; }

/* Teaser = black section → white + blue accents (logo blue) */
#tool .eyebrow,
#tool .eyebrow--on-dark { color: var(--blue); }
#tool .eyebrow__rule { background: var(--blue); }
#tool .teaser__badge-eyebrow { color: var(--blue); }
#tool .teaser__chip-ic { color: var(--blue); }
#tool .teaser__mock-btn { background: var(--blue); }

/* Feature chips — τι μαζεύει ο planner */
.teaser__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.5rem;
}
.teaser__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--canvas);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--canvas-14);
  border-radius: 999px;
  background: var(--canvas-08);
}
.teaser__chip-ic {
  font-size: 0.95rem;
  line-height: 1;
  filter: saturate(1.1);
}

/* Mock search-bar overlay — διαβάζεται σαν εργαλείο */
.teaser__mock {
  position: absolute;
  top: clamp(16px, 2.4vw, 28px);
  left: clamp(16px, 2.4vw, 28px);
  right: clamp(16px, 2.4vw, 28px);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(11, 13, 20, 0.55);
  border: 1px solid var(--canvas-14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.6);
}
.teaser__mock-field {
  flex: 1;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--canvas-78);
}
.teaser__mock-btn {
  flex-shrink: 0;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--canvas);
  background: var(--accent);
  padding: 0.5rem 1rem;
  border-radius: 999px;
}

/* ─── INPUTS ─────────────────────────────────────────────────────── */

.input {
  background: var(--canvas-08);
  color: var(--canvas);
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--canvas-32);
  border-radius: 4px;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.4;
  min-height: 48px;
  width: 100%;
  transition: border-color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
}
.input::placeholder { color: var(--canvas-55); }
.input:hover { border-color: var(--canvas-55); }
.input:focus,
.input:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--canvas-14);
  box-shadow: 0 0 0 3px var(--accent-22);
}
.input:active { outline: none; }
.input:disabled { opacity: 0.5; cursor: not-allowed; }

.input--on-light {
  background: var(--canvas);
  color: var(--ink);
  border-color: var(--border);
}
.input--on-light::placeholder { color: var(--ink-muted); }
.input--on-light:hover { border-color: var(--ink-muted); }
.input--on-light:focus,
.input--on-light:focus-visible {
  border-color: var(--accent);
  background: var(--canvas);
  box-shadow: 0 0 0 3px var(--accent-22);
}

/* ─── NEWSLETTER form ───────────────────────────────────────────── */

.news-form {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
}
.news-form .input { flex: 1; min-width: 200px; }
.news-viber { margin-top: 0.875rem; width: 100%; border-color: var(--canvas-55); color: var(--canvas); }
.news-viber:hover { border-color: var(--accent); color: var(--accent); background: rgba(255, 107, 44, 0.06); }
.news-viber:focus-visible { outline-color: var(--accent); }

/* ─── FOOTER ─────────────────────────────────────────────────────── */

.footer {
  background: var(--black);
  color: var(--canvas);
  padding-block: clamp(64px, 9vh, 96px) clamp(32px, 4vh, 48px);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.footer__brand { max-width: 360px; }
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--canvas);
}
/* dark (black) footer → white letters + white outline, accents kept */
.footer__brand-logo { height: 72px; }
.footer__logo .brand-logo { color: #FFFFFF; }
.footer__motto {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 1rem;
  color: var(--canvas);
}
.footer__motto em { color: var(--blue); font-style: italic; font-family: var(--display); }
.footer__copy {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--canvas-78);
  line-height: 1.6;
}
.footer__h {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.footer__nav,
.footer__social {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.footer__nav a,
.footer__social a {
  font-size: 0.9375rem;
  color: var(--canvas);
  transition: color 180ms var(--ease);
  padding: 0.25rem 0;
}
.footer__nav a:hover,
.footer__social a:hover { color: var(--accent); }
.footer__meta {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--canvas-78);
}
.footer__rule {
  height: 1px;
  background: rgba(232, 229, 222, 0.12);
  margin-top: clamp(48px, 7vh, 80px);
}
.footer__bottom {
  padding-top: clamp(20px, 3vh, 28px);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}
.footer__legal,
.footer__disclosure {
  font-size: 0.8125rem;
  color: var(--canvas-78);
  letter-spacing: 0.02em;
}
.footer__disclosure { max-width: 600px; }
/* «Made By etoimo.gr» credit — bolder than the plain copyright, etoimo.gr links out */
.footer__credit { font-weight: 700; color: var(--accent); }
.footer__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color 180ms var(--ease); }
.footer__credit a:hover { color: var(--accent-deep); }

/* ─── BREAKPOINTS ────────────────────────────────────────────────── */

@media (max-width: 1023px) {

  .nav__links,
  .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }


  /* Mobile: VERTICAL ZIGZAG timeline — central orange spine, steps alternate L/R
     (μηχανισμός etoimo-8, χρώματα/font efyges). efyges children = 1,2,3 → odd=LEFT, even=RIGHT */
  .steps {
    display: block;
    grid-template-columns: none;
    gap: 0;
    position: relative;
    padding-top: 8px;
  }
  .steps::before {                       /* central vertical orange spine */
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -1.5px;
    top: 6px;
    bottom: 6px;
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 3px;
    background: var(--accent);
    z-index: 0;
  }
  .step {
    position: relative;
    display: block;
    width: 50%;
    box-sizing: border-box;
    padding: 0 0 40px;
    gap: 0;
    z-index: 1;
  }
  .step:last-child { padding-bottom: 0; }
  .step:nth-child(odd) {                 /* LEFT side (step 1 & 3) */
    margin-left: 0;
    padding-right: 32px;
    text-align: right;
  }
  .step:nth-child(even) {                /* RIGHT side (step 2) */
    margin-left: 50%;
    padding-left: 32px;
    text-align: left;
  }
  .step__num {                           /* round badge centered ON the spine */
    position: absolute;
    top: -2px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    box-shadow: 0 8px 20px -8px rgba(255, 107, 44, 0.6);
    align-self: auto;
    z-index: 2;
  }
  .step:nth-child(odd) .step__num { right: -20px; }
  .step:nth-child(even) .step__num { left: -20px; }
  .step__title { font-size: 1.1rem; margin-bottom: 0.4rem; }
  .step__body { font-size: 0.9rem; line-height: 1.5; max-width: none; margin-inline: 0; }

  .category-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--feature, .tile { grid-column: span 1 !important; aspect-ratio: 4/5; }
  .tile--feature { aspect-ratio: 16/11; grid-column: span 2 !important; }

  .why { grid-template-columns: 1fr; gap: 3rem; }
  .why__aside { position: static; }

  .teaser { grid-template-columns: 1fr; gap: 2.5rem; }
  .teaser__visual { order: -1; }

  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: span 2; max-width: none; }
}

@media (max-width: 768px) {
  .category-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .tile, .tile--feature { grid-column: span 1 !important; aspect-ratio: 4/5; }
  .tile--feature { grid-column: span 1 !important; aspect-ratio: 4/5; }
  .br-mobile { display: inline; }   /* feature titles side-by-side here → force 2 lines */

  .section__head--row { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
  .section__lead { max-width: none; }
  .why__body { grid-template-columns: 1fr 1fr; gap: clamp(16px, 4vw, 24px); }

  .hero {
    padding: clamp(92px, 16vh, 132px) 20px clamp(40px, 7vh, 72px);
  }
  .hero__card {
    max-width: 100%;
  }
  .hero__title { font-size: clamp(3.4rem, 15.5vw, 6.2rem); }
  .hero__ctas { gap: 0.875rem 1.25rem; }

  .break__title { font-size: clamp(2rem, 9vw, 3rem); }
  .break__content--card { padding: 28px 24px; max-width: calc(100% - 32px); }
}

@media (max-width: 480px) {
  :root { --content-pad: 18px; }
  .nav { padding-block: 0.5rem; }
  .nav__inner { padding-inline: 18px; }
  .hero__title { font-size: clamp(3rem, 15vw, 4.8rem); }
  .hero__sub { font-size: 1rem; }
  /* newsletter: stack form so submit is full-width like the email field + Viber button */
  .news-form { flex-direction: column; }
  .news-form .btn--blue { width: 100%; }
  .footer__inner { grid-template-columns: 1fr; }
  .footer__brand { grid-column: 1; }
  /* mobile only: center footer like the hero (logo, tagline, nav columns, links, social, contact) */
  .footer__inner { text-align: center; }
  .footer__brand { text-align: center; }
  .footer__nav,
  .footer__social { align-items: center; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}