/* ============================================================
   AIBIS v2 — hele & tehniline, Awwwards-stiilis liikumine
   Etapp 1: disainisüsteem + struktuur + reveal-kiht.
   Fondid: Unbounded (display), Manrope (sisu), IBM Plex Mono (sildid).
   ============================================================ */

/* ---------- Tokenid ---------- */
:root{
  --paper:      #F5F5F3;
  --paper-2:    #ECECE9;
  --paper-3:    #E3E3DF;
  --ink:        #111318;
  --ink-2:      #55575F;
  --ink-3:      #8A8C93;
  --line:       rgba(17,19,24,.14);
  --line-soft:  rgba(17,19,24,.07);
  --accent:     #2B2BF7;
  --accent-2:   #6E6EFF;
  --accent-wash:rgba(43,43,247,.08);
  --white:      #fff;

  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-sans:    "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --fs-hero: clamp(3rem, 11vw, 8.5rem);
  --fs-h1:   clamp(2.3rem, 5.2vw, 4.4rem);
  --fs-h2:   clamp(1.7rem, 3.6vw, 3rem);
  --fs-h3:   clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-mono: .74rem;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:180px;

  --radius: 3px;
  --container: 1320px;
  --gutter: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,.68,.32,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-sans); font-size:1.0625rem; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.04; letter-spacing:-.02em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img,canvas{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
::selection{ background:var(--accent); color:#fff; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- Paigutus ---------- */
.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block:var(--s11); border-top:1px solid var(--line); }
.section:first-of-type{ border-top:none; }
.section--tint{ background:var(--paper-2); }

.sec-head{ display:grid; grid-template-columns:1fr; gap:var(--s5); max-width:64ch; margin-bottom:var(--s9); }

/* ---------- Mobiili vertikaalne rütm (desktop --s11 = 180px on liiga suur) ---------- */
@media (max-width:760px){
  .section{ padding-block:var(--s8); }
  .sec-head{ margin-bottom:var(--s6); }
  .page-hero{ padding-top:var(--s9); padding-bottom:var(--s7); }
  .cta-band{ padding-block:var(--s9); }
  .showcase{ padding-top:var(--s7); }
  .track{ min-height:auto; padding:var(--s6) var(--s5); }
  .work{ padding:var(--s5); gap:var(--s3); }
  .work__visual{ margin:calc(var(--s5) * -1) calc(var(--s5) * -1) 0; }
}

/* mono eyebrow + sektsiooninumber */
.eyebrow{
  font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2);
  display:flex; align-items:center; gap:var(--s3);
}
.eyebrow::before{ content:attr(data-index); color:var(--accent); }
.eyebrow--plain::before{ content:""; width:20px; height:2px; background:var(--accent); }

h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--ink-2); max-width:52ch; }

/* ---------- Sektsiooni sisenemine ----------
   Sisu on ilma JS-ita ALATI nähtav. JS-iga: iga sektsioon "areneb" vaatesse
   (eyebrow + read + sisu + kaardid) — kerimisega seotud (scrub), nii et
   miski ei hüppa. */
.split-mask{ display:block; overflow:hidden; }

/* ---------- Nupud ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:var(--s3);
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
  padding:16px 26px; color:var(--fg); background:var(--bg); border-radius:var(--radius);
  border:1px solid var(--bg); overflow:hidden; white-space:nowrap;
  transition:color .35s var(--ease);
}
.btn > *{ position:relative; z-index:1; }
/* täitepind LABEL'i taha (z-index:-1), et ka pakkimata tekstisõlm jääks nähtavaks */
.btn::after{
  content:""; position:absolute; inset:0; background:var(--accent);
  transform:translateY(101%); transition:transform .4s var(--ease-out); z-index:-1;
}
.btn:hover{ color:#fff; }
.btn:hover::after{ transform:translateY(0); }
.btn--line{ --bg:transparent; --fg:var(--ink); border-color:var(--ink); }
.btn__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }

