/* ── 00-tokens.css ─── */
/* =============================================================
   00-tokens.css — Design Token System
   OPEN QUESTION #2: Final typeface selection (Fable/Dejan)
   OPEN QUESTION #1: Final tagline/headline (Fable/Dejan)
   ============================================================= */

:root {

  /* ─── Color ──────────────────────────────────────────────── */
  --c-bg:             #0B1633;   /* Deep Navy */
  --c-surface:        #131F3F;
  --c-surface-2:      #182033;   /* Graphite */
  --c-surface-3:      #1F2B4A;
  /* Minimum contrast 4.5:1 against #0B1633 at normal text sizes */
  --c-text-primary:   #F6F4EF;   /* Warm White, 16.4:1 */
  --c-text-secondary: #9AA6BD;   /* 7.4:1  */
  --c-text-tertiary:  #8390AB;   /* 5.6:1  */
  /* Decorative-only: use on large (18px+) text with aria-hidden="true" */
  --c-text-dim:       #5F6B85;
  /* Brend paleta zakljucana 13.09.2026 — SOCIAL/plan/BRAND_PALETA.md */
  --c-accent:         #6D95FF;   /* DL Blue, posvetljen za kontrast na navy */
  --c-accent-subtle:  rgba(50,107,255,0.16);
  --c-border:         rgba(246,244,239,0.08);
  --c-border-hover:   rgba(246,244,239,0.16);

  /* ─── Typography ─────────────────────────────────────────── */
  /* OPEN QUESTION #2: Replace with Fable/Dejan-selected typefaces before E2 */
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Helvetica, Arial, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* Fluid type — min at 320px viewport, max at 1440px */
  --text-2xs:  clamp(0.625rem,  0.58rem  + 0.22vw,  0.75rem);   /*  10–12px */
  --text-xs:   clamp(0.75rem,   0.70rem  + 0.25vw,  0.875rem);  /*  12–14px */
  --text-sm:   clamp(0.875rem,  0.82rem  + 0.28vw,  1rem);      /*  14–16px */
  --text-base: clamp(1rem,      0.95rem  + 0.25vw,  1.125rem);  /*  16–18px */
  --text-lg:   clamp(1.125rem,  1.05rem  + 0.38vw,  1.25rem);   /*  18–20px */
  --text-xl:   clamp(1.25rem,   1.15rem  + 0.5vw,   1.5rem);    /*  20–24px */
  --text-2xl:  clamp(1.5rem,    1.3rem   + 1vw,     2rem);      /*  24–32px */
  --text-3xl:  clamp(2rem,      1.6rem   + 2vw,     3rem);      /*  32–48px */
  --text-4xl:  clamp(2.5rem,    1.8rem   + 3.5vw,   4.5rem);    /*  40–72px */
  --text-hero: clamp(3rem,      2rem     + 5vw,     7rem);      /*  48–112px */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;
  --ls-widest:   0.2em;

  /* Font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ─── Spacing (4px base grid) ────────────────────────────── */
  --sp-1:   0.25rem;   /*   4px */
  --sp-2:   0.5rem;    /*   8px */
  --sp-3:   0.75rem;   /*  12px */
  --sp-4:   1rem;      /*  16px */
  --sp-5:   1.25rem;   /*  20px */
  --sp-6:   1.5rem;    /*  24px */
  --sp-8:   2rem;      /*  32px */
  --sp-10:  2.5rem;    /*  40px */
  --sp-12:  3rem;      /*  48px */
  --sp-16:  4rem;      /*  64px */
  --sp-20:  5rem;      /*  80px */
  --sp-24:  6rem;      /*  96px */
  --sp-32:  8rem;      /* 128px */
  --sp-40:  10rem;     /* 160px */
  --sp-48:  12rem;     /* 192px */

  /* ─── Grid / Layout ──────────────────────────────────────── */
  --grid-cols:     12;
  --grid-gutter:   clamp(1rem, 2.5vw, 1.5rem);
  --container-max: 1440px;
  --container-pad: clamp(1.5rem, 5vw, 4rem);

  /* ─── Navigation ─────────────────────────────────────────── */
  /* 14.09.2026: rail prosiren sa 56px na 280px (oko 7,4 cm). Naslovi
     se vise ne rotiraju nego se citaju normalno, a sekcije sa vise
     stranica dobijaju padajuci meni unutar samog rail-a.
     Mera je Dejanov drawer sa slike (320px) — 300px daje istu
     tezinu a ostavlja vise sadrzaju. Uza vrednost za 1024-1279
     je na dnu ovog fajla. */
  --nav-rail-w:    300px;
  --nav-drawer-w:  320px;
  --nav-mobile-h:  56px;

  /* ─── Z-Index layers ─────────────────────────────────────── */
  --z-base:        0;
  --z-raised:      10;
  --z-sticky:      50;
  --z-nav-rail:    100;
  --z-nav-overlay: 190;
  --z-nav-drawer:  200;
  --z-nav-mobile:  300;
  --z-modal:       400;
  --z-toast:       500;

  /* ─── Motion ─────────────────────────────────────────────── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);

  --dur-instant:   80ms;
  --dur-fast:      150ms;
  --dur-base:      250ms;
  --dur-slow:      400ms;
  --dur-reveal:    600ms;
  --dur-cinematic: 900ms;

  /* ─── Border Radius ──────────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   16px;
  --radius-full: 9999px;
}

/* Rail po sirini ekrana. Na 1024px bi 280px pojelo previse sadrzaja,
   pa se suzava; ispod 1024px ga nema pa je nula (mobilna traka gore). */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --nav-rail-w: 232px; }
}

@media (max-width: 1023px) {
  :root { --nav-rail-w: 0px; }
}


/* ── 01-base.css ─── */
/* =============================================================
   01-base.css — Reset + base typography + layout foundation
   ============================================================= */

/* Modern reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}

body {
  background-color: var(--c-bg);
  color: var(--c-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Skip link — accessible keyboard nav */
.skip-link {
  position: absolute;
  top: -100%;
  /* Pocinje tamo gde i sadrzaj, da ne pada preko rail-a. */
  left: calc(var(--nav-rail-w) + var(--sp-4));
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-6);
  background: var(--c-accent);
  color: var(--c-bg);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top var(--dur-fast);
}

.skip-link:focus {
  top: var(--sp-4);
}

/* List resets */
ul,
ol {
  list-style: none;
}

/* Media defaults */
img,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* Form element inheritance */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Button reset */
button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Link defaults */
a {
  color: inherit;
  text-decoration: none;
}

/* Focus styles — consistent across interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Heading scale */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-primary);
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
  max-width: 65ch;
}

