/* ════════════════════════════════════════════════════════════════════════
   VX VISION — styles.css
   ────────────────────────────────────────────────────────────────────────
   ΟΛΑ τα brand tokens (χρώματα, γραμματοσειρές, χρονισμοί, αποστάσεις) είναι
   εδώ στο :root. Άλλαξέ τα ΜΟΝΟ εδώ και αλλάζει όλη η σελίδα — έτσι γίνεται
   εύκολα template για πελάτη.

   ΔΟΜΗ ΑΡΧΕΙΟΥ:
   1. Tokens (:root)            6. Snap panels (το άνοιγμα)
   2. Reset & base              7. Ενότητες περιεχομένου
   3. Φόντο (shader/ντεγκραντέ) 8. Footer / sticky κλήση
   4. Loader (intro)            9. Reveal-on-scroll
   5. Μπάρα κορυφής             10. Responsive + προσβασιμότητα
   ════════════════════════════════════════════════════════════════════════ */


/* ── 1. TOKENS ───────────────────────────────────────────────────────── */
:root{
  /* Χρώματα — σκούρο/μωβ. Το «χρώμα» το δίνει ο shader, όχι έντονα πλακάκια. */
  --bg:#0b0712;            /* σχεδόν μαύρο με βιολετί βάθος */
  --bg-soft:#120a20;       /* ανασηκωμένη επιφάνεια */
  --bg-card:#17102a;       /* κάρτες */
  --ink:#f3eefa;           /* off-white κείμενο */
  --ink-dim:#d9d0ec;       /* λίγο πιο απαλό */
  --muted:#a99fc0;         /* δευτερεύον κείμενο */
  --violet:#b29cff;        /* βασικό accent (απαλό) */
  --violet-deep:#7b5cff;   /* ηλεκτρικό μωβ (λάμψεις/links) */
  --line:rgba(243,238,250,.12);
  --line-strong:rgba(243,238,250,.22);

  /* Χρώματα του shader — ΙΔΙΑ λογική με τα brand tokens.
     (Ο shader τα διαβάζει από εδώ, ώστε ν' αλλάζουν μαζί.) */
  --shader-bg1:#19194d;    /* navy  ~ (0.10, 0.10, 0.30) */
  --shader-bg2:#4d1980;    /* purple~ (0.30, 0.10, 0.50) */
  --shader-line:#6633cc;   /* violet~ (0.40, 0.20, 0.80) — όπως ζητήθηκε */

  /* Στατικό ντεγκραντέ — φαίνεται πάντα πίσω, και ως fallback (κινητό/reduced). */
  --grad-fallback:radial-gradient(125% 95% at 50% 6%, #2a1556 0%, #160a2c 46%, #0b0712 100%);

  /* Γραμματοσειρές */
  --font-display:"GFS Didot","Times New Roman",serif;  /* έχει ελληνικά */
  --font-body:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  /* Χρονισμοί — ΠΡΟΣΟΧΗ: το snap (0.75s) είναι κλειδωμένο μέσα στο app.js. */
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --dur-reveal:.7s;

  /* Σχήματα */
  --r:14px; --r-lg:22px; --r-pill:999px;

  /* Αποστάσεις ενοτήτων */
  --pad-y:clamp(88px,13vh,168px);
  --pad-x:clamp(24px,6vw,120px);
}


/* ── 2. RESET & BASE ─────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  min-height:100%;
  background:#0a0712;   /* σκούρα βάση — φαίνεται ανάμεσα στα αστέρια */
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Lenis smooth scroll (Αλλαγή Α) — αντικατέστησε το παλιό «κλείδωμα» του snap.
   Ο 1ος κανόνας (height:auto στο html.lenis) είναι load-bearing για το Lenis. */
html.lenis, html.lenis body{ height:auto; }
/* (Το «overflow:clip σε .lenis-stopped» ΑΦΑΙΡΕΘΗΚΕ: το snap κάνει lenis.stop() + window.scrollTo,
   και το clip θα μπλόκαρε το scroll — γι' αυτό «κόλλαγε». Δεν κάνουμε lenis.stop() για modal/lock αλλού.) */
.lenis.lenis-smooth iframe{ pointer-events:none; }

a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{ outline:2px solid var(--violet); outline-offset:3px; border-radius:4px; }

/* Σύνδεσμος παράκαμψης (εμφανίζεται μόνο με Tab) */
.skip-link{
  position:fixed; top:10px; left:10px; z-index:200;
  background:var(--violet); color:#1a0b2e; font-weight:700;
  padding:.7em 1.1em; border-radius:var(--r); text-decoration:none;
  transform:translateY(-160%); transition:transform .25s ease;
}
.skip-link:focus{ transform:none; }

/* Λογότυπο (επαναχρησιμοποιείται σε μπάρα/loader/footer) */
.mark{ width:1.45em; height:1.45em; color:var(--violet); flex:none; }
.wordmark{
  font-family:var(--font-body); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center;
}
.wordmark strong{ font-weight:800; letter-spacing:.04em; }
.wordmark i{ width:14px; height:1px; background:currentColor; opacity:.6; margin:0 .55em; }
/* Logo εικόνα (transparent PNG) στο header — κρατά το spacing/alignment του .brand */
.brand-logo{ height:26px; width:auto; display:block; }


/* ── 3. ΦΟΝΤΟ ────────────────────────────────────────────────────────── */
/* ΕΝΙΑΙΟ GLOBAL ΦΟΝΤΟ — animation + starfield ΜΑΖΙ στο ίδιο επίπεδο (z-index:0), fixed,
   πίσω από όλα. Το .bg κρατά το WebGL shader (plasma/neural-noise «Lightning»). */
.bg{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.starfield{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }
/* Σκούρο πέπλο: ΠΑΝΩ από animation/stars, ΚΑΤΩ από το content → ευανάγνωστο κείμενο.
   ΣΗΜ: το z-index δέχεται μόνο ΑΚΕΡΑΙΟ (0.5 = άκυρο → auto). Το πέπλο μπαίνει ΜΕΤΑ από
   .bg/.starfield στο DOM, οπότε με z-index:0 «κάθεται» πάνω τους· το main (z:1) είναι από πάνω.
   Το 0.55 ρυθμίζει το σκοτάδι (μεγαλύτερο = πιο ευανάγνωστο, μικρότερο = πιο φωτεινό animation). */
#bg-veil{ position:fixed; inset:0; z-index:0; pointer-events:none; background:rgba(10,7,18,0.55); }
/* Το κεντρικό content κάθεται ΠΑΝΩ από πέπλο/αστέρια/animation. */
main{ position:relative; z-index:1; }
.bg-static{ position:absolute; inset:0; background:var(--grad-fallback); }
/* fixed + full-window → το animation καλύπτει ΠΑΝΤΑ την οθόνη σε όλο το scroll (όχι κολλημένο στο hero). */
#bg-shader{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; display:block; }
/* Όταν δεν υπάρχει WebGL, ο canvas μένει διάφανος και φαίνεται το ντεγκραντέ. */


/* ── 4. LOADER (intro) ───────────────────────────────────────────────── */
.loader{ display:none; }   /* χωρίς JS δεν υπάρχει intro */
.js .loader{
  display:grid; place-items:center;
  position:fixed; inset:0; z-index:120;
  background:var(--bg);
  pointer-events:none;
  animation:loaderVeil 1.9s var(--ease-soft) forwards;
}
.loader-logo{
  display:flex; align-items:center; gap:.7em;
  font-size:clamp(1.4rem,4.5vw,2.4rem);
  color:var(--ink);
  animation:loaderZoom 1.9s var(--ease-soft) forwards;  /* ΖΟΥΜ προς τον επισκέπτη */
}
.loader-logo .mark{ width:1.25em; height:1.25em; }
.loader-logo .wordmark{ letter-spacing:.2em; }
/* Logo εικόνα στο loader — ξεχωριστή κλάση από το wrapper .loader-logo (που κρατά το
   loaderZoom animation), ώστε να μη διπλασιαστεί το ζουμ πάνω στην εικόνα. */
.loader-logo-img{ height:40px; width:auto; display:block; }

@keyframes loaderZoom{
  0%   { opacity:0; transform:scale(.7);  filter:blur(7px); }
  20%  { opacity:1; transform:scale(1);   filter:blur(0); }   /* εμφανίζεται */
  60%  { opacity:1; transform:scale(1.05); }                  /* κρατάει */
  100% { opacity:0; transform:scale(1.7); filter:blur(2px); } /* ζουμ & σβήνει */
}
@keyframes loaderVeil{ 0%,58%{opacity:1} 100%{opacity:0} }


/* ── 5. ΜΠΑΡΑ ΚΟΡΥΦΗΣ ─────────────────────────────────────────────────── */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; justify-content:space-between; align-items:center;
  padding:clamp(16px,3vw,26px) clamp(20px,5vw,56px);
  mix-blend-mode:difference;   /* διαβάζεται και σε σκούρο και σε ανοιχτό */
  color:#fff;
  transition:opacity .3s ease; /* ΑΛΛΑΓΗ 1: το opacity το οδηγεί το scroll (inline από app.js) */
}
/* (Το .bar.is-hidden αφαιρέθηκε — το header σβήνει πλέον με scroll-driven opacity, νωρίς.) */
.bar .brand{ display:inline-flex; align-items:center; gap:.55em; text-decoration:none; font-size:.84rem; }
.bar-call{
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; padding:.6em .2em; position:relative;
}
.bar-call::after{ content:""; position:absolute; left:0; right:100%; bottom:.3em; height:1px; background:currentColor; transition:right .3s var(--ease-soft); }
.bar-call:hover::after{ right:0; }


/* ── 6. SNAP PANELS (το άνοιγμα) ─────────────────────────────────────── */
/* Βάση (χωρίς JS): απλή, διαβάσιμη στήλη — καλό για SEO & προσβασιμότητα. */
.panel{
  position:relative;
  padding:clamp(96px,15vh,150px) clamp(24px,7vw,90px);
  min-height:min(86vh,760px);
  display:grid; align-content:center;
  overflow:hidden;
}
/* Δεν υπάρχει πλέον snap: το #deck/.panel μένουν σε ΚΑΝΟΝΙΚΗ ροή (το hero πέφτει
   στη base .panel — position:relative, min-height ~86vh). Το scroll είναι ενιαίο/smooth. */

/* ΜΟΝΟ το hero είναι ελαφρώς διάφανο, ώστε να περνάει εκεί ο shader.
   Τα υπόλοιπα panels έχουν ΑΔΙΑΦΑΝΟ σκούρο φόντο (με βάθος) ώστε στη μετάβαση
   να ΜΗΝ φαίνεται ποτέ το προηγούμενο από πίσω. */
/* Τα σκούρα overlays του hero ΑΦΑΙΡΕΘΗΚΑΝ — το ενιαίο global φόντο + το #bg-veil
   δίνουν πλέον το σκοτάδι/ευανάγνωστο, ίδιο με όλα τα sections (χωρίς άκρες). */
.panel::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; }
.panel--hero::before{ background:none; }
.panel::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:none; }

