/* ============================================================
   Pin7 Diagnostics — LIGHT THEME (variant B)
   Laetakse PÄRAST style.css-i. style.css jääb alles (tume teema),
   see kiht vahetab ära värvitokenid ja need kohad, kus tume värv
   oli kõvasti sisse kirjutatud.
   Eemaldamiseks piisab ühest <link>-reast lehtedel.
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --panel: #ffffff;
  --card: #ffffff;
  --card-hi: #f8fafc;
  --line: rgba(16, 20, 28, 0.09);
  --line-strong: rgba(16, 20, 28, 0.16);
  --text: #10141c;
  --muted: #5b6675;
  --dim: #8a94a3;
  --amber: #e08a00;          /* hoiatus-toon (jääb kollaseks, ka valgel taustal) */
  --amber-2: #c96f00;
  --amber-ink: #fffaf0;
  --green: #0f9d58;          /* B aktsent: diagnoos OK = roheline */
  --red: #d92d3c;
  --cyan: #0b6f86;
  --grad: linear-gradient(135deg, #10141c, #2b323d);   /* CTA / astmenumbrid = tint-must */
  --shadow-card: 0 10px 30px rgba(16, 20, 28, 0.08);
  --glow-amber: 0 12px 28px rgba(16, 20, 28, 0.20);
}

/* ---------- taust ja üldilme ---------- */

body { background: var(--bg); color: var(--text); }

.grid-lines {
  background-image:
    linear-gradient(rgba(16, 20, 28, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 20, 28, 0.045) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 30%, transparent 78%);
}
.ambience .blob { opacity: 0.08; }
.ambience .blob--amber { background: #ffcf7a; }
.ambience .blob--cyan { background: #9ad6e8; opacity: 0.06; }

.section--soft { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); }

/* ---------- aktsent: roheline (mitte amber-gradient) ---------- */

.eyebrow { color: var(--green); }
.eyebrow::before { background: var(--green); }

.hero h1 .accent,
.price .amount,
.price-row .amount {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--text);
  -webkit-text-fill-color: currentColor;
}
.hero h1 .accent { color: var(--green); }

.prose a,
.credit-link,
.faq-item .faq-body a,
.iban-opt a,
.cs-note a,
.dl-card .note-box a,
.pc-foot a,
.product__attrib a:hover,
.shop-crumb a:hover,
.footer ul a:hover { color: var(--green); }

