/* ==========================================================================
   TECH — sample 1
   Dark theme, single primary (teal), rare violet accent.
   No external fonts, no external assets: the whole site runs from file://
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* surfaces */
  --bg:            #0A0B0D;
  --bg-elev:       #0E1013;
  --surface:       #131619;
  --surface-2:     #181C21;
  --surface-3:     #1E232A;

  /* lines */
  --line:          rgba(255, 255, 255, .075);
  --line-strong:   rgba(255, 255, 255, .145);

  /* text */
  --text:          #EEF1F4;
  --text-2:        #C3C9D1;
  --muted:         #8E97A3;

  /* brand */
  --primary-rgb:   91 147 196;    /* base channels — every alpha tint below derives from it */
  --primary:       #5B93C4;
  --primary-deep:  #2E75B4;
  --primary-2:     #96BDE0;
  --primary-lift:  #71A5D2;   /* hover: the primary a step brighter */
  --on-primary:    #071522;
  --primary-soft:  rgb(var(--primary-rgb) / .10);
  --primary-line:  rgb(var(--primary-rgb) / .28);
  --primary-glow:  rgb(var(--primary-rgb) / .22);
  --accent:        #A78BFA;          /* used sparingly: 1–2 spots per page */

  /* shape */
  --r-sm:   10px;
  --r:      14px;
  --r-lg:   22px;
  --r-pill: 999px;

  /* motion */
  --ease:      cubic-bezier(.22, .68, .26, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);

  /* layout */
  --container: 1200px;
  --gutter: 24px;
  --header-h: 72px;

  /* type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
          Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

::selection { background: var(--primary); color: var(--on-primary); }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Hide the page while the EN dictionary swaps in, so no Greek flash. */
html.lang-pending body { visibility: hidden; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem); letter-spacing: -.032em; }
h2, .h2 { font-size: clamp(1.85rem, 1.25rem + 2.1vw, 2.9rem); letter-spacing: -.028em; }
h3, .h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.4rem); line-height: 1.3; }
h4, .h4 { font-size: 1.02rem; line-height: 1.4; }

p { color: var(--text-2); }
.lead { font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem); color: var(--text-2); line-height: 1.72; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.mono { font-family: var(--mono); font-size: .8rem; letter-spacing: .02em; }

strong, b { font-weight: 600; color: var(--text); }

/* Accented word inside a heading */
.grad {
  background: linear-gradient(100deg, var(--primary) 0%, var(--primary-2) 45%, var(--primary-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 860px; }

.section { padding-block: clamp(64px, 4vw + 44px, 116px); position: relative; }
.section--tight { padding-block: clamp(48px, 3vw + 32px, 76px); }
.section--alt { background: var(--bg-elev); border-block: 1px solid var(--line); }
/* Required on any section holding a .glow that bleeds past the edge, so the
   blur does not widen the document. `.hero` / `.page-hero` clip on their own. */
.section--clip { overflow: hidden; }

.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 28px; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 940px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

.center { text-align: center; }
.center .section-head { margin-inline: auto; }

/* Section header block */
.section-head { max-width: 660px; margin-bottom: clamp(32px, 3vw, 52px); }
.section-head p { margin-top: 14px; }

.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  max-width: none;
}
.section-head--row > div { max-width: 660px; }
@media (max-width: 760px) {
  .section-head--row { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* --------------------------------------------------------------------------
   5. Decorative background layers
   -------------------------------------------------------------------------- */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 62% at 50% 0%, #000 12%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 0%, #000 12%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}
.glow--primary { background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%); }
.glow--accent  { background: radial-gradient(circle, rgba(167,139,250,.16) 0%, transparent 70%); }

.section > .container { position: relative; z-index: 1; }

/* Hairline separator with a bright centre */
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  border: 0;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--text);
  font-size: .94rem;
  font-weight: 550;
  letter-spacing: -.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  box-shadow: 0 0 0 0 var(--primary-glow);
}
.btn--primary:hover {
  background: var(--primary-lift);
  border-color: var(--primary-lift);
  box-shadow: 0 12px 34px -10px var(--primary-glow);
}

