/* ==========================================================================
   Digijurist 2026 redesign — JAGATUD KOMPONENDID
   ==========================================================================
   Nupud, chip, kaart, animeeritud raam, sektsiooniskelett, nav, jalus,
   skip-link, eelvaate-silt, FAQ, pill-lülitid, reveal-baas ja responsive
   reeglid. Eeldab, et tokens.css on juba laaditud (kasutab ainult sealseid
   custom properties, ei defineeri uusi värve).

   MIKS eraldi failina tokens.css-ist: see fail teab, KUIDAS asjad välja
   näevad (komponendid); tokens.css teab ainult, MIS värvid/mõõdud on
   olemas. Kui homme muutub nupu kõrgus, ei puutu see kokku värvipaletiga.
   ========================================================================== */

/* ==========================================================================
   Nupud
   ========================================================================== */

/* Primary ja secondary jagavad sama "pill" geomeetriat ja liikumist —
   ainult täidis/piirjoon erineb. Quiet on teadlikult eraldi (tekstilink +
   nool), sest tal pole nupu-raami üldse. */
.dj-btn-primary,
.dj-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--dj-radius-m);
  border: 1px solid transparent;
  font-family: var(--dj-font-ui);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dj-dur-fast) var(--dj-ease),
    border-color var(--dj-dur-fast) var(--dj-ease),
    color var(--dj-dur-fast) var(--dj-ease),
    transform var(--dj-dur-fast) var(--dj-ease),
    box-shadow var(--dj-dur-fast) var(--dj-ease);
}

/* Valge nupp tumedal taustal = premium-CTA — tugevaim kontrast lehel. */
.dj-btn-primary {
  background: #fff;
  color: var(--dj-accent-ink);
}
.dj-btn-primary:hover {
  background: #E9EDF1;
  transform: translateY(-1px);
  box-shadow: var(--dj-shadow-m);
}

.dj-btn-secondary {
  background: transparent;
  border-color: var(--dj-hairline-2);
  color: var(--dj-ink);
}
.dj-btn-secondary:hover { background: rgba(255, 255, 255, .06); }

/* Quiet: ainult tekst + nool. Nool on eraldi span, et hoveril liigutada
   ainult teda (mitte kogu teksti) — 3px on speci nõutud "peaaegu
   märkamatu" nihe, mitte suur hüpe nagu vanadel .btn-idel. */
.dj-btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--dj-accent-deep);
  font-family: var(--dj-font-ui);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.dj-btn-quiet__arrow {
  display: inline-block;
  transition: transform var(--dj-dur-fast) var(--dj-ease);
}
.dj-btn-quiet:hover .dj-btn-quiet__arrow { transform: translateX(3px); }

.dj-btn-primary.dj-btn-lg,
.dj-btn-secondary.dj-btn-lg {
  height: 52px;
  padding: 0 30px;
  font-size: 16px;
}

/* Kogu leht on nüüd tume, seega .dj-section--dark (turvalisuse sektsioon)
   kasutab samu nupu-/lingivärve mis põhileht — token-põhiselt, ilma
   eraldi ülekirjutuseta. Vana "tumedal pinnal muutub primary valgeks"
   erisus kadus, sest primary ON juba vaikimisi valge (vt ülal); eraldi
   .dj-section--dark reeglid dubleeriksid seda valet pidi (vt speci nõuet
   kontrollida, et --dark variandid ei dubleeri põhistiili tagurpidi). */

/* ==========================================================================
   Allika-chip (.dj-src)
   ========================================================================== */
.dj-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--dj-accent-wash);
  border: 1px solid color-mix(in srgb, var(--dj-accent) 25%, transparent);
  color: var(--dj-accent-deep);
  font-family: var(--dj-font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  /* Demo-element, mitte navigeeritav link — kui mõni chip on siiski <a>,
     hoiame ta ilma alla-joone hoverita, et mitte segi ajada tavalise
     tekstilingiga. */
  text-decoration: none;
}

