/* ============================================================
   OfficeFleet — v3 direction sample
   Reference DNA: Stratex + Archio (Framer).
   Borrowed: warm neutral ground, deep full-bleed brand panel,
   big radii, soft depth, pill CTAs with arrow badge, numbered
   cards, comparison block.
   NOT borrowed: their serif typography. Fonts stay locked to
   Commissioner + Manrope per CONTEXT.md.
   Translated: their forest green -> OfficeFleet's Deep Navy,
   so the page stays on the logo's blue.
   ============================================================ */

:root{
  /* OfficeFleet palette, unchanged */
  --ink:#101426;
  --navy:#252f69;
  --blue:#4656a6;
  --indigo:#6879f4;
  --success:#168563;

  /* the one addition: a warm neutral ground instead of cool Ice.
     This is what makes the references feel premium, not clinical. */
  --paper:#f5f4f0;
  --paper-2:#eceae3;
  --card:#fff;
  --tint:#edf0fb;
  --line:#e4e1d9;
  --line-soft:#eeece6;
  --muted:#5c6274;
  --flag:#f2a900;

  /* locked pairing — Commissioner for display, Manrope for body */
  --display:"Commissioner",system-ui,sans-serif;
  --body:"Manrope",system-ui,sans-serif;

  --shell:min(1200px,calc(100% - 48px));
  --r-xl:34px;
  --r-lg:26px;
  --r-md:18px;
  --ease:cubic-bezier(.22,.72,.25,1);
  --lift:0 1px 2px rgba(16,20,38,.04),0 14px 34px rgba(16,20,38,.07);
  --lift-2:0 2px 4px rgba(16,20,38,.05),0 26px 60px rgba(16,20,38,.11);
}

*{box-sizing:border-box}
[hidden]{display:none!important}

html{scroll-behavior:smooth;scroll-padding-top:100px}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}