/* Sadrzaj pocinje desno od rail-a. */
.page-content {
  margin-left: var(--nav-rail-w);
  min-height: 100vh;
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Visually hidden (screen-reader only) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Mobile: rail se sklanja, gore ide mobilna traka ────── */
@media (max-width: 1023px) {
  .page-content {
    margin-left: 0;
    padding-top: var(--nav-mobile-h);
  }
}


/* ── 02-nav.css ─── */
/* =============================================================
   02-nav.css — Siroki levi rail · Drawer · Mobilna traka

   14.09.2026: rail je prosiren sa 56px na 300px. Do tada su naslovi
   bili rotirani za 90 stepeni i stale su samo cetiri od osam sekcija;
   ostalo se otvaralo u drawer-u.

   Oblik je po uzoru na fuselabcreative.com, koji je Dejan dao kao
   meru (14.09.): naslovi normalnom velicinom i malim slovima, znak
   plus sa leve strane kod sekcija koje se sire, natpisi poravnati
   u jednu liniju, i pun blok poziva na akciju na dnu.

   Otvorena je uvek najvise jedna sekcija.
   Nazad i kucica stoje u vrhu rail-a, pored znaka.
   Drawer i mobilna traka rade nepromenjeno ispod 1024px.
   ============================================================= */

/* ─── LEVI RAIL (desktop >=1024px) ────────────────────────── */

.nav-rail {
  --rail-pad: var(--sp-8);
  --rail-znak: 22px;

  position: fixed;
  inset-block: 0;
  left: 0;
  width: var(--nav-rail-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-block: var(--sp-8);
  background: var(--c-bg);
  border-right: 1px solid var(--c-border);
  z-index: var(--z-nav-rail);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border) transparent;
}

/* ─── Vrh: znak, pa nazad i kucica ────────────────────────── */

.nav-rail__vrh {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
  padding-inline: var(--rail-pad);
  margin-bottom: var(--sp-10);
}

.nav-rail__logo {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-rail__logo:hover {
  color: var(--c-accent);
}

/* ─── Nazad i kucica ──────────────────────────────────────────
   Dejan, 14.09.2026: znak DL vodi kuci, ali to je brend a ne dugme.
   Posetilac koji je usao sa Google-a na /industries/solar/ nema
   nijedan vidljiv nacin da se vrati korak nazad. Ove dve ikone
   stoje na svakoj stranici, i u rail-u i u mobilnoj traci. */

.nav-rail__kontrole,
.nav-mobile-bar__kontrole {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}

.nav-mobile-bar__kontrole {
  margin-right: var(--sp-1);
}

.nav-ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  color: var(--c-text-tertiary);
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.nav-ikona:hover,
.nav-ikona:focus-visible {
  color: var(--c-text-primary);
  background: var(--c-surface-2);
}

/* Dugme nazad je skriveno dok nav.js ne potvrdi da ima gde da vrati.
   Pravilo mora da nadjaca display: inline-flex iznad. */
.nav-ikona[hidden] {
  display: none;
}

/* Prst trazi 40px, mis ne. */
@media (max-width: 1023px) {
  .nav-mobile-bar__kontrole .nav-ikona {
    width: 40px;
    height: 40px;
  }
}

/* ─── Spisak sekcija ──────────────────────────────────────── */

.nav-rail__list {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nav-rail__item {
  position: relative;
}

/* Stavka je link (Demos, Lina, Work, Studio) ili dugme sa menijem
   (Industries, Systems, Design, Pricing). Isti izgled, razlicita
   semantika — dugme jer otvara meni, link jer vodi na stranicu.
   Levi razmak je isti za obe, pa naslovi stoje u jednoj liniji
   bez obzira na to da li ispred njih stoji plus. */
.nav-rail__link {
  position: relative;
  display: block;
  width: 100%;
  padding: 7px var(--rail-pad) 7px calc(var(--rail-pad) + var(--rail-znak));
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  color: var(--c-text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-rail__link:hover,
.nav-rail__link:focus-visible {
  color: var(--c-text-primary);
}

.nav-rail__link[aria-current="page"] {
  color: var(--c-accent);
}

/* ─── Plus / minus ispred sekcija koje se sire ────────────── */

.nav-rail__znak {
  position: absolute;
  left: var(--rail-pad);
  top: 50%;
  translate: 0 -50%;
  width: 11px;
  height: 11px;
  color: var(--c-accent);
  pointer-events: none;
}

.nav-rail__znak::before,
.nav-rail__znak::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out);
}

/* vodoravna crta ostaje, uspravna nestaje kad se otvori: plus -> minus */
.nav-rail__znak::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
}

.nav-rail__znak::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  margin-left: -0.75px;
}

.nav-rail__item.is-open .nav-rail__znak::after {
  transform: scaleY(0);
}

/* ─── Padajuci meni u rail-u ──────────────────────────────────
   grid-template-rows 0fr -> 1fr otvara visinu koju ne znamo unapred,
   bez max-height pogadjanja. */

.nav-rail__meni {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.nav-rail__item.is-open > .nav-rail__meni {
  grid-template-rows: 1fr;
}

.nav-rail__meni-unutra {
  overflow: hidden;
}

.nav-rail__meni a {
  display: block;
  padding: 5px var(--rail-pad) 5px calc(var(--rail-pad) + var(--rail-znak));
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--c-text-tertiary);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-rail__meni a:hover,
.nav-rail__meni a:focus-visible {
  color: var(--c-text-primary);
}

.nav-rail__meni a[aria-current="page"] {
  color: var(--c-accent);
}

/* Prvi red menija vodi na samu sekciju (/industries/, /systems/ ...).
   Naslov iznad je dugme koje otvara meni, pa hub link mora da postoji. */
.nav-rail__meni a.nav-rail__hub {
  color: var(--c-accent);
}

.nav-rail__meni-unutra > :last-child {
  margin-bottom: var(--sp-3);
}

/* ─── Poziv na akciju: pun blok na dnu ────────────────────── */

.nav-rail__cta {
  display: block;
  flex-shrink: 0;
  margin: var(--sp-8) var(--rail-pad) 0;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--c-accent);
  color: var(--c-bg);
  transition: background var(--dur-fast) var(--ease-out);
}

.nav-rail__cta:hover,
.nav-rail__cta:focus-visible {
  background: var(--c-text-primary);
}

.nav-rail__cta-naslov {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
}

.nav-rail__cta-tekst {
  display: block;
  margin-top: 3px;
  font-size: var(--text-sm);
  line-height: 1.35;
  opacity: 0.72;
}

/* ─── Uzi desktop: 1024-1279px ────────────────────────────── */

@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-rail {
    --rail-pad: var(--sp-5);
  }

  .nav-rail__link {
    font-size: var(--text-sm);
    padding-block: 6px;
  }

  .nav-rail__meni a {
    font-size: var(--text-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-rail__link,
  .nav-rail__znak::before,
  .nav-rail__znak::after,
  .nav-rail__meni {
    transition: none;
  }
}

/* ─── DRAWER OVERLAY (behind drawer, above content) ───────── */

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: var(--z-nav-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-in-out);
}

.nav-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─── NAVIGATION DRAWER ────────────────────────────────────── */

.nav-drawer {
  position: fixed;
  top: 0;
  left: var(--nav-rail-w);
  width: var(--nav-drawer-w);
  height: 100vh;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  transform: translateX(calc(-100% - var(--nav-rail-w)));
  transition: transform var(--dur-reveal) var(--ease-out-expo);
  z-index: var(--z-nav-drawer);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nav-drawer.is-open {
  transform: translateX(0);
}

/* Drawer header */
.nav-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  min-height: var(--nav-mobile-h);
}

.nav-drawer__logo {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-primary);
}

.nav-drawer__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-tertiary);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.nav-drawer__close:hover {
  color: var(--c-text-primary);
  background: var(--c-surface-2);
}

/* Drawer scrollable nav */
.nav-drawer__nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--c-border) transparent;
  padding-bottom: var(--sp-8);
}

/* Section row */
.nav-drawer__section {
  border-bottom: 1px solid var(--c-border);
}

.nav-drawer__section:last-child {
  border-bottom: none;
}

/* Section heading link */
.nav-drawer__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-secondary);
  transition: color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-fast) var(--ease-out);
}

.nav-drawer__heading:hover {
  color: var(--c-text-primary);
  padding-left: calc(var(--sp-5) + var(--sp-2));
}

/* Active section highlight */
.nav-drawer__section.is-active > .nav-drawer__heading {
  color: var(--c-accent);
}