.btn--ghost { background: rgba(255,255,255,.02); }
.btn--ghost:hover { background: rgba(255,255,255,.06); border-color: var(--line-strong); }

.btn--lg { padding: 15px 28px; font-size: 1rem; }
.btn--sm { padding: 9px 16px; font-size: .85rem; }

/* Labels are `nowrap`, so on a 320px screen the padding is what has to give. */
@media (max-width: 380px) {
  .btn { padding-inline: 18px; }
  .btn--lg { padding: 14px 20px; font-size: .95rem; }
}
.btn--block { width: 100%; }

.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* Text link with a sliding arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 550;
  font-size: .94rem;
  transition: gap .25s var(--ease);
}
.link-arrow:hover { gap: 13px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   7. Eyebrow / badge / chip
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .78rem;
  font-weight: 550;
  letter-spacing: .06em;
  color: var(--primary);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--primary-line);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.025);
  font-size: .8rem;
  color: var(--text-2);
  backdrop-filter: blur(8px);
}
.badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / .16);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / .16); }
  50%      { box-shadow: 0 0 0 6px rgb(var(--primary-rgb) / .04); }
}

.chip {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
  font-size: .78rem;
  color: var(--muted);
}
.chip--primary {
  border-color: var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-elev) 100%);
  overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease),
              background-color .35s var(--ease);
}
.card > * { position: relative; z-index: 1; }

/* Cursor spotlight — coordinates injected by main.js */
.card--spot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              rgb(var(--primary-rgb) / .09), transparent 62%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  z-index: 0;
}
.card--spot:hover::before { opacity: 1; }
.card--spot:hover { border-color: var(--primary-line); transform: translateY(-4px); }

.card h3 { margin-bottom: 10px; }
.card p { font-size: .95rem; }

.card-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.03);
  color: var(--primary);
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              transform .35s var(--ease);
}
.card--spot:hover .card-icon {
  background: var(--primary-soft);
  border-color: var(--primary-line);
  transform: translateY(-2px);
}

.card-num {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--primary);
  letter-spacing: .1em;
  margin-bottom: 14px;
}

.card-list { margin-top: 18px; display: grid; gap: 9px; }
.card-list li {
  display: flex;
  gap: 10px;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.5;
}
.card-list li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--primary-line);
}

/* Card whose whole surface is a link */
.card--link:hover h3 { color: var(--primary); }
.card--link h3 { transition: color .3s var(--ease); }

/* --------------------------------------------------------------------------
   9. Header
   -------------------------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* `--h` is the header's live height — it shrinks with the bar on scroll. The
   menu panel reads it to size itself to the exact rest of the viewport, which a
   fixed `--header-h` cannot do once the bar has shrunk to 64px. */
.site-header {
  --h: var(--header-h);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              backdrop-filter .35s var(--ease), height .35s var(--ease);
}
.site-header.is-scrolled {
  --h: 64px;
  background: rgba(10, 11, 13, .78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
}

/* scroll progress hairline */
.progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--primary-deep), var(--primary));
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.site-header.is-scrolled .progress { opacity: 1; }

/* ------------------------------------------------------------------------
   Brand mark ramp
   The pyramid in the page's <defs> block paints itself from these eight steps,
   and they are all derived from --primary — so picking a brand colour repaints
   the logo along with the rest of the site, gradients and all.

   The floor mixes toward white and black, which every browser understands but
   which drains chroma at both ends. Where relative colour is supported the ramp
   is rebuilt in OKLCH: lightness travels, chroma is held up, and the hue turns
   with it, so the lit facets stay lit instead of going chalky.
   --------------------------------------------------------------------- */