/* ---------- Päis ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:var(--s4); mix-blend-mode:normal;
  transition:background .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr[data-scrolled="true"]{
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(10px) saturate(160%);
  border-bottom-color:var(--line);
  padding-block:var(--s3);
}
.hdr__in{ display:flex; align-items:center; gap:var(--s5); }
.brand{ display:flex; align-items:center; gap:var(--s3); margin-right:auto; font-family:var(--f-display); font-weight:700; font-size:1.05rem; letter-spacing:.02em; }
.brand img{ height:22px; width:auto; }
.brand span{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); border-left:1px solid var(--line); padding-left:var(--s3); white-space:nowrap; }
@media (max-width:900px){ .brand span{ display:none; } }

.nav{ display:flex; align-items:center; gap:var(--s5); }
@media (max-width:1320px){ .brand span{ display:none; } .nav{ gap:var(--s4); } }
@media (max-width:1120px) and (min-width:881px){ .nav{ gap:var(--s3); font-size:.9rem; } .nav a{ font-size:.72rem; } }
.nav a{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); position:relative; padding-block:6px; transition:color .2s; }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--ink); }
/* nav CTA-nupp: ära lase .nav a värvireeglil nuppu üle kirjutada (sinisel täitel tekst kaob) */
.nav a.btn{ color:var(--fg); }
.nav a.btn:hover{ color:#fff; }
.nav a[aria-current="page"]::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--accent); }
.nav a.nav__portal{ border:1px solid var(--line); border-radius:var(--radius); padding:7px 11px; white-space:nowrap; }
.nav a.nav__portal::before{ content:"→"; color:var(--accent); margin-right:6px; }
.nav a.nav__portal:hover{ border-color:var(--ink); color:var(--ink); }
.nav a.nav__portal[aria-current="page"]::after{ display:none; }

.lang{ display:flex; gap:1px; font-family:var(--f-mono); font-size:.7rem; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.lang button, .lang a{ padding:6px 9px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; transition:background .2s,color .2s; }
.lang button:hover, .lang a:hover{ color:var(--ink); }
.lang button[aria-pressed="true"], .lang a[aria-current="true"]{ background:var(--ink); color:var(--paper); }

.nav-toggle{ display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:var(--radius); align-items:center; justify-content:center; }
@media (max-width:880px){
  .nav-toggle{ display:inline-flex; position:relative; z-index:120; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,320px); max-width:100vw; z-index:110;
    flex-direction:column; align-items:flex-start;
    gap:var(--s4); background:var(--paper); border-left:1px solid var(--line);
    box-shadow:-24px 0 60px -20px rgba(17,19,24,.25);
    padding:calc(var(--s9) + var(--s5)) var(--gutter) var(--s8);
    transform:translateX(100%); visibility:hidden;
    transition:transform .4s var(--ease-out), visibility .4s;
    overflow-y:auto;
  }
  .nav[data-open="true"]{ transform:translateX(0); visibility:visible; }
  .nav a{ font-size:1.05rem; padding-block:8px; }
  .nav a.btn{ width:100%; justify-content:center; margin-top:var(--s3); }
  /* taust menüü taga — puudutus sulgeb */
  .nav-backdrop{
    position:fixed; inset:0; z-index:105; background:rgba(17,19,24,.34);
    opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  }
  .nav-backdrop[data-open="true"]{ opacity:1; pointer-events:auto; }
}

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding-top:calc(var(--s10) + var(--s4)); padding-bottom:var(--s10); }
.hero__canvas{ position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .8s var(--ease); }
.hero.gl-on .hero__canvas{ opacity:1; }
.hero.gl-on .corridor{ display:none; }
/* CSS-perspektiiv koridor — plakat + reduced-motion/JS-ita varuvariant (etapp 2: WebGL) */
.corridor{ position:absolute; inset:0 0 0 auto; width:62%; z-index:0; perspective:1000px; perspective-origin:72% 46%; pointer-events:none; opacity:.55; }
@media (max-width:900px){ .corridor{ width:100%; opacity:.32; perspective-origin:50% 46%; } }
.corridor__frame{
  position:absolute; top:50%; left:50%; width:min(48vw,620px); aspect-ratio:16/10;
  translate:-50% -50%; border:1px solid var(--line); border-radius:6px;
}
.corridor__frame:nth-child(1){ transform:translateZ(0); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); }
.corridor__frame:nth-child(2){ transform:translateZ(-240px); }
.corridor__frame:nth-child(3){ transform:translateZ(-500px); opacity:.7; }
.corridor__frame:nth-child(4){ transform:translateZ(-780px); opacity:.45; }
.corridor__frame:nth-child(5){ transform:translateZ(-1080px); opacity:.26; }
.corridor__frame:nth-child(6){ transform:translateZ(-1400px); opacity:.12; }
.corridor__word{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  transform:translate3d(var(--x,0), var(--y,0), var(--z,0));
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); white-space:nowrap;
}
.corridor__word--accent{ color:var(--accent); font-size:1rem; }