/* ==========================================================================
   Kaart (.dj-card)
   ========================================================================== */
.dj-card {
  background: var(--dj-bg-raised);
  border: 1px solid var(--dj-hairline);
  border-radius: var(--dj-radius-l);
  box-shadow: var(--dj-shadow-s);
}
/* Ainult klikitavad kaardid tõusevad hoveril esile — EI transform-hüppeid,
   ainult varju süvenemine (speci nõue: "EI transform-hüppeid kaartidel"). */
.dj-card--clickable { transition: box-shadow var(--dj-dur-fast) var(--dj-ease); }
.dj-card--clickable:hover { box-shadow: var(--dj-shadow-m); }

/* ==========================================================================
   Animeeritud raam (.dj-frame) — ÜKS detailideni viimistletud tunnusdetail.
   Kasuta AINULT hero-demoaknal ja turvadiagrammil (speci nõue), mitte
   kõikjal — muidu kaotab oma erilisuse.
   ========================================================================== */
.dj-frame {
  position: relative;
  border: 1px solid var(--dj-hairline);
  border-radius: var(--dj-radius-l);
  overflow: hidden;
}
/* Aeglaselt "jooksev" accent-joon ülemisel serval: pseudo-element liigub
   linear-gradient'i background-position'i muutes, mask'ita, sest 2px kõrgune
   riba on lihtsam realiseerida positsioneeritud joonena kui kogu-raami
   mask'iga (vähem GPU tööd, sama visuaalne tulemus). Opacity tuleb
   --dj-border-opacity tokenist, mille motion.js seab DJ_MOTION.borderOpacity
   järgi — CSS ja JS loevad sama väärtust. */
.dj-frame::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--dj-accent) 45%,
    transparent 90%);
  background-size: 240% 100%;
  opacity: var(--dj-border-opacity);
  animation: dj-frame-run 6s linear infinite;
  pointer-events: none;
}
@keyframes dj-frame-run {
  from { background-position: 200% 0; }
  to   { background-position: -40% 0; }
}

/* ==========================================================================
   Sektsiooniskelett
   ========================================================================== */
.dj-section {
  padding: clamp(72px, 10vw, 128px) 0;
  background: var(--dj-bg);
}
.dj-section--raised { background: var(--dj-bg-raised); }
.dj-section--dark {
  background: var(--dj-dark-bg);
  color: var(--dj-dark-ink);
}
/* Ülemine hairline AINULT seal, kus eelmine sektsioon ei vaheta tausta —
   taustavahetusel piirjoont vaja ei ole, taustakontrast juba eraldab
   sektsioonid teineteisest (speci nõue). Landing/pricing lisavad selle
   klassi käsitsi sinna, kus kaks järjestikust sektsiooni jagavad tausta. */
.dj-section--hairline { border-top: 1px solid var(--dj-hairline); }
.dj-section--dark.dj-section--hairline { border-top-color: var(--dj-dark-hairline); }

@media (max-width: 860px) {
  .dj-section { padding: 64px 0; }
}

/* ==========================================================================
   Navigatsioon
   ========================================================================== */
.dj-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dj-dur) var(--dj-ease),
    border-color var(--dj-dur) var(--dj-ease);
}
/* motion.js lisab selle klassi pärast 24px kerimist. blurStrength tuleb
   --dj-nav-blur tokenist (JS kirjutab selle DJ_MOTION.blurStrength järgi
   üle), et konfis muudetud väärtus jõuaks kohe CSS-i, ilma et peaks siin
   faili puutuma. */
.dj-nav.is-scrolled {
  background: color-mix(in srgb, var(--dj-bg) 88%, transparent);
  border-bottom-color: var(--dj-hairline);
  backdrop-filter: blur(var(--dj-nav-blur));
  -webkit-backdrop-filter: blur(var(--dj-nav-blur));
}
.dj-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}
.dj-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--dj-ink);
  font-family: var(--dj-font-ui);
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -.01em;
}
/* Sinine "D" jääb äratuntavaks brändimärgiks, aga rafineeritud kujul:
   kärmem radius, ühtlane tinditoon (mitte gradient nagu vanas landingus).
   Sama keel mis primary-nupp: valge pind, tume tindisinine tekst. */