/* Sub-navigation links */
.nav-drawer__sub {
  padding: 0 0 var(--sp-3);
}

.nav-drawer__sub a {
  display: block;
  padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-8);
  font-size: var(--text-sm);
  color: var(--c-text-tertiary);
  transition: color var(--dur-fast) var(--ease-out),
              padding-left var(--dur-fast) var(--ease-out);
}

.nav-drawer__sub a:hover {
  color: var(--c-text-primary);
  padding-left: calc(var(--sp-8) + var(--sp-2));
}

/* ─── MOBILE TOP BAR (≤1023px only) ───────────────────────── */

.nav-mobile-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-mobile-h);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--sp-4);
  z-index: var(--z-nav-mobile);
}

.nav-mobile-bar__logo {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-primary);
}

.nav-mobile-bar__toggle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-primary);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out);
}

.nav-mobile-bar__toggle:hover {
  background: var(--c-surface-2);
}

/* Hamburger icon: three bars via pseudo-elements */
.nav-mobile-bar__hamburger,
.nav-mobile-bar__hamburger::before,
.nav-mobile-bar__hamburger::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  border-radius: var(--radius-full);
  transition: transform var(--dur-base) var(--ease-in-out),
              opacity var(--dur-base) var(--ease-in-out);
}

.nav-mobile-bar__hamburger {
  position: relative;
}

.nav-mobile-bar__hamburger::before,
.nav-mobile-bar__hamburger::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-mobile-bar__hamburger::before { top: -6px; }
.nav-mobile-bar__hamburger::after  { top:  6px; }

/* × (close) state when drawer is open */
.nav-mobile-bar__toggle[aria-expanded="true"] .nav-mobile-bar__hamburger {
  background: transparent;
}

.nav-mobile-bar__toggle[aria-expanded="true"] .nav-mobile-bar__hamburger::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-mobile-bar__toggle[aria-expanded="true"] .nav-mobile-bar__hamburger::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ─── RESPONSIVE BREAKPOINT ────────────────────────────────── */

@media (max-width: 1023px) {
  /* Rail je samo za desktop */
  .nav-rail { display: none; }

  /* Show mobile bar */
  .nav-mobile-bar { display: flex; }

  /* Drawer fills full screen on mobile */
  .nav-drawer {
    left: 0;
    width: 100vw;
    max-width: 100vw;
    transform: translateX(-100vw);
  }

  .nav-drawer.is-open {
    transform: translateX(0);
  }
}

/* Tablet-specific drawer sizing */
@media (min-width: 1024px) and (max-width: 1279px) {
  --nav-drawer-w: 280px;
}


/* ── 03-pages.css ─── */
/* =============================================================
   03-pages.css — Skeleton page styles
   E1: placeholder chrome for homepage hero + scenes + interior pages
   E2+ will replace hero placeholder; E3+ will replace scene placeholders
   ============================================================= */

/* ─── HOMEPAGE — Hero placeholder (replaced in E2) ─────────── */

.hero-placeholder {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  overflow: hidden;
}

.hero-placeholder__inner {
  text-align: center;
  padding: var(--container-pad);
  position: relative;
  z-index: 1;
}

.hero-placeholder__label {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-6);
}

.hero-placeholder__headline {
  font-size: var(--text-hero);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-secondary);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-6);
}

.hero-placeholder__note {
  font-size: var(--text-sm);
  color: var(--c-text-tertiary);  /* #808080 — 5.1:1 contrast against bg */
  font-family: var(--font-mono);
}

/* Decorative corner mark */
.hero-placeholder__corner {
  position: absolute;
  bottom: var(--sp-8);
  right: var(--sp-8);
  font-size: var(--text-2xs);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-dim);
  text-transform: uppercase;
  pointer-events: none;
}

/* ─── HOMEPAGE — Scene pack placeholders (replaced in E3) ─── */

/* ─── INTERIOR PAGES ─────────────────────────────────────────── */

.page-header {
  padding-block: var(--sp-32) var(--sp-20);
  border-bottom: 1px solid var(--c-border);
}

.page-header__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  margin-bottom: var(--sp-5);
}

.page-header__title {
  font-size: var(--text-4xl);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-primary);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-6);
}

.page-header__desc {
  font-size: var(--text-lg);
  color: var(--c-text-secondary);
  max-width: 55ch;
  line-height: var(--lh-relaxed);
}

/* Body content area */
.page-body {
  padding-block: var(--sp-20);
}

/* Placeholder section row */
.placeholder-section {
  padding-block: var(--sp-16);
  border-bottom: 1px solid var(--c-border);
}

.placeholder-section:last-child {
  border-bottom: none;
}

.placeholder-section__label {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
}

.placeholder-section__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* Open question callout */
.open-question {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--c-accent);
  background: var(--c-accent-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.open-question__label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}

.open-question__text {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  font-family: var(--font-mono);
  line-height: var(--lh-relaxed);
  max-width: none;
}

/* ─── 404 PAGE ───────────────────────────────────────────────── */

.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--container-pad);
}

.error-page__code {
  font-size: clamp(6rem, 20vw, 12rem);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--c-surface-3);
  user-select: none;
}

.error-page__message {
  font-size: var(--text-xl);
  color: var(--c-text-secondary);
  margin-block: var(--sp-5) var(--sp-8);
}

.error-page__link {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.error-page__link:hover {
  opacity: 0.7;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 767px) {
  .page-header {
    padding-block: var(--sp-20) var(--sp-12);
  }

  .hero-placeholder__corner {
    display: none;
  }

}


/* ── Pricing / Run / Contact — full-bleed proof rows ─────────────────────
   12.09.2026. Prva verzija je bila kartice sa okvirom i bullet listama;
   Dejan: "previse decije". Referenca fuselabcreative.com: medija preko
   pola ekrana, bez okvira, tekst pored, razdvaja praznina i razmera.
   Slika je uvek PRAVI snimak proizvoda — nikad stock ni mockup. */

.lede { padding-block: clamp(64px, 12vh, 140px) clamp(40px, 7vh, 80px); }
.lede__h {
  margin: 12px 0 0;
  font-size: clamp(2.4rem, 6.2vw, 5rem);
  line-height: .98;
  letter-spacing: -.02em;
  max-width: 18ch;
}
.lede__p {
  margin: clamp(20px, 3vh, 32px) 0 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.6;
  opacity: .72;
}

.proof {
  display: grid;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(32px, 5vh, 72px);
}
@media (min-width: 900px) {
  .proof { grid-template-columns: 1fr 1fr; }
  .proof--flip .proof__media { order: 2; }
}

/* Medija puni svoj stubac do ivice: isti oblik za pejzaz i portret,
   pa red ima ritam i nista ne strci. Slika se secka, ne skalira. */
.proof__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.proof__media picture,
.proof__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
}
@media (max-width: 899px) {
  .proof__media { aspect-ratio: 16 / 10; }
}

.proof__body { padding-inline: clamp(20px, 4vw, 56px); }
.proof__eyebrow {
  margin: 0 0 14px;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
}
.proof__h {
  margin: 0 0 18px;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  max-width: 16ch;
}
.proof__amount {
  margin: 0 0 20px;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-accent, #c9a84c);
}
.price__per { font-size: .32em; font-weight: 400; opacity: .6; margin-left: .3em; letter-spacing: .02em; }
.proof__p { margin: 0; max-width: 46ch; line-height: 1.62; opacity: .78; }
.proof__note { margin: 16px 0 0; font-size: .92rem; opacity: .55; }