.hero__in{ position:relative; z-index:2; width:100%; }
.hero__mark{ font-family:var(--f-display); font-weight:800; font-size:var(--fs-hero); line-height:.86; letter-spacing:-.04em; }
/* "AI" täismust, "BIS" ainult peenike kontuur, seest valge — AI jääb silma */
.hero__mark-ai{ color:var(--ink); }
.hero__mark-bis{
  color:var(--paper);
  -webkit-text-stroke:2.5px var(--ink);
  text-stroke:2.5px var(--ink);
  paint-order:stroke fill;
}
@media (max-width:640px){ .hero__mark-bis{ -webkit-text-stroke-width:2px; text-stroke:2px var(--ink); } }
@supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)){
  .hero__mark-bis{ color:var(--ink); }
}
/* interaktiivne AIBIS "täiteviir": JS ehitab täht-tähelt kihid (fill + kontuur),
   clip-path paljastab täidise kursorist vasakule. Ilma JS-ita: .hero__mark-ai / -bis. */
.hero__mark .hm-l{ position:relative; display:inline-block; text-align:center; }
.hero__mark .hm-l__f,
.hero__mark .hm-l__o{ display:block; line-height:.86; will-change:clip-path; }
.hero__mark .hm-l__f{ color:var(--ink); }
.hero__mark .hm-l__o{
  position:absolute; inset:0;
  color:var(--paper);
  -webkit-text-stroke:2.5px var(--ink); text-stroke:2.5px var(--ink); paint-order:stroke fill;
}
@media (max-width:640px){ .hero__mark .hm-l__o{ -webkit-text-stroke-width:2px; text-stroke-width:2px; } }
.hero__title{ margin-top:var(--s5); font-family:var(--f-sans); font-weight:600; font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.2; letter-spacing:-.01em; max-width:22ch; }
.hero__lead{ margin-top:var(--s4); font-size:var(--fs-lead); color:var(--ink-2); max-width:44ch; }
.hero__actions{ margin-top:var(--s7); display:flex; flex-wrap:wrap; gap:var(--s3); }
.hero__hint{
  position:absolute; left:var(--gutter); bottom:var(--s6); z-index:2;
  font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); display:flex; align-items:center; gap:var(--s3);
}
.hero__hint::after{ content:""; width:1px; height:34px; background:var(--ink-2); animation:hintPulse 1.8s var(--ease) infinite; }
@keyframes hintPulse{ 0%,100%{ transform:scaleY(.4); opacity:.4; transform-origin:top; } 50%{ transform:scaleY(1); opacity:1; transform-origin:top; } }

