/* ============================================================
   OneStreaming 2026 — base.css
   Layout & components. Διαβάζει tokens.css.
   Κάθε component χρησιμοποιεί τις μεταβλητές της ζώνης του
   (--bg, --fg-1/2/3, --line, --cta-bg) και άρα γράφεται μία φορά.
   ============================================================ */

/* --- Core Web Vitals: εφεδρικές γραμματοσειρές με ταιριασμένες μετρικές.
   Όταν φορτώσει η Inter, το κείμενο δεν αναπηδά — CLS ≈ 0. --- */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica Neue");
  size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Mono Fallback";src:local("Consolas"),local("Menlo"),local("Courier New");
  size-adjust:104%;ascent-override:88%;descent-override:22%;line-gap-override:0%}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  background:var(--ink-900);
  color:var(--on-ink-1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ ---------- */
:focus-visible{outline:2px solid var(--brand-400);outline-offset:3px;border-radius:4px}
.surface-paper :focus-visible{outline-color:var(--brand-600)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--brand-600);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-md) 0;font-weight:600;
}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- ΔΟΜΗ ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.zone{padding-block:var(--s-9)}
.zone--tight{padding-block:var(--s-8)}
.zone--aurora{background-image:var(--aurora-wash);background-repeat:no-repeat}
.measure{max-width:var(--measure)}

/* ---------- ΤΥΠΟΓΡΑΦΙΑ ---------- */
.eyebrow{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal);margin-bottom:var(--s-4);
}
.label{
  font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  font-weight:var(--w-bold);color:var(--fg-3);
}
.h1{font-size:clamp(32px,5.2vw,var(--t-h1));line-height:var(--lh-h1);letter-spacing:var(--ls-h1);font-weight:var(--w-bold)}
.h2{font-size:clamp(26px,4vw,var(--t-h2));line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:var(--w-bold)}
.h3{font-size:clamp(20px,3vw,var(--t-h3));line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:700}
.h4{font-size:var(--t-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);font-weight:700}
.lead{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--fg-2)}
.body-2{color:var(--fg-2)}
.micro{font-size:var(--t-micro);color:var(--fg-3)}
.num{font-family:var(--font-mono);font-weight:var(--w-medium);font-feature-settings:"tnum" 1}

/* ---------- ΚΟΥΜΠΙΑ ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-size:var(--t-small);font-weight:var(--w-semi);
  padding:13px 22px;border-radius:var(--r-md);
  background:var(--cta-bg);color:var(--cta-fg);
  border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn:active{transform:translateY(0);filter:brightness(.94)}
.btn--ghost{background:transparent;color:var(--fg-1);border-color:var(--line-strong)}
.btn--ghost:hover{filter:none;border-color:var(--fg-3)}
.btn--link{background:transparent;color:var(--accent);padding-inline:0;border:0}
.btn--link:hover{transform:none;filter:none;text-decoration:underline;text-underline-offset:4px}
.btn--lg{font-size:15px;padding:15px 26px}
.btn--sm{font-size:13px;padding:9px 16px}
.actions{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}

/* ---------- ΖΩΝΤΑΝΗ ΕΝΔΕΙΞΗ ---------- */
.live{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.06em;
  color:var(--signal);border:1px solid var(--line-strong);border-radius:var(--r-full);padding:5px 12px;
}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- HEADER ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(8,11,18,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--ink-line)}
.site-header .container{display:flex;align-items:center;gap:var(--s-5);min-height:68px}
.brand{display:flex;align-items:center;flex:none}
.brand svg{height:26px;width:auto}
.nav{display:flex;align-items:center;gap:var(--s-5);margin-inline-start:var(--s-4)}
.nav a{font-size:14px;color:var(--on-ink-2);padding-block:6px;transition:color var(--dur-fast) var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--on-ink-1)}
.header-end{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s-4)}
.langswitch{font-size:13px;color:var(--on-ink-3);font-family:var(--font-mono)}
.langswitch b{color:var(--on-ink-1);font-weight:500}
.nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--ink-line);border-radius:var(--r-md)}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:17px;height:1.5px;background:var(--on-ink-1);border-radius:2px;transition:.2s var(--ease)}
.nav-toggle span::before{transform:translateY(-5px)}
.nav-toggle span::after{transform:translateY(3.5px)}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-1.5px) rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav{
    position:absolute;inset-inline:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--ink-800);border-bottom:1px solid var(--ink-line);padding:var(--s-3) var(--gutter) var(--s-5);
    display:none;
  }
  .nav[data-open="true"]{display:flex}
  .nav a{padding-block:14px;border-bottom:1px solid var(--ink-line);font-size:15px}
  .header-end .btn{display:none}
}

