/* Variant „greenstone.sk“ — prepisuje styles.css: font, farby, tlačidlá a pozadie podľa greenstone.sk v5.
   Načíta sa iba v buildе dist-brand (build-brand.py). */

@font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/bricolage-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/bricolage-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('fonts/bricolage-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --font: 'Bricolage Grotesque', Inter, 'Helvetica Neue', Arial, sans-serif;
  --background: #0a0a0b;
  --foreground: #ecf4ed;
  --lime: #b9ff56;
  --green: #36d375;
  --accent-on-light: #17663c;
  --ink: #07100b;
  --text-strong: rgba(236,244,237,.88);
  --text-secondary: #93a196;
  --secondary-foreground: #93a196;
  --border: rgba(236,244,237,.16);
  --border-subtle: rgba(236,244,237,.09);
}

::selection { background: var(--lime); color: var(--ink); }
html, body { background: var(--background); }
body { font-family: var(--font); color: var(--foreground); }
.fld input, .fld select, .fld textarea, .tag { font-family: var(--font); }

/* typografia: greenstone.sk má nadpisy v 500 s tesnejším prestrkaním, Bricolage nemá 700 */
.display { font-weight: 500; letter-spacing: -.045em; line-height: 1.02; }
.h-l { font-weight: 500; letter-spacing: -.035em; line-height: 1.1; }
.h-m, .h-s, .num, .person b { font-weight: 600; letter-spacing: -.03em; }
.h-xs, .qa-q, .note .h-xs { font-weight: 600; letter-spacing: -.01em; }

/* ---------- tlačidlá ako na greenstone.sk: limetková pilulka + šípka ---------- */
.btn {
  border: 0; background: var(--lime); color: #0a110c;
  font-weight: 600; font-size: 14px; letter-spacing: -.01em;
  padding: 0 26px; gap: 10px;
  box-shadow: 0 0 0 rgba(185,255,86,0);
  transition: background-color .25s, transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.btn i { font-style: normal; transition: transform .3s var(--ease-out); }
.btn::after { background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); }
.btn:hover { background: #cdff7d; box-shadow: 0 8px 32px rgba(185,255,86,.28); }
.btn:hover i { transform: translate(2px,-2px); }
.btn-m, .header .header-cta { font-size: 14px; }

/* chip / okrúhle tlačidlá */
.chip, .round { border-color: var(--border); }

/* ---------- akcenty ---------- */
.step-hl { background: rgba(185,255,86,.08); border-color: var(--lime); box-shadow: 0 14px 30px -10px rgba(185,255,86,.22); }
.flow-group li.step-hl { background: rgba(185,255,86,.08); }
.mark { background: var(--lime); color: var(--ink); font-weight: 600; }
.forbes { border-width: 2px; border-color: var(--lime); }
.forbes:hover { box-shadow: 0 0 40px rgba(185,255,86,.2); }
.case-link { border-left-color: var(--green); }
.cmp-us { background: #0d0f0e; box-shadow: 0 0 0 1px var(--border-subtle), 0 24px 60px rgba(0,0,0,.45); }
.qa-ico { background: var(--foreground); }
.qa.is-open .qa-ico { background: var(--lime); }

/* ---------- pozadie: jeden tyrkysový lúč + šum namiesto pásov po sekciách ---------- */
/* sekcie sú priehľadné a lúč môže pretiecť do susednej sekcie → žiadne ostré švy; vodorovne sa orezáva */
.bg-teal, .bg-teal-alt, .hero.bg-teal, .bg-dark { background: transparent; overflow: visible; overflow-x: clip; }
/* obsah leží nad vrstvou šumu (šum je len pozadie, nie overlay cez fotky a karty) */
main, .footer { position: relative; z-index: 1; background: transparent; }
.bg-teal > *, .bg-teal-alt > * { position: relative; z-index: 1; }
.bg-teal::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: -25%; top: 18%; width: 150%; height: 55%;
  transform: rotate(-27deg); filter: blur(90px);
  background: linear-gradient(90deg, transparent 0%, rgba(30,70,95,.10) 14%, rgba(18,118,124,.22) 38%, rgba(20,184,166,.32) 62%, rgba(64,214,200,.28) 82%, rgba(14,78,88,.12) 94%, transparent 100%);
  animation: beam-drift 14s ease-in-out infinite alternate;
  animation-play-state: paused;
}
/* lúč sa hýbe len v sekcii, ktorá je na obrazovke (trieda z main.js) */
.beam-on::before { animation-play-state: running; }
.bg-teal-alt::before { transform: rotate(18deg); top: 22%; opacity: .7; animation-name: beam-drift-alt; }
.faq.bg-teal::before { opacity: .6; top: 30%; }
/* hero: silnejší lúč ako na greenstone.sk + studený nádych vľavo hore */
.hero.bg-teal::before { left: -30%; top: 34%; width: 165%; height: 62%; opacity: 1; }
.hero.bg-teal::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 45% at 8% -6%, rgba(24,74,104,.22), transparent 70%);
}
@keyframes beam-drift { to { transform: rotate(-24deg) translate(2%, -3%); } }
@keyframes beam-drift-alt { to { transform: rotate(21deg) translate(-2%, 3%); } }