.pyr-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;

  --pyr-50:  color-mix(in oklab, var(--primary), #FFFFFF 46%);
  --pyr-100: color-mix(in oklab, var(--primary), #FFFFFF 38%);
  --pyr-200: color-mix(in oklab, var(--primary), #FFFFFF 26%);
  --pyr-300: color-mix(in oklab, var(--primary), #FFFFFF 13%);
  --pyr-500: color-mix(in oklab, var(--primary), #000000 22%);
  --pyr-600: color-mix(in oklab, var(--primary), #000000 34%);
  --pyr-700: color-mix(in oklab, var(--primary), #000000 46%);
  --pyr-800: color-mix(in oklab, var(--primary), #000000 58%);
}
@supports (color: oklch(from #000 l c h)) {
  .pyr-defs {
    --pyr-50:  oklch(from var(--primary) .93 calc(c * .82) calc(h - 14));
    --pyr-100: oklch(from var(--primary) .89 calc(c * .92) calc(h - 11));
    --pyr-200: oklch(from var(--primary) .83 calc(c * 1.00) calc(h -  7));
    --pyr-300: oklch(from var(--primary) .77 calc(c * 1.06) calc(h -  3));
    --pyr-500: oklch(from var(--primary) .62 calc(c * 1.12) calc(h +  7));
    --pyr-600: oklch(from var(--primary) .56 calc(c * 1.20) calc(h + 11));
    --pyr-700: oklch(from var(--primary) .50 calc(c * 1.28) calc(h + 16));
    --pyr-800: oklch(from var(--primary) .44 calc(c * 1.35) calc(h + 20));
  }
}

/* Logo lockup */
.logo { display: flex; align-items: center; gap: 11px; flex: none; }
.logo svg { width: 31px; height: 31px; overflow: visible; }
/* The three sections carry no fill of their own — each <use> pulls a gradient
   out of the page's <defs>, so the colour comes from --primary and nothing here
   needs to know the hue. The translate is in the mark's own 64-unit space, not
   screen pixels.

   Opening is driven by `is-open`, which `brandMark()` in main.js sets on a
   genuine hover and nothing else. Deliberately not `:hover`: that matches the
   moment a page loads with the cursor already on the brand — exactly where it
   is after you click the brand — so the mark would animate open on arrival,
   which reads as the logo answering the click. There is no press state here
   for the same reason. */
.logo .f { transition: translate .5s var(--ease-out); }
.logo.is-open .f-top   { translate: 0 -4px; }
.logo.is-open .f-left  { translate: -3.4px 2px; }
.logo.is-open .f-right { translate: 3.4px 2px; }
.logo-text {
  font-size: 1.06rem;
  font-weight: 640;
  letter-spacing: .14em;
  color: var(--text);
}

.site-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-list a {
  position: relative;
  display: block;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: .92rem;
  color: var(--text-2);
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.nav-list a:hover { color: var(--text); background: rgba(255,255,255,.045); }
.nav-list a[aria-current="page"] { color: var(--primary); }
.nav-list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 1px;
  background: var(--primary-line);
}

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* The menu's own tools row — language (and the tint trigger the script drops
   next to it) only exist here once the burger takes over. */
.nav-tools { display: none; }

/* Language switch */
.lang {
  display: flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
}
.lang button {
  padding: 5px 11px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.lang button:hover { color: var(--text); }
.lang button[aria-pressed="true"] {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Burger
   The geometry has to be exact or the close state does not read as an X: the
   two diagonals have to land on the same point, which means the travel must
   equal the distance between bar centres. `place-content: center` is what makes
   that knowable — with the default `normal`, auto rows stretch to fill the 42px
   button and the bars drift 8.17px apart, so a 6px travel leaves them separated
   and the X comes out as a chevron. Centred tracks + an explicit gap put the
   centres exactly `height + gap` = 6px apart. */
.burger {
  display: none;
  width: 42px; height: 42px;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: background-color .25s var(--ease);
}
/* Border is already --line-strong at rest, so only the fill has anywhere to go. */
.burger:hover { background: rgba(255,255,255,.06); }
.burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .18s var(--ease);
}
/* Middle bar leaves first and fastest, so the diagonals cross over nothing. */
body.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1099px) {
  .burger { display: grid; }
  .header-actions .btn { display: none; }

  /* Language and tint move into the menu, so the bar is only brand + burger —
     which is what makes 320px work. The nav leaves the flow below, so the
     actions have to claim the free space themselves. */
  .header-actions { margin-left: auto; }
  .header-actions .lang,
  .header-actions .tint { display: none; }

  /* Absolute rather than fixed so the panel stays welded to the bottom of the
     header as it shrinks from 72px to 64px on scroll. */
  /* Full-height sheet: it fills everything below the bar, whatever the bar
     currently measures. `dvh` rather than `vh` so a phone's collapsing URL bar
     does not leave the panel hanging past the bottom of the screen.

     Nothing here scrolls — the height tiers further down shrink the rows and
     re-column the list until the content fits the viewport it is given. The
     `overflow-y` is a last-resort guard for a viewport shorter than any real
     device; the scrollbar is hidden because it should never appear. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin: 0;
    padding: 16px var(--gutter) 20px;
    /* `top: 100%` lands on the header's padding box, which sits 1px above its
       border box, so the height adds that 1px back to reach the viewport floor.
       (Fixed positioning would be simpler, but `.is-scrolled` puts a
       backdrop-filter on the header, and that makes it the containing block for
       fixed children — the panel would collapse to the bar the moment you
       scrolled.) */
    height: calc(100vh - var(--h) + 1px);
    height: calc(100dvh - var(--h) + 1px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    background: rgba(10, 11, 13, .97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .site-nav::-webkit-scrollbar { width: 0; height: 0; }
  body.nav-open .site-nav { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  /* 10px + a 27px line box = a 47px row, still over the 44px touch minimum. */
  .nav-list a { padding: 10px 14px; font-size: 1rem; border-radius: var(--r); }
  .nav-list a[aria-current="page"]::after { display: none; }
  .nav-cta { margin-top: 10px; }
  .nav-cta .btn { width: 100%; }

  /* `auto` is what pins the row to the floor of the sheet on a tall phone. */
  .nav-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .nav-tools-label {
    margin-right: auto;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .nav-tools .lang button { padding: 7px 15px; font-size: .82rem; }
  .nav-tools .tint-btn { width: 38px; height: 38px; }
}
@media (min-width: 1100px) { .nav-cta { display: none; } }

/* --------------------------------------------------------------------------
   Short viewports — a phone in landscape, mostly
   The sheet is full height by definition, so on a short screen the content is
   what has to give. Each tier buys back what the one above it ran out of:
   first the row height, then the number of rows. Two columns arrive before
   three, and three wait for the width that only landscape brings, so a narrow
   screen never gets columns it cannot fit.
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) and (max-height: 560px) {
  .site-nav { padding: 12px var(--gutter) 14px; }
  .nav-list a { padding: 7px 14px; font-size: .95rem; }
  .nav-cta { margin-top: 8px; }
  .nav-cta .btn { padding-block: 10px; }
  .nav-tools { padding-top: 10px; }
  .nav-tools .lang button { padding: 6px 13px; }
  .nav-tools .tint-btn { width: 34px; height: 34px; }
}
@media (max-width: 1099px) and (max-height: 470px) {
  .nav-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .nav-cta { grid-column: 1 / -1; }
}
@media (max-width: 1099px) and (max-height: 360px) and (min-width: 480px) {
  .nav-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-list a { padding: 6px 12px; font-size: .9rem; }
  .nav-tools .tint-btn { width: 32px; height: 32px; }
}
/* Short *and* narrow — no room for a third column, since "Outsourcing" alone
   needs more than a third of 320px. The rows give up the height instead. */
@media (max-width: 479px) and (max-height: 360px) {
  .site-nav { padding: 10px var(--gutter); }
  .nav-list a { padding: 5px 12px; font-size: .9rem; }
  .nav-tools { padding-top: 8px; }
}

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(56px, 6vw, 96px));
  padding-bottom: clamp(60px, 5vw, 104px);
  overflow: hidden;
}
.hero .glow--primary { width: 620px; height: 620px; top: -260px; left: 50%; transform: translateX(-58%); }
.hero .glow--accent  { width: 420px; height: 420px; top: 40px; right: -140px; opacity: .38; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

.hero h1 { margin-block: 22px 24px; }
.hero .lead { max-width: 56ch; }
.hero .btn-row { margin-top: 34px; }

/* small hero sub-stats */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.hero-fact .n {
  font-size: 1.55rem;
  font-weight: 620;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.1;
}
.hero-fact .l { font-size: .82rem; color: var(--muted); margin-top: 4px; }

/* small unit word set beside a stat figure (e.g. 14+ χρόνια) */
.stat-unit { font-size: .46em; font-weight: 500; letter-spacing: 0; margin-left: .22em; color: var(--muted); }
/* qualifier set BEFORE a stat figure (e.g. Μέσος όρος 6 εβδ.) */
.stat-qual { font-size: .30em; font-weight: 500; letter-spacing: 0; margin-right: .3em; color: var(--muted); white-space: nowrap; }

/* --- hero visual: a mock delivery console ------------------------------- */
.console {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--bg-elev) 62%);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow: hidden;
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.console::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,.045) 50%, transparent 58%);
  background-size: 260% 100%;
  animation: sheen 6.5s var(--ease) infinite;
  pointer-events: none;
}
@keyframes sheen {
  0%   { background-position: 180% 0; }
  55%  { background-position: -80% 0; }
  100% { background-position: -80% 0; }
}

.console-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.console-bar .d { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); }
.console-bar .d:first-child { background: rgb(var(--primary-rgb) / .5); }
.console-bar .t {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--muted);
}
.console-body { padding: 22px 20px 24px; }

.pipe { display: grid; gap: 2px; }
.pipe-step {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  transition: background-color .4s var(--ease);
}
.pipe-step.is-active { background: rgb(var(--primary-rgb) / .055); }
.pipe-dot {
  position: relative;
  width: 18px; height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: transparent;
  transition: border-color .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
}
.pipe-step.is-done .pipe-dot {
  border-color: var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
}
.pipe-step.is-active .pipe-dot {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / .09);
}
.pipe-dot svg { width: 10px; height: 10px; }
.pipe-label { font-size: .88rem; color: var(--muted); transition: color .4s var(--ease); }
.pipe-step.is-done .pipe-label,
.pipe-step.is-active .pipe-label { color: var(--text-2); }
.pipe-meta { font-family: var(--mono); font-size: .72rem; color: var(--muted); opacity: .75; }

.pipe-bar {
  grid-column: 1 / -1;
  height: 2px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}
.pipe-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary-deep), var(--primary));
  transition: width 1.1s var(--ease);
}