/* Τοποθέτηση: το Hero αριστερά (είναι πλέον το μόνο panel). */
/* ΑΛΛΑΓΗ 2: μειωμένο padding-top (~15% λιγότερο από base 96/15vh/150) → το περιεχόμενο
   ανεβαίνει ελάχιστα ώστε να υπάρχει χώρος για το «ΚΥΛΗΣΕ» hint μέσα στην οθόνη. */
.js .panel--hero{ place-items:center start; text-align:left; padding-top:clamp(82px,12.5vh,128px); }

/* ΠΡΟΣΟΧΗ: χρησιμοποιούμε rem (όχι ch) — το ch μετριέται στη γραμματοσειρά του
   container (1rem) και θα έβγαζε πολύ στενό πλάτος για τους τεράστιους τίτλους. */
.panel-inner{ position:relative; z-index:2; max-width:min(54rem,92vw); }
.js .panel--hero .panel-inner{ max-width:min(56rem,92vw); }

/* Τυπογραφία ανοίγματος */
.eyebrow{
  display:inline-flex; align-items:center; gap:.65em;
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin-bottom:clamp(18px,3vh,30px);
}
.eyebrow .tick{ width:26px; height:1px; background:var(--violet); flex:none; }

/* ΣΥΣΤΗΜΑ ΤΙΤΛΩΝ: βάση Manrope bold (σφιχτό letter-spacing) και η λέξη με έμφαση
   <em> γίνεται GFS Didot ITALIC + μωβ — sans βάση, με μία serif+μωβ λέξη να ξεχωρίζει. */
.display{
  font-family:var(--font-body); font-weight:700;
  font-size:clamp(2.3rem,6vw,5rem); line-height:1.06; letter-spacing:-.02em;
  color:var(--ink);
}
.display em{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  letter-spacing:0; color:var(--violet);
}

.lead{
  margin-top:clamp(20px,3vh,32px);
  font-weight:300; color:var(--muted);
  font-size:clamp(1.04rem,1.7vw,1.4rem); line-height:1.5;
  max-width:46ch;
}

/* Κουμπιά */
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(26px,4vh,40px); }
.btn{
  display:inline-block; font-weight:600; font-size:1rem; letter-spacing:.01em;
  padding:.92em 1.7em; border-radius:var(--r-pill); text-decoration:none;
  transition:transform .25s var(--ease-soft), box-shadow .25s var(--ease-soft), background .25s ease;
}
.btn--primary{ color:#190a2e; background:var(--violet); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(178,156,255,.34); }
.btn--ghost{ color:var(--ink); border:1px solid var(--line-strong); }
.btn--ghost:hover{ transform:translateY(-2px); border-color:var(--violet); background:rgba(178,156,255,.08); }

/* Νύξη «κύλησε» */
.hint{ display:none; }
.js .hint{
  display:flex; position:absolute; left:50%; bottom:clamp(7.5rem,17vh,9.5rem); transform:translateX(-50%);   /* ΑΛΛΑΓΗ 1: ~80–85% του hero ύψους → αέρας από κάτω */
  z-index:3; flex-direction:column; align-items:center; gap:8px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  transition:opacity .5s ease;
}
.hint .arrow{ width:1px; height:26px; background:linear-gradient(var(--violet),transparent); animation:fall 1.8s ease-in-out infinite; }
@keyframes fall{
  0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top}
  50.1%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom}
}