/* jemný šum cez celú stránku — skutočný <div> na začiatku body, presne ako greenstone.sk
   (iOS Safari potom farbí pás pri stavovom riadku farbou stránky, nie podľa priesvitnej lišty) */
.noise {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045;
  background: url('assets/noise.png') 0 0 / 128px 128px; /* predrenderovaný šum — lacnejší než živý feTurbulence */
}

/* glass karty na čiernom potrebujú o chlp viac svetla */
.glass, .fit-card, .box, .step, .qa, .tile { background: rgba(236,244,237,.035); }
.fit-card.is-open { background: #0d0f0e; border-color: var(--border-subtle); }
.price-card { background: rgba(236,244,237,.04); box-shadow: 0 -84px 164px rgba(10,10,11,.9); }

@media (max-width: 900px) {
  .bg-teal::before { filter: blur(60px); height: 40%; top: 25%; }
  .hero.bg-teal::before { top: 45%; }
}
@media (prefers-reduced-motion: reduce) { .bg-teal::before { animation: none; } }

/* pätička presne ako greenstone.sk: limetkové nadpisy stĺpcov (bez verzálok), biele logo, tlmené odkazy */
.footer { border-top-color: rgba(255,255,255,.1); }
.foot-col h3 { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--lime); margin-bottom: 12px; }
.foot-col p, .foot-col a { color: rgba(236,244,237,.75); }
.foot-col a:hover, .foot-bottom a:hover { color: var(--lime); }
.foot-brand img { height: 28px; margin: 0 0 18px; filter: brightness(0) invert(1); opacity: .9; }
.foot-tag { color: rgba(236,244,237,.62) !important; }
.foot-bottom { border-top-color: rgba(255,255,255,.07); color: rgba(236,244,237,.62); }
@media (max-width: 900px) {
  .foot-brand img { height: 22px; margin: 0; }
  .foot-col h3 { margin-bottom: 8px; }
}

/* „Greenstone is for you“: zatvorené karty rovnako vysoké (nadpis vždy na 3 riadky),
   otvorená karta rastie sama — ostatné ostávajú v pôvodnej veľkosti */
.fit-grid { align-items: start; }
.fit-card .h-xs { min-height: calc(3 * 1.3em); }
.fit-card .num, .fit-card .h-xs { transition: color .35s, border-color .35s, background .35s; }
.fit-card.is-open .num { color: var(--lime); border-color: rgba(185,255,86,.45); background: rgba(185,255,86,.06); }
.fit-card.is-open .h-xs { color: var(--lime); }

.cmp-card-us { background: #0d0f0e; }
.cmp-card-us .mark { background: var(--lime); color: var(--ink); }
.cmp-card-h img, .cmp-us .c-head img.cmp-logo { filter: brightness(0) invert(1); opacity: .92; }  /* rovnaké biele logo ako na mobile a v pätičke */

.skip { background: var(--lime); color: var(--ink); }

/* ---------- kontakt: tmavá sklenená karta v štýle greenstone.sk (namiesto bielej) ---------- */
.contact-card {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(236,244,237,.05), rgba(236,244,237,.02));
  border: 1px solid var(--border); color: var(--foreground);
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.8);
}
.contact-card::before { /* jemná limetková žiara za formulárom — v rámci karty, bez orezávania (dropdowny môžu pretiecť) */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(55% 75% at 88% 0%, rgba(185,255,86,.10), rgba(20,184,166,.05) 55%, transparent 80%);
}
.contact-copy .h-l { color: var(--foreground); }
.contact-copy .h-l em { color: var(--lime); }
.contact-copy .lead-19 { color: var(--text-strong); }
.checks-l { color: var(--foreground); }
.checks-l li::before { background-image: url('assets/done-circle.svg'); }