.console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--muted);
}
.console-foot .ok { color: var(--primary); }

.hero-visual { position: relative; }

/* --------------------------------------------------------------------------
   11. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 22px;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 48px;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  font-weight: 550;
  color: var(--muted);
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.marquee-item::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--primary-line);
}
.marquee:hover .marquee-item { color: var(--text-2); }

/* --------------------------------------------------------------------------
   12. Stats
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-elev) 100%);
  overflow: hidden;
}
.stat { padding: 32px 28px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .n {
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.7rem);
  font-weight: 620;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--primary);
}
.stat .l { margin-top: 10px; font-size: .88rem; color: var(--muted); }
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 460px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   13. Feature rows / bullets
   -------------------------------------------------------------------------- */
.feature-list { display: grid; gap: 22px; }
.feature {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  align-items: start;
}
.feature-ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.03);
  color: var(--primary);
}
.feature h4 { margin-bottom: 4px; }
.feature p { font-size: .92rem; }

.check-list { display: grid; gap: 12px; }
.check-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: .95rem;
  color: var(--text-2);
}
.check-list svg { width: 20px; height: 20px; color: var(--primary); margin-top: 3px; }

/* --------------------------------------------------------------------------
   14. Process / timeline
   -------------------------------------------------------------------------- */
.process { position: relative; display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.process::before {
  content: "";
  position: absolute;
  top: 23px; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 15%, var(--line-strong) 85%, transparent);
}
.step { position: relative; padding-top: 0; }
.step-badge {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-elev);
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--primary);
  transition: border-color .35s var(--ease), background-color .35s var(--ease),
              box-shadow .35s var(--ease);
}
.step:hover .step-badge {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 5px rgb(var(--primary-rgb) / .06);
}
.step h3 { margin-bottom: 9px; }
.step p { font-size: .92rem; }
@media (max-width: 940px) {
  .process { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .process::before { display: none; }
}
@media (max-width: 560px) { .process { grid-template-columns: minmax(0,1fr); } }

/* Vertical timeline (about page) */
.timeline { position: relative; padding-left: 34px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--primary-line), var(--line) 40%, transparent);
}
.tl-item { position: relative; padding-bottom: 38px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -34px; top: 7px;
  width: 15px; height: 15px;
  border: 1px solid var(--primary-line);
  border-radius: 50%;
  background: var(--bg);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.tl-item:hover::before { background: var(--primary); box-shadow: 0 0 0 5px rgb(var(--primary-rgb) / .1); }
.tl-year { font-family: var(--mono); font-size: .78rem; color: var(--primary); letter-spacing: .08em; }
.tl-item h3 { margin: 8px 0 8px; }
.tl-item p { font-size: .93rem; }

/* --------------------------------------------------------------------------
   15. Tabs
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin-bottom: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  width: fit-content;
  max-width: 100%;
}
.tab {
  padding: 9px 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { background: var(--primary-soft); color: var(--primary); }

/* Once the three labels stop fitting on one line the pill radius wraps a
   three-row block in a lozenge, so the rail becomes a stacked list instead. */
@media (max-width: 640px) {
  .tabs {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--r);
  }
  .tab { border-radius: var(--r-sm); }
}

