/* Timologio marketing site — shared styles.
   Brand: navy #263757 + royal gold #D4A847. Gold is accent only on light
   surfaces; gold text is used only on navy.
   No external requests anywhere: no webfonts, no analytics scripts, no
   third-party assets. That keeps the site fast, private, and free of any
   cookie-consent obligation. Do not add a CDN font or a tracker without
   revisiting that. */

:root {
  --navy: #263757;
  --navy-dark: #1B2840;
  --gold: #D4A847;
  --gold-dark: #B98F32;
  --ink: #16202F;
  --grey: #5A6579;
  --line: #E2E6EE;
  --paper: #FFFFFF;
  --soft: #F6F8FB;
  --ok: #2F6F4E;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  --wrap: 68rem;
  --radius: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 46rem; }

a { color: var(--navy); text-underline-offset: 2px; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0; }

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

.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}
.brand {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -0.02em;
  padding: 0.45rem 0;
}
.brand span { color: var(--gold-dark); }
.site-nav { display: flex; align-items: center; gap: 1.35rem; }
/* :not(.btn) matters. Without it these two rules outrank .btn-primary on
   specificity (0,1,1 beats 0,1,0) and repaint the button label grey, then navy
   on hover, which is invisible against the navy button. Keep the guard on any
   new `.site-nav a` rule. */
/* Padding not height, so the 44px hit area grows without shifting the baseline.
   Applied at every width on purpose: tablets and touch laptops are as
   finger-driven as phones, and a media query cannot detect that. */
.site-nav a:not(.btn) {
  color: var(--grey); text-decoration: none; font-size: 0.95rem; font-weight: 550;
  padding: 0.72rem 0.2rem;
}
.site-nav a:not(.btn):hover { color: var(--navy); }

.btn {
  display: inline-block;
  border-radius: 8px;
  padding: 0.7rem 1.25rem;
  font-weight: 700;
  font-size: 0.97rem;
  text-decoration: none;
  border: 1px solid transparent;
}
/* Gold on navy is the one context the brand allows gold text in. 5.4:1 against
   --navy, so it clears WCAG AA for the label size used here. */
.btn-primary { background: var(--navy); color: var(--gold); }
.btn-primary:hover { background: var(--navy-dark); color: var(--gold); }
.btn-ghost { border-color: var(--line); color: var(--navy); background: var(--paper); }
.btn-ghost:hover { border-color: var(--navy); }
.btn-gold { background: var(--gold); color: var(--navy-dark); }
.btn-gold:hover { background: var(--gold-dark); color: #FFF; }

/* Anchor jumps have to clear the sticky header, or the heading you tapped
   toward ends up hidden behind it. Worst on a phone, where the header is a
   bigger share of the screen. */
[id] { scroll-margin-top: 5.5rem; }

/* ---------- mobile ----------
   Most traffic is expected from phones, so these are corrections measured at
   375x812 rather than guesses: every standalone link was under the 44px
   minimum tap height, and the sticky header was taking 69px of an 812px
   screen. */
@media (max-width: 640px) {
  .site-nav a.nav-hide { display: none; }

  .site-head .wrap { min-height: 3.5rem; }
  .site-nav { gap: 0.9rem; }
  .btn { padding: 0.78rem 1.05rem; }

  .hero { padding: 2.75rem 0 3rem; }
  section { padding: 3rem 0; }

  .site-foot { padding: 1.75rem 0; }
  .site-foot .wrap { gap: 0.5rem 2rem; }
}

/* ---------- small phones ----------
   Measured: at 320px the header row (brand + Τιμές + the install button)
   overflowed the viewport by 5px, and the roomier tap targets above made it
   worse. The header row does not wrap, so an overflow here scrolls the whole
   page sideways. Reclaim the space rather than dropping the pricing link,
   which is too useful to hide. */
@media (max-width: 380px) {
  .wrap { padding: 0 1rem; }
  /* the smaller face shrinks the line box too, so give the padding back or the
     brand drops under the 44px tap minimum */
  .brand { font-size: 1.1rem; padding: 0.55rem 0; }
  .site-nav { gap: 0.55rem; }
  .btn { padding: 0.78rem 0.85rem; font-size: 0.92rem; }
}

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

.hero { background: var(--navy); color: #EDF1F8; padding: 4.5rem 0 4rem; }
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.hero .eyebrow i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); display: inline-block;
}
.hero h1 { color: #FFF; max-width: 30ch; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero .lede {
  margin-top: 1.25rem;
  font-size: 1.12rem;
  color: #C6D0E2;
  max-width: 56ch;
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 920px) {
  .hero { padding: 5rem 0 4.5rem; }
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; }
}