/* ---------- Suunad ---------- */
.tracks{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
@media (max-width:860px){ .tracks{ grid-template-columns:1fr; } }
.track{ background:var(--paper); padding:var(--s7) var(--s5); display:flex; flex-direction:column; gap:var(--s4); min-height:340px; transition:background .3s var(--ease); }
.track:hover{ background:var(--paper-2); }
.track__k{ font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.track h3{ font-size:1.5rem; letter-spacing:-.02em; }
.track p{ color:var(--ink-2); font-size:1rem; }
.track ul{ margin-top:auto; display:flex; flex-direction:column; gap:var(--s2); padding-top:var(--s4); border-top:1px solid var(--line); }
.track li{ font-family:var(--f-mono); font-size:.8rem; color:var(--ink-2); }
.track li::before{ content:"+ "; color:var(--accent); }

/* ---------- Protsess (pinnitav) ---------- */
.process{ position:relative; }
.process__track{ display:flex; gap:var(--s6); }
.step{ flex:0 0 min(80vw,420px); border-top:2px solid var(--ink); padding-top:var(--s4); }
/* mobiil: initProcess() ei pinni (min-width:861px) — rada peab olema vertikaalne virn */
@media (max-width:860px){
  .process__track{ flex-direction:column; gap:var(--s6); }
  .step{ flex:none; width:100%; }
}
.step__n{ font-family:var(--f-mono); font-size:.8rem; color:var(--ink-3); }
.step__n::before{ content:attr(data-n) " / "; color:var(--accent); }
.step h3{ margin-top:var(--s3); font-size:1.5rem; }
.step p{ margin-top:var(--s3); color:var(--ink-2); }

/* ---------- Tööd ---------- */
.works{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5); }
@media (max-width:800px){ .works{ grid-template-columns:1fr; } }
.work{ border:1px solid var(--line); border-radius:var(--radius); padding:var(--s7) var(--s6); background:var(--paper); display:flex; flex-direction:column; gap:var(--s4); transition:transform .4s var(--ease-out), border-color .3s; overflow:hidden; }
.work:hover{ transform:translateY(-4px); border-color:var(--ink); }
.work__visual{
  margin:calc(var(--s7) * -1) calc(var(--s6) * -1) 0;
  background:var(--paper-2); border-bottom:1px solid var(--line);
  aspect-ratio:760 / 300; overflow:hidden;
}
.work__visual img{ width:100%; height:100%; object-fit:contain; padding:var(--s5) var(--s6); }
/* päris meedia (video / foto) täidab kogu visuaali, ilma polstrita */
.work__visual video,
.work__visual img.work__cover{ width:100%; height:100%; object-fit:cover; padding:0; display:block; }
.work__visual video{ background:var(--paper-2); }
.work__meta{ font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.work h3{ font-size:1.4rem; }
.work dl{ display:grid; grid-template-columns:auto 1fr; gap:8px var(--s4); font-size:.95rem; margin:0; }
.work dt{ font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); padding-top:3px; }
.work dd{ margin:0; color:var(--ink-2); }
.work__note{ font-family:var(--f-mono); font-size:.7rem; color:var(--ink-3); border-top:1px dashed var(--line); padding-top:var(--s3); }

/* ---------- Portfoolio näidisrada (pinnitud horisontaalne) ---------- */
.showcase{ position:relative; overflow:hidden; border-top:1px solid var(--line); padding-top:var(--s9); }
.showcase__track{ display:flex; gap:var(--s6); padding:var(--s4) var(--gutter) var(--s11); will-change:transform; }

/* Ühtne välissuurus kõigil kaartidel; sisemine jaotus erineb (--split / --stack / --bento) */
.show{
  position:relative; flex:0 0 min(920px, 86vw); aspect-ratio:1.9 / 1;
  display:grid; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .4s var(--ease), box-shadow .45s var(--ease);
}
.show::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4;
  background:radial-gradient(135% 130% at 15% 0%, var(--accent-wash), transparent 55%);
  opacity:0; transition:opacity .5s var(--ease);
}
/* hõljutuse vari — kaart tõuseb pinnalt: selgelt nähtav langev drop-shadow (mitte kontuurjoon) */
.show.is-hover{
  border-color:var(--ink);
  box-shadow:
    0 50px 80px -12px rgba(17,19,24,.30),
    0 26px 44px -10px rgba(17,19,24,.36),
    0 10px 20px -6px rgba(17,19,24,.30);
}
.show.is-hover::after{ opacity:1; }

/* --- jaotus 1: SPLIT (meedia vasakul, tekst kõrval) --- */
.show--split{ grid-template-columns:1.08fr .92fr; }
.show--split > .show__media{ grid-area:1/1; }
.show--split > .show__body{ grid-area:1/2; align-content:center; }

/* --- jaotus 2: STACK (lai meedia üleval, tekst all kahes veerus) --- */
.show--stack{ grid-template-rows:1.12fr 1fr; }
.show--stack > .show__media{ grid-area:1/1; border-bottom:1px solid var(--line); }
.show--stack > .show__body{ grid-area:2/1; display:grid; grid-template-columns:.95fr 1.15fr; gap:var(--s6); align-content:start; }

/* --- jaotus 3: BENTO (üks suur + kaks väiksemat, tekst all) --- */
.show--bento{ grid-template-rows:1.3fr 1fr; }
.show--bento > .show__media{
  grid-area:1/1; display:grid; gap:2px; background:var(--line);
  grid-template-columns:1.75fr 1fr; grid-template-rows:1fr 1fr;
  border-bottom:1px solid var(--line);
}
.show--bento > .show__media > .mcell:nth-child(1){ grid-row:1/3; }
.show--bento > .show__media > .mcell:nth-child(2){ grid-column:2; grid-row:1; }
.show--bento > .show__media > .mcell:nth-child(3){ grid-column:2; grid-row:2; }
.show--bento > .show__body{ grid-area:2/1; display:grid; grid-template-columns:.95fr 1.15fr; gap:var(--s6); align-content:start; }