.tab-panel[hidden] { display: none; }
.tab-panel { animation: fadeUp .5s var(--ease-out) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   16. Accordion
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 4px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 550;
  letter-spacing: -.015em;
  color: var(--text);
  transition: color .25s var(--ease);
}
.acc-head:hover { color: var(--primary); }
.acc-ico {
  flex: none;
  position: relative;
  width: 20px; height: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: border-color .3s var(--ease), transform .35s var(--ease);
}
.acc-ico::before, .acc-ico::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--text-2);
  transform: translate(-50%, -50%);
  transition: opacity .3s var(--ease), background-color .3s var(--ease);
}
.acc-ico::before { width: 9px; height: 1px; }
.acc-ico::after  { width: 1px; height: 9px; }
.acc-item.is-open .acc-ico { border-color: var(--primary-line); transform: rotate(90deg); }
.acc-item.is-open .acc-ico::after { opacity: 0; }
.acc-item.is-open .acc-ico::before { background: var(--primary); }

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ease);
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding: 0 60px 24px 4px; font-size: .95rem; }
@media (max-width: 620px) { .acc-panel p { padding-right: 8px; } }

/* --------------------------------------------------------------------------
   17. Quote / testimonial
   -------------------------------------------------------------------------- */
.quote {
  position: relative;
  padding: clamp(32px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-elev) 100%);
}
.quote::before {
  content: "";
  position: absolute;
  top: 0; left: 32px; right: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-line), transparent);
}
.quote blockquote {
  font-size: clamp(1.12rem, 1rem + .7vw, 1.5rem);
  line-height: 1.55;
  letter-spacing: -.02em;
  color: var(--text);
  font-weight: 400;
}
.quote-author { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--primary-line);
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 620;
  font-size: .9rem;
  letter-spacing: .02em;
}
.quote-author .nm { font-weight: 560; font-size: .95rem; }
.quote-author .rl { font-size: .82rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   18. Team
   -------------------------------------------------------------------------- */
.person { text-align: left; }
.person-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(var(--primary-rgb) / .10), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--bg-elev));
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: border-color .35s var(--ease);
}
.person:hover .person-photo { border-color: var(--primary-line); }
.person-photo .ini {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--primary);
  opacity: .85;
  transition: transform .5s var(--ease-out);
}
.person:hover .person-photo .ini { transform: scale(1.08); }
.person h4 { margin-top: 16px; }
.person .rl { font-size: .86rem; color: var(--muted); margin-top: 2px; }