/* ---------- product mockup ----------
   Ported from the demo store, which has been carrying it since launch. Pure
   CSS and text, no image, so it costs no external request and stays crisp at
   any size. The lookup values are the REAL ones for test ΑΦΜ 094019245
   (ΟΡΓΑΝΙΣΜΟΣ ΤΗΛΕΠΙΚΟΙΝΩΝΙΩΝ ΤΗΣ ΕΛΛΑΔΟΣ, ΚΕΦΟΔΕ ΑΤΤΙΚΗΣ). Never substitute
   invented ones: a merchant can type that ΑΦΜ into the demo and compare. */

.mock {
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(2, 8, 23, 0.45);
  padding: 0 0 1.1rem;
  max-width: 26rem;
  margin: 0 auto;
  text-align: left;
  font-size: 0.94rem;
}
.mock-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--grey);
  font-size: 0.82rem;
  font-weight: 650;
}
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mock-bar i:nth-child(1) { background: #FCA5A5; }
.mock-bar i:nth-child(2) { background: #FCD34D; }
.mock-bar i:nth-child(3) { background: #86EFAC; }
.mock-bar span { margin-left: 0.35rem; }

.mock-body { padding: 1rem 1.15rem 0; }
.mock-check { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; margin-bottom: 0.9rem; }
.mock-check .box {
  width: 1.3rem; height: 1.3rem; border-radius: 6px;
  background: var(--navy); color: #FFF;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800;
}
.mock-label { font-size: 0.76rem; font-weight: 650; color: var(--grey); margin: 0.65rem 0 0.25rem; }
.mock-input {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--ok); border-radius: 10px;
  padding: 0.62rem 0.75rem; font-weight: 650; letter-spacing: 1px;
}
.mock-input .valid { color: var(--ok); font-size: 0.78rem; font-weight: 750; letter-spacing: 0; }
.mock-row {
  display: flex; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.84rem;
}
.mock-row:last-child { border-bottom: none; }
.mock-row b { color: var(--grey); font-weight: 650; flex: none; }
.mock-row span { text-align: right; font-weight: 650; }
.mock-row .mark { font-family: var(--mono); letter-spacing: 0.5px; }
.mock-tag {
  margin: 0.8rem 1.15rem 0;
  background: #ECFDF5; color: #065F46;
  border-radius: 10px; padding: 0.55rem 0.75rem;
  font-size: 0.79rem; font-weight: 650; text-align: center;
}

/* ---------- trust band ---------- */

.trust {
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
}
.trust .wrap { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; justify-content: center; }
.trust span {
  font-size: 0.88rem;
  color: var(--grey);
  font-weight: 550;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.trust span::before {
  content: "";
  width: 1rem; height: 1rem;
  flex: none;
  background: var(--ok);
  border-radius: 50%;
  clip-path: polygon(14% 46%, 40% 70%, 86% 22%, 94% 32%, 42% 86%, 6% 54%);
}

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

section { padding: 4.25rem 0; }
section + section { border-top: 1px solid var(--line); }
section.tinted { background: var(--soft); }

.kicker {
  display: block;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.6rem;
}
.sec-lede { margin-top: 0.9rem; color: var(--grey); font-size: 1.05rem; max-width: 60ch; }

/* ---------- value props ---------- */

.props { display: grid; gap: 1.1rem; margin-top: 2.25rem; }
@media (min-width: 720px) { .props { grid-template-columns: repeat(2, 1fr); } }

.prop {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.prop.wide { grid-column: 1 / -1; }
.prop.flag { border-color: var(--gold); background: #FDFAF2; }
.prop p { color: var(--grey); font-size: 0.98rem; }
.prop .tier {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
}

/* ---------- steps ---------- */

.steps { display: grid; gap: 1.4rem; margin-top: 2.25rem; counter-reset: s; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: s; }
.step::before {
  content: counter(s);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-weight: 800;
  font-family: var(--mono);
  margin-bottom: 0.85rem;
}
.step p { color: var(--grey); font-size: 0.97rem; margin-top: 0.4rem; }

/* ---------- deadline ---------- */

.deadline {
  background: var(--navy);
  color: #EDF1F8;
  border-radius: var(--radius);
  padding: 2.25rem;
  margin-top: 2rem;
}
.deadline h3 { color: var(--gold); font-size: 1.3rem; }
.deadline p { color: #C6D0E2; margin-top: 0.8rem; max-width: 62ch; }
.deadline strong { color: #FFF; }

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

.plans { display: grid; gap: 1.1rem; margin-top: 2.25rem; align-items: start; }
@media (min-width: 800px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  background: var(--paper);
  position: relative;
}
.plan.pop { border-color: var(--navy); border-width: 2px; }
.plan .badge {
  position: absolute;
  top: -0.72rem; left: 1.6rem;
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.24rem 0.6rem;
  border-radius: 4px;
}
.plan .price {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.plan .price small { font-size: 0.92rem; font-weight: 600; color: var(--grey); letter-spacing: 0; }
.plan .yearly { font-size: 0.88rem; color: var(--grey); margin-top: 0.2rem; }
.plan .trial {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ok);
  margin-top: 0.75rem;
}
.plan ul { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.plan li { font-size: 0.95rem; color: var(--grey); padding-left: 1.5rem; position: relative; }
.plan li::before {
  content: "";
  position: absolute; left: 0; top: 0.5rem;
  width: 0.9rem; height: 0.9rem;
  background: var(--gold);
  border-radius: 50%;
  clip-path: polygon(14% 46%, 40% 70%, 86% 22%, 94% 32%, 42% 86%, 6% 54%);
}
.plan li.strong { color: var(--ink); font-weight: 650; }

.disclosure {
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  background: var(--soft);
  padding: 1.25rem 1.4rem;
  font-size: 0.94rem;
  color: var(--grey);
}
.disclosure strong { color: var(--ink); }

/* ---------- faq ---------- */

.faq { margin-top: 2rem; display: grid; gap: 0.6rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 0 1.25rem;
}
.faq summary {
  cursor: pointer;
  font-weight: 650;
  padding: 1rem 0;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--gold-dark);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { color: var(--grey); font-size: 0.97rem; padding: 0 0 1.15rem; max-width: 68ch; }

/* ---------- guide (setup page) ---------- */

.guide { margin-top: 2.25rem; display: grid; gap: 1.6rem; counter-reset: g; }
.guide-step {
  counter-increment: g;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem 1.5rem 4.4rem;
  position: relative;
  background: var(--paper);
}
.guide-step::before {
  content: counter(g);
  position: absolute;
  left: 1.4rem; top: 1.45rem;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--navy);
  font-family: var(--mono);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.guide-step p { color: var(--grey); font-size: 0.97rem; margin-top: 0.4rem; }
.guide-step .aside {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: var(--grey);
  border-left: 3px solid var(--gold);
  padding-left: 0.9rem;
}

/* ---------- cta ---------- */

.cta { background: var(--navy); color: #EDF1F8; text-align: center; }
.cta h2 { color: #FFF; }
.cta p { color: #C6D0E2; margin: 1rem auto 0; max-width: 48ch; }
.cta .hero-btns { justify-content: center; }

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

.site-foot {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0;
  font-size: 0.9rem;
  color: var(--grey);
  background: var(--soft);
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.site-foot a { color: var(--grey); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 1.35rem; }
.foot-links a { padding: 0.72rem 0; display: inline-block; }