/* ΑΛΛΑΓΗ 5 — «Κύλησε» hint στα snap sections (#proof/#work/#closing — ΟΧΙ #contact).
   Ίδιο στυλ με το Hero hint, αλλά σταθερά bottom:2rem. Αρχικά αόρατο (opacity:0,
   pointer-events:none)· το app.js βάζει .is-visible 1.5s αφού γίνει active το section
   και το αφαιρεί μόλις ο χρήστης κυλήσει προς τα κάτω. Χωρίς JS/reduced-motion → display:none. */
.snap-hint{ display:none; }
.js .snap-hint{
  display:flex; position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
  z-index:3; flex-direction:column; align-items:center; gap:8px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
.js .snap-hint.is-visible{ opacity:1; }
/* ΑΛΛΑΓΗ — ο scroll indicator στο #work κάθεται πολύ χαμηλά & κόβεται· τον ανεβάζω ~50px (μόνο εδώ). */
#work .snap-hint{ bottom:calc(2rem + 50px); }
.snap-hint .arrow{ width:1px; height:26px; background:linear-gradient(var(--violet),transparent);
  animation:fall 1.8s ease-in-out infinite; }

/* (Οι κουκκίδες προόδου του snap αφαιρέθηκαν — δεν υπάρχουν πια στο HTML.) */

/* ── 7. ΕΝΟΤΗΤΕΣ ΠΕΡΙΕΧΟΜΕΝΟΥ ─────────────────────────────────────────── */
.doc{ position:relative; z-index:1; background:transparent; }   /* διάφανο → φαίνεται το global starfield */
/* (Το περιεχόμενο & το footer είναι ΠΑΝΤΑ ορατά — δεν υπάρχει πλέον φάση snap που τα έκρυβε.) */
.section{ position:relative; padding:var(--pad-y) var(--pad-x); overflow:hidden;
  scroll-margin-top:clamp(72px,9vh,96px); }   /* να μη μπαίνει ο τίτλος κάτω από τη μπάρα */
/* ΑΦΑΙΡΕΘΗΚΕ η διαχωριστική γραμμή ανάμεσα σε sections — τα sections είναι διάφανα,
   φαίνεται το ενιαίο global φόντο χωρίς άκρες. */

.section-head{ max-width:min(58rem,92vw); }
.display--l{  font-size:clamp(2.1rem,5.6vw,4.3rem); line-height:1.05; }
.display--xl{ font-size:clamp(2.3rem,6.2vw,4.6rem); line-height:1.04; }
.section-head .lead{ margin-top:clamp(16px,2.4vh,26px); }

/* 03 — Μέθοδος: πλέγμα 2×2 σε σχήμα «Γ».
   Πάνω-αριστερά το ΚΕΙΜΕΝΟ, πάνω-δεξιά Κάρτα 1, κάτω Κάρτες 2 & 3. */
.method-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,26px); align-items:stretch;
  position:relative; z-index:1; }   /* ΑΛΛΑΓΗ 3: πάνω από τα αστέρια του #method (z-index:0) */
.method-intro{ position:relative; align-self:start; padding:clamp(6px,1.4vw,18px) clamp(18px,2.4vw,40px) clamp(6px,1.4vw,18px) 0; }  /* align-self:start → eyebrow/τίτλος/υπότιτλος ανεβαίνουν στην κορυφή της σειράς (όχι κεντραρισμένα δίπλα στην κάρτα) */
/* ΑΛΛΑΓΗ 2 — το «Google» (serif italic) να μη χάνει τα descenders: λίγο μεγαλύτερο line-height
   + padding-bottom. Σε ηρεμία το app.js βάζει overflow:visible στο clip-reveal wrapper (onComplete). */
.method-intro .display{ line-height:1.14; padding-bottom:.15em; }
.method-intro .lead{ margin-top:clamp(14px,2vh,22px); }
/* Διακριτικό μωβ «blob» στο φόντο (όπως το reference) — με ελαφρύ parallax (JS). */
.method-glow{ position:absolute; z-index:-1; left:-8%; top:-14%; width:58%; aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle, rgba(123,92,255,.20), transparent 62%); filter:blur(8px); will-change:transform; }

.card{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(24px,3.4vh,46px); background:linear-gradient(158deg,#1b1136 0%,#130b24 100%);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,2.6vw,40px);
  min-height:clamp(230px,27vh,310px);
  transition:transform .4s var(--ease-soft), border-color .4s ease, box-shadow .4s ease; }
.card:hover{ transform:translateY(-6px); border-color:var(--violet);
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 42px rgba(123,92,255,.16); }
/* «Spotlight» που ακολουθεί τον κέρσορα (θέση από JS μέσω --mx/--my). */
.card::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(178,156,255,.16), transparent 60%);
  opacity:0; transition:opacity .35s ease; }
.card:hover::after{ opacity:1; }
.card-head, .card-foot{ position:relative; z-index:1; }
.card-title{ font-family:var(--font-body); font-weight:700; line-height:1.14; letter-spacing:-.02em;
  font-size:clamp(1.45rem,2.1vw,2rem); color:var(--ink); }
.card-tag{ display:inline-block; margin-top:1em; font-size:.7rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--violet); border:1px solid var(--line-strong);
  border-radius:var(--r-pill); padding:.45em .9em; }
.card-foot{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px,2.2vh,24px); }
.card-list{ list-style:none; display:flex; flex-direction:column; gap:.55em; }
.card-list li{ position:relative; padding-left:1.1em; font-size:.82rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); }
.card-list li::before{ content:""; position:absolute; left:0; top:.5em; width:6px; height:6px;
  background:var(--violet); border-radius:1px; }
.card-more{ position:relative; display:inline-flex; align-items:center; gap:.7em; text-decoration:none;
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.card-more .sq{ width:18px; height:18px; background:var(--violet); border-radius:3px;
  transition:transform .25s var(--ease-soft); }
/* «Δες περισσότερα»: υπογράμμιση που «γράφεται» στο hover. */
.card-more::after{ content:""; position:absolute; left:calc(18px + .7em); right:100%; bottom:-3px; height:1px;
  background:var(--violet); transition:right .35s var(--ease-soft); }
.card:hover .card-more::after{ right:0; }
.card:hover .card-more .sq{ transform:scale(1.18); }

/* ── ΤΟ ΠΡΟΒΛΗΜΑ — κινηματογραφική ενότητα (Three.js σφαίρα + 4 beats στο scroll) ── */
.section--problem{ position:relative; background:transparent; }   /* διάφανο → global starfield· η σφαίρα (Three.js) δεν αλλάζει */
/* Στατική εκδοχή (χωρίς JS / reduced-motion): η ενότητα ΜΕΓΑΛΩΝΕΙ με το περιεχόμενο και
   τα 4 beats στοιβάζονται κάθετα & διαβάζονται (ΧΩΡΙΣ overflow:hidden ώστε να μην κόβονται). */
.problem-sticky{ position:relative; min-height:100vh; }
.problem-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.problem-vignette{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 80% 80% at 50% 50%, transparent 30%, rgba(11,7,18,.5) 68%, rgba(11,7,18,.93) 100%); }
.problem-text{ position:relative; z-index:2; display:grid; place-items:center; gap:1.4em;
  padding:clamp(80px,12vh,140px) clamp(24px,5vw,64px); }