/* --------------------------------------------------------------------------
   19. Jobs
   -------------------------------------------------------------------------- */
.job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color .3s var(--ease), background-color .3s var(--ease),
              transform .3s var(--ease);
}
.job:hover { border-color: var(--primary-line); transform: translateX(4px); background: var(--surface-2); }
.job h3 { font-size: 1.08rem; }
.job .meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 9px; font-size: .84rem; color: var(--muted); }
.job .meta span { display: flex; align-items: center; gap: 7px; }
.job .meta svg { width: 14px; height: 14px; color: var(--primary); opacity: .8; }
.job-cta { flex: none; }
@media (max-width: 640px) {
  .job { flex-direction: column; align-items: flex-start; gap: 18px; }
  .job:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   20. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .87rem; font-weight: 550; color: var(--text-2); }
.field .req { color: var(--primary); }

.input, .textarea, .select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg-elev);
  color: var(--text);
  font-size: .95rem;
  transition: border-color .25s var(--ease), background-color .25s var(--ease),
              box-shadow .25s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #6C7480; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--primary-line);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / .07);
}
.textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E97A3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 42px;
  cursor: pointer;
}
.select option { background: var(--surface); color: var(--text); }

.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select { border-color: #F2777A; }
.err { font-size: .8rem; color: #F2777A; display: none; }
.field.has-error .err { display: block; }

/* Choice pills (budget / service) */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pill span {
  display: block;
  padding: 9px 17px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.02);
  font-size: .86rem;
  color: var(--muted);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.pill input:checked + span {
  border-color: var(--primary-line);
  background: var(--primary-soft);
  color: var(--primary);
}
.pill input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 3px; }

.consent { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--primary); }
.consent label { font-size: .85rem; color: var(--muted); line-height: 1.55; }
.consent a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