.prose a,
.credit-link { text-decoration-color: rgba(15, 157, 88, 0.4); }
.credit-link:hover,
.prose a:hover { color: #0b7a45; }
.footer__bottom a.credit-link { color: var(--muted); text-decoration-color: rgba(93, 102, 117, 0.4); }
.footer__bottom a.credit-link:hover { color: var(--green); }
.prose li::marker { color: var(--green); }

/* ---------- nupud ---------- */

.btn-primary { background: var(--grad); color: #ffffff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16, 20, 28, 0.26); }

.btn-ghost {
  background: #ffffff;
  border-color: #d7dde6;
  color: var(--text);
}
.btn-ghost:hover { border-color: #b6bfcc; background: #f8fafc; }

/* ---------- päis ---------- */

.nav {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(16, 20, 28, 0.02);
}
.nav--scrolled { box-shadow: 0 8px 24px rgba(16, 20, 28, 0.10); }

.nav__links a { color: var(--muted); }
.nav__links a:hover { color: var(--text); }
/* mobiilimenüü ostunupp: .nav__links a (0,1,1) lõi üle .btn-primary (0,1,0)
   ja jättis tumedal taustal halli teksti — nii vanas kui uues teemas */
.nav__links .btn-primary { color: #ffffff; }

.lang-switch { background: #f1f5f9; border-color: var(--line-strong); }
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active { background: #10141c; color: #ffffff; }

/* ---------- hero: B paigutus (keskele, telefonid reas) ---------- */

.hero__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
  max-width: 960px;
  text-align: center;
}
.hero__copy { display: flex; flex-direction: column; align-items: center; }
.hero h1 { max-width: 900px; }
.hero .lead { max-width: 660px; }
.hero__cta { justify-content: center; }
.hero__trust { justify-content: center; }
.hero .price-chip { color: #ffffff; background: var(--green); box-shadow: 0 6px 18px rgba(15, 157, 88, 0.28); }

.hero__visual { display: flex; flex-direction: column; align-items: center; }

.hero-stack {
  position: static;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 22px;
  padding: 6px 0 0;
}
.hero-stack__phone,
.hero-stack__phone--front,
.hero-stack__phone--back {
  position: static;
  width: min(34%, 250px);
  margin: 0;
  transform: none;
  opacity: 1;
  border-radius: 28px;
  border-width: 7px;
  border-color: #10141c;
  background: #05070c;
}
.hero-stack__phone::after { background: none; }

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.hero__visual .hero-chip {
  display: flex;
  position: static;
  inset: auto;
  z-index: auto;
  animation: none;
  background: #ffffff;
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 26px rgba(16, 20, 28, 0.07);
}
/* mobiili-varjund oli mõeldud absoluutse märgise jaoks — nüüd on pill voolus */
.hero__visual .hero-chip.hero-chip--fallback { display: none; }

/* ---------- hero visuaali tumedad detailid ---------- */

.window-frame {
  background: #ffffff;
  border-color: var(--line-strong);
  box-shadow: 0 26px 60px rgba(16, 20, 28, 0.12);
}
.window-frame__bar { background: #f8fafc; border-bottom: 1px solid var(--line); }
.window-frame__bar i { background: #cbd5e1; }
.window-frame__glow { background: none; }

/* ---------- marquee ---------- */

.marquee { background: #f8fafc; border-color: var(--line); }
.marquee__group > * svg { color: var(--green); }

/* ---------- kaardid ja sektsioonid ---------- */

.feature-card { background: #ffffff; border-color: var(--line); box-shadow: var(--shadow-card); }
.feature-card:hover { border-color: rgba(15, 157, 88, 0.38); background: #ffffff; box-shadow: 0 18px 40px rgba(16, 20, 28, 0.10); }
.feature-card::after { background: radial-gradient(circle, rgba(15, 157, 88, 0.10), transparent 70%); }
.feature-card .f-ic {
  background: linear-gradient(135deg, rgba(15, 157, 88, 0.12), rgba(15, 157, 88, 0.03));
  border-color: rgba(15, 157, 88, 0.24);
  color: var(--green);
}
.feature-card .tag { color: #0b7a45; background: rgba(15, 157, 88, 0.10); border-color: rgba(15, 157, 88, 0.24); }

.shot { background: #ffffff; box-shadow: var(--shadow-card); }
.shot figcaption { border-top: 1px solid var(--line); }
.shot figcaption .dot { background: var(--green); box-shadow: 0 0 0 4px rgba(15, 157, 88, 0.14); }

.shot-phone { background: radial-gradient(circle at 50% 0%, rgba(16, 20, 28, 0.05), transparent 68%); }

/* ---------- ühilduvus ---------- */

.compat-card { background: #ffffff; box-shadow: var(--shadow-card); }
.compat-card h3 svg { color: var(--green); }
.chip { background: #f1f5f9; border-color: var(--line); color: #334155; }
.chip small { color: var(--muted); }
.chip--k { border-color: rgba(15, 157, 88, 0.34); }
.chip--k::after { background: rgba(15, 157, 88, 0.14); color: var(--green); }
.chip--can { border-color: rgba(224, 138, 0, 0.42); }
.chip--can::after { background: rgba(224, 138, 0, 0.14); color: #b06d00; }

.check-list li { color: #475569; }
.pc-list li,
.product__list li,
.cmp tbody th { color: #475569; }

/* hoiatuskastid jäävad kollaseks — see on tähendus, mitte bränd */
.note-box {
  background: #fff8ec;
  border-color: rgba(224, 138, 0, 0.34);
  color: #7a5a1a;
}
.note-box svg { color: var(--amber); }
.cs-note { border-color: rgba(224, 138, 0, 0.5); background: #fff8ec; }
.cs-badge {
  color: #241500;
  background: linear-gradient(135deg, #ffb020, #ff7a00);
  box-shadow: 0 4px 14px rgba(255, 136, 0, 0.28);
}

/* ---------- sammud ja hinnad ---------- */

.step { background: #ffffff; box-shadow: var(--shadow-card); }
.step .step-num { background: var(--grad); color: #ffffff; box-shadow: 0 10px 24px rgba(16, 20, 28, 0.20); }
.step code,
.faq-item .faq-body code,
.dl-steps code {
  background: #f1f5f9;
  border: 1px solid var(--line);
  color: var(--cyan);
}

.pricing-card {
  background: #ffffff;
  border-color: rgba(15, 157, 88, 0.30);
  box-shadow: 0 30px 70px rgba(16, 20, 28, 0.12);
}
.pricing-card::before { background: var(--green); }
.pricing-card .pc-top p { color: var(--muted); }

.iban-opt { background: #f8fafc; border-color: var(--line); }
.iban-ic { background: #f1f5f9; border-color: var(--line); }

.dl-card {
  background: #ffffff;
  border-color: var(--line-strong);
  box-shadow: 0 30px 70px rgba(16, 20, 28, 0.12);
}
.dl-card::before { background: var(--green); }
.dl-lock { background: rgba(224, 138, 0, 0.10); border-color: rgba(224, 138, 0, 0.32); }
.dl-ok { background: rgba(15, 157, 88, 0.10); border-color: rgba(15, 157, 88, 0.32); }
.dl-input {
  background: #ffffff;
  border-color: #d7dde6;
  color: var(--text);
}
.dl-input::placeholder { color: var(--dim); }
.dl-input:focus { border-color: rgba(15, 157, 88, 0.65); box-shadow: 0 0 0 3px rgba(15, 157, 88, 0.14); }
.dl-alt { background: #f8fafc; border-color: var(--line); }

/* ---------- KKK ---------- */

.faq-item { background: #ffffff; box-shadow: 0 1px 2px rgba(16, 20, 28, 0.04); }
.faq-item[open] { border-color: rgba(15, 157, 88, 0.34); }
.faq-item[open] summary .plus {
  background: rgba(15, 157, 88, 0.12);
  border-color: rgba(15, 157, 88, 0.38);
  color: var(--green);
}

/* ---------- platvormikaardid ---------- */

.plat-card { background: #ffffff; box-shadow: var(--shadow-card); }
.plat-card--primary {
  border-color: rgba(15, 157, 88, 0.32);
  background: linear-gradient(180deg, rgba(15, 157, 88, 0.05), rgba(15, 157, 88, 0) 42%), #ffffff;
}
.plat-badge { background: rgba(15, 157, 88, 0.12); color: #0b7a45; border-color: rgba(15, 157, 88, 0.30); }
.plat-badge--ghost { background: #f1f5f9; color: var(--muted); border-color: var(--line-strong); }
.plat-ic { background: rgba(15, 157, 88, 0.10); color: var(--green); border-color: rgba(15, 157, 88, 0.24); }
.plat-card--alt .plat-ic { background: rgba(11, 111, 134, 0.10); color: var(--cyan); border-color: rgba(11, 111, 134, 0.24); }
.plat-fine { background: #f8fafc; border-color: rgba(16, 20, 28, 0.16); color: var(--muted); }
.plat-fine svg { color: var(--amber); }

/* ---------- võrdlustabel ---------- */

.cmp { background: #f8fafc; border-color: var(--line); }
.cmp-legend { background: #f1f5f9; color: var(--muted); }
.cmp .y { color: var(--green); }
.cmp .n { color: #b06d00; }

/* ---------- kauplus (kaabel) ---------- */

.product {
  background: #ffffff;
  border-color: var(--line-strong);
  box-shadow: 0 24px 60px rgba(16, 20, 28, 0.10);
}
.product__tag { color: var(--green); }
.product__media img { background: #ffffff; }
.shop-crumb a { color: var(--muted); }

/* ---------- juriidilised lehed ---------- */

.legal-note {
  background: #f8fafc;
  border-left-color: rgba(15, 157, 88, 0.5);
  color: var(--muted) !important;
}

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

.footer { border-top: 1px solid var(--line); background: var(--bg-soft); }
.footer h5 { color: var(--text); }

/* ---------- toast ---------- */

.toast {
  background: #ffffff;
  border-color: rgba(15, 157, 88, 0.4);
  box-shadow: 0 24px 60px rgba(16, 20, 28, 0.18);
}
.toast-pay { border-color: rgba(224, 138, 0, 0.45); background: #fff8ec; }

/* ---------- kitsas ekraan ---------- */

/* nav kollapseerub 1060px-st — sama lävi nagu style.css-is, muidu jääks
   hele teema tumeda rippmenüüga vahemikus 761–1060px */
@media (max-width: 1060px) {
  .nav__links.open { background: #ffffff; box-shadow: 0 18px 40px rgba(16, 20, 28, 0.12); }
}

@media (max-width: 760px) {
  .hero__grid { gap: 34px; }
  .hero-stack { gap: 14px; }
  .hero-stack__phone,
  .hero-stack__phone--front,
  .hero-stack__phone--back { width: min(44%, 180px); border-radius: 24px; }
  .hero-pills { flex-direction: column; align-items: center; margin-top: 20px; }
  .hero__visual .hero-chip { width: 100%; max-width: 420px; }
  .hero-chip > span:not(.chip-ic) { max-width: none; }
  /* mobiilis ei ole mõtet kahte telefoni kõrvuti suruda */
  .hero-stack__phone--back { display: none; }
  .hero-stack__phone--front { width: min(62%, 250px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-chip { animation: none; }
}