.runlist { padding-block: clamp(40px, 8vh, 96px); }
.runlist__row {
  display: grid;
  gap: 10px clamp(24px, 5vw, 64px);
  padding-block: clamp(22px, 3.4vh, 36px);
  border-top: 1px solid var(--c-line, rgba(255,255,255,.1));
}
@media (min-width: 760px) { .runlist__row { grid-template-columns: 22ch 1fr; } }
.runlist__h { margin: 0; font-size: 1.08rem; font-weight: 600; }
.runlist__p { margin: 0; max-width: 62ch; line-height: 1.6; opacity: .74; }

.closing { padding-block: clamp(48px, 9vh, 110px); }
.closing__p { margin: 0 0 26px; max-width: 60ch; opacity: .6; font-size: .95rem; }
.closing__cta {
  display: inline-block;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--c-accent, #c9a84c);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.closing__cta:hover, .closing__cta:focus-visible { opacity: .75; }
/* Dve CTA-e su se lepile u jedan red i citale kao jedan link. Razmak je
   ovde, a ne u markupu, da se ne dira ni jedna stranica koja ima samo jednu. */
.closing__cta + .closing__cta { margin-left: clamp(20px, 4vw, 48px); }
@media (max-width: 560px) {
  .closing__cta { display: block; }
  .closing__cta + .closing__cta { margin-left: 0; margin-top: 20px; }
}

.contact-grid { display: grid; gap: clamp(20px, 3vw, 40px); padding-block: clamp(32px, 6vh, 72px); }
@media (min-width: 760px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-block: clamp(20px, 3vh, 32px);
  border-top: 1px solid var(--c-line, rgba(255,255,255,.14));
  transition: border-color .2s ease;
}
.contact-card:hover, .contact-card:focus-visible { border-color: var(--c-accent, #c9a84c); }
.contact-card__label { margin: 0 0 10px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; opacity: .5; }
.contact-card__value { margin: 0 0 8px; font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 600; letter-spacing: -.01em; }
.contact-card__note  { margin: 0; opacity: .6; font-size: .94rem; }

/* ── Site footer ─────────────────────────────────────────────────────────
   Dodato 12.09.2026 — sajt ga do tada nije imao uopste. Isti puni format
   kao proof redovi: bez kartica, bez okvira, samo tanka linija i vazduh.
   Nav rail je levo na desktopu; futer se pomera za njegovu sirinu (vidi
   margin-left ispod), jer `.container` sam po sebi to ne resava. */
.site-foot {
  /* 14.09.2026: futer je brat .page-content, a ne njegovo dete — nema
     njegov levi razmak, pa je ceo klizio ISPOD rail-a. Sa 56px se to
     jedva videlo; sa 300px je odseklo „Refunds", adresu firme i ikone
     placanja. Isti pomak kao sadrzaj; ispod 1024px je promenljiva 0. */
  margin-left: var(--nav-rail-w);
  margin-top: clamp(56px, 10vh, 120px);
  padding-block: clamp(40px, 7vh, 80px) clamp(28px, 5vh, 48px);
  border-top: 1px solid var(--c-border);
  font-size: .95rem;
}
.site-foot__cols {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .site-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .site-foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.site-foot__h {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-tertiary);
}
.site-foot__list { margin: 0; padding: 0; list-style: none; }
.site-foot__list li + li { margin-top: 9px; }
.site-foot__list a {
  color: var(--c-text-secondary);
  text-decoration: none;
  transition: color .2s ease;
}
.site-foot__list a:hover,
.site-foot__list a:focus-visible { color: var(--c-text-primary); }

.site-foot__legal {
  /* 01-base.css daje svakom <p> max-width:65ch — linija sa podacima firme
     mora da ide preko cele sirine, inace joj se gornja ivica prekine. */
  max-width: none;
  margin: clamp(32px, 5vh, 56px) 0 10px;
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-tertiary);
  font-size: .88rem;
  line-height: 1.7;
}
.site-foot__legal strong { color: var(--c-text-secondary); font-weight: 600; }
.site-foot__legal a,
.site-foot__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-foot__legal a:hover,
.site-foot__note a:hover { color: var(--c-accent); }

.site-foot__note {
  margin: 0;
  max-width: 68ch;
  color: var(--c-text-tertiary);
  font-size: .86rem;
  line-height: 1.65;
}
.site-foot__col--talk .site-foot__note { margin-top: 12px; max-width: 32ch; }

/* Pravna traka u futeru — iznad linije sa podacima firme. */
.site-foot__legalnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: clamp(28px, 4vh, 48px);
}
.site-foot__legalnav a {
  color: var(--c-text-secondary);
  text-decoration: none;
  font-size: .88rem;
  transition: color .2s ease;
}
.site-foot__legalnav a:hover,
.site-foot__legalnav a:focus-visible { color: var(--c-text-primary); }
.site-foot__legalnav + .site-foot__legal { margin-top: clamp(16px, 2vh, 24px); }

/* ── "Build your own offer" (/pricing/) ──────────────────────────────────
   Kvacice koje sabiraju cenu. Bez kartica sa okvirima — isti puni format
   kao proof redovi: tanka linija, vazduh, jedna champagne cifra. */
.offer { padding-block: clamp(8px, 2vh, 24px) clamp(40px, 7vh, 88px); }
.offer__form { display: grid; gap: 0; margin: 0 0 clamp(32px, 5vh, 56px); }

.offer__item {
  display: block;
  position: relative;
  padding: clamp(24px, 3.5vh, 38px) 0 clamp(24px, 3.5vh, 38px) 46px;
  border-top: 1px solid var(--c-border);
  cursor: pointer;
}
.offer__item:last-child { border-bottom: 1px solid var(--c-border); }
.offer__item--fixed { cursor: default; opacity: .88; }

/* Prava kucica je skrivena ali fokusabilna — CSS crta kvadrat. */
.offer__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.offer__tick {
  position: absolute;
  left: 0;
  top: calc(clamp(24px, 3.5vh, 38px) + 2px);
  width: 22px; height: 22px;
  border: 1px solid var(--c-border-hover);
  border-radius: 3px;
  transition: border-color .18s ease, background-color .18s ease;
}
.offer__tick::after {
  content: "";
  position: absolute;
  left: 7px; top: 3px;
  width: 6px; height: 11px;
  border: solid var(--c-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.6);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.offer__item input:checked ~ .offer__tick {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.offer__item input:checked ~ .offer__tick::after { opacity: 1; transform: rotate(45deg) scale(1); }
.offer__item input:focus-visible ~ .offer__tick {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
.offer__item:hover .offer__tick { border-color: var(--c-accent); }

.offer__h {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -.01em;
}
.offer__amount {
  margin: 0 0 12px;
  color: var(--c-accent);
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  font-weight: 600;
}
.offer__p { margin: 0; max-width: 68ch; line-height: 1.65; opacity: .74; }

.offer__sum { border-top: 1px solid var(--c-border-hover); padding-top: clamp(24px, 4vh, 40px); }
.offer__sum-label {
  margin: 0 0 8px;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-text-tertiary);
}
.offer__sum-total {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--c-accent);
}
.offer__sum-note { margin: 10px 0 0; font-size: .92rem; opacity: .6; }
.offer__cta {
  display: inline-block;
  margin-top: clamp(20px, 3vh, 30px);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
.offer__cta:hover, .offer__cta:focus-visible { opacity: .75; }
.offer__cta[aria-disabled="true"] { opacity: .4; }
.offer__sum-fine { margin: clamp(18px, 3vh, 26px) 0 0; max-width: 60ch; font-size: .86rem; opacity: .5; }

/* Okvir za besplatne alatke (/tools/*). Sama alatka nosi svoj stil. */
.tool { padding-block: clamp(8px, 2vh, 24px) clamp(32px, 6vh, 72px); }
.tool__noscript {
  margin: 0;
  padding: 18px 20px;
  border-left: 2px solid var(--c-accent);
  color: var(--c-text-secondary);
  max-width: 62ch;
}

/* Načini plaćanja u futeru. Logotipi su raznih boja i neki su tamni —
   na crnoj podlozi bi nestali, pa stoje na svetlom čipu kao na banci. */
.site-foot__pay {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(22px, 3vh, 30px) 0 0;
  padding: 0;
  list-style: none;
}
.site-foot__pay li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 34px;
  border-radius: 4px;
  background: #ffffff;
  opacity: .82;
  transition: opacity .2s ease;
}
.site-foot__pay li:hover { opacity: 1; }
.site-foot__pay img { width: 38px; height: 22px; object-fit: contain; }


/* ── 04-hero.css ─── */
/* =============================================================
   04-hero.css — E2/F-4 Hero: Lina + Earth autoplay cinematic
   Normal page flow; GSAP time-driven animation with scroll-to-skip
   Three art-directions: desktop ≥1280 · tablet 1024–1279 · mobile <1024
   ============================================================= */

/* ─── Normal-flow, single-viewport hero ─────────────────────── */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  /* 14.09.2026: rail je 280px, pa hero vise ne ide ispod njega.
     Sa full-bleed-om bi Lina zavrsila iza neprovidnog rail-a. */
  width: 100%;
}

/* Class retained to preserve the approved markup and art direction. */
.hero__sticky {
  position: relative;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--c-bg);
}