/* --- jaotus 3b: MOSAIC (bento variant, 4 elementi: suur vasak + 2 väikest + püstine parem) --- */
.show--mosaic > .show__media{ grid-template-columns:1.45fr 1fr .72fr; }
.show--mosaic > .show__media > .mcell:nth-child(1){ grid-column:1; grid-row:1/3; }
.show--mosaic > .show__media > .mcell:nth-child(2){ grid-column:2; grid-row:1; }
.show--mosaic > .show__media > .mcell:nth-child(3){ grid-column:2; grid-row:2; }
.show--mosaic > .show__media > .mcell:nth-child(4){ grid-column:3; grid-row:1/3; }

/* --- jaotus 4: DUO (kaks võrdset meediapesa kõrvuti, tekst all — stack-kere) --- */
.show--duo > .show__media{
  grid-area:1/1; display:grid; gap:2px; background:var(--line);
  grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line);
}

/* meedia-kestad */
.show__media{ position:relative; overflow:hidden; background:var(--paper-2); will-change:transform; }
.mcell{ position:relative; overflow:hidden; background:var(--paper-2); }
.mcell > *,
.show--split > .show__media > *,
.show--stack > .show__media > *{ position:absolute; inset:0; width:100%; height:100%; }
/* DUO: meediapesad on ise ruudustiku elemendid — ära absoluutseks muuda (stack-reegel muidu tabab .mcell-i) */
.show--duo > .show__media > .mcell{ position:relative; inset:auto; width:auto; height:auto; }
.show__video{ object-fit:cover; opacity:0; transition:opacity .6s var(--ease); }
.show.has-video .show__video{ opacity:1; }
.show.has-video .show__diagram{ opacity:0; transition:opacity .6s var(--ease); }
.show__diagram{ display:grid; place-items:center; padding:var(--s5); }
.show__diagram svg{ width:100%; height:100%; overflow:visible; }

.show__index{
  position:absolute; top:var(--s3); right:var(--s4); z-index:5;
  font-family:var(--f-display); font-weight:700; line-height:1;
  font-size:clamp(1.8rem,3vw,3rem);
  color:transparent; -webkit-text-stroke:1.4px rgba(255,255,255,.55);
  mix-blend-mode:overlay;
}
.show--split .show__index{ -webkit-text-stroke-color:rgba(17,19,24,.22); mix-blend-mode:normal; }