/* ---------- HERO ---------- */
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-8);align-items:center}
.hero__title em{font-style:normal;color:var(--brand-400)}
.hero__sub{margin-top:var(--s-4);max-width:46ch}
.hero__actions{margin-top:var(--s-6)}
.hero__phone{font-family:var(--font-mono);font-size:13px;color:var(--fg-3);margin-inline-start:var(--s-2)}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:var(--s-6)}
}

.livepanel{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5)}
.livepanel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.eq{display:flex;align-items:flex-end;gap:4px;height:104px;margin-block:var(--s-4)}
.eq i{flex:1;height:100%;border-radius:2px;transform-origin:bottom;transform:scaleY(.16);
  background:linear-gradient(180deg,var(--signal-400),var(--brand-500));
  animation:bob 1.4s ease-in-out infinite;will-change:transform}
/* scaleY αντί για height: τρέχει στον compositor, δεν προκαλεί reflow σε κάθε καρέ. */
@keyframes bob{0%,100%{transform:scaleY(.16)}50%{transform:scaleY(.88)}}
.statrow{display:flex;justify-content:space-between;gap:var(--s-3);border-top:1px solid var(--line);padding-top:var(--s-4)}
.stat__label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.stat__value{font-family:var(--font-mono);font-size:19px;color:var(--fg-1);margin-top:3px;letter-spacing:-.02em}
.stat__value--live{color:var(--signal)}

/* ---------- ΤΟΙΧΟΣ ΛΟΓΟΤΥΠΩΝ ---------- */
.logowall{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-3);margin-top:var(--s-6)}
.logowall li{
  display:flex;align-items:center;justify-content:center;min-height:72px;padding:var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-card);
  font-size:12px;color:var(--fg-3);text-align:center;line-height:1.35;
}
@media (max-width:900px){.logowall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.logowall{grid-template-columns:repeat(2,1fr)}}

/* ---------- ΚΑΡΤΕΣ ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}}

.card{
  border:1px solid var(--line);background:var(--bg-card);border-radius:var(--r-lg);
  padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.card__tag{align-self:flex-start;font-size:10.5px;font-weight:var(--w-bold);letter-spacing:.1em;text-transform:uppercase;
  color:var(--signal);border:1px solid currentColor;border-radius:var(--r-full);padding:3px 9px}
.card p{color:var(--fg-2);font-size:15px}
.card .btn--link{margin-top:auto;align-self:flex-start}

/* ---------- ΛΟΓΟΙ ---------- */
.reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6) var(--s-7);margin-top:var(--s-6)}
@media (max-width:760px){.reasons{grid-template-columns:1fr}}
.reason__n{font-family:var(--font-mono);font-size:13px;color:var(--accent)}
.reason h3{margin-block:6px 8px}
.reason p{color:var(--fg-2);font-size:15px}

/* ---------- ΤΙΜΕΣ ---------- */
.pricing__band{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-raised);
  padding:var(--s-4) var(--s-5);display:flex;align-items:center;gap:10px 26px;flex-wrap:wrap;margin-block:var(--s-5) var(--s-4);
}
.pricing__band b{font-size:15px}
.pricing__band li{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--fg-2)}
.pricing__band li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--signal);flex:none}
.pricing__band ul{display:flex;gap:10px 26px;flex-wrap:wrap}