.dj-brand-mark {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  color: var(--dj-accent-ink);
  font-family: var(--dj-font-ui);
  font-weight: 700;
  font-size: 14px;
}
.dj-nav__links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 600;
}
.dj-nav__links a {
  color: var(--dj-ink-2);
  text-decoration: none;
  transition: color var(--dj-dur-fast) var(--dj-ease);
}
.dj-nav__links a:hover { color: var(--dj-ink); }
.dj-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Nav-nuppudel omaette (madalam) kõrgus, sest 46px täiskõrgus koos 68px
   nav-reaga jätaks liiga vähe õhku üla-/alaserva. */
.dj-nav .dj-btn-primary,
.dj-nav .dj-btn-secondary { height: 38px; padding: 0 18px; font-size: 13.5px; }

@media (max-width: 860px) {
  /* Keskmenüü peidus, logo + 2 nuppu jäävad — EI hamburgerit (speci nõue,
     hoiame mobiilinavi lihtsana ilma lisamenüü-riiulita). */
  .dj-nav__links { display: none; }
}

/* ==========================================================================
   Jalus
   ========================================================================== */
.dj-footer {
  padding: 56px 0 40px;
  border-top: 1px solid var(--dj-hairline);
  color: var(--dj-ink-3);
  font-size: 13px;
}
.dj-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 32px;
}
.dj-footer__mission {
  margin-top: 10px;
  font-family: var(--dj-font-mono);
  font-size: 13px;
  color: var(--dj-ink-3);
}
.dj-footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
}
.dj-footer__col h4 {
  margin: 0 0 12px;
  color: var(--dj-ink);
  font-family: var(--dj-font-ui);
  font-size: 13px;
  font-weight: 650;
}
.dj-footer__col a {
  display: block;
  margin: 8px 0;
  color: var(--dj-ink-2);
  text-decoration: none;
  font-size: 13.5px;
}
.dj-footer__col a:hover { color: var(--dj-ink); text-decoration: underline; }
.dj-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--dj-hairline);
  padding-top: 20px;
}

@media (max-width: 860px) {
  .dj-footer__top { gap: 32px; }
  .dj-footer__cols { gap: 32px; }
}

/* ==========================================================================
   Skip-link
   ========================================================================== */
/* Visuaalselt peidus, KUNI klaviatuurikasutaja seda fookusega tabab —
   ekraanilugejale ja Tab-klahviga liikujale on see esimene interaktiivne
   element lehel (speci ligipääsetavuse nõue). */
.dj-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--dj-accent-ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--dj-radius-s);
  font-family: var(--dj-font-ui);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.dj-skip:focus {
  left: 16px;
  top: 16px;
}

/* ==========================================================================
   Eelvaate-silt
   ========================================================================== */
/* Vastupidi hele: kogu leht on tume, seega silt eristub AINULT valge
   pinnaga (paberi-tindivärv tekstiks, mitte lehe enda tume ink, mis siin
   valgel taustal kaoks). */
.dj-preview-badge {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  background: #fff;
  color: var(--dj-paper-ink);
  font-family: var(--dj-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--dj-radius-s);
  box-shadow: var(--dj-shadow-m);
  pointer-events: none;
}

/* ==========================================================================
   FAQ (.dj-faq)
   ========================================================================== */