.show__body{ min-width:0; padding:var(--s6); display:flex; flex-direction:column; gap:var(--s3); }
.show--stack .show__body,
.show--bento .show__body{
  padding:var(--s5) var(--s6); gap:2px var(--s6);
  display:grid; grid-template-columns:.92fr 1.18fr; grid-template-rows:auto auto 1fr;
}
.show__meta{ font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.show__body h3{ font-size:clamp(1.1rem,1.7vw,1.5rem); letter-spacing:-.02em; }
.show__dl{ display:grid; grid-template-columns:auto 1fr; gap:5px var(--s4); margin:var(--s2) 0 0; font-size:.9rem; }
.show--stack .show__dl,
.show--bento .show__dl{ font-size:.8rem; gap:3px var(--s3); margin:0; }
.show__dl dt{ font-family:var(--f-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); padding-top:4px; }
.show__dl dd{ margin:0; color:var(--ink-2); }
.show__note{ margin-top:var(--s2); font-family:var(--f-mono); font-size:.68rem; color:var(--ink-3); }
.show__note a{ color:var(--accent); }
/* stack/bento: vasak veerg = meta / pealkiri / (all) märkus; parem veerg = P·L·T */
.show--stack .show__body > .show__meta,
.show--bento .show__body > .show__meta{ grid-column:1; grid-row:1; }
.show--stack .show__body > h3,
.show--bento .show__body > h3{ grid-column:1; grid-row:2; }
.show--stack .show__body > .show__note,
.show--bento .show__body > .show__note{ grid-column:1; grid-row:3; align-self:end; }
.show--stack .show__body > .show__dl,
.show--bento .show__body > .show__dl{ grid-column:2; grid-row:1 / -1; }

.showcase__hint{
  position:absolute; left:var(--gutter); bottom:var(--s7); z-index:3;
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.showcase__hint::after{ content:""; width:52px; height:1px; background:currentColor; transform-origin:left center;
  animation:hintSlide 1.9s var(--ease) infinite; }
@keyframes hintSlide{ 0%,100%{ transform:scaleX(.28); opacity:.4 } 50%{ transform:scaleX(1); opacity:1 } }

/* jagatud diagrammi-teema (asendab iga inline-SVG oma <style>) */
.show__diagram .n{ fill:none; stroke:var(--ink); stroke-opacity:.22; stroke-width:1.5; }
.show__diagram .a{ stroke:var(--accent); stroke-opacity:.9; transition:stroke-opacity .4s var(--ease); }
.show__diagram .v{ fill:none; stroke:var(--ink); stroke-opacity:.2; stroke-width:1.5; }
.show__diagram .ln{ stroke:var(--ink); stroke-opacity:.3; stroke-width:1.5; fill:none; stroke-linecap:round; }
.show__diagram .t{ font-family:var(--f-mono); font-size:18px; font-weight:500; letter-spacing:2px; fill:var(--ink); }
.show__diagram .s{ font-family:var(--f-mono); font-size:11px; letter-spacing:1.5px; fill:var(--ink); fill-opacity:.5; }
.show__diagram .ta{ fill:var(--accent); }
.show__diagram .pkt{ filter:drop-shadow(0 0 5px var(--accent-2)); }
.show.is-hover .show__diagram .a{ stroke-opacity:1; }

/* kursorit järgiv silt */
.show-cursor{ position:fixed; left:0; top:0; z-index:80; pointer-events:none; will-change:transform; }
.show-cursor__in{
  display:block; padding:.55rem .85rem; border-radius:100px;
  background:var(--ink); color:var(--paper); white-space:nowrap;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  transform:translate(-50%,-50%) scale(.35); opacity:0;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.show-cursor.is-on .show-cursor__in{ transform:translate(-50%,-50%) scale(1); opacity:1; }

@media (max-width:860px){
  .showcase{ padding-block:var(--s8); }
  .showcase__track{ flex-direction:column; padding:0 var(--gutter); gap:var(--s6); transform:none !important; }
  .show{ flex:none; aspect-ratio:auto; grid-template-columns:1fr; grid-template-rows:auto auto; }
  .show > .show__media{ grid-area:auto; aspect-ratio:16/9; }
  .show > .show__body{ grid-area:auto; grid-template-columns:1fr; }
  .show--bento > .show__media{ grid-template-columns:1fr; grid-template-rows:1.4fr 1fr 1fr; }
  .show--duo > .show__media{ grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
  .show--mosaic > .show__media{ grid-template-columns:1fr 1fr; grid-template-rows:1.3fr 1fr 1fr; }
  .show--bento > .show__media > .mcell:nth-child(1){ grid-row:auto; }
  .show--mosaic > .show__media > .mcell:nth-child(1){ grid-column:1/3; grid-row:1; }
  .show--mosaic > .show__media > .mcell:nth-child(2){ grid-column:1; grid-row:2; }
  .show--mosaic > .show__media > .mcell:nth-child(3){ grid-column:2; grid-row:2; }
  .show--mosaic > .show__media > .mcell:nth-child(4){ grid-column:1/3; grid-row:3; }
  .show--bento > .show__media > .mcell:nth-child(2),
  .show--bento > .show__media > .mcell:nth-child(3){ grid-column:auto; grid-row:auto; }
  .show--stack .show__body > .show__dl,
  .show--bento .show__body > .show__dl,
  .show--stack .show__body > .show__note,
  .show--bento .show__body > .show__note{ grid-column:1; grid-row:auto; }
  .showcase__hint{ display:none; }
  .show-cursor{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .show,.show::after,.show__video,.show-cursor__in,.show__diagram .a{ transition:none; }
  .showcase__hint::after{ animation:none; transform:scaleX(1); }
  .show__diagram :is(rect,path,text,circle){ opacity:1 !important; visibility:visible !important; }
}

/* ---------- Numbrid / arvudes ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6) var(--s5); }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat__n{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.4rem,4.5vw,3.6rem); letter-spacing:-.03em; line-height:1; }
.stat__l{ margin-top:var(--s3); font-size:.95rem; color:var(--ink-2); max-width:22ch; }

/* ---------- Koolitus ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s9); align-items:start; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; gap:var(--s7); } }
.deflist{ display:grid; grid-template-columns:auto 1fr; gap:var(--s3) var(--s5); font-size:1rem; }
.deflist dt{ font-family:var(--f-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); padding-top:3px; }
.deflist dd{ margin:0; color:var(--ink-2); }

/* ---------- Kontakt ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s9); align-items:start; }
@media (max-width:880px){ .contact{ grid-template-columns:1fr; gap:var(--s7); } }
.contact__lines{ margin-top:var(--s5); display:flex; flex-direction:column; gap:var(--s2); font-family:var(--f-mono); font-size:.92rem; }
.contact__lines a{ color:var(--ink-2); border-bottom:1px solid transparent; width:max-content; transition:color .2s,border-color .2s; }
.contact__lines a:hover{ color:var(--ink); border-color:var(--accent); }
.form{ display:grid; gap:var(--s4); }
.field{ display:grid; gap:var(--s2); }
.field label{ font-family:var(--f-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); }
.field input,.field textarea{ font:inherit; font-size:1rem; padding:13px 15px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); width:100%; }
.field input:focus,.field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
.field textarea{ min-height:130px; resize:vertical; }
.form__note{ font-family:var(--f-mono); font-size:.72rem; color:var(--ink-3); }

/* ---------- Jalus ---------- */
.ftr{ background:var(--ink); color:var(--paper); padding-block:var(--s9) var(--s6); }
.ftr a{ color:var(--paper); }
.ftr__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:var(--s7); padding-bottom:var(--s8); border-bottom:1px solid rgba(255,255,255,.14); }
@media (max-width:760px){ .ftr__grid{ grid-template-columns:1fr; gap:var(--s6); } }
.ftr__brand{ display:inline-block; }
.ftr__mark{ display:block; font-family:var(--f-display); font-weight:700; font-size:clamp(2.5rem,6vw,4rem); letter-spacing:-.02em; line-height:1; }
/* sama võte kui hero's, aga tumedal taustal: "AI" täisvalge, "BIS" valge kontuur + tume seest */
.ftr__mark-ai{ color:var(--paper); }
.ftr__mark-bis{
  color:var(--ink);
  -webkit-text-stroke:2px var(--paper);
  text-stroke:2px var(--paper);
  paint-order:stroke fill;
}
@supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)){
  .ftr__mark-bis{ color:var(--paper); }
}
/* jaluse AIBIS: JS jaotab tähtedeks ja lisab kursoripõhise RGB-poolituse */
.ftr__mark .fm-l{ display:inline-block; will-change:transform, text-shadow; }
/* jalus-tagline: täpselt AIBIS-märgi laiune, ühel real, tähed oluliselt väiksemad.
   width:0 + min-width:100% => laius = .ftr__brand (= märgi) laius, ilma seda venitamata;
   text-align-last:justify venitab sõnad täpselt servast servani. */
.ftr__tag{
  display:block;
  width:0; min-width:100%;
  margin-top:.7em;
  white-space:nowrap;
  font-size:clamp(4.6px, .78vw, 8.4px);
  letter-spacing:0;
  color:#B7B8BE;
  text-align:justify;
  text-align-last:justify;
}
@media (max-width:760px){
  .ftr__tag{ width:auto; min-width:0; white-space:normal; font-size:.8rem; text-align:left; text-align-last:auto; max-width:34ch; }
}
.ftr__col h4{ font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:#8A8C93; font-weight:400; margin-bottom:var(--s3); }
.ftr__col ul{ display:flex; flex-direction:column; gap:var(--s2); font-size:.95rem; color:#D5D6DA; }
.ftr__col a:hover{ color:#fff; }
.ftr__btm{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s4); padding-top:var(--s5); font-family:var(--f-mono); font-size:.74rem; color:#8A8C93; }
.ftr__btm .lang{ border-color:rgba(255,255,255,.2); }
.ftr__btm .lang button, .ftr__btm .lang a{ color:#8A8C93; }
.ftr__btm .lang button[aria-pressed="true"], .ftr__btm .lang a[aria-current="true"]{ background:var(--paper); color:var(--ink); }

.mt6{ margin-top:var(--s6); }
.mt7{ margin-top:var(--s7); }
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ============================================================
   ALAMLEHED (teenused / koolitused / portfoolio) — ilma WebGL-ita
   ============================================================ */
.page-hero{ padding-top:calc(var(--s10) + var(--s6)); padding-bottom:var(--s9); border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:var(--fs-h1); font-weight:700; letter-spacing:-.03em; max-width:18ch; }
.page-hero .lead{ margin-top:var(--s5); }

/* teenuseplokk: eyebrow+pealkiri vasakul, detailid paremal */
.svc-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s9); align-items:start; }
@media (max-width:880px){ .svc-row{ grid-template-columns:1fr; gap:var(--s6); } }
.svc-row h2{ font-size:var(--fs-h2); margin-top:var(--s5); }
.svc-row .lead{ margin-top:var(--s5); }

/* paketid */
.packs{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5); }
@media (max-width:760px){ .packs{ grid-template-columns:1fr; } }
.pack{ border:1px solid var(--line); border-radius:var(--radius); padding:var(--s6); display:flex; flex-direction:column; gap:var(--s3); background:var(--paper); transition:border-color .3s var(--ease), transform .4s var(--ease-out); }
.pack:hover{ border-color:var(--ink); transform:translateY(-3px); }
.pack--wide{ grid-column:1/-1; }
.pack__top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; }
.pack h3{ font-size:1.25rem; letter-spacing:-.01em; }
.pack__price{ font-family:var(--f-mono); font-size:.85rem; color:var(--accent); white-space:nowrap; }
.pack__for{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.pack p{ color:var(--ink-2); font-size:1rem; }

/* sildid */
.taglist{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.tag{ font-family:var(--f-mono); font-size:.8rem; border:1px solid var(--line); border-radius:999px; padding:6px 13px; color:var(--ink-2); }

/* leivapuru */
.crumb{ font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.1em; text-transform:uppercase; }
.crumb a{ color:var(--ink-3); transition:color .2s; }
.crumb a::before{ content:"← "; color:var(--accent); }
.crumb a:hover{ color:var(--ink); }

/* KKK */
.faq{ display:flex; flex-direction:column; border-top:1px solid var(--line); max-width:70ch; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:var(--s5) 0; font-size:var(--fs-h3);
  font-family:var(--f-display); font-weight:600; letter-spacing:-.01em;
  display:flex; align-items:baseline; gap:var(--s3);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::before{ content:"+"; color:var(--accent); font-family:var(--f-mono); font-size:1rem; flex:none; }
.faq__item[open] summary::before{ content:"–"; }
.faq__item p{ padding:0 0 var(--s5) calc(var(--s3) + 1ch); color:var(--ink-2); max-width:60ch; }

/* CTA-riba */
.cta-band{ padding-block:var(--s10); border-top:1px solid var(--line); background:var(--paper-2); }
.cta-band h2{ font-size:var(--fs-h2); max-width:20ch; }

/* ============================================================
   BLOGI
   ============================================================ */
.blog-list{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.post-card{ padding-block:var(--s7); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:var(--s3); max-width:74ch; }
.post-card__meta{ font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.post-card h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); letter-spacing:-.02em; }
.post-card h2 a{ transition:color .2s; }
.post-card h2 a:hover{ color:var(--accent); }
.post-card p{ color:var(--ink-2); }
.post-card__more a{ font-family:var(--f-mono); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); }
.post-card__more a::after{ content:" →"; }

/* artikkel */
.article .wrap{ max-width:760px; }
.article__meta{ font-family:var(--f-mono); font-size:var(--fs-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:var(--s5); }
.article__cover{ margin:var(--s7) 0 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-2); overflow:hidden; }
.article__cover img{ display:block; width:100%; height:auto; }
.post-card__thumb{ display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-2); overflow:hidden; aspect-ratio:1200/480; }
.post-card__thumb img{ display:block; width:100%; height:100%; object-fit:cover; transition:opacity .3s var(--ease); }
.post-card__thumb:hover img{ opacity:.7; }
.article__body{ margin-top:var(--s8); }
.article__body > * + *{ margin-top:var(--s5); }
.article__lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--ink-2); }
.article__body h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); letter-spacing:-.02em; margin-top:var(--s8); }
.article__body p{ font-size:1.075rem; line-height:1.7; }
.article__body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.article__body ul, .article__body ol{ padding-left:1.4em; list-style:revert; }
.article__body li{ margin-top:var(--s2); line-height:1.7; }