.pcard{border:1px solid var(--line);background:var(--bg-card);border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden}
.pcard--featured{border-color:var(--cta-bg);box-shadow:inset 0 0 0 1px var(--cta-bg)}
.pcard__top{padding:var(--s-5) var(--s-5) var(--s-4)}
.pcard__size{font-family:var(--font-mono);font-size:clamp(38px,5vw,50px);line-height:1;letter-spacing:-.045em;
  color:var(--fg-1);margin-top:10px;display:flex;align-items:baseline;gap:8px;font-weight:var(--w-medium)}
.pcard__size small{font-family:var(--font-ui);font-size:15px;font-weight:var(--w-medium);color:var(--fg-3);letter-spacing:0}
.pcard__translate{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px dashed var(--line-strong);font-size:14px;color:var(--fg-2)}
.pcard__translate b{font-family:var(--font-mono);font-weight:var(--w-medium);color:var(--fg-1)}
.pcard__translate span{display:block;color:var(--fg-3);font-size:12.5px;margin-top:4px}
.pcard__feats{padding-inline:var(--s-5);font-size:14px;color:var(--fg-2);line-height:2.1}
.pcard__feats li::before{content:"✓";color:var(--signal);font-weight:700;margin-inline-end:9px;font-size:12px}
.pcard__foot{margin-top:auto;padding:var(--s-4) var(--s-5) var(--s-5);border-top:1px solid var(--line);background:var(--bg-raised);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.pcard__price b{font-family:var(--font-mono);font-size:18px;color:var(--fg-1);font-weight:var(--w-medium)}
.pcard__price{font-size:13.5px;color:var(--fg-2)}
.pcard__price span{display:block;font-size:12px;color:var(--fg-3);margin-top:2px}

/* ---------- ΤΕΛΙΚΟ CTA ---------- */
.cta-final{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s-4)}
.cta-final .actions{justify-content:center}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--ink-900);border-top:1px solid var(--ink-line);padding-block:var(--s-8) var(--s-6);color:var(--on-ink-2)}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--s-6) var(--s-5)}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}
.footer__col h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-3);font-weight:var(--w-bold);margin-bottom:var(--s-3)}
.footer__col li{margin-bottom:10px}
.footer__col a{font-size:14px;color:var(--on-ink-2)}
.footer__col a:hover{color:var(--on-ink-1)}
.footer__brand svg{height:24px;width:auto;margin-bottom:var(--s-4)}
.footer__brand p{font-size:14px;color:var(--on-ink-3);max-width:34ch;line-height:1.6}
.footer__bottom{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--ink-line);
  display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:13px;color:var(--on-ink-3)}
.footer__legal{display:flex;gap:var(--s-4);flex-wrap:wrap}


/* ---------- CORE WEB VITALS ----------
   Οι ζώνες μετά την τρίτη δεν αποδίδονται μέχρι να πλησιάσουν στην οθόνη.
   Το contain-intrinsic-size κρατά δεσμευμένο ύψος ώστε να μην πηδάει η μπάρα κύλισης. */
main > section:nth-of-type(n+3){content-visibility:auto;contain-intrinsic-size:auto 720px}
.site-footer{content-visibility:auto;contain-intrinsic-size:auto 460px}

/* Το sticky header είναι δικό του επίπεδο — η θόλωση δεν ξαναζωγραφίζει τη σελίδα. */
.site-header{will-change:transform;transform:translateZ(0)}

/* Δεσμευμένος χώρος για το λογότυπο, ώστε να μη μετακινείται το header στο πρώτο βάψιμο. */
.brand svg{height:26px;width:148px}
.footer__brand svg{height:24px;width:135px}