/* Τα 4 «beats» */
.problem-beat{ text-align:center; max-width:880px; will-change:transform,opacity; }
.problem-beat--big{ font-family:var(--font-body); font-weight:700; line-height:1.25;
  letter-spacing:-.01em; font-size:clamp(28px,4vw,52px); color:var(--ink); }
.problem-beat--small{ font-family:var(--font-body); font-weight:600; line-height:1.3;
  font-size:clamp(20px,2.4vw,32px); color:var(--muted); }
.problem-beat--final{ display:flex; flex-direction:column; align-items:center; gap:.08em; }
.final-pre{ font-family:var(--font-body); font-weight:600; color:var(--muted); font-size:clamp(20px,2.6vw,36px); }
.problem-aoratos{ font-family:var(--font-display); font-style:italic; font-weight:400; text-transform:uppercase;
  font-size:clamp(5rem,13vw,13rem); line-height:.95; letter-spacing:.01em; color:var(--ink); will-change:transform,opacity; }

/* Με ενεργό scroll-effect (.pst, το βάζει το JS): ψηλή ενότητα + sticky «καρφίτσωμα» +
   στοίβαγμα ΟΛΩΝ των beats στο ίδιο κέντρο (το ScrollTrigger κάνει τα cross-fades). */
.pst .section--problem{ height:500vh; }
.pst .problem-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
.pst .problem-text{ position:absolute; inset:0; gap:0; }
.pst .problem-text > *{ grid-area:1 / 1; align-self:center; }

/* Visually-hidden (μόνο για screen readers) */
.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; }

/* 05 — ΔΕΙΓΜΑ ΔΟΥΛΕΙΑΣ: showcase σελίδας (κείμενο + video) — ΑΛΛΑΓΗ 6.
   2 στήλες (50/50) σε desktop, stack σε mobile. Παλέτα μωβ/σκούρο. */
/* border-top αφαιρέθηκε — καθαρή μετάβαση από το #proof (χωρίς γραμμή ανάμεσα). */
.section--work{ position:relative; padding:var(--pad-y) var(--pad-x); overflow:hidden;
  scroll-margin-top:clamp(72px,9vh,96px); }
.work-inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px);
  align-items:center; max-width:min(82rem,94vw); margin:0 auto; }
.work-eyebrow{ display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin-bottom:clamp(16px,2.4vh,26px); }
.work-title{ font-family:var(--font-body); font-weight:700; line-height:1.12; letter-spacing:-.02em;
  font-size:clamp(1.8rem,3.6vw,3rem); color:var(--ink); }
.work-title em{ font-family:var(--font-display); font-style:italic; font-weight:400; color:var(--violet); }
.work-body{ margin-top:clamp(16px,2.4vh,26px); color:var(--muted); font-weight:300;
  font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.6; max-width:54ch; }
/* stats σε grid 2×2 */
.work-stats{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,22px);
  margin:clamp(24px,3.4vh,38px) 0; }
.work-stats li{ display:flex; flex-direction:column; font-size:.86rem; letter-spacing:.02em; color:var(--ink-dim); }
.work-stats strong{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,2.4vw,2rem);
  color:var(--violet); line-height:1.1; }
/* ΑΛΛΑΓΗ 1α — στήλη βίντεο + link σε στοίβα, κεντραρισμένα· το link κάτω από το βίντεο. */
.work-media{ display:flex; flex-direction:column; align-items:center; }
.work-link{ position:relative; display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
  font-weight:700; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  margin-top:24px; align-self:center; }   /* ~24px κενό από το βίντεο, κεντραρισμένο */
.work-link::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px;
  background:var(--violet); transition:right .35s var(--ease-soft); }
.work-link:hover::after{ right:0; }
/* video με border-radius + subtle border (overflow:hidden για να κόβονται οι γωνίες + να μη ξεχειλίζει το zoom) */
.work-video{ position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(178,156,255,.2); box-shadow:0 22px 54px rgba(0,0,0,.4); background:var(--bg-soft);
  width:112%; max-width:112%; transform-origin:center center; }   /* ΑΛΛΑΓΗ 1β — πλαίσιο ~12% φαρδύτερο· scroll-scale από το κέντρο */
.work-preview{ display:block; width:100%; height:auto; transform:scale(1.1); }   /* ΑΛΛΑΓΗ 1β — διακριτικό zoom */

/* 06 — Πριν/Μετά (πραγματικά νούμερα) */
.proof-grid{ margin-top:clamp(40px,6vh,72px); display:grid; gap:clamp(28px,5vw,64px);
  grid-template-columns:1.15fr .85fr; align-items:center; }
.big-stat{ display:flex; flex-wrap:wrap; align-items:baseline; gap:clamp(10px,1.6vw,20px); }
.big-from{ font-family:var(--font-display); font-size:clamp(1.6rem,3.4vw,2.6rem); color:var(--muted); }
.big-arrow{ font-size:clamp(1.8rem,3.6vw,2.8rem); color:var(--violet); transform:translateY(-.05em); }
.big-to{ font-family:var(--font-display); font-size:clamp(5rem,16vw,11rem); line-height:.82; color:var(--violet); }
.big-unit{ font-size:clamp(.95rem,1.4vw,1.15rem); color:var(--ink-dim); line-height:1.35; }
.big-unit small{ color:var(--muted); }
.stat-list{ list-style:none; display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,52px); margin:clamp(28px,4vh,44px) 0; }
.stat-list li{ display:flex; flex-direction:column; }
.stat-list strong{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.7rem,3.4vw,2.6rem); color:var(--ink); }
.stat-list span{ font-size:.84rem; letter-spacing:.04em; color:var(--muted); margin-top:.2em; }
.proof-note{ color:var(--muted); font-size:.95rem; max-width:42ch; }
.proof-note strong{ color:var(--ink); font-weight:600; }
/* ΑΛΛΑΓΗ 5β — πλαίσιο για το πραγματικό GBP screenshot (landscape 1906×1020·
   το πλαίσιο έχει ίδιο aspect, οπότε object-fit:contain δείχνει ΟΛΗ την εικόνα χωρίς crop). */