/* ─── Image scene ────────────────────────────────────────────── */

.hero__scene {
  position: absolute;
  inset: 0;
  opacity: 0;           /* GSAP: 0 → 1 at sequence start */
  will-change: opacity;
}

/* Media wrapper: poster + video sit in one box with identical geometry.
   No transform/drift is applied here — the approved video already carries
   its own camera and Earth motion, and compounding the old still-image
   drift on top of it produced visible double movement. */
.hero__media {
  position: absolute;
  inset: 0;
}

.hero__picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Approved hero video (AV1/WebM + H.264 fallback). Sources are attached by
   hero.js only after load, so this element costs nothing until then. */
.hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;   /* uzi hero od 14.09: Lina cela, satelitu izlazi vrh ploce */
  opacity: 0;
  transition: opacity 700ms var(--ease-in-out);
  pointer-events: none;
  will-change: opacity;
}

/* Handoff: the poster stays underneath, so there is never a blank frame. */
.hero--video-live .hero__video { opacity: 1; }

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;   /* uzi hero od 14.09: Lina cela, satelitu izlazi vrh ploce */
}

/* ─── E2: cinematic exposure veil ────────────────────────────
   Near-black layer that lifts slowly so the scene "comes online".
   Sits above the image, below overlay/statuses. Compositor-only. */

.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #050505;
  opacity: 1;               /* GSAP: 1 → 0 over ~3s */
  will-change: opacity;
}

/* ─── Readability gradients ──────────────────────────────────── */

.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,  rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.1) 55%, rgba(8,8,8,0) 100%),
    linear-gradient(to top,    rgba(8,8,8,0.85) 0%, rgba(8,8,8,0)   45%);
}

/* ─── Status lines (time-sequenced) ─────────────────────────── */

.hero__statuses {
  position: absolute;
  /* Hero je sada unutar kolone desno od rail-a, pa se ne racuna rail. */
  left:   clamp(var(--sp-6), 6vw, var(--sp-24));
  bottom: clamp(var(--sp-16), 14vh, var(--sp-32));
  width: min(32rem, calc(100% - var(--sp-16)));
  height: 1.5rem;
  pointer-events: none;
}

.hero__status {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0;
  transform: translateY(6px);
  will-change: opacity, transform;
  white-space: nowrap;
}

.hero__status::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

/* ─── Final state: Meet Lina. ────────────────────────────────── */

.hero__cta {
  position: absolute;
  left:   clamp(var(--sp-6), 6vw, var(--sp-24));
  bottom: clamp(var(--sp-16), 14vh, var(--sp-32));
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}

/* OPEN QUESTION #1: Final headline — "Meet Lina." placeholder */
.hero__headline {
  font-family: var(--font-heading);
  font-size: var(--text-hero);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-text-primary);
  max-width: 12ch;
  margin-bottom: var(--sp-6);
}

.hero__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  transition: gap var(--dur-base) var(--ease-out);
}

.hero__cta-link:hover {
  gap: var(--sp-5);
}

.hero__cta-link svg {
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out);
}

.hero__cta-link:hover svg {
  transform: translateX(var(--sp-2));
}

/* ─── Corner telemetry label ─────────────────────────────────── */

.hero__telemetry {
  position: absolute;
  top:   var(--sp-8);
  right: var(--sp-8);
  pointer-events: none;
}

/* --tele-signal 0 → 1 drives the whole power-up: dimness, champagne
   tone and the restrained signal-lock glow move together. */
.hero__telemetry-label {
  --tele-signal: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  color: color-mix(in srgb,
                   var(--c-text-tertiary),
                   var(--c-accent) calc(var(--tele-signal) * 100%));
  text-shadow:
    0 0 calc(var(--tele-signal) * 6px)  rgba(109, 149, 255, calc(var(--tele-signal) * 0.40)),
    0 0 calc(var(--tele-signal) * 18px) rgba(109, 149, 255, calc(var(--tele-signal) * 0.16));
  opacity: calc(0.05 + var(--tele-signal) * 0.5);
  will-change: opacity;
  max-width: none;
}

/* ─── Scroll hint ─────────────────────────────────────────────── */

.hero__scroll-hint {
  position: absolute;
  bottom: var(--sp-6);
  left:   50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  max-width: none;
  opacity: 0.6;
  animation: hero-scroll-pulse 2.5s var(--ease-in-out) 1.8s infinite alternate;
}

@keyframes hero-scroll-pulse {
  from { opacity: 0.3; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0.7; transform: translateX(-50%) translateY(-4px); }
}

/* ─── Mobile: <1024px ────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* On mobile the page-content has no left margin, so no full-bleed correction needed */
  .hero {
    margin-left: 0;
    width: 100%;
    height: calc(100vh - var(--nav-mobile-h));
    height: calc(100svh - var(--nav-mobile-h));
  }

  /* The page-content offset already places the hero below the mobile bar. */
  .hero__sticky {
    height: 100%;
    width: 100%;
  }

  /* OQ-7: Lina face/torso crop for mobile — awaiting Dejan/Fable final decision.
     Proposal: top-left 30% shows upper Lina area in typical left-composition image. */
  /* Portrait crop lives in the aspect-ratio block below so that portrait
     tablets get it too; only the mobile-specific chrome stays here. */

  /* Simplified vertical overlay for portrait */
  .hero__overlay {
    background: linear-gradient(to top, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.1) 55%, rgba(8,8,8,0) 100%);
  }

  .hero__statuses {
    left:   var(--sp-5);
    right:  var(--sp-5);
    width: auto;
    bottom: clamp(var(--sp-24), 22vh, var(--sp-40));
  }

  .hero__status {
    font-size: var(--text-2xs);
    white-space: normal;
  }

  .hero__cta {
    left:   var(--sp-5);
    right:  var(--sp-5);
    bottom: clamp(var(--sp-24), 22vh, var(--sp-40));
  }

  .hero__headline {
    font-size: clamp(2.5rem, 11vw, 4rem);
  }

  /* Satellite excluded per spec §1.15 for mobile */
  .hero__satellite { display: none; }

  /* Scroll hint not needed on touch devices */
  .hero__scroll-hint { display: none; }

  /* Telemetry simpler on mobile */
  .hero__telemetry { display: none; }
}