.dj-faq { max-width: var(--dj-wrap-text); }
.dj-faq details {
  border-bottom: 1px solid var(--dj-hairline);
}
.dj-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  color: var(--dj-ink);
  font-family: var(--dj-font-ui);
  font-weight: 600;
  font-size: 16px;
}
.dj-faq summary::-webkit-details-marker { display: none; }
.dj-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--dj-accent);
  font-size: 20px;
  font-weight: 600;
  transition: transform var(--dj-dur) var(--dj-ease);
}
.dj-faq details[open] summary::after { transform: rotate(45deg); }
/* Grid-rows trikk: paneel on ALATI display:grid (see autori-reegel võidab
   brauseri vaikimisi "details:not([open]) > *:not(summary){display:none}"
   reegli päritolu järgi, ilma !important'ita), nii et suletud olekus 0fr ->
   avatud olekus 1fr saab sujuvalt animeerida — sisu ei "hüppa" display:none
   tõttu ära/tagasi. Sisemine div peidab ülevoolu, kuni rida kasvab. */
.dj-faq details > .dj-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dj-dur) var(--dj-ease);
}
.dj-faq details[open] > .dj-faq__panel { grid-template-rows: 1fr; }
.dj-faq details > .dj-faq__panel > div { overflow: hidden; }
.dj-faq p {
  margin: 0 0 20px;
  color: var(--dj-ink-2);
  font-size: 14px;
  line-height: 1.65;
}

/* ==========================================================================
   Reveal-baas
   ========================================================================== */
/* Ilma .js klassita (motion.js ei käivitunud) on KÕIK kohe nähtav — see
   reegel on olemas AINULT html.js all, seega no-JS on turvaline vaikeolek
   (speci QA-nõue: "reveal-elemendid ei tohi jääda opacity:0 kui JS ei
   käivitu"). Kaugus tuleb --dj-reveal-distance tokenist. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--dj-reveal-distance));
  transition:
    opacity var(--dj-dur-slow) var(--dj-ease),
    transform var(--dj-dur-slow) var(--dj-ease);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* SVG joonte joonistumine ([data-draw]): motion.js seab stroke-dasharray/
   -dashoffset inline'ina (arvutatud tee pikkuse järgi), CSS annab ainult
   ülemineku. */
.js [data-draw] {
  transition: stroke-dashoffset 1s var(--dj-ease);
}

/* ==========================================================================
   Pill-lülitid (.dj-toggle)
   ========================================================================== */
.dj-toggle {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--dj-hairline-2);
  border-radius: 999px;
  background: var(--dj-bg-sunken);
}
/* Liuguv taustapill: motion.js positsioneerib teda transform: translateX +
   width järgi valitud nupu mõõtude alusel. Absolute + z-index:0, et nupud
   jääksid teksti poolest tema peale. */
.dj-toggle__indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 0;
  border-radius: 999px;
  background: #fff;
  transition: transform var(--dj-dur) var(--dj-ease), width var(--dj-dur) var(--dj-ease);
  z-index: 0;
}
.dj-toggle button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  min-height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  font: inherit;
  font-family: var(--dj-font-ui);
  font-size: 13.5px;
  font-weight: 650;
  color: var(--dj-ink-2);
  cursor: pointer;
  transition: color var(--dj-dur-fast) var(--dj-ease);
}
.dj-toggle button[aria-selected="true"] { color: var(--dj-accent-ink); }

/* ==========================================================================
   Ligipääsetavus: liikumine maha
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Osakeste canvas ei anna reduced-motion puhul midagi peale liikumise —
     motion.js ei käivita seda üldse, aga peidame ka CSS-is, kui element
     jäi mingil põhjusel markupisse ilma JS-i sekkumiseta. */
  .dj-particles { display: none !important; }
}

/* ==========================================================================
   Responsive (üldised, komponendipõhised — layout-spetsiifilised reeglid
   elavad landing.css / pricing.css failides)
   ========================================================================== */
@media (max-width: 1120px) {
  .dj-wrap, .dj-wrap-text { padding: 0 24px; }
}

@media (max-width: 860px) {
  .dj-btn-primary.dj-btn-lg,
  .dj-btn-secondary.dj-btn-lg { width: 100%; }
}