.proof-shot{ aspect-ratio:1906/1020; overflow:hidden;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-lg); }
.proof-shot img{ display:block; width:100%; height:100%; object-fit:contain; }
/* ΑΛΛΑΓΗ — αναδιάταξη #proof (χωρίς Chart.js): κεντραρισμένο eyebrow + τίτλος,
   grid 2 στηλών (αριστερά τα 4 νούμερα, δεξιά η πραγματική φωτό σε πλαίσιο-browser),
   λεζάντα κεντραρισμένη κάτω. */
/* το result section όλο σε ΜΙΑ οθόνη: κάθετα κεντραρισμένο· ίσα πλακίδια που γεμίζουν.
   (min-height:100vh = δάπεδο, ΟΧΙ ταβάνι — σε mobile μεγαλώνει, δεν κόβει.) */
.section--proof{ min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; padding:48px 28px; }
#proof .section-head{ width:100%; max-width:none; margin:0 auto; text-align:center; }
#proof .eyebrow{ justify-content:center; }                        /* eyebrow (inline-flex με tick) κεντραρισμένο */
/* ΜΙΑ οριζόντια γραμμή: nowrap + μέγεθος δεμένο στο πλάτος (4.2vw) ώστε να μικραίνει
   μόνο του και να μη σπάει. Το <br> αφαιρέθηκε από το HTML. */
#proof .display--l{ margin-inline:auto; font-size:clamp(1.6rem,4.2vw,2.9rem); white-space:nowrap; }

/* align-items:stretch → οι δύο στήλες ΙΔΙΟ ύψος· η φωτό (δεξιά) ορίζει το ύψος
   και η αριστερή στήλη «απλώνεται» να το γεμίσει. */
/* align-items:center → η φωτό ΔΕΝ τεντώνεται· το πλαίσιο παίρνει ακριβώς το ύψος της (χωρίς μαύρο κενό) */
.proof-layout{ display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:center;
  width:100%; max-width:min(1080px,94vw); margin:clamp(24px,4vh,40px) auto 0; }

/* ΑΡΙΣΤΕΡΑ — τα 4 νούμερα σε ΠΛΕΓΜΑ 2×2 με ΙΣΕΣ κυψέλες που γεμίζουν όλο το ύψος
   (flex:1 μέσα στο .result-left, rows 1fr 1fr → κάθε πλακάκι ίδιο μέγεθος). */
.proof-figures{ flex:1; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr;
  gap:16px; }
/* κάθε νούμερο = ίσο πλακίδιο (grid-auto-rows:1fr → ίδιο ύψος), αριστερά στοιχισμένο
   (ίδιο border/radius/background με το .proof-browser για συνοχή). */