/* ─── Tablet: 1024–1279px ─────────────────────────────────────── */

@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__headline {
    font-size: clamp(3rem, 5.5vw, 5.5rem);
  }

  /* Uza kolona na tabletu: manji odmak od leve ivice heroja. */
  .hero__statuses,
  .hero__cta {
    left: clamp(var(--sp-5), 4vw, var(--sp-12));
  }

  /* Tablet landscape: Lina and the satellite cannot both survive a 1.44 crop.
     Lina wins; only the satellite outer panel tip leaves the frame. */
  .hero__img,
  .hero__video { object-position: 66% center; }
}

/* ─── Portrait art direction (any width) ─────────────────────────
   Mirrors the hero.js video gate exactly: below 5/4 the 16:9 frame
   cannot hold Lina + Earth + satellite, so portrait is a deliberate
   static poster crop and the video never loads. Declared AFTER the
   tablet band so a 1024x1366 tablet gets the portrait crop, not the
   landscape one. */

@media (max-aspect-ratio: 5/4) {
  .hero__img  { object-position: 15% center; }
  .hero__video { display: none; }
}

/* Narrow phones: tighten onto Lina head/torso instead of shrinking her. */

@media (max-width: 640px) {
  .hero__img { object-position: 16% center; }
}

/* ─── Reduced motion: final state immediately; no timeline/delay ── */

@media (prefers-reduced-motion: reduce) {
  .hero__scene { opacity: 1 !important; }
  .hero__statuses,
  .hero__scroll-hint { display: none; }
  .hero__cta   { opacity: 1 !important; transform: none !important; }
  .hero__veil { opacity: 0 !important; }
  .hero__video { display: none !important; }
  .hero__telemetry-label { --tele-signal: 1 !important; }
}

/* ─── No-JS fallback (SPEC F-3) ───────────────────────────────────
   The cinematic first frame is deliberately black and is opened by
   GSAP. Without JS that would leave a black screen, so a no-JS
   visitor gets the finished hero immediately instead. `.js` is set
   by an inline head script, so JS users never see this state. */

html:not(.js) .hero__scene { opacity: 1; }
html:not(.js) .hero__veil  { opacity: 0; }
html:not(.js) .hero__cta   { opacity: 1; transform: none; }
html:not(.js) .hero__statuses,
html:not(.js) .hero__scroll-hint { display: none; }
html:not(.js) .hero__telemetry-label { --tele-signal: 1; }

/* ─── Screenshot / QC preview mode (?preview URL param) ─────── */
/* Activated by main.js adding .hero-preview to <body> */

.hero-preview .hero__scene    { opacity: 1 !important; }
.hero-preview .hero__cta      { opacity: 1 !important; transform: none !important; }
.hero-preview .hero__statuses { display: none !important; }
.hero-preview .hero__scroll-hint { display: none !important; }
.hero-preview .hero__veil    { opacity: 0 !important; }
.hero-preview .hero__video   { display: none !important; }
.hero-preview .hero__telemetry-label { --tele-signal: 1 !important; }


/* ── 05-palette-light.css ─── */
/* =============================================================
   05-palette-light.css — Light palette tokens for OQ-9 comparison
   Activate via data-theme="light" on <html> or <body>
   All colors verified ≥4.5:1 contrast for normal text.
   ============================================================= */

[data-theme="light"] {
  /* Backgrounds */
  --c-bg:             #f5f4f0;   /* warm off-white */
  --c-surface:        #ffffff;
  --c-surface-2:      #eeede7;
  --c-surface-3:      #e4e2d9;

  /* Text (all verified ≥4.5:1 on --c-bg) */
  --c-text-primary:   #0d0d0a;   /* near-black      — 18.4:1 */
  --c-text-secondary: #383836;   /* dark gray        — 10.2:1 */
  --c-text-tertiary:  #6a6a67;   /* mid gray         —  4.6:1 */
  --c-text-dim:       #9a9a97;   /* decorative only  —  2.5:1 (aria-hidden only) */

  /* Accent — darker amber/gold for light background */
  --c-accent:         #8a6010;   /* 4.6:1 on #f5f4f0 */
  --c-accent-subtle:  rgba(138,96,16,0.09);

  /* Borders */
  --c-border:         rgba(0,0,0,0.08);
  --c-border-hover:   rgba(0,0,0,0.16);
}


/* ── 07-scenes.css ─── */
/* =============================================================
   07-scenes.css — E3 Scene pack: project worlds 02–06
   One idea per viewport. Worlds share typography/grid/motion/
   spacing/image treatment; only the media inside changes.
   Reveal is opacity/transform only → never causes layout shift.
   ============================================================= */

/* ─── Scene shell ─────────────────────────────────────────────── */

.scene-list {
  display: block;
}

.scene {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: var(--sp-24) var(--container-pad);
  border-top: 1px solid var(--c-border);
}

/* The world index sits in the page margin as a quiet anchor. */
.scene__index {
  position: absolute;
  top: var(--sp-10);
  left: var(--container-pad);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  color: var(--c-text-tertiary);
}

.scene__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(var(--sp-10), 6vw, var(--sp-24));
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Alternating rhythm: the media changes side world to world, so the
   pack reads as a sequence of places rather than a repeated template. */
.scene--flip .scene__copy  { order: 2; }
.scene--flip .scene__media { order: 1; }

/* ─── Copy column ─────────────────────────────────────────────── */

.scene__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent);
}

.scene__eyebrow::before {
  content: '';
  width: var(--sp-8);
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.scene__title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-primary);
  max-width: 16ch;
  margin-bottom: var(--sp-6);
}

.scene__lead {
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--c-text-secondary);
  max-width: 46ch;
  margin-bottom: var(--sp-8);
}

.scene__points {
  list-style: none;
  margin: 0 0 var(--sp-8);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.scene__points li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-tertiary);
}

.scene__points li::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--c-accent);
  flex-shrink: 0;
  transform: translateY(-3px);
}

.scene__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  transition: gap var(--dur-base) var(--ease-out);
}

.scene__link:hover { gap: var(--sp-5); }
.scene__link svg   { flex-shrink: 0; }

.scene__anchor {
  display: block;
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-tertiary);
}

/* ─── Media slot ──────────────────────────────────────────────────
   Deliberately asset-agnostic: today it holds an inline SVG figure,
   later it takes a poster/video pair from the IMAGE_TO_VIDEO lane
   with no change to the section markup around it. */

.scene__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  overflow: hidden;
}

/* Poster/video pair — same discipline as the hero: identical geometry,
   video fades in over the poster, never a blank frame. */
.scene__media picture,
.scene__poster,
.scene__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.scene__poster,
.scene__video {
  object-fit: cover;
  object-position: center center;
}

.scene__video {
  opacity: 0;
  transition: opacity 700ms var(--ease-in-out);
  pointer-events: none;
}

.scene--video-live .scene__video { opacity: 1; }