.form-note { font-size: .82rem; color: var(--muted); }

.form-success {
  display: none;
  padding: 22px 24px;
  border: 1px solid var(--primary-line);
  border-radius: var(--r);
  background: var(--primary-soft);
}
.form-success.is-visible { display: block; animation: fadeUp .5s var(--ease-out) both; }
.form-success h3 { color: var(--primary); margin-bottom: 6px; font-size: 1.1rem; }
.form-success p { font-size: .92rem; }

/* --------------------------------------------------------------------------
   21. CTA band
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  /* The floor has to clear the widest button inside: at 44px a side the band
     is narrower than "Start a project" once the viewport hits 320px, and
     `overflow: hidden` below would cut the button in half. */
  padding: clamp(26px, 6vw, 76px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 140% at 50% 0%, rgb(var(--primary-rgb) / .10), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg-elev) 100%);
  overflow: hidden;
  text-align: center;
}
.cta .bg-grid {
  mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 70%);
}
.cta > * { position: relative; z-index: 1; }
.cta p { max-width: 56ch; margin-inline: auto; margin-top: 16px; }
.cta .btn-row { justify-content: center; margin-top: 32px; }
/* The Greek labels are the long ones — "Ξεκινήστε μια συζήτηση" needs 227px,
   so below 420px the band gives up its side padding rather than clip. */
