:root{
    --bg:#f5f5f5;
    --panel:rgba(12,14,16,.82);
    --panel-2:#ffffff;
    --line:rgba(20,24,30,.13);
    --line-2:rgba(20,24,30,.26);
    --text:#14181e;
    --muted:#4b5560;
    --soft:#7d8792;
    --green:#147b4e;
    --teal:#06799b;
    --gold:#ead9aa;
    --max:1220px;
  }
  *{box-sizing:border-box}
  html{background:var(--bg)}
  body{
    margin:0;
    font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
    color:var(--text);
    /* taust on puhtalt neutraalne hall — ei rohelist ega tirkiisi kuma */
    background:linear-gradient(180deg,#fafafa 0%,#f5f5f5 46%,#f0f0f0 100%);
    background-attachment:fixed;
    -webkit-font-smoothing:auto;
  }
  a{color:inherit;text-decoration:none}
  .wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}

  /* ---------- nav ---------- */
  .nav{
    position:sticky;top:0;z-index:30;
    backdrop-filter:blur(18px);
    background:linear-gradient(180deg,rgba(245,245,245,.94),rgba(245,245,245,.45));
    border-bottom:1px solid rgba(20,24,30,.1);
    box-shadow:0 1.5px 5px rgba(20,24,30,.10);
  }
  .nav-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:74px}
  .brand{font-size:19px;font-weight:800;letter-spacing:-.3px;justify-self:start}
  /* ainult ülemine logo on suurem; footeri Kasv.ai jääb pealkirjadega ühte mõõtu */
  .nav .brand{font-size:24.5px}
  /* ülemise logo ".ai" — roheline gradient, 30% väiksem ja veidi eemal */
  .nav .brand span{
    font-size:.7em;margin-left:2.45px;font-weight:700;
    background:linear-gradient(96deg,var(--green),var(--teal));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .brand span{color:var(--muted);font-weight:600}

  /* v0: "Kasv.ai" tekstlogo asemel päris logo.
     Üleval vasakul samas kohas, kus oli tekst; footeris on logo
     täpselt sama optilise kõrgusega kui senine 19px kiri. */
  .site-logo{display:block;line-height:0;justify-self:start}
  .site-logo img{display:block;width:100%;height:auto;transition:filter .4s ease}
  /* Ülemine logo: kuni 1100 px on 176 px. 1100 → 500 px vahel kahaneb
     sujuvalt (vw-ga, ilma astmeteta) samas tempos: 600 px juures on ta
     40% väiksem (105,6 px) ja kahaneb sealt edasi kuni 91,5 px-ni.
     Alla 500 px enam ei muutu. */
  .nav-logo{width:clamp(91.52px, 14.08vw + 21.12px, 176px)}
  /* Tekstiga võrdne mõõt oli 60 px (K-täht 16 px, senisel 19 px kirjal 15 px).
     Siin on see teadlikult suurem: 72 px + 10% = 79,2 px.
     3 px nihe on relative, mitte margin — nii ei liigu allolev tekst kaasa. */
  .footer-logo{width:79.2px;position:relative;top:3px}
  /* logo on must vektor: öösel pööratakse heledaks, roheline ".ai" jääb roheliseks */
  html[data-theme="dark"] .site-logo img{filter:invert(1) hue-rotate(180deg) brightness(1.12)}

  .nav-r{display:flex;align-items:center;gap:26px;justify-self:end}
  .nav-r.has-progress{gap:10px}
  /* keelevalik on päris lüliti, mitte kaks linki punktiga */
  .lang{
    display:flex;align-items:center;gap:0;
    background:rgba(0,0,0,.07);border-radius:999px;padding:3px;
    transition:background .2s ease;
  }
  /* "In English" kohale minnes tumeneb kogu hall soon, mitte ainult see üks segment */
  .lang:has(a.off:hover){background:rgba(0,0,0,.168)}
  .lang a,.lang span.on{
    font-size:13px;letter-spacing:.2px;font-weight:600;white-space:nowrap;
    padding:7px 14px;border-radius:999px;
    transition:background .2s ease,color .2s ease;
  }
  .lang a.on,.lang span.on{background:var(--green);color:#fff}
  .lang a.off{color:var(--soft)}
  /* segmendil endal ei ole enam oma tausta — kogu soon tumeneb niikuinii */
  .lang a.off:hover{color:var(--text)}
  .lang .sep{display:none}
  .reading-pct{
    min-width:52px;padding:6px 10px;border-radius:999px;
    background:var(--chip);color:var(--muted);
    font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
    line-height:1.25;text-align:center;white-space:nowrap;
  }
  .cta-btn{
    padding:11px 22px;border-radius:26px;
    background:var(--green);color:#ffffff;
    font-size:13.5px;font-weight:700;letter-spacing:.2px;
    box-shadow:0 3px 9px rgba(20,123,78,.34);
    transition:background .25s ease;
  }
  .cta-btn:hover{background:#0e5f3c}

  /* ---------- hero ---------- */
  .hero{padding:56px 0 39px}
  h1{
    font-size:clamp(30px,4.2vw,50px);line-height:1.06;letter-spacing:-1.6px;font-weight:800;
    margin:0 0 24px;
  }
  h1 span{
    background:linear-gradient(96deg,var(--green),var(--teal));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  /* vahe teksti ja visiitkaardi vahel on poole väiksem kui varem —
     vabanenud ruumi saab tekst endale */
  /* 37.12% annab .wrap'i maksimumlaiusel (1220 − 48 = 1172 px) täpselt 435 px:
     pilt hakkab kahanema kohe lehe maksimumlaiusest allpool, mitte alles ~1100 px juures */
  .hero-cols{display:grid;grid-template-columns:1fr clamp(330px,37.12%,435px);gap:clamp(16px,2.5vw,36px);align-items:start}
  /* Tekstil ei ole enam oma max-laiust: ta täidab kogu vasaku veeru
     ja ulatub visiitkaardini välja. Rea pikkust piirab ainult veerg,
     mille laiuse annab grid (1fr) ja teksti-pildi vahe. */
  .lead{font-size:clamp(16.5px,1.7vw,19.5px);line-height:1.6;color:var(--muted);max-width:none;margin:0 0 14px}
  .intro{
    font-size:14px;line-height:1.78;color:var(--soft);max-width:none;margin:0;
    padding-top:0;
  }
  .intro strong{color:var(--muted);font-weight:600}
  /* teine lõik saab esimesest õhku, ilma et .intro ise margin'it kasvataks */
  .intro + .intro{margin-top:12px}
  .hero-story{margin:13px 0 0}
  .hero-story-link{
    display:inline-flex;align-items:center;color:var(--green);
    font-size:13.5px;line-height:1.5;font-weight:700;
    transition:color .25s ease;
  }
  .hero-story-link:hover{color:#009e56}

  /* ---------- teenus juhtidele ---------- */
  .leader-brain{padding:28px 0;border-top:1px solid var(--line);position:relative}
  .leader-brain::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    box-shadow:0 1.5px 5px rgba(20,24,30,.08);pointer-events:none;
  }
  .leader-brain-card{
    width:calc(100% - 20px);
    display:grid;grid-template-columns:minmax(0,1fr) 292px;
    gap:clamp(18px,3.2vw,42px);align-items:center;
    padding-top:24px;padding-bottom:24px;
    border:1px solid rgba(20,123,78,.22);border-radius:8px;
    background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(20,123,78,.06));
  }
  .leader-brain-eyebrow{
    margin:0 0 9px;color:var(--green);font-size:11.5px;
    letter-spacing:1.35px;text-transform:uppercase;font-weight:800;
  }
  .leader-brain h2{
    margin:0 0 10px;font-size:clamp(26px,3.05vw,38px);
    line-height:1.1;letter-spacing:-1.1px;
  }
  .leader-brain-head > p:not(.leader-brain-eyebrow){
    max-width:710px;margin:0;color:var(--muted);font-size:16px;line-height:1.62;
  }
  .leader-brain-change{
    margin-top:10px !important;color:var(--text) !important;
    font-size:14.5px !important;line-height:1.58 !important;font-weight:650;
  }
  .leader-brain-actions{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;
  }
  .leader-brain-cta{
    display:inline-flex;align-items:center;min-height:40px;
    padding:10px 17px;border-radius:999px;background:var(--green);color:#fff;
    font-size:13.5px;font-weight:800;box-shadow:0 3px 9px rgba(20,123,78,.28);
    transition:background .25s ease;
  }
  .leader-brain-cta:hover{background:var(--green-hi)}
  .leader-brain-link{
    color:var(--green);font-size:13.5px;font-weight:800;padding:7px 0;
    transition:color .25s ease;
  }
  .leader-brain-link:hover{color:var(--green-hi)}
  .leader-brain-price{
    display:block;position:relative;overflow:hidden;color:inherit;text-decoration:none;
    padding:20px;border:1px solid rgba(20,123,78,.24);border-radius:8px;
    background:var(--panel-2);
    transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease,background-color .4s ease;
  }
  .leader-brain-price > *{position:relative;z-index:1}
  .leader-brain-price::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
    background:linear-gradient(90deg,var(--green),var(--teal));
    opacity:.5;transform:scaleX(0);transform-origin:left;
    transition:transform .35s ease;
  }
  .leader-brain-price:hover,.leader-brain-price:focus-visible{
    border-color:rgba(20,123,78,.55);
    transform:translateY(-2.5px);
    box-shadow:0 10px 23px rgba(20,123,78,.20);
  }
  .leader-brain-price:hover::before,.leader-brain-price:focus-visible::before{transform:scaleX(1)}
  .leader-brain-price:focus-visible{outline:2px solid rgba(20,123,78,.45);outline-offset:3px}
  .leader-brain-price-label{
    margin:0 0 6px;color:var(--muted);font-size:12px;
    letter-spacing:1.1px;text-transform:uppercase;font-weight:800;
  }
  .leader-brain-price-value{
    margin:0;color:var(--text);font-size:clamp(18.5px,2vw,26px);
    line-height:1.15;font-weight:850;letter-spacing:-.5px;
  }
  .leader-brain-price-note{
    margin:10px 0 0;color:var(--muted);font-size:13.5px;line-height:1.5;
  }
  .leader-brain-facts{
    margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
    list-style:none;display:grid;gap:8px;
  }
  .leader-brain-facts li{
    position:relative;padding-left:18px;color:var(--muted);
    font-size:13.5px;line-height:1.45;
  }
  .leader-brain-facts li::before{
    content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--green);
  }

  /* visiitkaart */
  .card-shot{position:relative}
  .card-shot::before{
    /* külgmine ulatus on fikseeritud 12 px, mitte 8% laiusest:
       protsent kasvas pildiga ja ületas .wrap'i 24 px polstri → horisontaalne scroll */
    content:"";position:absolute;inset:-14% -12px;
    background:radial-gradient(ellipse at 55% 62%,rgba(20,24,30,.10),transparent 66%);
    filter:blur(12px);z-index:0;
  }
  .card-shot img{
    position:relative;z-index:1;display:block;width:100%;height:auto;
    border-radius:14px;border:1px solid rgba(20,24,30,.14);
    box-shadow:0 26px 64px rgba(20,24,30,.24),0 3px 12px rgba(20,24,30,.14);
  }
  .card-cap{
    position:relative;z-index:1;margin:18px 0 0;text-align:center;
    font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--soft);
  }

  /* ---------- artiklid ---------- */
  /* v2: taustad vahetatud — artikliplokk kannab tumedamat tooni, footer jääb lehe taustale */
  /* 15px + footeri endine 44px margin: toonitud plokk lõpeb täpselt
     footeri joone peal, vahele ei jää heledat riba */
  /* tausta omanik on --foot-bg allpool teemaplokis, siin seda ei korrata */
  .proof{padding:14px 0 30px;border-top:1px solid var(--line);position:relative}
  /* artikliplokki raamivad hallid jooned saavad sama varju mis ülariba */
  .proof::before,footer::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    box-shadow:0 1.5px 5px rgba(20,24,30,.10);
    pointer-events:none;
  }
  .proof-pad{padding-top:25px}
  .p-head{margin-bottom:19px}
  /* link on ainult pealkirja kõrval, tekst selle all vaba laiusega */
  .p-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:26px}
  .p-head h1,.p-head h2{font-size:clamp(26px,3.2vw,38px);line-height:1.1;letter-spacing:-1.1px;margin:0 0 10px;font-weight:800}
  /* 660px: ka pikem ingliskeelne rida mahub ühele reale, ruumi on külluses */
  .p-head p{margin:0;font-size:15.5px;color:var(--muted);max-width:660px;line-height:1.65}
  .p-head p strong{color:var(--text);font-weight:650}
  /* sama käsitlus mis "Loe lugu" ja kontaktilinkidel */
  /* padding kasvatab klikiala, negatiivne margin hoiab paigutuse paigal */
  .p-head a{font-size:13.5px;color:var(--green);font-weight:600;white-space:nowrap;transition:color .25s ease;padding:5px;margin:-5px}
  .p-head a:hover{color:#009e56}
  .p-head a::after{content:" →"}
  .p-count{font-size:13.5px;color:var(--muted);font-weight:600;white-space:nowrap}
  .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
  .card{
    background:var(--panel-2);border:1px solid var(--line);border-radius:16px;
    /* kõrgus tuleb sisust: grid venitab mõlemad pikema kaardi järgi, tühja lahmakat ei teki */
    padding:30px 28px 26px;display:flex;flex-direction:column;
    /* sama kestus kui rohelisel ülaserval, et kõik liiguks ühes taktis */
    transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease;
    /* pikad eestikeelsed sõnad ei tohi kaarti laiaks suruda */
    min-width:0;overflow-wrap:break-word;
  }
  .card:hover{border-color:rgba(20,123,78,.45);transform:translateY(-3px)}
  /* kaardi jaluses on ainult lugemislink */
  .card .foot{display:flex;justify-content:flex-end;align-items:baseline}
  .card h3{font-size:22px;line-height:1.25;letter-spacing:-.5px;margin:0 0 12px;font-weight:700}
  .card .sub{font-size:14px;line-height:1.55;color:var(--green);margin:0 0 16px;opacity:.9}
  .card .txt{font-size:14px;line-height:1.68;color:var(--muted);margin:0 0 22px;flex:1}
  /* sama loogika mis kontaktilinkidel: juba rohekas, hiire all erksam */
  .card .more{font-size:13.5px;color:var(--green);font-weight:600;transition:color .35s ease}
  .card:hover .more{color:#009e56}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line);padding:33px 0 44px;margin-top:0;background:transparent;position:relative}
  .f-grid{display:grid;grid-template-columns:1.3fr 1.3fr 0.7fr;gap:clamp(28px,4vw,62px);padding-bottom:0}
  .f-lead{font-size:14.5px;line-height:1.75;color:var(--muted);margin:18px 0 0}
  .f-lead strong{color:var(--text);font-weight:650}
  .f-lead + .f-lead{margin-top:16px}
  footer .f-heading{font-size:19px;letter-spacing:-.3px;font-weight:800;margin:0 0 12px}
  /* kontaktiploki sildid on pisikesed versaalid — need vajavad rohkem õhku */
  footer .f-heading#kontakt{margin-bottom:31px}
  .job{margin-bottom:16px}
  .job:last-child{margin-bottom:0}
  .job .yr{font-size:11.5px;letter-spacing:1.2px;color:var(--green);margin-bottom:6px}
  .job .ttl{font-size:15px;font-weight:650;margin-bottom:3.5px}
  .job p{margin:0;font-size:13px;line-height:1.65;color:var(--soft)}
  /* link ei tõsta end tavatekstist esile: sama hall ja sama kaal, hiire all heleroheline */
  .job a{color:inherit;font-weight:inherit;transition:color .25s ease}
  .job a:hover{color:var(--green-hi)}
  .clist{margin:0;padding:0;list-style:none}
  .clist li{margin-bottom:15px;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
  .clist .lbl{display:block;font-size:10.5px;letter-spacing:1.2px;color:var(--soft);margin-bottom:3px}
  /* e-post ja LinkedIn näevad välja nagu lingid ja lähevad peale minnes tugevamaks */
  .clist a{color:var(--green);transition:color .25s ease}
  .clist a:hover{color:#009e56}
  /* värviline tekst — sama käsitlus mis pealkirjas "personaalne AI" */
  .grad,footer .brand span{
    background:linear-gradient(96deg,var(--green),var(--teal));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  footer .brand span{font-weight:800}

  /* ---------- hero (v5-st): hõljuv pilt + särav pealkiri ---------- */
  .card-shot img{animation:hõlju 10.5s ease-in-out infinite}
  @keyframes hõlju{
    0%,100%{
      transform:translateY(0);
      box-shadow:0 26px 64px rgba(20,24,30,.24),0 3px 12px rgba(20,24,30,.14);
    }
    50%{
      transform:translateY(-6px);
      box-shadow:0 34px 74px rgba(20,24,30,.205),0 5px 16px rgba(20,24,30,.115);
    }
  }

  /* särab AINULT hero pealkiri; .grad omad jäävad paigale */
  h1 span{
    background:linear-gradient(96deg,var(--green),var(--teal),#3f9c86,var(--green));
    background-size:320% 100%;
    /* NB! background-shorthand nullib clip'i — need read peavad siia jääma */
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:voog 4.5s ease-in-out infinite;
  }
  @keyframes voog{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
  }
  @media (prefers-reduced-motion:reduce){
    h1 span,.card-shot img{animation:none}
  }

  /* ---------- kaardid: kummitusnumbrid (v3) + süttiv ülaserv ja siltkuupäev (v7) ---------- */
  .cards{counter-reset:kaart}
  .card{position:relative;overflow:hidden}
  .card > *{position:relative;z-index:1}

  /* number taustal */
  .card::after{
    counter-increment:kaart;
    content:counter(kaart,decimal-leading-zero);
    position:absolute;top:2px;right:16px;z-index:0;
    font-size:112px;font-weight:800;line-height:1;letter-spacing:-6px;
    color:transparent;-webkit-text-stroke:1.5px rgba(20,123,78,.074);
    pointer-events:none;
    transition:-webkit-text-stroke-color .35s ease,transform .35s ease;
  }
  .card:hover::after{
    -webkit-text-stroke-color:rgba(20,123,78,.147);
    transform:translateY(-3px) scale(1.03);
  }

  /* ülaserv jookseb hiire all vasakult paremale sisse */
  .card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
    background:linear-gradient(90deg,var(--green),var(--teal));
    opacity:.5;                       /* sama mis lehe kerimisriba */
    transform:scaleX(0);transform-origin:left;
    transition:transform .35s ease;
  }
  .card:hover::before{transform:scaleX(1)}

  .card:hover{
    transform:translateY(-2.5px);
    border-color:rgba(20,123,78,.55);
    box-shadow:0 10px 23px rgba(20,123,78,.20);
  }


  /* =========================================================
     RESPONSIVE
     901+    üks päisepaigutus, ei ühtegi hüpet
      900    pilt kaob, kaardid ja footer ümber
      520    kõik ühte veergu
      420    viimane pigistus
     ========================================================= */

  /* ---- kuni 900 px: siit algavad häkid ---- */
  @media (max-width:900px){
    .nav-r .cta-btn{display:none}
    .nav-r{gap:0}

    .hero{padding:40px 0 34px}
    .lead,.intro{max-width:none}

    .p-head{margin-bottom:14px}
    .p-title-row{gap:18px}

    footer{padding:28px 0 30px;margin-top:0}
    .proof{padding-bottom:26px}
    /* kontakt kitsamaks, töökogemus saab selle ruumi endale */
    .f-grid{grid-template-columns:1.3fr 0.7fr;gap:32px}
    /* Tauri tutvustuse plokk ära, jäävad töökogemus ja kontakt */
    .f-grid > div:first-child{display:none}
  }

  /* ---- kuni 800 px: visiitkaart läheb ära ----
     Varem kadus foto 900 px juures. Nüüd püsib see 100 px kauem ja
     hero jääb kaheveeruliseks kuni sama punktini. */
  @media (max-width:800px){
    .hero-cols{grid-template-columns:1fr;gap:0}
    .card-shot{display:none}
  }

  @media (max-width:700px){
    .leader-brain-card{grid-template-columns:1fr}
    .leader-brain-price{max-width:420px}
  }

  /* Neli kaarti jäävad üle 1000 px ühele reale. Kitsamas neljaveerulises
     vaates hoiavad väiksem kiri ja padding teksti loetavana. */
  @media (max-width:1040px) and (min-width:1001px){
    .card{padding:24px 18px 22px}
    .card h3{font-size:19px}
  }

  /* Tahvlis on kaks kaarti reas; mobiilis jääb allpool üks veerg. */
  @media (max-width:1000px) and (min-width:521px){
    .cards{grid-template-columns:repeat(2,1fr)}
  }

  /* ---- kuni 520 px: sisu ühte veergu ---- */
  @media (max-width:520px){
    .wrap{padding:0 16px}

    .leader-brain{padding:24px 0}
    .leader-brain-card{width:auto;margin-inline:10px;padding-top:18px;padding-bottom:18px}
    .leader-brain-price{padding:18px}
    .cards{grid-template-columns:1fr}
    .card{padding:24px 22px 22px}

    .f-grid{grid-template-columns:1fr;gap:26px}
  }

  /* =========================================================
     v8 HÜBRIID — hõbeserv raamina, foto CSS-taustana selle sees
     Foto ei ole enam <img>, vaid raami ülemine taustakiht. Kui fail
     puudub, ei joonista brauser midagi ja alt paistab klaas — ei
     läbipaistvust ega katkise pildi ikooni.
     ========================================================= */
  /* vana hajus kuma ei ole enam vajalik — raam annab sügavuse */
  .card-shot::before{content:none}

  .shot-frame{
    position:relative;z-index:1;
    padding:0;border-radius:17px;
    aspect-ratio:845/461;            /* hoiab mõõtu ka ilma failita */
    /* Neli kihti pealmisest alumiseni: foto, valguskiir, klaas — kõik
       raami SISSE (padding-box); hõbegradient ainult 3 px äärde.
       Raadiused: väline 17, sisemine 14 = täpselt serva paksuse vahe. */
    border:3px solid transparent;
    background-image:
      var(--business-card-image),
      linear-gradient(126deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 34%),
      linear-gradient(126deg,#fcfcfb 0%,#f0f1f0 44%,#e4e6e5 100%),
      linear-gradient(135deg,#ffffff 0%,#d6d9d8 38%,#ffffff 62%,#dde1e0 100%);
    background-position:center,0 0,0 0,0 0;
    background-size:cover,auto,auto,auto;
    background-repeat:no-repeat,repeat,repeat,repeat;
    background-origin:border-box;
    background-clip:padding-box,padding-box,padding-box,border-box;
    box-shadow:0 12px 30px rgba(20,24,30,.08);
  }
  /* Hõljumine käivitub ainult siis, kui päises olev skript on tuvastanud
     Chrome'i. Mujal — ja ka siis, kui JS on välja lülitatud — jääb foto paigale
     koos oma püsiva varjuga. */
  html.hõlju-ok .shot-frame{animation:hõlju 10.5s ease-in-out infinite}
  /* kirjutab varasema hõlju üle: raam on hõbedane ja vajab kergemat varju kui foto */
  @keyframes hõlju{
    0%,100%{transform:translateY(0);box-shadow:0 12px 30px rgba(20,24,30,.08)}
    50%{transform:translateY(-6px);box-shadow:0 18px 38px rgba(20,24,30,.065)}
  }
  @media (prefers-reduced-motion:reduce){
    html.hõlju-ok .shot-frame{animation:none}
  }

  /* =========================================================
     v4 KATSE — sisu ilmub kerimisel + kerimisriba lehe ülaservas
     ========================================================= */
  /* NB! kasutan translate'i, mitte transform'i, et kaardi hover alles jääks */
  @keyframes ilmu{
    from{opacity:0;translate:0 60px}
    to{opacity:1;translate:0 0}
  }
  .p-head,.card,.f-grid > div,.card-shot,.leader-brain-head,.leader-brain-price{
    animation:ilmu linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 32%;
  }

  /* õhuke edenemisriba, mis täitub lehte kerides */
  body::before{
    content:"";position:fixed;top:0;left:0;z-index:60;
    width:100%;height:3px;transform-origin:0 50%;transform:scaleX(var(--reading-progress,0));
    background:linear-gradient(90deg,var(--green),var(--teal));
    opacity:.5;
  }

  @media (prefers-reduced-motion:reduce){
    .p-head,.card,.f-grid > div,.card-shot,.leader-brain-head,.leader-brain-price,body::before{animation:none;opacity:1;translate:none}
  }

  /* ---- kuni 520 px: päis jääb ühele reale ---- */
  @media (max-width:520px){
    .nav-in{grid-template-columns:auto 1fr}
  }

  /* ---- kuni 420 px: viimane pigistus ---- */
  @media (max-width:420px){
    .lang a{font-size:11.5px;letter-spacing:0;padding:6px 10px}
    .reading-pct{min-width:46px;padding:6px 8px}
    .p-head a{font-size:12.5px}
  }

  /* =========================================================
     v9 — päeva- ja öörežiim (t10 eeskujul)
     Vaikimisi PÄEV. Süsteemi eelistust siin teadlikult ei järgita:
     kasv.ai on hele bränd ja tume on valik, mitte vaikeseis.
     Nurgas olev nupp lülitab ja valik jääb meelde (localStorage).
     Kogu teema elab CSS muutujates — HTML jääb puutumata.
     ========================================================= */
  :root{
    --shadow:rgba(20,24,30,.10);
    --chip:rgba(0,0,0,.07);
    --chip-hov:rgba(0,0,0,.168);
    --foot-bg:rgba(0,0,0,.035);
    --nav-a:rgba(245,245,245,.94);
    --nav-b:rgba(245,245,245,.45);
    --green-hi:#009e56;
    --btn-txt:#353c43;
  }
  html[data-theme="dark"]{
    --bg:#111111;
    --panel-2:#1a1a1a;
    --line:rgba(255,255,255,.10);
    --line-2:rgba(255,255,255,.20);
    --text:rgba(255,255,255,.92);
    --muted:rgba(255,255,255,.66);
    --soft:rgba(255,255,255,.46);
    --green:#3fbe86;
    --teal:#4cc0e0;
    --green-hi:#6fe0ab;
    --btn-txt:rgba(255,255,255,.85);
    --shadow:rgba(0,0,0,.55);
    --chip:rgba(255,255,255,.08);
    --chip-hov:rgba(255,255,255,.16);
    /* ka öös on keskmine plokk tumedam, mitte heledam */
    --foot-bg:rgba(0,0,0,.12);
    --nav-a:rgba(17,17,17,.94);
    --nav-b:rgba(17,17,17,.55);
    color-scheme:dark;
  }

  /* värvid, mis v8-s olid otse reeglites — nüüd muutujate kaudu */
  html,body{transition:background-color .4s ease,color .4s ease}
  .nav{
    background:linear-gradient(180deg,var(--nav-a),var(--nav-b));
    border-bottom-color:var(--line);
    box-shadow:0 1.5px 5px var(--shadow);
  }
  .proof::before,footer::before{box-shadow:0 1.5px 5px var(--shadow)}
  .lang{background:var(--chip)}
  .lang:has(a.off:hover){background:var(--chip-hov)}
  .p-head a:hover,.card:hover .more,.clist a:hover{color:var(--green-hi)}
  .proof{background:var(--foot-bg)}
  .card{transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease,background-color .4s ease}
  html[data-theme="dark"] .leader-brain{background:rgba(255,255,255,.035)}
  html[data-theme="dark"] .leader-brain-price{background:linear-gradient(135deg,rgba(63,190,134,.12),rgba(76,192,224,.09))}
  html[data-theme="dark"] .leader-brain-price:hover,
  html[data-theme="dark"] .leader-brain-price:focus-visible{
    border-color:rgba(63,190,134,.5);
    box-shadow:0 10px 23px rgba(0,0,0,.45);
  }

  html[data-theme="dark"] body{
    /* ka öös ainult neutraalne hall */
    background:linear-gradient(180deg,#141414 0%,#111111 46%,#0d0d0d 100%);
    background-attachment:fixed;
  }
  html[data-theme="dark"] .cta-btn{
    background:#1c8f5f;box-shadow:0 3px 9px rgba(0,0,0,.45);
  }
  html[data-theme="dark"] .cta-btn:hover{background:#25a973}
  html[data-theme="dark"] .lang a.on{background:#1c8f5f}
  html[data-theme="dark"] .card::after{-webkit-text-stroke-color:rgba(63,190,134,.10)}
  html[data-theme="dark"] .card:hover::after{-webkit-text-stroke-color:rgba(63,190,134,.20)}
  html[data-theme="dark"] .card:hover{
    border-color:rgba(63,190,134,.5);
    box-shadow:0 10px 23px rgba(0,0,0,.45);
  }
  /* hõbedane raam muutub öösel grafiidiks, muidu põleb pilt lehest välja */
  html[data-theme="dark"] .shot-frame{
    background-image:
      var(--business-card-image),
      linear-gradient(126deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 34%),
      linear-gradient(126deg,#2a3038 0%,#20252c 44%,#171b21 100%),
      linear-gradient(135deg,#5a6270 0%,#2b3138 38%,#6b7481 62%,#2f353d 100%);
    box-shadow:0 12px 30px rgba(0,0,0,.5);
  }
  /* sama Chrome'i-värav ka öisel variandil, muidu hakkaks see päevase
     piirangu ümbert mööda minema */
  html.hõlju-ok[data-theme="dark"] .shot-frame{animation:hõljuÖö 10.5s ease-in-out infinite}
  @keyframes hõljuÖö{
    0%,100%{transform:translateY(0);box-shadow:0 12px 30px rgba(0,0,0,.5)}
    50%{transform:translateY(-6px);box-shadow:0 18px 38px rgba(0,0,0,.42)}
  }
  @media (prefers-reduced-motion:reduce){
    html.hõlju-ok[data-theme="dark"] .shot-frame{animation:none}
  }

  /* ---------- lüliti ---------- */
  .theme-btn{
    position:fixed;right:16px;bottom:16px;z-index:80;
    width:44px;height:44px;border-radius:50%;
    border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);
    display:grid;place-items:center;cursor:pointer;
    box-shadow:0 2px 10px var(--shadow);
    transition:transform .25s ease,background-color .4s ease,border-color .4s ease;
  }
  .theme-btn:hover{transform:rotate(-18deg) scale(1.08)}
  .theme-btn svg{width:20px;height:20px;fill:currentColor}
  .theme-btn .moon{display:none}
  html[data-theme="dark"] .theme-btn .moon{display:block}
  html[data-theme="dark"] .theme-btn .sun{display:none}

  /* Oma vihje brauseri aeglase title-mulli asemel. Ta ilmub nii hiire
     all kui ka klaviatuurifookuses ja ei püüa hiirt kinni.
     Teksti tõeallikas on nupu aria-label: ekraanilugeja ja nähtav vihje
     ei saa nii lahku minna.
     20 px keskjoonest kõrgemal, sest nupp istub ekraani alumises servas
     ja keskele joondatud vihje jäi osaliselt vaatest välja. */
  .theme-btn::after{
    content:attr(aria-label);
    position:absolute;right:calc(100% + 10px);top:50%;translate:0 calc(-50% - 20px);
    padding:6px 10px;border-radius:6px;white-space:nowrap;
    background:rgba(20,24,30,.92);color:#fff;font-size:12px;font-weight:600;
    opacity:0;pointer-events:none;transition:opacity .18s ease;
  }
  html[data-theme="dark"] .theme-btn::after{background:rgba(240,243,246,.94);color:#111111}
  .theme-btn:hover::after,.theme-btn:focus-visible::after{opacity:1}
  /* Nupp ise pöördub hiire all — ilma selleta pöörduks vihje kaasa ja
     jääks viltu. */
  .theme-btn:hover::after{rotate:18deg}
  @media (prefers-reduced-motion:reduce){
    .theme-btn::after{transition:none}
    .theme-btn:hover::after{rotate:none}
  }

  /* =========================================================
     Sektsioonide taust — hele, tume, hele. Ja rohkem mitte midagi.
     Hero ja footer istuvad lehe enda taustal, keskmine artikliplokk
     kannab --foot-bg katet. Kursor siin midagi ei muuda: hover'iga
     tooni vahetamist proovisime ja see jäi välja.
     Ainus üleminek on teemavahetuse jaoks, sama .4 s nagu mujal lehel.
     ========================================================= */
  .proof{transition:background-color .4s ease}

  .card-soon{cursor:default}
  .not-found{min-height:45vh;padding:72px 0}
  .not-found p{max-width:620px;margin:18px 0 24px;color:var(--muted);font-size:18px;line-height:1.6}

  /* ---------- peidetud teenuse eelvaade ---------- */
  .service-preview{overflow:hidden}
  .service-hero{padding:56px 0 42px}
  .service-hero-grid{
    display:grid;grid-template-columns:minmax(0,1fr) 340px;
    gap:clamp(24px,4vw,58px);align-items:start;
  }
  .service-lead{
    margin:0 0 18px;max-width:780px;color:var(--muted);
    font-size:clamp(18px,2vw,23px);line-height:1.5;
  }
  .service-intro{
    margin:0;max-width:760px;color:var(--soft);
    font-size:15.5px;line-height:1.75;
  }
  .service-intro + .service-intro{margin-top:12px}
  .service-signal{
    margin:18px 0 0;padding:22px;border:1px solid var(--line);
    border-radius:8px;background:var(--panel-2);
    box-shadow:0 10px 26px var(--shadow);
  }
  .service-signal p{
    position:relative;margin:0;padding-left:22px;
    color:var(--muted);font-size:14px;line-height:1.55;font-weight:650;
  }
  .service-signal p::before{
    content:"";position:absolute;left:0;top:.58em;width:8px;height:8px;
    border-radius:50%;background:linear-gradient(96deg,var(--green),var(--teal));
  }
  .service-signal p + p{margin-top:14px}
  .service-band{padding:32px 0 46px;background:var(--foot-bg);border-top:1px solid var(--line)}
  .service-stack{display:grid;gap:28px}
  .service-section{
    display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);
    gap:clamp(20px,4vw,56px);align-items:start;padding:22px 0;
    border-bottom:1px solid var(--line);
  }
  .leader-memory-page .service-band{padding:18px 0 46px}
  .leader-memory-page .service-stack{gap:14px}
  .leader-memory-page .service-section{padding:12px 0;row-gap:10px}
  .leader-memory-page .service-list{padding-left:10px}
  .service-section h2{
    margin:0;color:var(--text);font-size:clamp(22px,2.6vw,32px);
    line-height:1.12;letter-spacing:-.8px;
  }
  .service-copy{
    grid-column:2;margin:0;max-width:760px;color:var(--muted);
  }
  .service-copy p{
    margin:0;color:var(--muted);
    font-size:15.5px;line-height:1.72;
  }
  .service-copy p + p{margin-top:10px}
  .service-list{
    grid-column:2;margin:0;padding:0;list-style:none;display:grid;gap:10px;
    max-width:780px;
  }
  .service-list li{
    position:relative;padding-left:22px;color:var(--muted);
    font-size:15px;line-height:1.65;
  }
  .service-list li::before{
    content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;
    background:var(--green);
  }
  .service-card-grid{
    grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .service-card{
    padding:20px;border:1px solid var(--line);border-radius:8px;
    background:var(--panel-2);min-width:0;
  }
  .service-card h3,.service-steps h3{
    margin:0 0 8px;font-size:17px;line-height:1.25;letter-spacing:-.2px;
  }
  .service-card p,.service-steps p{
    margin:0;color:var(--muted);font-size:14px;line-height:1.65;
  }
  .service-steps{
    grid-column:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;margin:0;padding:0;list-style:none;counter-reset:service-step;
  }
  .service-steps li{
    counter-increment:service-step;padding:20px;border:1px solid var(--line);
    border-radius:8px;background:var(--panel-2);
  }
  .service-steps li::before{
    content:counter(service-step,decimal-leading-zero);
    display:block;margin-bottom:10px;color:var(--green);
    font-size:12px;letter-spacing:1px;font-weight:800;
  }
  .service-cta{
    padding:28px;border:1px solid rgba(20,123,78,.26);border-radius:8px;
    background:linear-gradient(135deg,rgba(20,123,78,.10),rgba(6,121,155,.08));
  }
  .service-cta h2{margin:0 0 10px;font-size:clamp(24px,3vw,36px);letter-spacing:-.9px}
  .service-cta p{margin:0 0 18px;max-width:680px;color:var(--muted);font-size:16px;line-height:1.65}
  .service-cta a{
    display:inline-flex;align-items:center;min-height:42px;padding:10px 17px;
    border-radius:999px;background:var(--green);color:#fff;font-weight:800;
    box-shadow:0 3px 9px rgba(20,123,78,.28);
  }

  @media (max-width:800px){
    .service-hero-grid,.service-section{grid-template-columns:1fr}
    .service-signal{margin-top:4px}
    .service-copy,.service-list,.service-card-grid,.service-steps{grid-column:1}
  }

  @media (max-width:560px){
    .service-hero{padding:38px 0 30px}
    .service-card-grid,.service-steps{grid-template-columns:1fr}
    .service-signal,.service-card,.service-steps li,.service-cta{padding:18px}
  }