.lead-form { position: relative; padding: 32px; margin: -16px -16px -16px 0; border-radius: 16px; background: rgba(10,10,11,.55); border: 1px solid var(--border-subtle); color: var(--foreground); }
.lf-row { color: var(--foreground); }
.lf-note { color: var(--lime); }
.lf-bar { background: rgba(236,244,237,.1); }
.lf-bar i { background: var(--lime); box-shadow: 0 0 12px rgba(185,255,86,.35); }

.fld { border-bottom-color: rgba(236,244,237,.42); }
.fld:hover { background: rgba(236,244,237,.03); }
.fld:focus-within { background: rgba(236,244,237,.045); border-color: var(--lime); }
.fld::after { background: var(--lime); }
.fld input, .fld select, .fld textarea { color: var(--foreground); caret-color: var(--lime); }
.fld-sel select option { color: #0a0a0b; }
.fld-l { color: var(--text-secondary); }
.fld:focus-within .fld-l, .fld.is-filled .fld-l, .fld:has(input:not(:placeholder-shown)) .fld-l, .fld:has(textarea:not(:placeholder-shown)) .fld-l { color: var(--lime); }
.fld-sel::before { background: var(--text-secondary); -webkit-mask: url('assets/icon-chevron-down.svg') center / contain no-repeat; mask: url('assets/icon-chevron-down.svg') center / contain no-repeat; }
.fld-sel:focus-within::before { background: var(--lime); }
.sel-btn { color: var(--foreground); }
.fld-sel.is-open { background: rgba(236,244,237,.06); border-color: var(--lime); }
.fld-sel.is-open .fld-l { color: var(--lime); }
.fld-sel.is-open::after { transform: scaleX(1); }
.fld-sel.is-open::before { background: var(--lime); }
.sel-list { background: #141615; border-color: var(--border); box-shadow: 0 24px 60px -16px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4); scrollbar-width: thin; scrollbar-color: rgba(236,244,237,.2) transparent; }
.sel-list li { color: var(--text-strong); }
.sel-list li.is-active { background: rgba(236,244,237,.07); color: var(--foreground); }
.sel-list li[aria-selected="true"] { color: var(--lime); }
.fld input:-webkit-autofill, .fld textarea:-webkit-autofill { -webkit-text-fill-color: var(--foreground); box-shadow: 0 0 0 100px #121413 inset; transition: background-color 9999s; }
.fld.is-invalid { border-color: #ff8a7a; background: rgba(255,138,122,.06); }
.fld.is-invalid::after { background: #ff8a7a; }
.fld.is-invalid .fld-l, .fld-err { color: #ff9d8f; }
.lf-msg { color: #ff9d8f; }
.lf-msg.ok { color: var(--lime); }
.lf-req { color: var(--text-secondary); }
.lf-back { color: var(--foreground); }
.lf-back img { filter: brightness(0) invert(.92); }
.lf-back:hover { color: var(--lime); }
.lf-done { color: var(--text-strong); }
.lf-done .h-m { color: var(--foreground); }

@media (max-width: 900px) {
  .contact-card::before { display: none; }
  .lead-form { margin: 0; padding: 20px 16px; background: linear-gradient(180deg, rgba(236,244,237,.05), rgba(236,244,237,.02)); border-color: var(--border); }
}
/* bez prázdnej diery medzi poľami a tlačidlom — karta má výšku podľa obsahu */
.contact-card { min-height: 0; align-items: stretch; }
.lf-panes { flex: none; }
.lf-actions { margin-top: auto; }
/* otvorené karty sa natiahnu na výšku najvyššej otvorenej (zatvorené ostávajú v pôvodnej veľkosti), tlačidlo dole */
.fit-card.is-open { align-self: stretch; }
.fit-card.is-open .fit-toggle { margin-top: auto; }

/* fokus v poli bez rámika: 2px limetková čiara + limetkový popisok + jemné podsvietenie stačia a sú dobre viditeľné */
.fld:focus-within::after { height: 2px; }
.fld:focus-within { background: rgba(236,244,237,.06); }

/* demo 2: výhrada pri formulári */
.lf-fine { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
/* trhové landingy: dlhší hero nadpis */
@media (min-width: 901px) { .hero .display-long { font-size: 56px; max-width: 1080px; } }