.shell{width:var(--shell);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
.skip-link{position:fixed;top:8px;left:8px;z-index:999;padding:10px 14px;background:var(--ink);color:#fff;border-radius:8px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
:where(a,button):focus-visible{outline:2px solid var(--indigo);outline-offset:3px}

/* ---- type -------------------------------------------------- */

h1,h2,h3,.numeral,.price b,.account-head strong{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.028em;
  text-wrap:balance;
}

h1{
  margin:0;
  font-size:clamp(38px,4.9vw,68px);
  line-height:1.08;
}
h1 em{font-style:normal;color:#aab6ff}

h2{
  margin:0;
  font-size:clamp(29px,3.5vw,48px);
  line-height:1.12;
}

h3{margin:0;font-size:clamp(20px,1.7vw,25px);line-height:1.2}

.kicker{
  margin:0 0 16px;
  font-family:var(--body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue);
}

.lead{margin:22px 0 0;max-width:52ch;font-size:clamp(16px,1.2vw,18px);color:#cfd4ea}
.sub{margin:18px 0 0;max-width:54ch;color:var(--muted)}
.fine{margin:34px 0 0;max-width:78ch;color:var(--muted);font-size:13.5px;line-height:1.6}
.center{text-align:center;margin-inline:auto}

.verify{
  display:inline-block;
  padding:1px 6px;
  border-radius:4px;
  background:var(--flag);
  color:var(--ink);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  vertical-align:2px;
}

/* ---- pills ------------------------------------------------- */

.pill{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:13px 14px 13px 26px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.pill:not(:has(i)){padding-right:26px}
.pill i{
  display:grid;
  place-items:center;
  width:32px;height:32px;
  border-radius:50%;
  font-style:normal;
  font-size:15px;
  transition:transform .25s var(--ease);
}
.pill:hover i{transform:translateX(3px)}

.pill-dark{background:var(--navy);color:#fff}
.pill-dark i{background:rgba(255,255,255,.16)}
.pill-dark:hover{background:var(--ink)}

.pill-light{background:#fff;color:var(--ink)}
.pill-light i{background:var(--tint)}
.pill-light:hover{background:var(--tint)}

.pill-quiet{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.22)}
.pill-quiet:hover{background:rgba(255,255,255,.18)}

.pill-outline{background:transparent;color:var(--ink);border-color:#cfcbc0}
.pill-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- header ------------------------------------------------ */

.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(10px);
}
.nav-wrap{display:flex;align-items:center;gap:clamp(10px,1.1vw,20px);height:88px}
.brand{flex:0 0 auto}
/* Μέσα στο αρχείο ο λεκτικός τύπος κάθεται 22% χαμηλότερα από το κέντρο
   της εικόνας, γιατί το εικονίδιο πιάνει όλο το ύψος. Το header κεντράρει
   το κουτί, οπότε το «OfficeFleet» έβγαινε 9px κάτω από το menu. */
.brand img{width:clamp(140px,11vw,168px);height:auto;display:block;transform:translateY(-11%)}
.primary-nav{display:flex;align-items:center;gap:clamp(8px,1.1vw,18px);flex:1 1 auto;min-width:0;margin-left:clamp(18px,3vw,48px);font-size:14px;font-weight:550;letter-spacing:-0.01em}
.nav-main-links{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.1vw,18px);flex:1 1 auto;min-width:0}
.primary-nav a{padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap;transition:border-color .2s var(--ease)}
.primary-nav a:hover{border-color:var(--ink)}
.nav-account{display:inline-flex;align-items:center;justify-content:center;flex:0 0 172px}
.nav-foot{display:none}
.site-header .pill{min-height:40px;padding:7px 10px 7px 16px;font-size:13.5px;white-space:nowrap;flex:0 0 auto}
.site-header .pill i{width:24px;height:24px;font-size:12px}
.menu-toggle{display:none;position:relative;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer}
.menu-toggle span{
  position:absolute;
  left:11px;right:11px;
  height:2px;
  border-radius:2px;
  background:var(--ink);
  transition:transform .25s var(--ease),opacity .2s var(--ease);
}
.menu-toggle span:first-child{top:17px}
.menu-toggle span:nth-of-type(2){bottom:17px}
.menu-toggle[aria-expanded="true"] span:nth-of-type(1){transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-of-type(2){transform:translateY(-4px) rotate(-45deg)}

/* ---- hero panel -------------------------------------------- */

.hero{padding:14px 0 0}

.panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,4vw,64px);
  align-items:center;
  padding:clamp(34px,3.8vw,62px);
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 90% at 88% 8%,#33409a 0%,transparent 58%),
    var(--navy);
  color:#fff;
  overflow:hidden;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 26px;
  padding:8px 16px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  color:#e5e9ff;
}
.badge .dot{width:7px;height:7px;border-radius:50%;background:#7ee0b4;box-shadow:0 0 0 4px rgba(126,224,180,.18)}

.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.anchor{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
  margin:34px 0 0;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:15px;
  color:#c3cae6;
}
.anchor b{font-family:var(--display);font-size:30px;font-weight:600;color:#fff}
.anchor span{font-size:13px}

/* ---- hero visual: the four real deliverables as a tucked stack.
   No fake dashboard, no invented metrics. The front card carries
   the offer. Depth comes from scale + shadow, not from tricks. -- */

.stack{position:relative;min-height:414px}

.docs{margin:0;padding:0;list-style:none;position:relative}
.docs li{
  position:absolute;
  left:0;right:0;
  top:calc(var(--i) * 58px);
  z-index:calc(var(--i) + 1);
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  gap:14px;
  height:72px;
  padding:0 20px;
  border-radius:16px;
  background:#fff;
  color:var(--ink);
  transform:scale(calc(.94 + var(--i) * .02));
  transform-origin:top center;
  box-shadow:0 -1px 0 rgba(16,20,38,.04),0 10px 22px rgba(8,11,28,.2);
}
.docs b{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.docs .ic{
  display:grid;
  place-items:center;
  width:38px;height:38px;
  border-radius:11px;
  background:var(--tint);
  color:var(--blue);
}
.docs .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* front card carries the offer */
.docs .front{
  position:relative;
  height:auto;
  padding:22px 22px 20px;
  align-items:start;
  border-radius:20px;
  box-shadow:0 -1px 0 rgba(16,20,38,.04),0 26px 54px rgba(8,11,28,.32);
}
.docs .front .ic{background:var(--navy);color:#fff}
.docs .front p{
  grid-column:2;
  margin:5px 0 0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.55;
}
.docs .front footer{
  grid-column:1/-1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.docs .front footer span{color:var(--muted);font-size:12.5px;line-height:1.45}
.docs .front footer .live{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(22,133,99,.09);
  color:#0f6b4f;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}
.docs .front footer .live i{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 4px rgba(22,133,99,.16);
}

/* ---- sections ---------------------------------------------- */

.section{padding:clamp(72px,8vw,128px) 0}
.tint{background:var(--paper-2)}
.section-head{max-width:62ch;margin-bottom:clamp(38px,4vw,58px)}

.card{
  border-radius:var(--r-lg);
  background:var(--card);
  border:1px solid var(--line-soft);
  box-shadow:var(--lift);
}

.split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,5vw,86px)}
.split-intro{position:sticky;top:120px;align-self:start}
.split-intro .pill{margin-top:32px}

.steps{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.steps li{padding:clamp(28px,2.6vw,38px)}
.numeral{
  display:block;
  font-size:46px;
  line-height:1;
  color:var(--blue);
}
.steps h3{margin:16px 0 10px}
.steps p{margin:0;max-width:56ch;color:var(--muted)}


/* ---- γιατί εμάς -------------------------------------------- */

.why{position:relative;overflow:hidden}
.why::before{
  content:"";
  position:absolute;
  left:50%;top:-18%;
  width:min(1000px,120%);
  aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(70,86,166,.09),transparent 72%);
  pointer-events:none;
}
.why .shell{position:relative}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.why-grid article{padding:clamp(26px,2.4vw,34px)}
.chip{
  display:grid;
  place-items:center;
  width:56px;height:56px;
  margin-bottom:26px;
  border-radius:17px;
  background:#fff;
  color:var(--blue);
  box-shadow:var(--lift);
}
.chip svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.why-grid h3{margin-bottom:10px}
.why-grid p{margin:0;color:var(--muted);font-size:15px}

.badges{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px 34px;
  margin:clamp(40px,4vw,62px) 0 0;
  padding:0;
  list-style:none;
  font-size:14px;
  color:#3f4557;
}
.badges li{display:inline-flex;align-items:center;gap:10px}
.badges .tick{
  position:relative;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--tint);
  border:1px solid #d4dbf5;
}
.badges .tick::before{
  content:"";
  position:absolute;
  left:6px;top:8px;
  width:8px;height:4px;
  border-left:1.6px solid var(--blue);
  border-bottom:1.6px solid var(--blue);
  transform:rotate(-45deg);
}


/* ---- για ποιον: compact version of the reference's checklist --- */

.forwho{padding-top:0}
.forwho-grid{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(30px,4vw,72px);
  align-items:center;
}
.forwho-intro .sub{max-width:40ch}

.checklist{
  margin:0;
  padding:clamp(26px,2.6vw,36px);
  border-radius:var(--r-lg);
  background:var(--paper-2);
  list-style:none;
  display:grid;
  gap:18px;
}
.checklist li{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:16px;
  align-items:start;
  font-size:15.5px;
  line-height:1.55;
  color:#33394b;
}
.tick-solid{
  position:relative;
  width:26px;height:26px;
  margin-top:1px;
  border-radius:50%;
  background:var(--navy);
}
.tick-solid::before{
  content:"";
  position:absolute;
  left:8px;top:9px;
  width:9px;height:5px;
  border-left:1.9px solid #fff;
  border-bottom:1.9px solid #fff;
  transform:rotate(-45deg);
}

/* ---- plans -------------------------------------------------- */

/* subgrid makes every zone line up across the three cards,
   no matter how many lines each description takes */
.plans{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto auto auto auto auto;
  gap:20px;
}
.plan{grid-row:span 6;grid-template-rows:subgrid}
.plan{position:relative;display:flex;flex-direction:column;padding:clamp(26px,2.4vw,34px)}
.plan header p{margin:8px 0 0;color:var(--muted);font-size:14px}


/* ---- plan cards, laid out like Byron's pricing reference:
   name + badge, description, price, CTA, then the checklist.
   The amounts stay ABOVE the button — showing the real total
   before the click is the brand promise. --------------------- */

.plan{position:relative;display:grid;align-content:start;padding:clamp(28px,2.6vw,38px);border-radius:28px}
.plan header{display:flex;align-items:start;justify-content:space-between;gap:14px;min-height:38px}
.plan-desc{margin:12px 0 0;max-width:34ch;color:var(--muted);font-size:14.5px;line-height:1.55}

.badge-pop{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 14px;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.badge-pop svg{width:14px;height:14px;fill:currentColor;stroke:none}

.price{display:flex;align-items:baseline;gap:10px;margin:26px 0 0}
.price b{font-size:clamp(44px,4.4vw,58px);font-weight:600;line-height:1}
.price span{color:var(--muted);font-size:15px}

.plan-sum{align-self:start;margin:22px 0 26px}
.plan-parts{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin:0 0 7px;
  color:var(--muted);
  font-size:13.5px;
}
.plan-parts b{font-weight:600;color:#3f4557}
.plan-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin:12px 0 0;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.plan-total span{font-size:14.5px;font-weight:600}
.plan-total b{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.028em}

.save-pill{
  display:block;
  margin-top:14px;
  padding:9px 14px;
  border-radius:14px;
  background:rgba(22,133,99,.1);
  color:#0f6b4f;
  font-size:12.5px;
  font-weight:600;
}
.save-pill b{display:block;font-size:13.5px}
.save-pill small{display:block;margin-top:2px;font-weight:500;opacity:.8;line-height:1.35}
.save-pill-quiet{background:var(--paper-2);color:var(--muted)}

.plan>.pill{justify-content:center;width:100%}

.incl{align-self:start;margin:26px 0 0;padding:0;list-style:none;display:grid;gap:13px}
.incl li{position:relative;padding-left:28px;font-size:14.5px;color:#3f4557}
.incl li::before{
  content:"";
  position:absolute;
  left:2px;top:.5em;
  width:11px;height:5px;
  border-left:1.8px solid var(--blue);
  border-bottom:1.8px solid var(--blue);
  transform:rotate(-45deg);
}

/* the recommended plan: tinted, like the reference's highlight */
.plan.featured{
  background:linear-gradient(180deg,#f7f9ff 0%,var(--tint) 100%);
  border-color:#c8d1f7;
  box-shadow:0 2px 4px rgba(16,20,38,.05),0 28px 62px rgba(37,47,105,.16);
}
.plan.featured .plan-total{border-top-color:#c8d1f7}
.plan.featured .save-pill{background:rgba(22,133,99,.12)}

/* the plan the visitor just picked */
.plan.is-picked{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy),var(--lift-2)}


/* ---- ερωτήσεις ------------------------------------------- */

.faq-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);
  gap:clamp(32px,4.5vw,80px);
  align-items:start;
}
.faq-intro{position:sticky;top:120px}
.faq-intro .pill{margin-top:30px}

.accordion{display:grid;gap:14px}
.accordion details{
  border-radius:20px;
  background:var(--card);
  border:1px solid var(--line-soft);
  box-shadow:var(--lift);
  overflow:hidden;
  transition:box-shadow .3s var(--ease);
}
.accordion details[open]{box-shadow:var(--lift-2)}
.accordion summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:48px;
  padding:22px clamp(20px,2vw,28px);
  cursor:pointer;
  list-style:none;
  font-family:var(--display);
  font-size:clamp(16.5px,1.35vw,19px);
  font-weight:600;
  letter-spacing:-.018em;
}
.accordion summary:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:2px;
  border-radius:18px;
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary i{
  position:relative;
  flex:0 0 auto;
  width:30px;height:30px;
  border-radius:50%;
  background:var(--tint);
}
.accordion summary i::before,.accordion summary i::after{
  content:"";
  position:absolute;
  left:9px;top:14px;
  width:12px;height:1.8px;
  border-radius:2px;
  background:var(--navy);
  transition:transform .28s var(--ease);
}
.accordion summary i::after{transform:rotate(90deg)}
.accordion details[open] summary i::after{transform:rotate(0)}
.accordion details p{
  margin:0;
  padding:0 clamp(20px,2vw,28px) 24px;
  max-width:68ch;
  color:var(--muted);
  font-size:15.5px;
}

/* ---- checkout -------------------------------------------- */

.checkout-grid{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,4.5vw,76px);
  align-items:start;
}
.checkout-points{margin-top:26px}
.demo-warn{
  margin:28px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}

.checkout-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 22px;
  padding:clamp(26px,2.6vw,36px);
  border-radius:28px;
}
.checkout-sum{
  grid-column:1/-1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line-soft);
}
.checkout-sum-label{
  margin:0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.checkout-sum-plan{
  margin:7px 0 0;
  font-family:var(--display);
  font-size:24px;
  font-weight:600;
  letter-spacing:-.028em;
}
.checkout-sum-total{text-align:right}
.checkout-sum-amount{
  margin:7px 0 0;
  font-family:var(--display);
  font-size:28px;
  font-weight:600;
  letter-spacing:-.028em;
  color:var(--navy);
}

.field{display:grid;gap:9px;align-content:start}
.field>span{font-size:13px;font-weight:600}
.field input,.field select{
  width:100%;
  min-height:52px;
  padding:12px 16px;
  border:1px solid #d8d5cc;
  border-radius:14px;
  background:#fff;
  font-size:16px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field select{
  appearance:none;
  padding-right:40px;
  background-image:linear-gradient(45deg,transparent 48%,var(--ink) 49%),linear-gradient(-45deg,transparent 48%,var(--ink) 49%);
  background-position:calc(100% - 22px) calc(50% + 1px),calc(100% - 16px) calc(50% + 1px);
  background-size:6px 6px;
  background-repeat:no-repeat;
}
.field input:hover,.field select:hover{border-color:#b9b5a9}
.field input:focus,.field select:focus{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(37,47,105,.12);
}
.field input::placeholder{color:#a6a294}
.field small{color:var(--muted);font-size:12px}

.consent{
  grid-column:1/-1;
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14.5px;
  color:var(--muted);
}
.consent input{width:19px;height:19px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--navy)}

.checkout-card>button{grid-column:1/-1;justify-content:center;width:100%}
.form-result{grid-column:1/-1;margin:0;font-size:14px;font-weight:600;color:#0f6b4f}
.form-result.is-error{color:#a5271f}

/* ---- comparison -------------------------------------------- */

.compare{display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.compare-col{padding:clamp(28px,3vw,44px)}
.compare-col+.compare-col{border-left:1px solid var(--line-soft)}
.compare-col.win{background:linear-gradient(180deg,rgba(237,240,251,.5),rgba(237,240,251,1))}
.compare-col h3{margin-bottom:28px}
.compare-col ul{margin:0;padding:0;list-style:none;display:grid;gap:26px}
.compare-col li{display:grid;grid-template-columns:28px 1fr;gap:16px}
.compare-col b{display:block;font-size:17px}
.compare-col p{margin:5px 0 0;color:var(--muted);font-size:14.5px;line-height:1.6}

.mk{position:relative;width:26px;height:26px;border-radius:50%;margin-top:2px}
.mk-no{border:1px solid #cfcbc0}
.mk-no::before,.mk-no::after{content:"";position:absolute;inset:50% 7px auto;height:1.5px;background:#9a968b}
.mk-yes{background:var(--navy)}
.mk-yes::before{
  content:"";
  position:absolute;
  left:8px;top:9px;
  width:9px;height:5px;
  border-left:1.8px solid #fff;
  border-bottom:1.8px solid #fff;
  transform:rotate(-45deg);
}

/* ---- closing ----------------------------------------------- */

#contact.section{padding-bottom:clamp(40px,4.5vw,64px)}
.closing{align-items:center}
.closing .lead{max-width:42ch}
.phones{margin:0}
.phones dt{
  padding-top:20px;
  margin-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#9aa6e0;
}
.phones dt:first-child{margin-top:0;padding-top:0;border-top:0}
.phones dd{margin:10px 0 0;font-size:22px;font-weight:600}
.phones dd a{border-bottom:1px solid transparent}
.phones dd a:hover{border-color:#fff}
.phones dd.pending{font-size:14px;color:#c3cae6}

/* ---- footer ------------------------------------------------ */

.site-footer{
  background:var(--paper-2);
  border-top:1px solid var(--line);
  padding:clamp(48px,5vw,64px) 0 36px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(32px,4vw,56px);
  align-items:start;
}

.footer-col-brand{
  max-width:320px;
}

.footer-brand{
  display:inline-block;
  line-height:0;
}

.footer-logo{
  width:144px;
  height:auto;
  display:block;
}

.footer-tagline{
  margin:16px 0 0;
  font-size:14.5px;
  line-height:1.55;
  color:var(--muted);
}

.footer-heading{
  margin:0 0 16px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--navy);
}

.footer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-links li{
  margin:0;
  padding:0;
}

.footer-links a{
  display:inline-flex;
  align-items:center;
  font-size:14.5px;
  line-height:1.4;
  color:var(--ink);
  text-decoration:none;
  font-weight:500;
  transition:color .2s var(--ease),text-decoration-color .2s var(--ease);
}

.footer-links a:hover{
  color:var(--navy);
  text-decoration:underline;
  text-underline-offset:3px;
}

.footer-links a:focus-visible,
.footer-brand:focus-visible,
.footer-credit a:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:3px;
}

.footer-bottom{
  margin-top:clamp(36px,4vw,48px);
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 24px;
  font-size:13px;
  color:var(--muted);
}

.footer-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  line-height:1.5;
}

.footer-sep{
  color:rgba(16,20,38,.35);
  user-select:none;
}

.footer-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:11.5px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:.02em;
  margin-left:4px;
}

.footer-badge::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--flag);
  flex-shrink:0;
}

.footer-credit a{
  color:var(--muted);
  text-decoration:none;
  font-weight:500;
  font-size:13px;
  transition:color .2s var(--ease);
}

.footer-credit a:hover{
  color:var(--navy);
  text-decoration:underline;
  text-underline-offset:3px;
}

.mobile-cta{display:none}

/* ---- motion ------------------------------------------------- */

.card{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.steps li:hover,.plan:hover{transform:translateY(-4px);box-shadow:var(--lift-2)}

.js .docs li{opacity:0;transform:translateY(26px)}
.js.is-ready .docs li{
  opacity:1;
  transform:none;
  transition:opacity .6s var(--ease),transform .75s var(--ease);
  transition-delay:calc(.12s + var(--i) * .09s);
}

.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in:nth-child(2){transition-delay:.07s}
.js .reveal.in:nth-child(3){transition-delay:.14s}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width:980px){
  :root{--shell:min(1200px,calc(100% - 36px));--nav-h:88px}
  .primary-nav,.site-header>.shell>.pill{display:none}
  .menu-toggle{display:block;margin-left:auto}
  /* Το backdrop-filter του header κάνει containing block τα fixed παιδιά του.
     Όσο το menu είναι ανοιχτό το απενεργοποιούμε, αλλιώς το panel καταρρέει. */
  body.menu-open .site-header{backdrop-filter:none;background:var(--paper)}

  .primary-nav.open{
    /* Ξεκινά ακριβώς κάτω από τον header και τελειώνει ΠΑΝΤΑ στο κάτω όριο
       της οθόνης. Το --nav-top το γράφει το site.js από το πραγματικό
       getBoundingClientRect().bottom του header, γιατί ο header μπορεί να
       είναι σπρωγμένος προς τα κάτω (π.χ. admin bar του WordPress) και καμία
       σταθερή τιμή δεν το καλύπτει. Το bottom:0 εγγυάται ότι δεν ξεφεύγει
       ποτέ κάτω από την οθόνη, άρα το τελευταίο CTA μένει ορατό. */
    position:fixed;
    top:var(--nav-top,var(--nav-h,72px));
    left:0;
    right:0;
    bottom:0;
    z-index:70;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding:22px 20px calc(22px + env(safe-area-inset-bottom));
    background:var(--paper);
    font-size:17px;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .primary-nav.open .nav-main-links{display:contents}
  .primary-nav.open .nav-account{flex:0 0 auto}
  .primary-nav.open a:not(.pill):not(.lang-link){
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    box-sizing:border-box;
    padding:18px 20px;
    border:1px solid var(--line);
    border-bottom:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    font-weight:600;
  }
  .primary-nav.open a:not(.pill):not(.lang-link)::after{
    content:"→";
    display:block;
    position:static;
    width:auto;height:auto;
    color:var(--blue);
    font-size:17px;
    background:none;
    transition:transform .2s var(--ease);
  }
  .primary-nav.open a:not(.pill):not(.lang-link):active::after{transform:translateX(4px)}
  .primary-nav.open .nav-account{
    /* Το breakpoint των 1240px κάνει το κουμπί icon-only με font-size:0 για στενά
       desktop. Στο ανοιχτό mobile menu χρειαζόμαστε ξανά την ετικέτα. */
    font-size:15px;
    margin:0;
    padding:18px 20px!important;
    justify-content:flex-start;
    gap:12px;
    border-color:var(--line);
    background:var(--tint);
    color:var(--ink);
  }
  .primary-nav.open .nav-account::after{margin-left:auto}
  .primary-nav.open .nav-account::after{display:block!important}

  /* πόδι: τηλέφωνο + κύριο CTA */
  .primary-nav.open .nav-foot{
    display:grid;
    gap:10px;
    margin-top:auto;
    padding-top:20px;
    border-top:1px solid var(--line);
  }
  .primary-nav.open .nav-foot .pill{width:100%;justify-content:center}
  .nav-foot-ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  /* το X του menu πάνω από το panel */
  .menu-toggle{position:relative;z-index:75}
  /* το sticky CTA δεν έχει νόημα όσο το menu είναι ανοιχτό */
  body.menu-open .mobile-cta{display:none}

  .panel{grid-template-columns:1fr;gap:34px}
  .why-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .forwho-grid{grid-template-columns:1fr;gap:28px}
  .faq-grid,.checkout-grid{grid-template-columns:1fr;gap:30px}
  .faq-intro{position:static}
  .split{grid-template-columns:1fr;gap:36px}
  .split-intro{position:static}
  /* single column: drop the shared row track so each card sizes itself */
  .plans{grid-template-columns:1fr;grid-template-rows:none;max-width:460px;margin-inline:auto}
  .plan{grid-row:auto;grid-template-rows:none}
  .plan.featured{order:-1}
  .compare{grid-template-columns:1fr}
  .compare-col+.compare-col{border-left:0;border-top:1px solid var(--line-soft)}

  .site-footer{padding-top:44px;padding-bottom:48px}
  body:has(.mobile-cta) .site-footer, .home .site-footer{padding-bottom:calc(124px + env(safe-area-inset-bottom, 16px))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px 28px}
  .footer-col-brand{grid-column:1 / -1;max-width:none}
  .footer-links a{min-height:44px;display:inline-flex;align-items:center}
  .footer-credit a{min-height:44px;display:inline-flex;align-items:center}
}

@media (max-width:680px){
  .checkout-card{grid-template-columns:1fr;gap:20px;padding:22px 18px;border-radius:22px}
  .checkout-sum{flex-direction:column;align-items:flex-start;gap:14px}
  .checkout-sum-total{text-align:left}
  .accordion summary{font-size:16px;gap:14px}

  :root{--shell:min(1200px,calc(100% - 24px));--r-xl:24px;--r-lg:20px}
  body{font-size:16px}
  .nav-wrap{height:72px}
  .brand img{width:152px}
  :root{--nav-h:72px}

  .hero{padding-top:6px}
  .panel{padding:26px 22px 30px}
  .cta-row .pill{width:100%;justify-content:space-between}
  .stack{min-height:392px}
  .docs li{height:66px;padding:0 16px;gap:12px;top:calc(var(--i) * 54px)}
  .docs b{font-size:14.5px}
  .docs .front{padding:18px;height:auto}
  .price b{font-size:44px}
  .plans{max-width:none}
  .compare-col li{grid-template-columns:24px 1fr;gap:13px}

  .closing .phones dd{font-size:19px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-links{gap:2px}
  .footer-links a{width:100%;font-size:15px}
  .footer-heading{margin-bottom:6px;padding-top:6px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px;padding-top:20px;margin-top:28px}
  .footer-meta{gap:6px 8px;font-size:12.5px}
  .footer-badge{margin-left:0;margin-top:4px}


  .mobile-cta{
    position:fixed;
    z-index:90;
    left:0;right:0;bottom:0;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:8px;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--paper) 92%,transparent);
    backdrop-filter:blur(8px);
    border-top:1px solid var(--line);
  }
  .mobile-cta .pill{min-height:48px;padding:8px 16px;justify-content:center;font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .js .docs li{opacity:1;transform:none}
  .steps li:hover,.plan:hover{transform:none}
}

/* ============================================================
   v5 hero — Claritax statement + United overlap composition
   ============================================================ */
.hero-v5{padding:0;overflow:hidden}
.hero-statement{padding:clamp(74px,9vw,132px) 0 clamp(180px,17vw,250px);text-align:center}
.hero-kicker{margin:0 0 22px;color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.hero-v5 h1{max-width:1100px;margin:0 auto;font-size:clamp(52px,6.4vw,92px);line-height:1.01;letter-spacing:-.052em}
.hero-v5 h1 em{display:inline;color:var(--blue)}
.hero-summary{max-width:790px;margin:28px auto 0;color:var(--muted);font-size:clamp(16px,1.35vw,20px);line-height:1.62}
.hero-actions{display:flex;justify-content:center;gap:14px;margin-top:34px}
.hero-button{display:inline-flex;min-height:58px;align-items:center;justify-content:center;gap:22px;padding:14px 20px 14px 28px;border:1px solid var(--ink);border-radius:8px;font-weight:650;transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease)}
.hero-button.primary{background:var(--ink);color:#fff}.hero-button.secondary{padding-inline:28px;background:transparent;color:var(--ink)}
.hero-button i{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:rgba(255,255,255,.13);font-style:normal;transition:transform .22s var(--ease)}
.hero-button:hover{transform:translateY(-2px)}.hero-button.primary:hover{background:var(--navy)}.hero-button:hover i{transform:translateX(3px)}
.hero-price{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:8px;margin:26px 0 0;color:var(--muted);font-size:14px}
.hero-price b{font-family:var(--display);color:var(--ink);font-size:26px}.hero-price span{margin-left:8px;font-size:12px}
.hero-band{position:relative;min-height:440px;background:#071923;color:#fff}
.hero-lines{position:absolute;inset:auto 0 0;width:100%;height:360px;opacity:.22}.hero-lines path{fill:none;stroke:#245484;stroke-width:2}
.hero-overlap{position:relative;display:grid;grid-template-columns:.93fr 1.07fr;gap:26px;transform:translateY(clamp(-140px,-10vw,-100px))}
.approach-card,.hero-photo{min-height:500px;margin:0;border-radius:3px;box-shadow:0 26px 70px rgba(0,0,0,.18)}
.approach-card{display:flex;flex-direction:column;padding:clamp(32px,3.8vw,58px);background:#fff;color:var(--ink)}
.approach-card>p{display:flex;align-items:center;gap:12px;margin:0 0 25px;color:var(--muted);font-size:14px}.approach-card>p i{width:9px;height:9px;background:var(--indigo)}
.approach-card h2{max-width:590px;font-size:clamp(29px,3vw,44px);line-height:1.15}
.approach-card ol{display:grid;gap:0;margin:36px 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.approach-card li{display:grid;grid-template-columns:45px 1fr;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px}.approach-card li b{color:var(--blue);font-size:12px}.approach-card footer{display:flex;align-items:center;gap:12px;margin-top:auto;color:var(--success);font-size:13px;font-weight:700}.approach-card footer span{display:flex;align-items:center;gap:8px}.approach-card footer span i{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px rgba(22,133,99,.12)}.approach-card footer small{color:var(--muted);font-weight:500}
.hero-photo{position:relative;overflow:hidden;background:var(--navy)}.hero-photo img{width:100%;height:100%;min-height:500px;object-fit:cover}.hero-photo::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(7,25,35,.74))}.hero-photo figcaption{position:absolute;z-index:2;left:30px;right:30px;bottom:26px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;color:#fff}.hero-photo figcaption b{font-family:var(--display);font-size:22px}.hero-photo figcaption span{font-size:12px}
.js .hero-statement>*{opacity:0;transform:translateY(18px)}
.js.is-ready .hero-statement>*{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease)}
.js.is-ready .hero-statement>*:nth-child(1){transition-delay:.04s}.js.is-ready .hero-statement>*:nth-child(2){transition-delay:.12s}.js.is-ready .hero-statement>*:nth-child(3){transition-delay:.2s}.js.is-ready .hero-statement>*:nth-child(4){transition-delay:.28s}.js.is-ready .hero-statement>*:nth-child(5){transition-delay:.36s}

@media(max-width:980px){.hero-statement{padding-bottom:190px}.hero-overlap{grid-template-columns:1fr;max-width:760px}.approach-card,.hero-photo,.hero-photo img{min-height:440px}.hero-band{min-height:850px}}
@media(max-width:680px){.hero-statement{padding:58px 0 145px}.hero-v5 h1{font-size:44px}.hero-summary{margin-top:22px}.hero-actions{flex-direction:column}.hero-button{width:100%;min-height:54px}.hero-price{margin-top:22px}.hero-price span{width:100%;margin-left:0}.hero-band{min-height:765px}.hero-overlap{gap:12px;transform:translateY(-92px)}.approach-card{min-height:390px;padding:27px 22px}.approach-card h2{font-size:29px}.approach-card ol{margin:25px 0}.hero-photo,.hero-photo img{min-height:310px}.hero-photo figcaption{left:20px;right:20px;bottom:18px;flex-direction:column;align-items:flex-start;gap:3px}.hero-photo figcaption b{font-size:18px}}
@media(prefers-reduced-motion:reduce){.js .hero-statement>*{opacity:1;transform:none}.hero-button:hover{transform:none}}

/* ============================================================
   v5 audience carousel — centered card with visible neighbours
   ============================================================ */
.audience{overflow:hidden;padding-bottom:clamp(84px,10vw,150px)}
.audience .section-head{max-width:760px;margin-inline:auto;margin-bottom:clamp(42px,6vw,76px)}
.audience .section-head h2{font-size:clamp(40px,5.2vw,72px);line-height:1.05}
.audience-stage{position:relative}
.audience-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:min(760px,62vw);
  gap:clamp(16px,2.2vw,34px);
  overflow-x:auto;
  padding:8px calc((100vw - min(760px,62vw))/2) 24px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
}
.audience-track::-webkit-scrollbar{display:none}
.audience-card{
  position:relative;
  min-height:500px;
  overflow:hidden;
  border-radius:34px;
  scroll-snap-align:center;
  background:var(--ink);
  opacity:.38;
  transform:scale(.92);
  transition:opacity .45s var(--ease),transform .55s var(--ease),box-shadow .45s var(--ease);
}
.audience-card.is-active{opacity:1;transform:scale(1);box-shadow:0 30px 70px rgba(16,20,38,.2)}
.audience-card::after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,rgba(7,13,28,.92))}
.audience-card img{width:100%;height:100%;min-height:500px;object-fit:cover}
.audience-card>div{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:clamp(24px,3vw,42px);color:#fff}
.audience-card p{margin:0 0 10px;color:#bec8ff;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.audience-card h3{max-width:20ch;margin:0 0 10px;color:#fff;font-size:clamp(26px,3vw,42px);line-height:1.08}
.audience-card span{display:block;max-width:53ch;color:#e0e4f1;font-size:clamp(14px,1.25vw,17px);line-height:1.55}
.audience-arrow{position:absolute;z-index:3;top:50%;display:grid;place-items:center;width:58px;height:58px;border:0;border-radius:50%;background:var(--navy);color:#fff;font-size:27px;box-shadow:0 12px 34px rgba(16,20,38,.22);cursor:pointer;transition:transform .2s var(--ease),background .2s var(--ease)}
.audience-arrow:hover{transform:translateY(-2px);background:var(--blue)}
.audience-arrow.prev{left:calc(50% - min(380px,31vw) - 29px)}
.audience-arrow.next{right:calc(50% - min(380px,31vw) - 29px)}
.audience-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}.audience-dots i{width:7px;height:7px;border-radius:99px;background:#c8cbd5;transition:width .25s var(--ease),background .25s var(--ease)}.audience-dots i.active{width:28px;background:var(--navy)}

@media(max-width:680px){
  .audience .section-head h2{font-size:39px}
  .audience-track{grid-auto-columns:calc(100vw - 48px);gap:12px;padding-inline:24px}
  .audience-card,.audience-card img{min-height:430px}
  .audience-card{border-radius:24px;opacity:.5;transform:scale(.97)}
  .audience-card h3{font-size:29px}
  .audience-arrow{top:auto;bottom:-64px;width:48px;height:48px;font-size:22px}
  .audience-arrow.prev{left:calc(50% - 58px)}
  .audience-arrow.next{right:calc(50% - 58px)}
  .audience-dots{margin-top:76px}
}

@media(prefers-reduced-motion:reduce){.audience-track{scroll-behavior:auto}.audience-card,.audience-arrow,.audience-dots i{transition:none}}

/* ============================================================
   Checkout page — packages lead straight here with the plan
   already chosen. Same design system as the homepage.
   ============================================================ */

.page-checkout{background:var(--paper)}

.co-header{border-bottom:1px solid var(--line)}
.co-header .nav-wrap{gap:24px}
.co-steps{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 auto;
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
}
.co-steps span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.co-steps b{
  display:grid;
  place-items:center;
  width:24px;height:24px;
  border-radius:50%;
  background:var(--paper-2);
  color:var(--muted);
  font-size:12px;
}
.co-steps .is-now{color:var(--ink)}
.co-steps .is-now b{background:var(--navy);color:#fff}
.co-steps i{width:34px;height:1px;background:var(--line)}
.co-back{font-size:14px;font-weight:600;white-space:nowrap}
.co-back:hover{color:var(--navy)}

.co-main{padding:clamp(26px,3vw,44px) 0 clamp(60px,7vw,100px)}

.demo-banner{
  margin:0 0 clamp(24px,3vw,36px);
  padding:14px 20px;
  border-radius:14px;
  background:#fff6e0;
  border:1px solid #f2d9a0;
  color:#6b4e12;
  font-size:13.5px;
}

.co-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(30px,4vw,64px);
  align-items:start;
}

.co-form h1{
  margin:0;
  font-family:var(--display);
  font-size:clamp(28px,3.2vw,42px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.1;
}
.co-form .sub{margin-bottom:clamp(30px,3.4vw,44px)}

.co-block{
  padding:clamp(22px,2.4vw,30px);
  margin-bottom:18px;
  border-radius:22px;
  background:var(--card);
  border:1px solid var(--line-soft);
  box-shadow:var(--lift);
}
.co-block h2{
  display:flex;
  align-items:center;
  gap:13px;
  margin:0 0 22px;
  font-family:var(--display);
  font-size:19px;
  font-weight:600;
  letter-spacing:-.02em;
}
.co-num{
  display:grid;
  place-items:center;
  width:28px;height:28px;
  border-radius:50%;
  background:var(--tint);
  color:var(--navy);
  font-family:var(--body);
  font-size:13px;
  font-weight:700;
}
.co-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field-wide{grid-column:1/-1}
.co-hint{
  grid-column:1/-1;
  margin:0;
  padding:13px 16px;
  border-radius:12px;
  background:var(--tint);
  color:#3a4470;
  font-size:13.5px;
}

/* payment method */
.co-pay{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.co-radio{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:16px 18px;
  border:1px solid #d8d5cc;
  border-radius:16px;
  cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.co-radio:hover{border-color:#b9b5a9}
.co-radio input{width:19px;height:19px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--navy)}
.co-radio b{display:block;font-size:15px}
.co-radio small{display:block;margin-top:4px;color:var(--muted);font-size:12.5px;line-height:1.5}
.co-radio:has(input:checked){border-color:var(--navy);background:var(--tint)}

.page-checkout .consent{margin:8px 0 24px;font-size:14.5px}
.page-checkout .consent a{font-weight:600;text-decoration:underline;text-underline-offset:2px}

.co-submit{width:100%;justify-content:center;min-height:58px;font-size:16px}
.co-submit b{font-weight:700}
.page-checkout .form-result{margin:16px 0 0;font-size:14.5px;font-weight:600;color:#0f6b4f}
.page-checkout .form-result.is-error{color:#a5271f}
.co-safe{margin:18px 0 0;color:var(--muted);font-size:13px}

/* summary */
.co-summary{position:sticky;top:112px;display:grid;gap:16px}
.co-card{padding:clamp(24px,2.4vw,30px);border-radius:24px}
.co-card h2{
  margin:0 0 20px;
  font-family:var(--display);
  font-size:18px;
  font-weight:600;
  letter-spacing:-.02em;
}
.co-plan{
  position:relative;
  padding-bottom:18px;
  border-bottom:1px solid var(--line-soft);
}
.co-plan-name{
  margin:0;
  font-family:var(--display);
  font-size:26px;
  font-weight:600;
  letter-spacing:-.028em;
}
.co-plan-sub{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.co-change{
  position:absolute;
  right:0;top:2px;
  font-size:13px;
  font-weight:600;
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:2px;
}

.co-lines{margin:18px 0 0}
.co-lines>div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:14px}
.co-lines dt{color:var(--muted)}
.co-lines dd{margin:0;font-weight:600}
.co-lines .co-total{
  margin-top:10px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
  align-items:baseline;
}
.co-lines .co-total dt{color:var(--ink);font-weight:600;font-size:14.5px}
.co-lines .co-total dd{
  font-family:var(--display);
  font-size:25px;
  font-weight:600;
  letter-spacing:-.028em;
}
.co-summary .save-pill{margin-top:16px}
.co-incl{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.co-incl li{font-size:13.5px}

.co-meta{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line-soft);display:grid;gap:11px}
.co-meta>div{display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.co-meta dt{color:var(--muted)}
.co-meta dd{margin:0;font-weight:600;text-align:right}
.co-fine{margin:20px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
.co-help{margin:0;text-align:center;color:var(--muted);font-size:13.5px}
.co-help a{font-weight:700;color:var(--ink)}

@media (max-width:980px){
  .co-grid{grid-template-columns:1fr}
  .co-summary{position:static;order:-1}
  .co-steps{display:none}
}
@media (max-width:680px){
  .co-fields,.co-pay{grid-template-columns:1fr}
  .co-block{padding:20px 18px;border-radius:18px}
  .co-back{font-size:13px}
  .co-plan-name{font-size:23px}
}

/* ---- summary head + compact mobile detail ---------------- */

.co-head{position:relative;padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.co-head-plan{padding-right:70px}
.co-head-total{display:none;align-items:baseline;justify-content:space-between;gap:14px;margin:14px 0 0}
.co-head-total span{color:var(--muted);font-size:13.5px}
.co-head-total b{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.028em}

.co-more-toggle{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin-top:16px;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:transparent;
  color:var(--ink);
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
}
.co-more-toggle i{
  position:relative;
  width:18px;height:18px;
  flex:0 0 auto;
}
.co-more-toggle i::before,.co-more-toggle i::after{
  content:"";
  position:absolute;
  left:3px;top:8px;
  width:12px;height:1.8px;
  border-radius:2px;
  background:var(--navy);
  transition:transform .25s var(--ease);
}
.co-more-toggle i::after{transform:rotate(90deg)}
.co-more-toggle[aria-expanded="true"] i::after{transform:rotate(0)}

/* ---- order states ---------------------------------------- */

.st-wrap{max-width:720px;margin-inline:auto}
.st-card{padding:clamp(26px,3vw,44px);border-radius:28px}
.st-card h1{
  margin:16px 0 0;
  font-family:var(--display);
  font-size:clamp(26px,3vw,38px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.12;
}
.st-lead{margin:14px 0 0;max-width:52ch;color:var(--muted);font-size:16.5px}

.st-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:8px 15px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}
.st-badge i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.st-badge-wait{background:#fff3d6;color:#6b4e12}
.st-badge-wait i{background:#d99a00;box-shadow:0 0 0 4px rgba(217,154,0,.18)}
.st-badge-ok{background:rgba(22,133,99,.11);color:#0f6b4f}
.st-badge-ok i{background:var(--success);box-shadow:0 0 0 4px rgba(22,133,99,.16)}

.st-lines{margin:clamp(24px,2.6vw,34px) 0 0;display:grid;gap:2px}
.st-lines>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.st-lines dt{color:var(--muted)}
.st-lines dd{margin:0;font-weight:600;text-align:right}

.st-note{
  margin:26px 0 0;
  padding:18px 20px;
  border-radius:16px;
  background:var(--paper-2);
}
.st-note-ok{background:rgba(22,133,99,.08)}
.st-note b{display:block;font-size:15px}
.st-note p{margin:6px 0 0;color:var(--muted);font-size:14.5px;line-height:1.6}

.st-steps{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.st-steps li{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start}
.st-steps b{
  display:grid;
  place-items:center;
  width:30px;height:30px;
  border-radius:50%;
  background:var(--tint);
  color:var(--navy);
  font-size:13px;
}
.st-steps span{font-size:15px;font-weight:600}
.st-steps small{display:block;margin-top:2px;color:var(--muted);font-size:13.5px;font-weight:400}

.st-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.st-help{margin:24px 0 0;color:var(--muted);font-size:14px}
.st-help a{font-weight:700;color:var(--ink)}
.st-demo{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:28px 0 0;
  padding-top:22px;
  border-top:1px dashed var(--line);
}
.st-demo small{color:var(--muted);font-size:12.5px}

/* ---- customer area --------------------------------------- */

.ac-who{margin:0 auto 0 0;padding-left:26px;font-size:14px;font-weight:600;color:var(--muted)}
.ac-title{
  margin:0;
  font-family:var(--display);
  font-size:clamp(28px,3.2vw,40px);
  font-weight:600;
  letter-spacing:-.03em;
}
.ac-intro{margin-bottom:clamp(26px,3vw,38px)}
.ac-intro .eyebrow{margin:0 0 8px;color:var(--navy);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.ac-sub{margin:10px 0 0;max-width:56ch}

.ac-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.ac-card{padding:clamp(24px,2.5vw,32px);border-radius:26px}
.ac-card h2{
  margin:0;
  font-family:var(--display);
  font-size:19px;
  font-weight:600;
  letter-spacing:-.02em;
}
.ac-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ac-plan{
  margin:22px 0 0;
  font-family:var(--display);
  font-size:30px;
  font-weight:600;
  letter-spacing:-.03em;
}
.ac-plan-sub{margin:4px 0 0;color:var(--muted);font-size:14px}
.ac-expiry{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:24px 0 0;padding:17px 18px;border-radius:16px;background:var(--paper-2)}
.ac-expiry>div{display:grid;gap:3px}
.ac-expiry>div:last-child{text-align:right}
.ac-expiry span{color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.055em}
.ac-expiry b{font-size:14px;font-variant-numeric:tabular-nums}
.ac-expiry-line{height:2px;border-radius:2px;background:rgba(70,86,166,.18);position:relative}
.ac-expiry-line i{position:absolute;inset:-3px auto -3px 0;width:0;border-radius:5px;background:var(--office-blue)}
.ac-meta{margin-top:22px}
.ac-inline-status{display:inline-flex;align-items:center;gap:7px;color:#0f6b4f}
.ac-inline-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success)}
.ac-explain{
  margin:20px 0 0;
  padding:14px 16px;
  border-radius:14px;
  background:var(--tint);
  color:#3a4470;
  font-size:14px;
  line-height:1.55;
}

.ac-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 0;
  border-bottom:1px solid var(--line-soft);
}
.ac-action:last-of-type{border-bottom:0;padding-bottom:0}
.ac-action:first-of-type{padding-top:22px}
.ac-action b{display:block;font-size:15.5px}
.ac-action p{margin:5px 0 0;max-width:44ch;color:var(--muted);font-size:13.5px;line-height:1.55}
.ac-action .pill{min-height:46px;padding:11px 20px;font-size:14px;flex:0 0 auto}
.ac-action .pill i{width:26px;height:26px;font-size:13px}
.page-account .form-result{margin:20px 0 0;font-size:14px}
.ac-secure-title{display:flex;align-items:center;gap:10px}
.ac-secure-title svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.ac-orders{margin-top:18px}
.ac-table-wrap{margin-top:20px;overflow-x:auto}
.ac-table{width:100%;border-collapse:collapse;text-align:left;font-size:14.5px}
.ac-table th,.ac-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line-soft)}
.ac-table thead th{
  padding-bottom:11px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted);
}
.ac-table tbody th{font-weight:600}
.ac-table tbody tr:last-child th,.ac-table tbody tr:last-child td{border-bottom:0}
.tag{
  display:inline-block;
  padding:5px 11px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
}
.tag-ok{background:rgba(22,133,99,.11);color:#0f6b4f}
.ac-support{margin-top:26px}

/* invalid field feedback */
.field.has-error input{border-color:#c4433a;box-shadow:0 0 0 3px rgba(196,67,58,.12)}

@media (max-width:980px){
  /* compact order summary: plan + final amount, details on demand */
  .co-head-total{display:flex}
  .co-more-toggle{display:flex}
  .co-more.is-collapsed{display:none}
  .co-head{border-bottom:0;padding-bottom:0}
  .co-summary .co-card{padding:20px}
  .ac-grid{grid-template-columns:1fr}
  .ac-who{display:none}
}

@media (max-width:680px){
  .st-card{padding:22px 18px;border-radius:22px}
  .st-lines>div{flex-direction:column;gap:3px;text-align:left}
  .st-lines dd{text-align:left}
  .st-actions .pill{width:100%;justify-content:center}
  .ac-action{flex-direction:column;align-items:flex-start;gap:14px}
  .ac-action .pill{width:100%;justify-content:center}
  .ac-expiry{gap:10px;padding:15px 14px}
  .ac-expiry b{font-size:13px}

  /* orders table becomes stacked records */
  .ac-table thead{display:none}
  .ac-table,.ac-table tbody,.ac-table tr,.ac-table th,.ac-table td{display:block;width:auto}
  .ac-table tbody tr{
    padding:16px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .ac-table tbody tr:last-child{border-bottom:0}
  .ac-table tbody th,.ac-table tbody td{padding:4px 0;border-bottom:0}
  .ac-table tbody td{display:flex;justify-content:space-between;gap:16px}
  .ac-table tbody td::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:13.5px;
  }
}

/* account link: icon + ήπιο pill hover, χωρίς υπογράμμιση */
.nav-account{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  margin-left:clamp(4px,0.6vw,10px);
  padding:5px 12px 5px 6px!important;
  border:1px solid transparent;
  border-bottom:1px solid transparent!important;
  border-radius:999px;
  font-size:13.5px;
  font-weight:550;
  color:var(--muted);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.nav-account-icon{
  display:grid;
  place-items:center;
  width:26px;height:26px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--tint);
  color:var(--navy);
  transition:background .2s var(--ease);
}
.nav-account-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav-account:hover{background:#fff;border-color:var(--line);color:var(--ink)}
.nav-account:hover .nav-account-icon{background:var(--navy);color:#fff}
.nav-account::after{display:none!important}
@media (max-width:980px){
  .nav-account{padding-left:0;margin-left:0;border-left:0}
}

/* ============================================================
   Προσθήκες 15.09.2026 — φόρμα επικοινωνίας,
   ασφαλής ταυτοποίηση, υπενθυμίσεις, τρόποι ανανέωσης.
   Ίδια tokens και components με το υπόλοιπο σύστημα.
   ============================================================ */

/* ---- φόρμα επικοινωνίας ----------------------------------- */

.cf-grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,4.5vw,76px);
  align-items:start;
}
.cf-intro{position:sticky;top:120px}
.cf-direct{margin:30px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.cf-direct dt{
  margin-top:14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.cf-direct dt:first-child{margin-top:0}
.cf-direct dd{margin:5px 0 0;font-size:18px;font-weight:600}
.cf-direct a{border-bottom:1px solid var(--line)}
.cf-direct a:hover{border-color:var(--ink)}

.cf-form{padding:clamp(26px,2.6vw,36px);border-radius:28px}
.cf-fields{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cf-fields .field-wide,.cf-fields .consent{grid-column:1/-1}
.field textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid #d8d5cc;
  border-radius:14px;
  background:#fff;
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  resize:vertical;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea:hover{border-color:#b9b5a9}
.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(37,47,105,.12)}
.field.has-error textarea,.field.has-error select{border-color:#c4433a;box-shadow:0 0 0 3px rgba(196,67,58,.12)}
.cf-submit{width:100%;justify-content:center;margin-top:26px}
.form-result.is-ok{color:#0f6b4f}
.cf-note{margin:18px 0 0;color:var(--muted);font-size:12.5px;line-height:1.6}




/* ---- ασφαλής ταυτοποίηση (checkout) ----------------------- */

.co-secure{
  grid-column:1/-1;
  padding:18px 20px;
  border-radius:16px;
  background:var(--tint);
  border:1px solid #cdd5f7;
}
.co-secure-head{display:flex;align-items:center;gap:9px;margin:0;font-size:14px;font-weight:700;color:var(--navy)}
.co-secure p{margin:10px 0 0;color:#3a4470;font-size:14px;line-height:1.6}
.co-secure ul{margin:10px 0 0;padding:0 0 0 4px;list-style:none;display:grid;gap:7px}
.co-secure li{position:relative;padding-left:22px;font-size:14px;font-weight:600;color:var(--ink)}
.co-secure li::before{
  content:"";
  position:absolute;
  left:2px;top:.55em;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--blue);
}
.co-secure-why{font-size:13px!important;color:#4a5382!important}
.co-dep{display:block;margin-top:8px;color:var(--muted);font-size:12px;line-height:1.5}

/* ---- τρόποι ανανέωσης (Customer Area) --------------------- */

.ac-modes{margin-top:22px;display:grid;gap:12px}
.ac-modes-head{
  margin:0;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.ac-mode{
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:16px;
}
.ac-mode.is-current{border-color:var(--navy);background:var(--tint)}
.ac-mode b{display:block;font-size:15px}
.ac-mode p{margin:6px 0 0;color:var(--muted);font-size:13.5px;line-height:1.55}
.ac-dep{margin-top:8px!important;font-size:12px!important}

/* ---- ταυτοποίηση (Customer Area) -------------------------- */

.ac-identity{margin-top:18px;scroll-margin-top:110px}
.ac-id-form{margin-top:22px}
.ac-id-form .co-fields{margin-bottom:22px}
.ac-id-form .pill{width:auto}

/* ---- FAQ VERIFY σημειώσεις -------------------------------- */

.faq-verify{
  margin:0!important;
  padding:0 clamp(20px,2vw,28px) 22px!important;
  color:var(--muted)!important;
  font-size:12.5px!important;
  line-height:1.6!important;
}
.co-verify{grid-column:1/-1;margin:0;color:var(--muted);font-size:12.5px}
.st-note-secure{background:var(--tint)}
.st-secure-cta{margin-top:16px!important}

@media (max-width:980px){
  .cf-grid{grid-template-columns:1fr;gap:30px}
  .cf-intro{position:static}
}

@media (max-width:680px){
  .cf-fields{grid-template-columns:1fr;gap:20px}
  .cf-form{padding:22px 18px;border-radius:22px}
  .co-secure{padding:16px}
  .ac-id-form .pill{width:100%;justify-content:center}
}

/* ---- μισθωτήριο: ασφαλής προβολή ------------------------- */

.ac-lease{margin-top:18px}
.ac-doc{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-top:22px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--paper-2);
}
.ac-doc-file{display:flex;align-items:center;gap:15px;min-width:0}
.ac-doc-icon{
  display:grid;
  place-items:center;
  width:46px;height:46px;
  flex:0 0 auto;
  border-radius:13px;
  background:#fff;
  color:var(--navy);
  box-shadow:var(--lift);
}
.ac-doc-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ac-doc-file b{display:block;font-size:15.5px}
.ac-doc-file p{margin:3px 0 0;color:var(--muted);font-size:13px}
.ac-doc-actions{display:flex;gap:10px;flex-wrap:wrap}
.ac-doc-actions .pill{min-height:44px;padding:10px 20px;font-size:14px}
.ac-doc-actions .pill i{width:24px;height:24px;font-size:12px}
.ac-doc-note{margin:16px 0 0;color:var(--muted);font-size:13px;line-height:1.55}

@media (max-width:680px){
  .ac-doc{flex-direction:column;align-items:stretch;gap:16px}
  .ac-doc-actions .pill{flex:1;justify-content:center}
}

/* ---- header: τηλέφωνο δίπλα στο CTA ---------------------- */

.nav-phone{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  font-size:14px;
  white-space:nowrap;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.nav-phone svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--blue)}
.nav-phone b{font-weight:600;letter-spacing:.01em}
.nav-phone:hover{border-color:var(--navy);background:#fff}

/* ---- hero: badge εμπιστοσύνης αντί για γυμνό kicker ------ */

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 auto;
  padding:9px 18px 9px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  box-shadow:var(--lift);
  font-size:14px;
  color:#3f4557;
}
.hero-badge b{font-weight:700;color:var(--ink)}
.hero-badge-icon{
  display:grid;
  place-items:center;
  width:24px;height:24px;
  flex:0 0 auto;
  border-radius:50%;
  background:rgba(22,133,99,.12);
  color:var(--success);
}
.hero-badge-icon svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- hero: η τιμή ανεβαίνει πάνω από τα κουμπιά ---------- */

.hero-price em{
  position:relative;
  font-style:normal;
  white-space:nowrap;
}
.hero-price em::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:.04em;
  height:.26em;
  border-radius:3px;
  background:rgba(104,121,244,.28);
  z-index:-1;
}

.nav-phone{display:none}

/* σε στενά desktop ο λογαριασμός κρατά μόνο το εικονίδιο και το spacing μαζεύεται */
@media (max-width:1180px){
  .primary-nav{gap:clamp(6px,0.9vw,12px);font-size:13.5px}
  .nav-main-links{gap:clamp(6px,0.9vw,12px)}
  .nav-account{font-size:0;gap:0;padding:6px!important;flex:0 0 auto}
  .nav-account-icon{width:28px;height:28px}
  .site-header .pill{padding:6px 10px 6px 14px;min-height:38px;font-size:13px}
  .site-header .pill i{width:22px;height:22px;font-size:11px}
}
@media (max-width:680px){
  .hero-badge{font-size:13px;padding:8px 14px 8px 8px}
}

/* η τιμή είναι πλέον πάνω από τα κουμπιά, άρα ανεβαίνει σε βάρος */
.hero-price b{font-size:19px;font-weight:700;color:var(--ink)}
.hero-price em{font-size:26px;font-weight:700;letter-spacing:-.02em}
.hero-statement .hero-actions{margin-top:22px}

/* ---- text reveal: λέξη-λέξη fade + blur ------------------- */

.tr-word{display:inline-block;white-space:pre}
.js .tr-ready .tr-word{
  opacity:0;
  filter:blur(12px);
  transform:translateY(20px);
}
.js .tr-ready.tr-in .tr-word{
  opacity:1;
  filter:blur(0);
  transform:none;
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--i) * .055s);
}

@media (prefers-reduced-motion:reduce){
  .js .tr-ready .tr-word{opacity:1;filter:none;transform:none;transition:none}
}