/* Inline SVG figure (current state, no asset yet) */
.scene__figure {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.scene__figure svg { display: block; width: 100%; height: 100%; }

/* Shared figure vocabulary so the five worlds stay one system. */
.fig-line   { stroke: var(--c-border-hover); stroke-width: 1; fill: none; }
.fig-panel  { fill: var(--c-surface-2); stroke: var(--c-border-hover); stroke-width: 1; }
.fig-panel-2{ fill: var(--c-surface-3); stroke: var(--c-border-hover); stroke-width: 1; }
.fig-mute   { fill: var(--c-text-dim); }
.fig-dim    { fill: var(--c-border-hover); }
.fig-accent { fill: var(--c-accent); }
.fig-stroke-accent { stroke: var(--c-accent); stroke-width: 1.25; fill: none; }
.fig-label  {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 1.2px;
  fill: var(--c-text-tertiary);
  text-transform: uppercase;
}

/* ─── Reveal — OQ-8 (approved 2026-08-27) ─────────────────────────
   Scene copy is VISIBLE in base CSS. The hidden state exists only under
   `.scene-motion`, which scenes.js adds itself immediately before it
   arms the observer. If that script never runs, throws, or is blocked,
   the class is absent and the content simply stays visible — fail open.

   Whole sequence resolves in 700ms end to end (not per item):
   eyebrow 0 → heading 110 → copy 220 → bullets 330 → CTA 440,
   each 260ms. Opacity + 12px rise only: no scale, rotation, spring,
   blur or horizontal slide. Content resolves into place.

   The media slot is deliberately NOT part of this choreography — it
   stays structurally stable and carries its own motion later. */

.scene-motion .scene__copy > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 260ms var(--ease-out),
    transform 260ms var(--ease-out);
}

.scene-motion .scene[data-revealed] .scene__copy > * {
  opacity: 1;
  transform: none;
}

.scene-motion .scene[data-revealed] .scene__eyebrow { transition-delay:   0ms; }
.scene-motion .scene[data-revealed] .scene__title   { transition-delay: 110ms; }
.scene-motion .scene[data-revealed] .scene__lead    { transition-delay: 220ms; }
.scene-motion .scene[data-revealed] .scene__points  { transition-delay: 330ms; }
.scene-motion .scene[data-revealed] .scene__link,
.scene-motion .scene[data-revealed] .scene__anchor  { transition-delay: 440ms; }

/* ─── Tablet ──────────────────────────────────────────────────── */

@media (max-width: 1279px) {
  .scene__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-10);
  }

  /* Portrait tablets read top-to-bottom: idea first, then the world. */
  .scene--flip .scene__copy,
  .scene--flip .scene__media { order: 0; }

  .scene { min-height: auto; padding-block: var(--sp-20); }
  .scene__title { max-width: 20ch; }
  .scene__media { aspect-ratio: 16 / 9; }
}

/* ─── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .scene {
    padding: var(--sp-16) var(--sp-5);
  }

  /* Stays out of flow: .scene is a flex row, so a static index would
     become a sibling column and wrap mid-height. */
  .scene__index {
    top: var(--sp-6);
    left: var(--sp-5);
  }

  .scene__title { font-size: clamp(2rem, 8.5vw, 2.75rem); max-width: 14ch; }
  .scene__lead  { font-size: var(--text-base); }
  .scene__media { aspect-ratio: 4 / 3; }
}

/* ─── Reduced motion: finished state, immediately ─────────────── */

@media (prefers-reduced-motion: reduce) {
  /* scenes.js never arms .scene-motion here; this is belt-and-braces. */
  .scene-motion .scene__copy > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .scene__video { display: none !important; }
}

/* ─── Scene QC mode (?scenes) ─────────────────────────────────────
   Screenshot harness only: drops the hero and the per-scene viewport
   height so the whole pack fits one capture. Never active in normal use. */

.scenes-qc .hero { display: none; }
.scenes-qc .scene { min-height: auto; padding-block: var(--sp-16); }

/* Transitions off so a headless capture is deterministic rather than
   catching the reveal mid-flight. */
.scenes-qc .scene__copy > * {
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── Fioka scena: fajlovi stalno padaju u fioke ──────────────────────────
   12.09.2026, Dejan: "da se to stalno vrti, kao sto kod nas stane i nista
   se ne desava". Petlja od 7.5s: pet fajlova pada jedan za drugim, fioka
   pulsira kad fajl sleti, strelica dise. Cist CSS, bez JS. */
.fio-file {
  transform-box: fill-box;
  transform-origin: center;
  animation: fio-drop 7.5s cubic-bezier(.45, 0, .25, 1) infinite;
  will-change: transform, opacity;
}
.fio-file--1 { animation-delay: 0s; }
.fio-file--2 { animation-delay: .55s; }
.fio-file--3 { animation-delay: 1.1s; }
.fio-file--4 { animation-delay: 1.65s; }
.fio-file--5 { animation-delay: 2.2s; }

@keyframes fio-drop {
  0%            { transform: translateY(0) scale(1);    opacity: 1; }
  4%            { transform: translateY(-3px) scale(1); opacity: 1; }
  26%           { transform: translateY(64px) scale(.82); opacity: 0; }
  27%, 88%      { transform: translateY(64px) scale(.82); opacity: 0; }
  96%, 100%     { transform: translateY(0) scale(1);    opacity: 1; }
}

.fio-arrow {
  animation: fio-pulse-arrow 2.5s ease-in-out infinite;
}
@keyframes fio-pulse-arrow {
  0%, 100% { opacity: .35; }
  45%      { opacity: 1; }
}

.fio-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: fio-land 7.5s ease-out infinite;
}
.fio-dot--1 { animation-delay: .35s; }
.fio-dot--2 { animation-delay: 1.45s; }
.fio-dot--3 { animation-delay: 2.55s; }

@keyframes fio-land {
  0%, 8%   { transform: scale(1);   opacity: .5; }
  12%      { transform: scale(2.6); opacity: 1; }
  22%, 100%{ transform: scale(1);   opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .fio-file, .fio-arrow, .fio-dot { animation: none; }
}


/* ── 08-service.css ─── */
/* =============================================================
   08-service.css — E4 service landing pages
   SPEC §1.12 / §3: full unique SEO copy per page, real intent,
   no pricing tables (discreet "from" anchors only).
   Static layout: no reveal choreography, no CLS risk.
   ============================================================= */

.svc {
  padding-block: clamp(var(--sp-16), 10vh, var(--sp-32)) var(--sp-32);
}

/* ─── Header ──────────────────────────────────────────────────── */

.svc-header {
  max-width: 62ch;
  margin-bottom: clamp(var(--sp-16), 9vh, var(--sp-32));
}

.svc-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent);
}

.svc-eyebrow::before {
  content: '';
  width: var(--sp-8);
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.svc-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-primary);
  margin-bottom: var(--sp-6);
}

.svc-lead {
  font-size: var(--text-xl);
  line-height: var(--lh-relaxed);
  color: var(--c-text-secondary);
}

.svc-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-top: var(--sp-10);
}

.svc-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.svc-cta:hover {
  background: var(--c-accent);
  color: var(--c-bg);
}

/* Discreet price anchor — never a pricing table (SPEC §1.10). */
.svc-anchor {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  color: var(--c-text-tertiary);
}

/* ─── Sections ────────────────────────────────────────────────── */

.svc-section {
  padding-block: clamp(var(--sp-10), 5vh, var(--sp-16));
  border-top: 1px solid var(--c-border);
}

.svc-section__title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  margin-bottom: var(--sp-8);
}

.svc-prose p {
  max-width: 68ch;
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--c-text-secondary);
}

.svc-prose p + p { margin-top: var(--sp-5); }

/* ─── Steps ───────────────────────────────────────────────────── */

.svc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.svc-steps__n {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  color: var(--c-accent);
  margin-bottom: var(--sp-4);
}