.proof-fig{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:.3em; padding:24px 28px; min-height:0;
  border:1px solid #2a2140; border-radius:14px; background:#120c1f; }
.proof-fig-num{ font-family:var(--font-display); font-style:italic; font-weight:400; line-height:1;
  font-size:clamp(2.1rem,3.4vw,2.9rem); color:var(--ink); }
/* «83» — ο πρωταγωνιστής: συμπαγές φωτεινό μωβ με λάμψη (χωρίς gradient/clip) + ~15% μεγαλύτερο */
.proof-fig-num--hero{ color:#c4a5ff; text-shadow:0 0 28px rgba(168,85,247,.55);
  font-size:clamp(2.4rem,3.9vw,3.3rem); }

/* διακριτική ανάδειξη ΜΟΝΟ της κάρτας που περιέχει το «83» (χωρίς αλλαγή στη διάταξη) */
.proof-fig:has(.proof-fig-num--hero){ border-color:rgba(168,85,247,.45);
  box-shadow:0 0 40px rgba(168,85,247,.15);
  background:linear-gradient(180deg,#1a1030,#120c1f); }

/* Παλλόμενο glow ΜΟΝΟ στην κάρτα του 83 (το animation οδηγεί το box-shadow· border/background μένουν) */
.card-hero{
  position: relative;
  animation: heroGlow 3.5s ease-in-out infinite;
}
@keyframes heroGlow{
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(168,85,247,.35),
                0 0 24px rgba(168,85,247,.18);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(168,85,247,.55),
                0 0 46px rgba(168,85,247,.42);
  }
}
/* σεβασμός σε όσους δεν θέλουν κίνηση */
@media (prefers-reduced-motion: reduce){
  .card-hero{ animation: none; }
}
.proof-fig-label{ margin-top:0; font-family:var(--font-body); font-size:15px;
  letter-spacing:.02em; color:var(--muted); }

/* ΔΕΞΙΑ — πλαίσιο-browser γύρω από την πραγματική φωτό (GBP).
   Χωρίς height/min-height/stretch → το πλαίσιο παίρνει το φυσικό ύψος της εικόνας. */
.proof-browser{ border:1px solid #2a2140; border-radius:16px; overflow:hidden;
  background:#120c1f; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.proof-browser-bar{ display:flex; align-items:center; gap:8px;
  padding:12px 16px; border-bottom:1px solid #2a2140; }
.proof-dot{ width:10px; height:10px; border-radius:50%; background:#3a2f52; flex:none; }
.proof-browser-url{ margin-left:8px; font-size:12px; color:#9a8fb0; }
.proof-browser-img{ display:block; width:100%; height:auto; }

/* ΑΡΙΣΤΕΡΗ ΣΤΗΛΗ — γεμίζει όλο το ύψος (height:100% μέσα στο stretched grid cell)·
   το 2×2 (flex:1) απλώνεται, η λεζάντα-κάρτα κάθεται κάτω. gap:18px μεταξύ τους. */
.result-left{ display:flex; flex-direction:column; gap:18px; height:100%; }

/* λεζάντα = κάρτα πλήρους πλάτους κάτω από το 2×2 (ίδιο look με πλακίδια/φωτό) */
.proof-caption{ margin:0; max-width:none; text-align:left;
  padding:22px 28px; border:1px solid #2a2140; border-radius:14px; background:#120c1f;
  color:#c9bfe0; font-size:15px; line-height:1.7; }
.proof-caption b{ color:#f3eefa; font-weight:600; }
.proof-since{ display:inline-block; margin-top:.45em; font-size:13px; color:#9a8fb0; opacity:1; }

/* reduced-motion: όλα ορατά, χωρίς transform (το GSAP δεν τρέχει· επιπλέον ασφάλεια) */
@media (prefers-reduced-motion:reduce){
  #proof .display--l, #proof .proof-fig, #proof .proof-browser{ opacity:1 !important; transform:none !important; }
}

/* 07 — Κλείσιμο: δυνατό μήνυμα (GFS Didot italic, split χρώμα) + Neural Noise WebGL bg — ΑΛΛΑΓΗ 7 */
.section--closing{ position:relative; min-height:100vh; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:clamp(80px,12vh,140px) var(--pad-x); overflow:hidden; }
/* Το WebGL noise canvas γεμίζει το section, πίσω από το κείμενο. opacity:0.85 (per spec). */
.closing-noise{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.85; display:block; }
.closing-inner{ position:relative; z-index:1; max-width:min(60rem,92vw); }
.closing-title{ font-family:var(--font-body); font-style:normal; font-weight:800;
  letter-spacing:-.02em; font-size:clamp(2.3rem,6.2vw,5.3rem); line-height:1.5; }   /* ΑΛΛΑΓΗ 4: Manrope βαρύ· ~12% μικρότερο + line-height 1.5 → καθαρό κενό ανάμεσα στα highlight κουτιά */
.closing-title .cl-1{ display:block; color:var(--ink); }      /* 1η γραμμή — λευκή (ink) */
.closing-title .cl-2{ display:block; }                        /* 2η γραμμή — το χρώμα το δίνει το .hl (λευκό κείμενο + μωβ highlight) */
/* ΑΛΛΑΓΗ 2β — «μαρκαδόρος» highlight (Aceternity-style, vanilla): λευκό κείμενο + μωβ gradient
   που σχεδιάζεται αριστερά→δεξιά (background-size 0%→100% με GSAP στο enter). */
.hl{ background-image:linear-gradient(120deg, #8b5cf6 0%, #a855f7 100%); background-repeat:no-repeat;
  background-size:0% 100%; background-position:left center; padding:.05em .25em; border-radius:8px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; color:#fff; }   /* ΑΛΛΑΓΗ 2: .05em πάνω/κάτω, .25em αρ./δεξ. → κάθε κουτί με ορατό κενό, δεν ακουμπάει το από πάνω */
/* reduced-motion: το highlight φαίνεται ΟΛΟΚΛΗΡΩΜΕΝΟ, χωρίς animation. */
@media (prefers-reduced-motion:reduce){ .hl{ background-size:100% 100%; } }
.closing-sub{ margin:clamp(24px,4vh,40px) auto 0; max-width:52ch; color:var(--muted);
  font-weight:300; font-size:clamp(1.05rem,1.7vw,1.4rem); line-height:1.55; }

/* 08 — Επικοινωνία: animated 3D closing (Three.js «blob») + μήνυμα + τηλέφωνο — ΑΛΛΑΓΗ */
.section--contact{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:transparent; padding:clamp(80px,12vh,140px) var(--pad-x);
  scroll-margin-top:clamp(72px,9vh,96px); }   /* διάφανο → φαίνεται το global starfield (το Lightning canvas αφαιρέθηκε) */
.contact-content{ position:relative; z-index:1; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:clamp(16px,2.5vh,28px); max-width:min(54rem,92vw); }
.contact-eyebrow{ font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
/* ΑΛΛΑΓΗ 3α — Manrope bold (ίδιο ύφος με το closing), όχι serif italic. */
.contact-title{ font-family:var(--font-body); font-weight:800; font-style:normal;
  letter-spacing:-.02em; font-size:clamp(3.5rem,8vw,7rem); line-height:1; color:var(--ink); }
.contact-title em{ font-style:normal;
  background-image:linear-gradient(120deg, #7c3aed 0%, #9b6cff 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; }   /* «πούμε» με μωβ gradient ως χρώμα κειμένου */
.contact-sub{ color:var(--muted); font-size:clamp(1rem,1.8vw,1.3rem); max-width:44ch; line-height:1.6; }
/* ── Call box «liquid glass» ── γυάλινο κουμπί κλήσης με blur, εσωτερικά highlights και shine */
.contact-phone{ display:flex; flex-direction:column; align-items:center; text-decoration:none;
  position:relative; border-radius:28px; padding:36px 44px; overflow:hidden;
  background:linear-gradient(160deg, rgba(178,156,255,.14), rgba(139,92,246,.05) 45%, rgba(10,7,18,.15));
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(178,156,255,.22);
  box-shadow:
    0 24px 70px rgba(0,0,0,.5),
    0 0 50px rgba(139,92,246,.18),
    inset 0 2px 1px rgba(255,255,255,.28),
    inset 0 -2px 2px rgba(139,92,246,.25),
    inset 0 0 40px rgba(178,156,255,.06);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  text-align:center; }
.contact-phone::before{ /* διαγώνιο «shine» */
  content:""; position:absolute; top:0; left:-30%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  transform:skewX(-18deg); pointer-events:none; }
.contact-phone::after{ /* απαλό φως από πάνω */
  content:""; position:absolute; inset:0; border-radius:28px; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.10), transparent 60%); }
.contact-phone:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 70px rgba(139,92,246,.4),
    inset 0 2px 1px rgba(255,255,255,.35), inset 0 -2px 2px rgba(139,92,246,.35); }
.contact-phone-label{ position:relative; z-index:2;
  font-size:.75rem; font-weight:700; letter-spacing:.15em; color:#9a8fb0; }
.contact-phone-number{ position:relative; z-index:2;
  font-family:var(--font-body); font-size:clamp(2.3rem,4.6vw,3.6rem); font-weight:800; letter-spacing:.05em;
  background:linear-gradient(120deg,#c4b5fd,#f5d0fe);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; }   /* λαμπερό gradient ως χρώμα κειμένου */
.contact-links{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.contact-btn{ border:1px solid rgba(178,156,255,.35); border-radius:999px; padding:10px 24px; color:var(--muted);
  font-size:.9rem; text-decoration:none; transition:all .2s; }
.contact-btn:hover{ border-color:var(--violet); color:var(--ink); }
.contact-note{ color:var(--muted); font-size:.85rem; opacity:.7; }


/* ── 8. FOOTER + STICKY ΚΛΗΣΗ ────────────────────────────────────────── */
.foot{ position:relative; z-index:1; background:transparent;   /* χωρίς border-top — καμία γραμμή */
  padding:clamp(40px,7vh,72px) var(--pad-x) clamp(80px,9vh,90px);
  display:flex; flex-direction:column; gap:.5em; text-align:center; align-items:center; }
.foot-mark{ font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:.04em; }
.foot-sub{ font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.foot-small{ font-size:.8rem; color:var(--muted); opacity:.8; margin-top:.6em; }

/* Sticky κουμπί κλήσης — μόνο σε κινητό */
.call-fab{ display:none; }
.call-fab{
  position:fixed; z-index:70; right:16px; bottom:16px;
  align-items:center; gap:.5em; text-decoration:none;
  background:var(--violet); color:#190a2e; font-weight:700; font-size:.95rem;
  padding:.85em 1.25em; border-radius:var(--r-pill);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.call-fab svg{ width:1.15em; height:1.15em; }
@media (max-width:760px){ .call-fab{ display:inline-flex; } }


/* ── 9. REVEAL-ON-SCROLL ─────────────────────────────────────────────── */
/* Κρύβουμε αρχικά ΜΟΝΟ όταν υπάρχει JS & ο χρήστης δεν ζητά «λιγότερη κίνηση». */
@media (prefers-reduced-motion:no-preference){
  .js [data-layer]{ opacity:0; }                       /* τα κινεί το GSAP στο intro */
  /* Πιο «ζωντανό» reveal: fade + 24px πάνω + ελάχιστο scale. */
  .js [data-reveal]{ opacity:0; transform:translateY(24px) scale(.985);
    transition:opacity var(--dur-reveal) var(--ease-soft), transform var(--dur-reveal) var(--ease-soft); }
  .js [data-reveal].in{ opacity:1; transform:none; }

  /* (Το #why αφαιρέθηκε — το line-reveal CSS του δεν χρειάζεται πια.) */

  /* (Το «breathe» του παλιού κουμπιού κλήσης αφαιρέθηκε — νέο 3D #contact closing.) */
}


/* ── 10. RESPONSIVE + ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ ─────────────────────────────────── */

/* ΑΛΛΑΓΗ 5 — σε laptop/desktop ΟΛΗ η «Μέθοδος» (τίτλος + 3 κάρτες) χωράει σε ~100vh:
   κεντράρισμα κάθετα, μικρότερα paddings/gaps, λίγο μικρότερος τίτλος & κάρτες. */
@media (min-width:901px){
  .section--method{ min-height:100vh; display:flex; flex-direction:column; justify-content:center;
    padding-top:clamp(48px,6vh,72px); padding-bottom:clamp(28px,4vh,48px); }   /* ΑΛΛΑΓΗ 2: σφιχτότερα paddings → τίτλος + 3 cards σε ~100vh */
  .section--method .display--l{ font-size:clamp(2rem,4.5vw,3.8rem); }   /* ΑΛΛΑΓΗ 2: μικρότερος τίτλος ώστε να μην κόβεται το «Google» */
  .method-grid{ gap:clamp(10px,1.2vw,16px); }   /* ΑΛΛΑΓΗ 2: σφιχτότερο gap */
  .method-intro{ padding:clamp(4px,1vw,12px) clamp(16px,2.2vw,34px) clamp(4px,1vw,12px) 0; }
  .card{ min-height:0; padding:clamp(20px,1.9vw,30px); gap:clamp(14px,1.8vh,22px); }
  .card-title{ font-size:clamp(1.3rem,1.8vw,1.7rem); }
  .card-list{ gap:.4em; }
}

/* το #proof είναι πλέον min-height:100vh flex-centered (βλ. κανόνα .section--proof πιο πάνω) —
   ίσα πλακίδια που γεμίζουν, όλο σε μία οθόνη. */

/* Το snap γίνεται με wheel hijack + lenis.scrollTo μέσα στο app.js (ΟΧΙ CSS scroll-snap — που
   συγκρουόταν με το Lenis). Εδώ μένει μόνο το ότι το #work χωράει σε ~100vh, ώστε κάθε snap
   section να είναι ακριβώς μία οθόνη. */
@media (min-width:901px){
  .section--work{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
}

/* Tablet */
@media (max-width:900px){
  .method-grid{ grid-template-columns:1fr; }   /* κείμενο, μετά οι 3 κάρτες */
  .method-intro{ padding-right:0; }
  .work-inner{ grid-template-columns:1fr; }   /* ΑΛΛΑΓΗ 6: stack — κείμενο πάνω, video κάτω */
  .work-video{ width:100%; max-width:100%; }  /* ΑΛΛΑΓΗ 1β: σε στοίβα, full-width χωρίς overflow */
  /* «Κύλησε» (snap-hint στα #work/#closing): το snap είναι OFF ≤900px, οπότε ο δείκτης είναι
     άχρηστος — και επειδή τα sections κοντύναν στο mobile, έπεφτε ΠΑΝΩ στο περιεχόμενο. Τον κρύβουμε.
     (Specificity ίδια με το base `.js .snap-hint` ώστε να το νικά μέσω σειράς.) */
  .js .snap-hint{ display:none; }
}

/* ΑΛΛΑΓΗ — #proof responsive: <820px μονή στήλη· το τετράγωνο 2×2 μένει 2×2,
   το screenshot πέφτει από κάτω. */
@media (max-width:820px){
  .proof-layout{ grid-template-columns:1fr; gap:clamp(20px,4vw,28px); }
  /* παραμένει 2×2· τα πλακάκια παίρνουν ύψος περιεχομένου (χωρίς forced fill) */
  .proof-figures{ grid-auto-rows:auto; gap:14px; }
}

/* ── ΤΥΠΟΓΡΑΦΙΑ MOBILE (≤768px): σαφώς μεγαλύτερα, άνετα γράμματα — «σαν έντυπη αναφορά», χωρίς zoom.
   Μεγαλώνουμε body/παραγράφους & μικρές λεζάντες, και ανεβάζουμε την αντίθεση στις muted παραγράφους.
   ΔΕΝ πειράζουμε H1/H2 ούτε τα μεγάλα νούμερα (8+, 50+, 83) — είναι ήδη καλά. */
@media (max-width:768px){
  /* Body / κύριες παράγραφοι → 19–20px, άνετο line-height, καθαρότερη αντίθεση από το σκούρο φόντο.
     (--muted #a99fc0 → #cbc1e6: ένα σκαλί πιο φωτεινό, ξεχωρίζει καθαρά.) */
  .lead,
  .work-body{ font-size:clamp(19px,5vw,20px); line-height:1.6; color:#cbc1e6; }
  .closing-sub,
  .contact-sub{ font-size:clamp(18px,4.8vw,20px); line-height:1.6; color:#cbc1e6; }
  .proof-note{ font-size:16.5px; line-height:1.6; color:#cbc1e6; }

  /* Μικρές λεζάντες/captions/labels → ελάχιστο 16px (ήταν 12–14px = δυσανάγνωστα).
     π.χ. «σελίδες υπηρεσιών», «σε κάθε σελίδα», «φόρτωση σε κινητό», τα labels των proof-figures. */
  .work-stats li{ font-size:16px; }
  .proof-fig-label{ font-size:16px; }
  .stat-list span{ font-size:16px; }
  .card-list li{ font-size:16px; line-height:1.5; }
  /* Πολύ δευτερεύοντα (URL/ημερομηνία μέσα στο mockup): μικρή μόνο αύξηση, να μη σπάσει το πλακάκι. */
  .proof-since{ font-size:13.5px; }
  .proof-browser-url{ font-size:12.5px; }

  /* Uppercase eyebrows: αισθητή αύξηση για ευανάγνωστο, με λίγο μικρότερο tracking ώστε να ΜΗ σπάνε άσχημα. */
  .eyebrow,
  .work-eyebrow,
  .contact-eyebrow,
  .foot-sub{ font-size:14px; letter-spacing:.16em; }

  .contact-note{ font-size:15px; opacity:.85; }
}

/* ── SPACING MOBILE (≤768px): μαζεύουμε τα υπερβολικά κενά ανάμεσα στα sections.
   Πολλά sections είναι min-height:100vh (φτιαγμένα για τα DESKTOP snap panels). Στο mobile το snap είναι
   OFF, οπότε αυτό αφήνει έναν ολόκληρο άδειο «όροφο» — ειδικά ανάμεσα σε #closing και #contact (και τα δύο
   flex-centered 100vh → νεκρός χώρος κάτω από το ένα + πάνω από το άλλο). Τα μηδενίζουμε ώστε να παίρνουν
   το φυσικό τους ύψος + λογικό padding. ΔΕΝ αγγίζουμε το #problem / .problem-sticky (pinned ScrollTrigger). */
@media (max-width:768px){
  :root{ --pad-y:clamp(60px,8vh,88px); }   /* πιο σφιχτός κάθετος αέρας για ΟΛΑ τα (μη-pinned) sections */
  .section--proof,
  .section--closing,
  .section--contact,
  .section--method,
  .section--work{ min-height:0; }
  /* #closing/#contact ήταν 100vh flex-centered → συμμετρικό, μετρημένο padding αντί για νεκρό «όροφο». */
  .section--closing{ padding-top:clamp(52px,8vh,84px); padding-bottom:clamp(52px,8vh,84px); }
  .section--contact{ padding-top:clamp(44px,6vh,68px); }
}

/* ── #proof κάρτες (mobile ≤768px): ΚΛΕΙΔΩΜΑ ΔΙΑΣΤΑΣΕΩΝ κατά το count-up ──
   Κατά το «μέτρημα» (π.χ. 9→214) ο αριθμός άλλαζε ΠΛΑΤΟΣ ανά βήμα (αναλογικά ψηφία), οπότε το κουτί
   «τρεμόπαιζε/αναπηδούσε». Κλειδώνουμε:
   1) Σταθερό ύψος κουτιού (min-height) → οι διαστάσεις δεν αλλάζουν καθ' όλη τη διάρκεια.
   2) Σταθερό font-size (2.1rem/2.4rem — ΟΧΙ clamp/vw) + tabular-nums (ισοπλατή ψηφία) + nowrap
      ώστε κάθε ψηφίο να πιάνει ίδιο πλάτος και ο αριθμός να μη «χοροπηδάει»/τυλίγεται.
   ΚΑΝΕΝΑ transform:scale. Οι τιμές του count-up ΔΕΝ αλλάζουν· το 2×2 grid μένει ίδιο.
   (Desktop >768px: τίποτα από αυτά ΔΕΝ ισχύει — μένει ως έχει.) */
@media (max-width:768px){
  .proof-fig{ min-height:144px; }                                    /* σταθερό ύψος → μηδέν reflow/resize */
  .proof-fig-num{ font-size:2.1rem; line-height:1;
    font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;   /* ισοπλατή ψηφία */
    white-space:nowrap; }                                            /* ποτέ δεν τυλίγεται/αλλάζει ύψος */
  .proof-fig-num--hero{ font-size:2.4rem; }                          /* ο «83» λίγο μεγαλύτερος, επίσης σταθερός */
}

/* Κινητό */
@media (max-width:600px){
  :root{ --pad-y:clamp(48px,7vh,72px); }   /* ΔΟΥΛΕΙΑ 3: ακόμη πιο σφιχτός κάθετος αέρας στα τηλέφωνα */
  /* Σε στενές οθόνες αφήνουμε το κείμενο να «σπάει» μόνο του (χωρίς χειροκίνητα <br>). */
  .display br{ display:none; }
  /* Το «ΚΥΛΗΣΕ» hint του hero σε touch/στενή οθόνη πέφτει πάνω στα CTA κουμπιά
     (τα κουμπιά «τυλίγονται» σε σειρά και γεμίζουν τον χώρο). Είναι ούτως ή άλλως
     περιττό σε κινητό, οπότε το κρύβουμε. */
  .js .hint{ display:none; }
  /* <600px: επίτρεψε ξανά σπάσιμο στον τίτλο του #proof ώστε να μη βγαίνει έξω από την οθόνη. */
  #proof .display--l{ white-space:normal; }
  /* Εξασφαλίζουμε ότι το sticky κουμπί δεν κρύβει την επικοινωνία */
  .section--contact{ padding-bottom:clamp(110px,16vh,140px); }

  /* ── SPHERE section (#problem) σε mobile ──
     ΠΡΟΒΛΗΜΑ: τα beats («Ανοίγει το Google…», «Εσύ είσαι / ΑΟΡΑΤΟΣ») έβγαιναν εκτός
     οθόνης δεξιά. Αιτία: το grid item έπαιρνε πλάτος μεγαλύτερο από το viewport
     (max-width:880px) κι έτσι «κολλούσε» αριστερά και κοβόταν δεξιά — δεν κεντραριζόταν.
     ΛΥΣΗ: κλείδωμα πλάτους στο viewport (max-width:100%), πραγματικό οριζόντιο κεντράρισμα,
     μικρό side padding ώστε να μην ακουμπάει στις άκρες, μηδενισμός τυχόν offset,
     και ελαφρώς μεγαλύτερα γράμματα για ανάγνωση. Το «ΑΟΡΑΤΟΣ» μικραίνει ώστε να χωράει ΟΛΟ. */
  .problem-text{ padding-left:16px; padding-right:16px; }
  .problem-beat, .problem-aoratos{
    max-width:100%;          /* να μη ξεπερνά ποτέ το πλάτος της οθόνης */
    margin-inline:auto;      /* οριζόντιο κεντράρισμα */
    transform:none;          /* μηδενισμός τυχόν translateX που κληρονομείται από desktop */
  }
  .problem-beat--big{ font-size:clamp(30px,7.2vw,40px); }   /* λίγο μεγαλύτερο από πριν (ήταν 28px) */
  .problem-beat--small{ font-size:clamp(22px,6vw,30px); }
  .final-pre{ font-size:clamp(22px,6.4vw,32px); }
  /* «ΑΟΡΑΤΟΣ»: μικρότερο από το desktop clamp ώστε να χωράει ΟΛΟΚΛΗΡΟ σε μία γραμμή. */
  .problem-aoratos{ font-size:clamp(3.2rem,17vw,5rem); line-height:1; }

  /* ── CONTACT: τηλέφωνο σε ΜΙΑ γραμμή ──
     Στο mobile το «698 662 7677» έσπαγε σε 2 σειρές. Μειώνουμε το (μεγάλο) οριζόντιο
     padding της glass κάρτας για περισσότερο χώρο, κλειδώνουμε nowrap και μικραίνουμε
     το font με clamp ώστε ολόκληρο το τηλέφωνο να χωράει σε μία γραμμή χωρίς να ξεχειλίζει. */
  .contact-phone{ padding-left:26px; padding-right:26px; }
  .contact-phone-number{ white-space:nowrap; font-size:clamp(1.7rem,7.8vw,2.5rem); letter-spacing:.03em; }
}

/* Πολύ μικρές οθόνες (360) — Hero αριστερά */
@media (max-width:380px){
  .js .panel--hero{ place-items:center start; text-align:left; }
}

/* Σεβασμός «λιγότερη κίνηση»: σταματάμε διακριτικές κινήσεις. */
@media (prefers-reduced-motion:reduce){
  .arrow{ animation:none; }
  .loader-logo,.loader{ animation:none; }
  *{ scroll-behavior:auto !important; }
}