@media (max-width: 420px) {
  .cta { padding: 30px 16px; }
  .cta .btn-row { margin-top: 26px; }
}

/* --------------------------------------------------------------------------
   22. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(48px, 5vw, 84px));
  padding-bottom: clamp(40px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero .glow--primary { width: 540px; height: 540px; top: -280px; left: 50%; transform: translateX(-50%); }
.page-hero h1 { margin-bottom: 20px; }
.page-hero .lead { max-width: 62ch; }

.crumbs { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--muted); margin-bottom: 22px; }
.crumbs a { transition: color .25s var(--ease); }
.crumbs a:hover { color: var(--primary); }
.crumbs .sep { opacity: .5; }

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
  padding-top: clamp(52px, 4vw, 76px);
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 52px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0,1fr); } }

.footer-brand p { font-size: .92rem; margin-top: 18px; max-width: 34ch; }
.footer-brand .logo { margin-bottom: 0; }

.footer-col h4 {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 18px;
}
.footer-col li + li { margin-top: 11px; }
.footer-col a {
  font-size: .92rem;
  color: var(--text-2);
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.footer-col a:hover { color: var(--primary); padding-left: 4px; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-block: 24px;
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--muted);
}
.footer-bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--primary); }

.socials { display: flex; gap: 8px; }
.socials a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: all .25s var(--ease);
}
.socials a:hover {
  color: var(--primary);
  border-color: var(--primary-line);
  background: var(--primary-soft);
  transform: translateY(-2px);
}
.socials svg { width: 16px; height: 16px; }

/* Giant watermark wordmark at the very bottom */
.footer-mark {
  font-size: clamp(4rem, 17vw, 15rem);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: .8;
  text-align: center;
  color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 78%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
  margin-bottom: -.14em;
  padding-top: 18px;
}

/* --------------------------------------------------------------------------
   24. 404
   -------------------------------------------------------------------------- */
.error-page {
  min-height: 88vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-top: var(--header-h);
  position: relative;
  overflow: hidden;
}
.error-code {
  font-size: clamp(5rem, 18vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  background: linear-gradient(180deg, var(--primary), rgb(var(--primary-rgb) / .12));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   25. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 80ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   26. Back to top
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(19,22,25,.85);
  backdrop-filter: blur(12px);
  color: var(--text-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all .3s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--primary); border-color: var(--primary-line); background: var(--surface-2); }
.to-top svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   27. Utilities
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mt-0  { margin-top: 0 !important; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }
.full  { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   28. 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;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   29. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .to-top, .glow, .bg-grid,
  .tint, .tint-pop { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   30. Brand colour picker
   The trigger sits next to the language switch and borrows its pill shape;
   the popover is body-level and positioned in script, so a rail or an
   overflow-hidden header can never clip it.
   -------------------------------------------------------------------------- */
.tint { display: inline-flex; }
.tint-btn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.tint-btn:hover { border-color: var(--line-strong); background: rgba(255,255,255,.06); }
.tint-btn[aria-expanded="true"] { border-color: var(--primary-line); background: var(--primary-soft); }
.tint-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset, 0 0 12px var(--primary-glow);
}

.tint-pop {
  position: fixed;
  z-index: 500;
  width: min(252px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: rgba(19,22,25,.94);
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.tint-pop.is-open { opacity: 1; transform: none; }
.tint-ttl {
  margin: 0 0 10px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.tint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tint-sw {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: .8rem;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.tint-sw i {
  width: 13px; height: 13px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
}
.tint-sw:hover { background: rgba(255,255,255,.05); color: var(--text); }
.tint-sw[aria-pressed="true"] {
  border-color: var(--line-strong);
  background: rgba(255,255,255,.05);
  color: var(--text);
}