.svc-steps h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-text-primary);
  margin-bottom: var(--sp-3);
}

.svc-steps p {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-tertiary);
}

/* ─── Feature / case lists ────────────────────────────────────── */

.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.svc-list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-secondary);
}

.svc-list li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--c-accent);
  flex-shrink: 0;
  transform: translateY(-3px);
}

.svc-list strong {
  color: var(--c-text-primary);
  font-weight: var(--fw-semibold);
}

/* ─── FAQ ─────────────────────────────────────────────────────── */

.svc-faq {
  margin: 0;
  display: grid;
  gap: var(--sp-8);
}

.svc-faq dt {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  margin-bottom: var(--sp-3);
}

.svc-faq dd {
  margin: 0;
  max-width: 68ch;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-tertiary);
}

/* ─── Related ─────────────────────────────────────────────────── */

.svc-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.svc-related__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  transition:
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.svc-related__list a:hover {
  border-color: var(--c-border-hover);
  color: var(--c-text-primary);
}

.svc-related__list span[aria-hidden] { color: var(--c-accent); }

/* ─── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .svc-lead  { font-size: var(--text-lg); }
  .svc-prose p { font-size: var(--text-base); }
  .svc-actions { gap: var(--sp-4); }
}


/* ── 09-industry.css ─── */
/* =============================================================
   09-industry.css — E5 Industries V1
   SPEC §1.13: every industry page carries a real function.
   Tool UI is static layout — the results panel replaces its own
   contents, so nothing above it can shift (no CLS).
   ============================================================= */

.ind { padding-block: clamp(var(--sp-16), 10vh, var(--sp-32)) var(--sp-32); }

/* ─── Header ──────────────────────────────────────────────────── */

.ind-header { max-width: 62ch; margin-bottom: clamp(var(--sp-12), 7vh, var(--sp-24)); }

.ind-title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-text-primary);
  margin-bottom: var(--sp-6);
}

.ind-lead {
  font-size: var(--text-xl);
  line-height: var(--lh-relaxed);
  color: var(--c-text-secondary);
}

/* ─── Tool ────────────────────────────────────────────────────── */

.tool-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-8), 4vw, var(--sp-16));
  align-items: start;
  padding-block: clamp(var(--sp-10), 5vh, var(--sp-16));
  border-top: 1px solid var(--c-border);
}

/* Reset the browser's default fieldset chrome — the legend is styled
   as a section marker, not as a notch in a border box. */
.tool__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.tool__legend {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--sp-6);
  padding: 0;
}

.tool__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  border: 0;
  padding: 0;
  margin: 0;
}

.tool__field { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; }

.tool__field--wide { grid-column: 1 / -1; }

.tool__field label,
.tool__field > span {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
}

.tool__field input[type="number"],
.tool__field select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--dur-base) var(--ease-out);
}

.tool__field input[type="number"]:hover,
.tool__field select:hover { border-color: var(--c-border-hover); }

.tool__check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-secondary);
  text-transform: none;
}

.tool__check input { accent-color: var(--c-accent); width: 16px; height: 16px; }

/* Chips (hospitality) */
.tool__chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.tool__chip {
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--c-text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  transition:
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.tool__chip:hover { border-color: var(--c-border-hover); color: var(--c-text-secondary); }

.tool__chip[aria-pressed="true"] {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-subtle);
}

/* ─── Results ─────────────────────────────────────────────────── */

.tool__out {
  display: block;
  padding: var(--sp-8);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

.tool__result { margin: 0; display: grid; gap: var(--sp-4); }

.tool__result > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}

.tool__result > div:last-child { border-bottom: 0; padding-bottom: 0; }

.tool__result dt {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
}

.tool__result dd {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--c-text-primary);
  text-align: right;
}

.tool__result--lead {
  font-family: var(--font-heading);
  font-size: var(--text-2xl) !important;
  font-weight: var(--fw-bold);
  color: var(--c-accent) !important;
}

.tool__result-title,
.tool__notes-title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-text-tertiary);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-4);
}

.tool__result-title:first-child { margin-top: 0; }

.tool__notes,
.tool__qs,
.tool__ks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-tertiary);
}

.tool__notes li,
.tool__qs li,
.tool__ks li { display: flex; gap: var(--sp-3); }

.tool__notes li::before,
.tool__qs li::before,
.tool__ks li::before {
  content: '';
  width: 3px;
  height: 3px;
  margin-top: 0.6em;
  border-radius: var(--radius-full);
  background: var(--c-border-hover);
  flex-shrink: 0;
}

.tool__qs li::before { background: var(--c-accent); }

p.tool__notes { display: block; margin-top: var(--sp-5); }

.tool__empty,
.tool__nojs {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-tertiary);
  margin: 0;
}

.tool__muted { color: var(--c-text-dim); font-size: var(--text-sm); }

/* ─── Industry index grid ─────────────────────────────────────── */

.ind-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.ind-grid a {
  display: block;
  height: 100%;
  padding: var(--sp-8);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-base) var(--ease-out);
}

.ind-grid a:hover { border-color: var(--c-border-hover); }

.ind-grid h2 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  margin-bottom: var(--sp-3);
}

.ind-grid p {
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-tertiary);
  margin-bottom: var(--sp-4);
}

.ind-grid span {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent);
}

/* ─── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .tool-wrap { grid-template-columns: minmax(0, 1fr); }
  .ind-lead  { font-size: var(--text-lg); }
  .tool__out { padding: var(--sp-6); }
  .tool__result dd { font-size: var(--text-base); }
}


/* ── 11-demos.css ─── */
/* ─── /demos/ and /work/ — card grids with real screenshots ──────
   A list of thirteen titles is a list. Thirteen screenshots is a
   portfolio. Every image on these pages is captured from the live
   URL it links to, so a broken demo shows up as a stale card rather
   than as a promise nobody checks.
   ───────────────────────────────────────────────────────────────── */

.demo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.demo-grid > li { min-width: 0; }

.demo-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-surface, transparent);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.demo-card:hover,
.demo-card:focus-visible {
  border-color: var(--c-border-hover);
  transform: translateY(-2px);
}

/* Fiksan odnos stranica: kartice ostaju poravnate i dok se slike
   ucitavaju, pa se mreza ne trza (nema pomeranja rasporeda). */
.demo-card__shot {
  display: block;
  width: 100%;
  aspect-ratio: 1280 / 800;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-alt, rgba(255, 255, 255, .03));
}

.demo-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-2);
  padding: var(--sp-6);
}

.demo-card__h {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  margin: 0;
}

.demo-card__p {
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-tertiary);
  margin: 0;
}

.demo-card__go {
  margin-top: auto;
  padding-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent);
}

/* Oznaka "nase" na /work/ — ko proveri i vidi da je sajt pod nasom
   firmom, a nigde ne pise, posumnja i u ostatak spiska. */
.demo-card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-dim);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm, 4px);
  padding: 2px 8px;
}

/* ─── Section heading between groups ──────────────────────────── */

.demo-band { margin-top: var(--sp-16); }
.demo-band:first-of-type { margin-top: 0; }

.demo-band__h {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  color: var(--c-text-primary);
  margin: 0 0 var(--sp-3);
}

.demo-band__p {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-tertiary);
  max-width: 60ch;
  margin: 0 0 var(--sp-8);
}

@media (prefers-reduced-motion: reduce) {
  .demo-card,
  .demo-card:hover { transform: none; transition: border-color var(--dur-base) var(--ease-out); }
}


/* ── 06-lenis.css ─── */
/* ─── F-5 Lenis A/B support (active only when html.lenis is present) ── */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}