/* ForgeInt — shared site styles (home + subpages). Extracted from index.html. */
@view-transition { navigation: auto; }
/* page-to-page morphs: chrome + world stay put, content slides through */
nav.fi-nav { view-transition-name: fi-nav; }
#poster { view-transition-name: fi-poster; }        /* the brain glides between its hero and parked positions */
#terrain-poster { view-transition-name: fi-terrain; }
#atmo { view-transition-name: fi-atmo; }
.site-footer { view-transition-name: fi-footer; }
::view-transition-old(root) { animation: fi-vt-out 200ms cubic-bezier(0.44,0,0.56,1) both; }
::view-transition-new(root) { animation: fi-vt-in 300ms cubic-bezier(0.44,0,0.56,1) both; }
@keyframes fi-vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes fi-vt-in { from { opacity: 0; transform: translateY(16px); } }
::view-transition-group(fi-poster) { animation-duration: 380ms; animation-timing-function: cubic-bezier(0.3,0.9,0.3,1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-group(*) { animation: none !important; }
}

  :root {
    --bg-void: #060606;
    --bg-panel: #0d0d0d;
    --hairline: rgba(255, 255, 255, 0.06);
  }
  html { background: var(--bg-void); }
  body {
    margin: 0;
    background: var(--bg-void);
    color: var(--ink);
    font-family: var(--font-sans);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  a { color: rgba(255,255,255,0.7); text-decoration: none; }
  a:hover { color: var(--ink); text-decoration: none; }

  /* fixed world layers */
  /* depth of field: the world field sits behind the focal plane (soft), the
     brain is in focus; #gl gains blur only as the brain recedes (rack focus) */
  #field { filter: blur(1.3px); }
  #gl, #field { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
  #worlds { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 2; pointer-events: none; }
  #gl { z-index: 1; }
  #field { z-index: 2; }

  /* full-width vertical hairline columns (4-col technical grid) */
  .grid-lines { position: fixed; inset: 0; z-index: 3; pointer-events: none; display: flex; }
  .grid-lines span { flex: 1; border-left: 1px solid var(--hairline); }
  .grid-lines span:first-child { border-left: none; }

  .content { position: relative; z-index: 10; }

  :root { --molten: #ff5a1e; --molten-press: #C23A12; --ink: #F4F1EC; --elev: #0B0B0D; }
  /* HEAT: idle = graphite, touch = heat. #ff5a1e exists ONLY as interaction feedback. */
  /* ============ COLOR = LIGHT: ember→amber exists only as emission ============ */
  .lit {
    background: linear-gradient(115deg, #FFB65C 0%, #FF7A3C 45%, #FF5A1E 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 14px rgba(255,110,40,0.28)) drop-shadow(0 0 44px rgba(255,90,30,0.12));
  }
  .cases .lit, .work-band .lit { filter: drop-shadow(0 0 10px rgba(255,90,30,0.16)); }
  .stat-num, .wd-metric .n {
    background: linear-gradient(115deg, #FFB65C, #FF6A2E 75%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(255,90,30,0.2));
  }
  .svc-icon { color: #FF8A4C; filter: drop-shadow(0 1.5px 2px rgba(0,0,0,0.55)) drop-shadow(0 0 8px rgba(255,110,40,0.35)); will-change: transform; }
  .wm-dot { box-shadow: 0 0 10px rgba(255,90,30,0.65); }
  #nav-ind { box-shadow: 0 0 8px rgba(255,90,30,0.7); }
  /* execution glints emit warm */
  .wf-node.exec { border-color: rgba(255,138,76,0.65); box-shadow: 0 0 0 1px rgba(255,90,30,0.3), 0 0 34px rgba(255,90,30,0.12); }
  .wf-node.exec .s::before { background: #FF8A4C; box-shadow: 0 0 8px rgba(255,90,30,0.8); }
  .wf-srow.hot { background: rgba(255,110,40,0.06); }
  /* mono labels stay mono — only the leading ▨ marker emits, softly lit */
  .zone-label::first-letter, .hero-label::first-letter { color: #FF8A4C; text-shadow: 0 0 9px rgba(255,110,40,0.55), 0 1px 2px rgba(0,0,0,0.6); }

  .heat-pill { position: relative; overflow: hidden; }
  .heat-pill > * { position: relative; z-index: 1; }
  .heat-pill .heat-flood { z-index: 0; }
  .heat-flood {
    position: absolute; z-index: 0; left: 50%; top: 50%;
    width: 10px; height: 10px; border-radius: 999px; background: var(--molten);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 420ms cubic-bezier(0.3, 0.9, 0.3, 1);
    pointer-events: none;
  }
  .heat-pill.hot .heat-flood { transform: translate(-50%, -50%) scale(60); }
  .heat-pill.hot { color: var(--ink) !important; }
  .heat-pill.press { filter: brightness(1.6); }
  @media (hover: none) {
    .heat-pill:active { background: var(--molten-press) !important; color: var(--ink) !important; }
  }

  /* links + nav: molten underline sweep, warm on hover */
  .nav-link, .foot-col a, .foot-col button {
    background-image: linear-gradient(var(--molten), var(--molten));
    background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
    transition: color 240ms cubic-bezier(0.44,0,0.56,1), background-size 320ms cubic-bezier(0.44,0,0.56,1);
    padding-bottom: 3px;
  }
  .nav-link:hover, .foot-col a:hover, .foot-col button:hover { color: var(--molten) !important; background-size: 100% 1px; }
  @media (hover: none) {
    .nav-link:active, .foot-col a:active, .foot-col button:active { color: var(--molten) !important; }
  }

  /* headline ignite */
  [data-ignite] { cursor: default; }
  [data-ignite] .ig { display: inline-block; transition: color 200ms cubic-bezier(0.44,0,0.56,1), transform 200ms cubic-bezier(0.44,0,0.56,1); }
  [data-ignite].hot .ig { color: var(--molten); transform: translateY(-0.03em); }
  @media (hover: none) { [data-ignite]:active .ig { color: var(--molten); } }

  /* SOLID + OUTLINE headline word: hollow stroke at rest, fills on ignite/hover */
  .hollow {
    -webkit-text-stroke: 1.5px var(--ink); color: transparent;
    transition: color 280ms cubic-bezier(0.44,0,0.56,1), -webkit-text-stroke-color 280ms cubic-bezier(0.44,0,0.56,1);
  }
  .hero-h:hover .hollow, .final-cta h2:hover .hollow { color: var(--molten); -webkit-text-stroke-color: var(--molten); }
  .proc-step.active .pt .hollow { color: var(--ink); -webkit-text-stroke-color: var(--ink); } /* fills as the station ignites */
  @media (hover: none) { .hero:active .hollow, .final-cta:active .hollow { color: var(--molten); -webkit-text-stroke-color: var(--molten); } }

  /* heat on small interactive glyphs */
  .case-row:hover .case-arrow { color: var(--molten); }
  .faq-item.open .tog, .faq-q:hover .tog { color: var(--molten); }
  .svc-card:hover .svc-flip-chip { border-color: var(--molten); color: var(--molten); }
  .spec-line:hover .spec-tag { border-color: var(--molten); color: var(--molten); }
  .spec-line.flash .spec-flash { background: var(--molten); opacity: 0.2; }

  /* cursor warms near interactive elements */
  #cur-ring.warm { border-color: var(--molten); }
  #cur-dot.warm { background: var(--molten); }
  #cur-ring.view { background: var(--ink); border-color: var(--ink); } /* view state stays mono */

  /* ---------- atmosphere: filmic tone curve — vignette, highlight roll-off, grain ---------- */
  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  #atmo {
    position: fixed; inset: 0; z-index: 55; pointer-events: none;
    background:
      linear-gradient(rgba(0,0,0,0.14), transparent 13%, transparent 87%, rgba(0,0,0,0.2)),
      radial-gradient(120% 90% at 50% 42%, transparent 50%, rgba(0,0,0,0.42) 100%);
  }
  /* CLUSTER B: barely-there chromatic-aberration edge fringe. Warm/amber only
     (no cyan — reserved for security); screen-blended so it reads as a lens
     glow at the extreme frame edges, never over centred text. */
  #atmo::before {
    content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
    background: radial-gradient(142% 112% at 50% 50%, transparent 84%, rgba(255,120,60,0.045) 96%, rgba(255,88,30,0.08) 100%);
  }
  #atmo::after {
    content: ""; position: absolute; inset: 0; opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  }

  /* static 2-layer terrain poster — mobile / Save-Data (no WebGL) */
  #terrain-poster {
    position: fixed; left: 0; right: 0; bottom: 0; height: 46vh; z-index: 1; pointer-events: none;
    display: none;
    background:
      radial-gradient(90% 60% at 72% 0%, rgba(255,255,255,0.05), transparent 60%),
      linear-gradient(to bottom, transparent, #0b0b0d 55%, #060606 100%);
  }
  body.no3d #terrain-poster { display: block; }
  /* once the live 3D brain owns the frame, kill the entire poster stack outright */
  body.gl-on #poster, body.gl-on #poster-shaft, body.gl-on #terrain-poster { display: none !important; }
  /* GL tier decided: poster stack fully dark through the boot — nothing in frame
     but darkness, boot text, fragments and the forming brain */
  body.glq #poster, body.glq #poster-shaft, body.glq #terrain-poster { display: none !important; }

  /* ---------- contact overlay: brief the brain ---------- */
  #contact {
    position: fixed; inset: 0; z-index: 80; background: rgba(6,6,6,0.55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; pointer-events: none; transition: opacity 320ms cubic-bezier(0.44,0,0.56,1);
  }
  #contact.open { opacity: 1; pointer-events: auto; }
  .ct-panel {
    position: relative; width: min(880px, 100%); max-height: 92vh; overflow: auto;
    background: var(--elev); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
    box-shadow: 0 40px 120px rgba(0,0,0,0.65);
    display: grid; grid-template-columns: 300px 1fr; gap: 8px;
    padding: 44px 44px 40px;
    transform: translateY(16px); transition: transform 320ms cubic-bezier(0.44,0,0.56,1);
  }
  #contact.open .ct-panel { transform: translateY(0); }
  .ct-close {
    position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
    background: none; border: none; color: rgba(255,255,255,0.5);
    font: 300 22px/1 var(--font-mono); cursor: pointer; transition: color 200ms;
  }
  .ct-close:hover { color: var(--molten); }
  .ct-mascot { display: flex; align-items: flex-start; justify-content: center; }
  .ct-mascot canvas { width: 270px; height: 330px; }
  .ct-form { display: flex; flex-direction: column; gap: 22px; }
  .ct-field { display: flex; flex-direction: column; gap: 9px; position: relative; }
  .ct-field > span { font: 400 10px/1 var(--font-mono); letter-spacing: 0.16em; color: rgba(255,255,255,0.5); }
  .ct-field input, .ct-field textarea {
    background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.14);
    color: var(--ink); font: 300 16px/1.5 var(--font-sans); padding: 6px 0 10px;
    outline: none; resize: none; border-radius: 0;
    background-image: linear-gradient(var(--molten), var(--molten));
    background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
    transition: background-size 340ms cubic-bezier(0.44,0,0.56,1);
  }
  .ct-field input:focus, .ct-field textarea:focus { background-size: 100% 1px; }
  .ct-field.err > span { color: var(--molten); }
  .ct-field.err > span::after { content: " — REQUIRED"; }
  .ct-field.err input { background-size: 100% 1px; }
  .ct-chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .ct-chip {
    height: 34px; padding: 0 14px; background: none;
    border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
    font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.6);
    cursor: pointer; transition: all 200ms cubic-bezier(0.44,0,0.56,1);
  }
  .ct-chip:hover { border-color: var(--molten); color: var(--molten); }
  .ct-chip.on { background: #f2f2f0; border-color: #f2f2f0; color: #060606; }
  .ct-submit { align-self: flex-start; height: 48px; padding: 0 28px; margin-top: 6px; }
  .ct-form[hidden], .ct-done[hidden] { display: none !important; }
  .ct-done { display: flex; flex-direction: column; justify-content: center; }
  .ct-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .ct-node {
    border: 1px solid rgba(255,255,255,0.14); border-radius: 3px; padding: 13px 16px;
    font: 400 10px/1.4 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.35);
    transition: color 400ms, border-color 400ms;
  }
  .ct-node.lit { color: var(--ink); border-color: rgba(255,255,255,0.45); }
  .ct-strip i { width: 22px; border-top: 1px dashed rgba(255,255,255,0.25); }
  @media (max-width: 760px) {
    #contact { align-items: stretch; padding: 0; }
    .ct-panel {
      grid-template-columns: 1fr; gap: 4px; width: 100%; max-height: none;
      min-height: 100dvh; border: none; border-radius: 0;
      padding: calc(env(safe-area-inset-top,0px) + 58px) 22px calc(env(safe-area-inset-bottom,0px) + 32px);
    }
    .ct-mascot { justify-content: flex-start; }
    .ct-mascot canvas { width: 104px; height: 127px; }
    .ct-close { top: calc(env(safe-area-inset-top,0px) + 12px); right: 12px; }
    .ct-submit { width: 100%; text-align: center; justify-content: center; }
  }

  /* ---------- nav ---------- */
  nav.fi-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(env(safe-area-inset-top, 0px) + 22px) max(env(safe-area-inset-right, 0px), clamp(24px, 4vw, 56px)) 22px max(env(safe-area-inset-left, 0px), clamp(24px, 4vw, 56px));
    opacity: 0; transition: opacity 800ms cubic-bezier(0.44, 0, 0.56, 1);
  }
  nav.fi-nav.on { opacity: 1; }
  nav.fi-nav.scrolled:not(.inv) {
    background: rgba(6,6,6,0.82);
    backdrop-filter: saturate(1.1) blur(14px);
    -webkit-backdrop-filter: saturate(1.1) blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  nav.fi-nav { transition: opacity 800ms cubic-bezier(0.44, 0, 0.56, 1); }
  nav.fi-nav.inv { background: rgba(255,255,255,0.8); backdrop-filter: saturate(1.1) blur(14px); -webkit-backdrop-filter: saturate(1.1) blur(14px); }
  nav.fi-nav.inv .wordmark, nav.fi-nav.inv .nav-link { color: #060606; }
  nav.fi-nav.inv .nav-link:hover { color: #000; }
  /* nav pill: monochrome (white) at the top, becomes the molten anchor once scrolled */
  nav.fi-nav .pill-cta { background: var(--ink); color: #060606; transition: transform 240ms cubic-bezier(0.44,0,0.56,1), background 300ms cubic-bezier(0.44,0,0.56,1), color 300ms cubic-bezier(0.44,0,0.56,1); }
  nav.fi-nav .pill-cta:hover { transform: translateY(-1px); background: #e6e2da; }
  nav.fi-nav.scrolled .pill-cta { background: var(--molten); color: var(--ink); }
  nav.fi-nav.scrolled .pill-cta:hover { background: #e8480f; }
  nav.fi-nav.inv .pill-cta { background: var(--molten); color: var(--ink); } /* molten anchor on the white cases band */
  nav.fi-nav.inv .pill-cta:hover { background: #e8480f; }
  .wm-dot { display: inline-block; width: 5px; height: 5px; border-radius: 999px; background: var(--molten); margin-left: 4px; vertical-align: 0.06em; }
  /* flex centering, ΟΧΙ vertical-align: το glyph έχει tight bbox και μηδέν
     εσωτερικό padding, οπότε το κέντρο του κουτιού ΕΙΝΑΙ το οπτικό του κέντρο
     — αρκεί ο γονέας να κεντράρει. Σταθερά px εδώ ήταν η ρίζα του παλιού
     offset (BRANDKIT §2.5). Το χρώμα το κληρονομεί το glyph μέσω currentColor. */
  .wordmark { font: 500 17px/1 var(--font-sans); letter-spacing: -0.04em; font-kerning: normal; color: var(--ink);
              display: inline-flex; align-items: center; }
  .wordmark .fi-mark { margin-right: 8px; }
  .wordmark .wm-dot { will-change: transform; }
  .nav-right { display: flex; align-items: center; gap: 32px; }
  .nav-link { font: 400 10.5px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,241,236,0.72); transition: color 240ms cubic-bezier(0.44,0,0.56,1); cursor: pointer; background: none; border: none; padding: 0; text-shadow: 0 1px 14px rgba(6,6,6,0.9), 0 0 4px rgba(6,6,6,0.6); }
  .nav-link:hover { color: var(--ink); }
  .pill-cta {
    height: 42px; padding: 0 24px; border-radius: 999px;
    background: var(--molten); color: var(--ink); border: none;
    font: 500 13px/1 var(--font-sans); letter-spacing: 0;
    display: inline-flex; align-items: center; cursor: pointer;
    transition: transform 240ms cubic-bezier(0.44,0,0.56,1), background 240ms;
  }
  .pill-cta:hover { transform: translateY(-1px); background: #e8480f; }
  .pill-cta .heat-flood { background: rgba(6,6,6,0.26); } /* deepen ripple reads on the molten pill */

  /* ---------- one button system: drawn arrow, pressed sink, focus ring, ghost ---------- */
  .pill-cta { gap: 0; }
  .pill-arrow { display: inline-flex; width: 0; overflow: hidden; transition: width 300ms cubic-bezier(0.3,0.9,0.3,1), margin 300ms cubic-bezier(0.3,0.9,0.3,1); margin-left: 0; }
  .pill-arrow svg { width: 14px; height: 12px; flex: none; }
  .pill-arrow path { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset 320ms cubic-bezier(0.3,0.9,0.3,1) 80ms; }
  .pill-cta:hover .pill-arrow { width: 14px; margin-left: 10px; }
  .pill-cta:hover .pill-arrow path { stroke-dashoffset: 0; }
  .pill-cta:active, nav.fi-nav .pill-cta:active, nav.fi-nav.scrolled .pill-cta:active, nav.fi-nav.inv .pill-cta:active {
    background: var(--molten-press); color: var(--ink); transform: translateY(1px);
  }
  .pill-cta:focus-visible, .pill-ghost:focus-visible, .nav-link:focus-visible, .ct-chip:focus-visible, .ct-submit:focus-visible {
    outline: 2px solid var(--molten); outline-offset: 3px;
  }
  .pill-ghost {
    height: 42px; padding: 0 24px; border-radius: 999px;
    background: transparent; color: var(--ink); border: 1px solid rgba(244,241,236,0.24);
    font: 500 13px/1 var(--font-sans); display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; transition: border-color 240ms cubic-bezier(0.44,0,0.56,1), color 240ms cubic-bezier(0.44,0,0.56,1), transform 240ms cubic-bezier(0.44,0,0.56,1);
  }
  .pill-ghost:hover { border-color: var(--molten); color: var(--molten); transform: translateY(-1px); }
  .pill-ghost:active { border-color: var(--molten-press); color: var(--molten-press); transform: translateY(1px); }

  /* nav: molten dot tracking the active section */
  #nav-ind {
    position: absolute; left: 0; bottom: 13px; width: 4px; height: 4px; border-radius: 999px;
    background: var(--molten); opacity: 0; pointer-events: none;
    transition: transform 420ms cubic-bezier(0.3,0.9,0.3,1), opacity 300ms cubic-bezier(0.44,0,0.56,1);
  }

  /* headline craft: optical kerning + hanging punctuation on the big statements */
  h1.hero-h, .cases-head, #manifesto-text, .final-cta h2, .wf-caption h2 { hanging-punctuation: first allow-end last; font-kerning: normal; }
  /* the hero's outline word breathes ±15 weight — barely perceptible, alive */
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .hero-h .hollow { animation: wghtbreathe 4.6s ease-in-out infinite alternate; }
  }
  @keyframes wghtbreathe {
    from { font-variation-settings: "wght" 505; }
    to { font-variation-settings: "wght" 535; }
  }

  /* static brain poster — LCP-safe placeholder until WebGL is ready */
  #poster {
    position: fixed; z-index: 1; pointer-events: none;
    width: 76vh; height: 62vh; right: -14vh; top: 4vh;
    border-radius: 50%;
    background:
      radial-gradient(42% 36% at 32% 26%, rgba(255,255,255,0.16), rgba(255,255,255,0) 70%),
      radial-gradient(60% 52% at 68% 78%, rgba(255,255,255,0.05), rgba(255,255,255,0) 70%),
      radial-gradient(closest-side, #17171a 0%, #101013 55%, #0a0a0c 78%, rgba(6,6,6,0) 100%);
    filter: blur(2px);
    opacity: 1; transition: opacity 900ms cubic-bezier(0.44,0,0.56,1);
  }
  #poster.gone { opacity: 0; }
  #poster { transform-origin: 60% 45%; will-change: transform; }
  #poster::after {
    content: ""; position: absolute; inset: 8%; border-radius: 50%;
    background: repeating-radial-gradient(circle at 40% 38%, rgba(255,255,255,0.035) 0 6px, transparent 6px 13px);
    -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%);
            mask: radial-gradient(closest-side, #000 55%, transparent 100%);
    opacity: 0.5; mix-blend-mode: screen; pointer-events: none;
  }
  /* key-light shaft (living poster, no-WebGL) */
  #poster-shaft {
    position: fixed; z-index: 1; pointer-events: none; display: none;
    right: 2vw; top: -10vh; width: 74vw; height: 84vh; transform: rotate(17deg);
    background: linear-gradient(200deg, rgba(255,255,255,0.07), transparent 46%);
    filter: blur(9px);
  }
  body.no3d #poster-shaft { display: block; }
  /* terrain poster gains a folded ridge silhouette (same fold language) */
  #terrain-poster::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
    background:
      radial-gradient(140% 100% at 30% 100%, rgba(255,255,255,0.055), transparent 60%),
      radial-gradient(120% 100% at 78% 100%, rgba(255,255,255,0.04), transparent 55%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 74 Q40 44 80 64 T160 57 T240 62 T320 50 T400 66 L400 120 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 74 Q40 44 80 64 T160 57 T240 62 T320 50 T400 66 L400 120 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
  }
  @media (max-width: 720px) { #poster { width: 64vh; height: 52vh; right: -14vh; top: 9vh; } }

  /* ---------- hero ---------- */
  .hero {
    height: 100svh; min-height: 560px; display: flex; align-items: flex-end;
    padding: 0 clamp(24px, 4vw, 56px) 64px;
    box-sizing: border-box; position: relative;
  }
  .hero-grid { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; }
  h1.hero-h {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 520;
    font-size: clamp(52px, 6.8vw, 100px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .line { display: block; overflow: hidden; }
  /* S2: headline mask-rises word by word (delays inline per word) */
  .lw {
    display: inline-block; transform: translateY(115%);
    transition: transform 900ms cubic-bezier(0.44, 0, 0.56, 1);
  }
  .booted .lw { transform: translateY(0); }

  .hero-aside {
    display: flex; gap: 40px; align-items: flex-end;
    padding-bottom: 4px;
    opacity: 0; transform: translateY(24px);
    transition: opacity 800ms cubic-bezier(0.44,0,0.56,1) 650ms, transform 800ms cubic-bezier(0.44,0,0.56,1) 650ms;
  }
  .booted .hero-aside { opacity: 1; transform: translateY(0); }
  .hero-aside p { margin: 0; font: 400 17px/1.7 var(--font-sans); color: #B9BEC7; max-width: 330px; }

  .hero-label {
    position: absolute; top: 104px; left: clamp(24px, 4vw, 56px);
    font: 400 11.5px/1 var(--font-mono); letter-spacing: 0.04em;
    color: rgba(244,241,236,0.5); text-transform: lowercase;
    opacity: 0; transition: opacity 800ms cubic-bezier(0.44,0,0.56,1) 150ms;
  }
  .booted .hero-label { opacity: 1; }

  .scroll-cue {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    font: 400 10px/1 var(--font-mono); letter-spacing: 0.2em;
    color: rgba(255,255,255,0.3); text-transform: uppercase;
    opacity: 0; transition: opacity 800ms 1400ms;
  }
  .booted .scroll-cue { opacity: 1; }

  /* quiet runway between stations — part of the rhythm */
  .runway { height: 40vh; }

  /* ---------- sections ---------- */
  section.zone { position: relative; padding: 20vh clamp(24px, 4vw, 56px); }
  .zone-inner { max-width: 1240px; margin: 0 auto; }
  .zone-label {
    font: 400 11.5px/1 var(--font-mono); letter-spacing: 0.04em;
    color: rgba(244,241,236,0.5); text-transform: lowercase;
    margin-bottom: 56px;
  }
  [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 800ms cubic-bezier(0.44,0,0.56,1), transform 800ms cubic-bezier(0.44,0,0.56,1); }
  [data-reveal].in { opacity: 1; transform: translateY(0); }

  /* ---------- S3: chaos enters ---------- */
  .s3-section { height: 250vh; position: relative; }
  .s3-sticky { position: sticky; top: 0; height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .s3-chips { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
  /* P1-2 (THEMISTOKLIS): ta #s3 / #s5 deixnoun epinoimena leitourgika symvanta
     mesa apo to story.js (BOOKING.COM · NEW, INVOICE · OVERDUE, PAYMENT ·
     DECLINED, WORK ROUTED...). Itan i monadiki zoni epideixis xwris simansi,
     kai i pio euanagnwsti. Kato-aristera, panw apo tis pills (z-index 4 > 2/3),
     mesa sto positioned ancestor kathe zonis. */
  .s-example { position: absolute; z-index: 4; left: clamp(24px, 4vw, 56px); bottom: 30px; }
  @media (max-width: 720px) {
    /* pio psila apo ti fixed kato mpara */
    .s-example { left: 20px; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
  }
  .s3-chip {
    position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(12,12,15,0.8); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
    padding: 9px 13px; font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.1em; color: rgba(244,241,236,0.75);
    will-change: transform, opacity; z-index: 2;
  }
  .s3-chip::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: rgba(244,241,236,0.55); flex: none; }
  /* foreground passes: in front of the subject, softly defocused */
  .s3-chip.fg { filter: blur(2.5px); z-index: 30; box-shadow: 0 18px 50px rgba(0,0,0,0.5); }
  .s3-center { text-align: center; position: relative; z-index: 3; }
  .s3-count {
    font: 500 clamp(64px, 9vw, 150px)/1 var(--font-display); letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(115deg, #FFB65C, #FF6A2E 75%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 24px rgba(255,90,30,0.22));
  }
  .s3-cap { font: 400 11.5px/1 var(--font-mono); letter-spacing: 0.1em; color: rgba(244,241,236,0.55); text-transform: lowercase; margin-top: 18px; }
  .s3-tags { display: flex; gap: 10px; justify-content: center; margin-top: 14px; font: 400 10px/1 var(--font-mono); letter-spacing: 0.12em; color: rgba(244,241,236,0.4); text-transform: lowercase; }
  .s3-tags span, .s3-tags i { opacity: 0; transition: opacity 700ms cubic-bezier(0.44,0,0.56,1); font-style: normal; }
  .s3-tags.in span, .s3-tags.in i { opacity: 1; }
  .s3-tags.in span:nth-of-type(2) { transition-delay: 220ms; }
  .s3-tags.in span:nth-of-type(3) { transition-delay: 440ms; }
  @media (prefers-reduced-motion: reduce) { .s3-section { height: auto; } .s3-sticky { position: static; height: 100svh; } }

  /* ---------- S4: brain fracture ---------- */
  .s4-section { height: 300vh; position: relative; }
  .s4-sticky { position: sticky; top: 0; height: 100dvh; display: flex; align-items: flex-end; justify-content: flex-start; padding: 0 clamp(24px, 4vw, 56px) 12vh; box-sizing: border-box; }
  .s4-cap {
    font: 520 clamp(30px, 3.6vw, 54px)/1.12 var(--font-display); letter-spacing: -0.01em; color: var(--ink);
    opacity: 0; transform: translateY(20px);
    transition: opacity 700ms cubic-bezier(0.44,0,0.56,1), transform 700ms cubic-bezier(0.44,0,0.56,1);
  }
  .s4-cap.in { opacity: 1; transform: none; }
  /* mobile: converted from the heavy 190vh pinned scrub to a LINEAR unpinned
     pass (real-iPhone verdict). Section flows normally; the brain still
     fractures via the global-g timeline as you scroll through it into S5, so
     the beat reads without holding the scroll in the hand. */
  @media (max-width: 720px) {
    .s4-section { height: auto; }
    .s4-sticky { position: static; min-height: 118svh; align-items: center; padding-bottom: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .s4-section { height: auto; } .s4-sticky { position: static; height: 100svh; } .s4-cap { opacity: 1; transform: none; } }

  /* ---------- S5: agent reveal — UNPINNED (a breath after two long pins) ---------- */
  .s5-section { min-height: 150vh; position: relative; display: flex; }
  .s5-inner { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 58px; padding: 24vh clamp(24px, 4vw, 56px); box-sizing: border-box; }
  .s5-chaos { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  .s3-chip.s5c { transform: none; }
  .s3-chip.s5c.fly { transition: transform 640ms cubic-bezier(0.3, 0.9, 0.3, 1), opacity 240ms 520ms; }
  @media (hover: hover) { .s3-chip.s5c.fly { filter: blur(1.1px); } }   /* whisper of motion-softening */
  .s5-agents { display: flex; gap: clamp(20px, 4vw, 60px); flex-wrap: wrap; justify-content: center; position: relative; z-index: 3; }
  .s5-agent { display: flex; flex-direction: column; align-items: center; gap: 11px; opacity: 0; transform: translateY(26px) scale(1.14); filter: blur(5px); }
  .s5-agents.in .s5-agent {
    opacity: 1; transform: none; filter: none;
    transition: opacity 700ms cubic-bezier(0.44,0,0.56,1), transform 700ms cubic-bezier(0.3,0.9,0.3,1), filter 700ms cubic-bezier(0.44,0,0.56,1);
  }
  .s5-agents.in .s5-agent:nth-child(2) { transition-delay: 90ms; }
  .s5-agents.in .s5-agent:nth-child(3) { transition-delay: 180ms; }
  .s5-agents.in .s5-agent:nth-child(4) { transition-delay: 270ms; }
  .s5-agents.in .s5-agent:nth-child(5) { transition-delay: 360ms; }
  .s5-chipbig {
    position: relative; width: 78px; height: 78px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background-color: rgba(14,14,17,0.66);
    background-image: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0) 40%);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 18px 40px -14px rgba(0,0,0,0.6);
  }
  .s5-chipbig canvas { width: 48px; height: 48px; display: block; }
  .s5-agent .nm { font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.12em; color: rgba(244,241,236,0.55); text-transform: uppercase; }
  .s5-agent .bd { font: 400 9px/1 var(--font-mono); letter-spacing: 0.1em; color: #FF8A4C; opacity: 0; transition: opacity 500ms; min-height: 9px; }
  .s5-agent .bd.in { opacity: 1; }
  .s5-agent.landed .s5-chipbig { animation: s5glint 900ms cubic-bezier(0.3,0.9,0.3,1); }
  @keyframes s5glint {
    0% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 0 rgba(255,110,40,0.55), 0 18px 40px -14px rgba(0,0,0,0.6); border-color: rgba(255,138,76,0.8); }
    100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 26px rgba(255,110,40,0), 0 18px 40px -14px rgba(0,0,0,0.6); }
  }
  .s5-cap {
    font: 520 clamp(26px, 3.2vw, 46px)/1.14 var(--font-display); letter-spacing: -0.01em; color: var(--ink);
    text-align: center; position: relative; z-index: 3;
    opacity: 0; transform: translateY(18px);
    transition: opacity 700ms cubic-bezier(0.44,0,0.56,1), transform 700ms cubic-bezier(0.44,0,0.56,1);
  }
  .s5-cap.in { opacity: 1; transform: none; }
  @media (max-width: 720px) {
    .s5-section { min-height: auto; }
    .s5-inner { padding: 16vh 20px; gap: 40px; }
    .s5-agents { gap: 18px 22px; }
    .s5-chipbig { width: 58px; height: 58px; backdrop-filter: none; -webkit-backdrop-filter: none; background-color: #0B0B0D; }
    .s5-chipbig canvas { width: 36px; height: 36px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .s5-agent { opacity: 1; transform: none; filter: none; }
    .s5-cap { opacity: 1; transform: none; }
    .s5-agent.landed .s5-chipbig { animation: none; }
  }

  /* ---------- S7: system assembly (pinned) ---------- */
  .s7-section { height: 200vh; position: relative; }
  .s7-sticky { position: sticky; top: 0; height: 100dvh; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14vh; box-sizing: border-box; }
  .s7-cap {
    font: 520 clamp(30px, 3.6vw, 54px)/1.12 var(--font-display); letter-spacing: -0.01em; color: var(--ink);
    text-align: center; opacity: 0; transform: translateY(20px);
    transition: opacity 700ms cubic-bezier(0.44,0,0.56,1), transform 700ms cubic-bezier(0.44,0,0.56,1);
  }
  .s7-cap.in { opacity: 1; transform: none; }
  /* the unified pulse: every emitting element glints on the same beat */
  .wm-dot, #nav-ind, .op-chip, .s5-chipbig { transition: box-shadow 320ms cubic-bezier(0.44,0,0.56,1); }
  .fi-pulse .wm-dot, .fi-pulse #nav-ind { box-shadow: 0 0 16px rgba(255,110,40,0.95); }
  .fi-pulse .lit, .fi-pulse .stat-num { filter: drop-shadow(0 0 26px rgba(255,110,40,0.5)); }
  .fi-pulse .op-chip, .fi-pulse .s5-chipbig { border-color: rgba(255,138,76,0.7); box-shadow: 0 0 22px rgba(255,110,40,0.35); }
  @media (max-width: 720px) { .s7-section { height: 150vh; } .s7-sticky { padding-bottom: 18vh; } }
  @media (prefers-reduced-motion: reduce) { .s7-section { height: auto; } .s7-sticky { position: static; height: 100svh; } .s7-cap { opacity: 1; transform: none; } }

  /* manifesto */
  #manifesto-text {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(32px, 3.4vw, 46px); line-height: 1.28; letter-spacing: -0.008em;
    max-width: 900px; margin: 0;
  }

  /* services — 3D flip cards on dotted grid */
  .svc-wrap {
    background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
    background-size: 22px 22px;
    border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
    padding: 48px; border-radius: 2px;
  }
  .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .svc-card { position: relative; height: 280px; perspective: 1100px; cursor: pointer; outline: none; border-radius: 3px; }
  .svc-inner {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transition: transform 620ms cubic-bezier(0.3, 0.9, 0.3, 1);
  }
  .svc-face {
    position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: var(--bg-panel); border: 1px solid rgba(255,255,255,0.1); border-radius: 3px;
    border-top: 1px solid rgba(255,255,255,0.35);
    padding: 24px; display: flex; flex-direction: column; box-sizing: border-box;
    transition: border-color 240ms cubic-bezier(0.44,0,0.56,1);
  }
  .svc-back { transform: rotateY(180deg); justify-content: space-between; }
  .svc-num { font: 400 12px/1 var(--font-mono); color: rgba(255,255,255,0.5); }
  .svc-flip-chip {
    position: absolute; top: 18px; right: 18px;
    font: 400 9px/1 var(--font-mono); letter-spacing: 0.2em;
    color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px; padding: 5px 9px;
  }
  .svc-title { font: 500 24px/1.18 var(--font-display); letter-spacing: -0.005em; color: var(--ink); margin-top: auto; }
  .svc-icon { width: 34px; height: 34px; margin-top: 22px; }
  .svc-desc { font: 400 15.5px/1.7 var(--font-sans); color: #B9BEC7; margin: 0; }
  .svc-explore { font: 400 11px/1 var(--font-mono); letter-spacing: 0.18em; color: var(--ink); }

  /* stats — corner brackets */
  .stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .stat { position: relative; padding: 40px 36px; text-align: left; }
  .stat i {
    position: absolute; width: 18px; height: 18px; border: 0 solid rgba(255,255,255,0.4); font-style: normal;
  }
  .stat i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
  .stat i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
  .stat i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
  .stat i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
  .stat-num {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(56px, 6vw, 96px); line-height: 1; letter-spacing: -0.01em; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .stat-num sub { font-size: 0.38em; vertical-align: baseline; color: rgba(255,255,255,0.6); font-weight: 300; }
  .stat-cap { font: 400 11px/1.5 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.5); text-transform: uppercase; margin-top: 18px; }

  @media (max-width: 900px) {
    .svc-grid, .stat-strip { grid-template-columns: 1fr; }
  }

  /* ---------- workflow-builder mockup (pinned) ---------- */
  .wf-section { height: 340vh; position: relative; }
  .wf-sticky { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(24px, 4vw, 56px); box-sizing: border-box; perspective: 1400px; }
  /* backdrop cinema: widening key-light shaft grazing the window's edge + dust motes */
  .wf-atmo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .wf-sticky > .zone-inner, .wf-sticky > .wf-app, .wf-sticky > .wf-caption { position: relative; z-index: 1; }
  .wf-shaft {
    position: absolute; left: 32%; top: -14%; width: 27vw; height: 132%;
    transform: rotate(13deg); transform-origin: top center;
    background: linear-gradient(102deg, transparent, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0.035) 62%, transparent);
    animation: wfshaft 26s cubic-bezier(0.44,0,0.56,1) infinite alternate;
  }
  @keyframes wfshaft {
    from { transform: rotate(12deg) scaleX(0.82); opacity: 0.75; }
    to { transform: rotate(14.5deg) scaleX(1.3); opacity: 1; }
  }
  #wf-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
  @media (prefers-reduced-motion: reduce) { .wf-shaft { animation: none; } #wf-dust { display: none; } }
  .wf-app {
    max-width: 1240px; width: 100%; margin: 0 auto; position: relative;
    background: var(--elev); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    overflow: hidden; display: flex; flex-direction: column;
    height: min(72vh, 660px);
    /* a physical panel hovering above the terrain: glass rim up top, floating
       drop shadow beneath, and a wide dark halo dimming the streams at its edges */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      0 60px 110px -18px rgba(0,0,0,0.78),
      0 22px 44px rgba(0,0,0,0.5),
      0 0 90px 26px rgba(0,0,0,0.4);
    will-change: transform;
  }
  .wf-app::before {
    content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 1px; z-index: 8;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55) 38%, rgba(255,255,255,0.55) 62%, transparent);
    pointer-events: none;
  }
  .wf-titlebar {
    display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; gap: 14px; padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08); background: #0d0d0d;
  }
  .wf-dots { display: flex; gap: 6px; }
  .wf-dots span { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.16); }
  .wf-title { font: 400 11px/1 var(--font-mono); letter-spacing: 0.08em; color: rgba(255,255,255,0.6); }
  .wf-status { margin-left: auto; display: flex; align-items: center; gap: 8px; font: 400 10px/1 var(--font-mono); letter-spacing: 0.12em; color: rgba(255,255,255,0.5); }
  .wf-status b { width: 6px; height: 6px; border-radius: 999px; background: var(--ink); display: inline-block; animation: wfblink 2.4s infinite; font-weight: 400; }
  /* Truthfulness marking: dilwnei oti ta noumera tou panel einai synthetika (ADR-001(g)).
     Idio typographic register me .wf-title/.wf-status - mono, uppercase, letter-spacing.
     NA MIN mikrynei kai na min pesei to contrast: einai i idia i simansi, oxi diakosmisi. */
  .wf-example {
    font: 400 10.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.92); background: rgba(255,90,30,0.16);
    border: 1px solid rgba(255,90,30,0.7); border-radius: 3px;
    padding: 4px 8px; white-space: nowrap; flex: none;
  }
  /* To Geist Mono den exei greek subset - i elliniki etiketa tha espage mesa sti lexi.
     [lang="el"] kai OXI :lang(el): to :lang() klironomeitai apo to <html lang="el">,
     opote tha epiane kai to ANGLIKO badge tou .wf-app stin elliniki arxiki. Metrithike:
     Geist Mono -> Inter se 3 badges anti gia 2. To attribute selector piani mono osa
     simana o idios ellinika. */
  .wf-example[lang="el"] { font-family: var(--font-sans); letter-spacing: 0.10em; }
  @keyframes wfblink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
  .wf-body { flex: 1; display: flex; min-height: 0; }
  .wf-side {
    width: 84px; border-right: 1px solid rgba(255,255,255,0.08); background: #0c0c0c;
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 14px;
  }
  .wf-side-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 0; width: 100%; color: rgba(255,255,255,0.45); }
  .wf-side-item.on { color: var(--ink); background: rgba(255,255,255,0.05); }
  .wf-side-item svg { width: 17px; height: 17px; }
  .wf-side-item span { font: 400 8px/1 var(--font-mono); letter-spacing: 0.12em; }
  .wf-canvas {
    flex: 1; position: relative; overflow: hidden;
    background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 20px 20px; background-color: #090909;
  }
  .wf-node { 
    position: absolute; width: 218px; box-sizing: border-box;
    background: #101010; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
    padding: 12px 14px; transition: border-color 400ms cubic-bezier(0.44,0,0.56,1), box-shadow 400ms cubic-bezier(0.44,0,0.56,1);
  }
  .wf-node .k { font: 400 12px/1 var(--font-mono); letter-spacing: 0.12em; color: rgba(255,255,255,0.4); text-transform: uppercase; }
  .wf-node .t { font: 400 15px/1.3 var(--font-sans); color: var(--ink); margin-top: 6px; }
  .wf-node .s { font: 400 12px/1.35 var(--font-mono); letter-spacing: 0.06em; color: rgba(255,255,255,0.35); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
  .wf-node .s::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.25); }
  .wf-node.exec { border-color: rgba(255,255,255,0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 0 34px rgba(255,255,255,0.07); }
  .wf-node.exec .s { color: var(--ink); }
  .wf-node.exec .s::before { background: var(--ink); }
  .wf-node.done { border-color: rgba(255,255,255,0.3); }
  .wf-node.done .s { color: rgba(255,255,255,0.6); }
  .wf-node.done .s::before { background: rgba(255,255,255,0.7); }
  .wf-wires { position: absolute; inset: 0; pointer-events: none; }
  .wf-cursor {
    position: absolute; display: flex; align-items: center; gap: 6px; pointer-events: none;
    transition: transform 2.6s cubic-bezier(0.44,0,0.56,1); will-change: transform; z-index: 5;
  }
  .wf-cursor svg { width: 13px; height: 13px; }
  .wf-cursor span {
    font: 400 9px/1 var(--font-mono); letter-spacing: 0.1em;
    background: var(--ink); color: #060606; border-radius: 999px; padding: 4px 9px;
  }
  .wf-caption { max-width: 1240px; margin: 28px auto 0; width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
  .wf-caption h2 { font: 520 clamp(26px, 2.6vw, 40px)/1.15 var(--font-display); letter-spacing: -0.008em; color: var(--ink); margin: 0; }
  .wf-caption p { font: 400 11px/1.6 var(--font-mono); letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin: 0; text-transform: uppercase; }
  .wf-stamp {
    position: absolute; font: 400 10.5px/1 var(--font-mono); letter-spacing: 0.16em;
    color: #060606; background: var(--ink); border-radius: 999px; padding: 7px 12px;
    opacity: 0; transform: translateY(6px);
    transition: opacity 400ms cubic-bezier(0.44,0,0.56,1), transform 400ms cubic-bezier(0.44,0,0.56,1);
    pointer-events: none; z-index: 4;
  }
  .wf-stamp.on { opacity: 1; transform: translateY(0); }

  /* ---------- S6 mobile: inline evidence snapshots on the stacked nodes ---------- */
  .wf-node .mev { display: none; }
  @media (max-width: 700px) {
    .wf-node .mev {
      display: block; margin-top: 9px; padding: 8px 10px;
      font: 400 9px/1.5 var(--font-mono); letter-spacing: 0.06em; color: rgba(244,241,236,0.52);
      background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 9px;
    }
    .wf-node.done .mev, .wf-node.exec .mev { color: rgba(244,241,236,0.72); border-color: rgba(255,138,76,0.28); }
  }

  /* ---------- S6: the story's step-rail (left of the window) ---------- */
  .wf-rail { position: absolute; left: clamp(18px, 2.2vw, 40px); top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 17px; }
  .wf-rail-item { display: flex; align-items: baseline; gap: 9px; font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.08em; color: rgba(244,241,236,0.3); text-transform: lowercase; transition: color 300ms cubic-bezier(0.44,0,0.56,1); }
  .wf-rail-item b { font-weight: 400; font-size: 8.5px; color: rgba(244,241,236,0.26); transition: color 300ms; }
  .wf-rail-item i { font-style: normal; font-size: 8.5px; color: #FF8A4C; opacity: 0; transition: opacity 300ms; }
  .wf-rail-item.on { color: var(--ink); }
  .wf-rail-item.on b { color: #FF8A4C; }
  .wf-rail-item.done { color: rgba(244,241,236,0.45); }
  .wf-rail-item.done i { opacity: 1; }
  @media (max-width: 1200px) {
    /* mid desktops: the rail folds into a single active-caption line above the window */
    .wf-rail { position: static; transform: none; flex-direction: row; gap: 12px; justify-content: center; margin-bottom: 14px; }
    .wf-rail-item { display: none; }
    .wf-rail-item.on { display: flex; }
    .wf-rail-item i { display: none; }
  }
  @media (max-width: 900px) { .wf-rail { display: none; } }

  /* ---------- S5 → S6 bridge: docked agent strip atop the sidebar ---------- */
  .wf-agents { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; padding: 13px 8px 14px; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .wf-agents .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; }
  .wf-agents canvas { width: 15px; height: 15px; opacity: 0; transform: translateY(-14px); }
  .wf-agents.dock canvas { opacity: 1; transform: none; transition: opacity 550ms cubic-bezier(0.3,0.9,0.3,1), transform 550ms cubic-bezier(0.3,0.9,0.3,1); }
  .wf-agents.dock canvas:nth-child(2) { transition-delay: 70ms; }
  .wf-agents.dock canvas:nth-child(3) { transition-delay: 140ms; }
  .wf-agents.dock canvas:nth-child(4) { transition-delay: 210ms; }
  .wf-agents.dock canvas:nth-child(5) { transition-delay: 280ms; }
  .wf-agents span { font: 400 7px/1.4 var(--font-mono); letter-spacing: 0.04em; white-space: nowrap; color: rgba(244,241,236,0.5); text-align: center; opacity: 0; transition: opacity 600ms 450ms; }
  .wf-agents.dock span { opacity: 1; }
  @media (max-width: 900px) { .wf-agents { display: none; } }

  /* ---------- living app: auto-tour tabs, panes, chat, stack, chrome ---------- */
  .wf-side-item { position: relative; cursor: pointer; transition: color 280ms cubic-bezier(0.44,0,0.56,1), background 280ms cubic-bezier(0.44,0,0.56,1); }
  .wf-prog { position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left center; opacity: 0; }
  .wf-side-item.on .wf-prog { opacity: 0.7; }
  .wf-body { position: relative; }
  .wf-pane { flex: 1; min-width: 0; position: relative; overflow: hidden; display: none; background-color: #090909; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 20px 20px; }
  .wf-app[data-tab="chat"] .wf-canvas, .wf-app[data-tab="stack"] .wf-canvas { display: none; }
  .wf-app[data-tab="chat"] .wf-chat { display: flex; }
  .wf-app[data-tab="stack"] .wf-stack { display: block; }
  .wf-caret { display: inline-block; width: 6px; height: 10px; background: rgba(255,255,255,0.55); margin-left: 7px; vertical-align: -1px; animation: wfcaret 1.1s steps(1) infinite; }
  @keyframes wfcaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
  #wf-status-txt { transition: opacity 240ms cubic-bezier(0.44,0,0.56,1); }
  .wf-clock { position: absolute; left: 78px; bottom: 12px; font: 400 10px/1 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.4); font-variant-numeric: tabular-nums; z-index: 6; pointer-events: none; }
  @keyframes wfdottick { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
  .wf-node.done .s::before, .wf-node.exec .s::before { animation: wfdottick 2.2s infinite; }
  .wf-toast { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; background: #121212; border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; padding: 10px 14px; font: 400 10.5px/1 var(--font-mono); letter-spacing: 0.1em; color: rgba(255,255,255,0.75); text-transform: uppercase; transform: translateY(12px); opacity: 0; transition: transform 500ms cubic-bezier(0.3,0.9,0.3,1), opacity 500ms cubic-bezier(0.3,0.9,0.3,1); z-index: 6; pointer-events: none; }
  .wf-toast.in { transform: none; opacity: 1; }
  .wf-toast::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--ink); flex: none; }
  /* chat pane */
  .wf-chat { flex-direction: column; padding: 26px 30px 22px; }
  .wf-chat-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; }
  .wf-msg { max-width: 64%; padding: 11px 15px; border-radius: 9px; font: 300 14px/1.5 var(--font-sans); opacity: 0; transform: translateY(8px); transition: opacity 400ms cubic-bezier(0.44,0,0.56,1), transform 400ms cubic-bezier(0.44,0,0.56,1); }
  .wf-msg.in { opacity: 1; transform: none; }
  .wf-msg.guest { align-self: flex-start; background: #141414; border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.88); border-bottom-left-radius: 2px; }
  .wf-msg.agent { align-self: flex-end; background: #1b1b1b; border: 1px solid rgba(255,255,255,0.08); color: var(--ink); border-bottom-right-radius: 2px; }
  .wf-msg .who { display: block; font: 400 9px/1 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.38); margin-bottom: 6px; text-transform: uppercase; }
  .wf-msg .body { min-height: 1em; display: block; }
  .wf-msg.typing .body::after { content: "\258d"; margin-left: 2px; color: rgba(255,255,255,0.7); animation: wfcaret 0.9s steps(1) infinite; }
  .wf-sent { align-self: flex-end; font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.12em; color: rgba(255,255,255,0.45); transition: color 700ms cubic-bezier(0.44,0,0.56,1); }
  .wf-sent.flash { color: var(--molten); transition: none; }
  /* stack pane */
  .wf-stack { padding: 16px 22px; }
  .wf-srow { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 16px; padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,0.07); border-radius: 4px; transition: background 700ms cubic-bezier(0.44,0,0.56,1); }
  .wf-srow:last-child { border-bottom: none; }
  .wf-srow.hot { background: rgba(255,255,255,0.05); transition: none; }
  .wf-srow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ink); animation: wfdottick 2.6s infinite; }
  .wf-srow .nm { font: 300 14.5px/1.3 var(--font-sans); color: var(--ink); }
  .wf-srow .nm small { display: block; font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.1em; color: rgba(255,255,255,0.35); margin-top: 4px; }
  .wf-srow svg { width: 84px; height: 20px; opacity: 0.6; }
  .wf-srow .sync { font: 400 10px/1 var(--font-mono); letter-spacing: 0.1em; color: rgba(255,255,255,0.45); min-width: 104px; text-align: right; font-variant-numeric: tabular-nums; }

  /* ---------- one physical language: 1px top rim-light + soft depth shadow ---------- */
  .spec-app, .svc-face { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 26px 56px -20px rgba(0,0,0,0.6); }
  #case-preview { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 80px rgba(0,0,0,0.5); }
  .op-chip, .wf-toast { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 24px -10px rgba(0,0,0,0.5); }
  /* contrast pass: mono labels stay legible over the scene */
  .wf-caption p { color: rgba(255,255,255,0.62); }
  .wf-title { color: rgba(255,255,255,0.72); }
  .op-label { color: rgba(255,255,255,0.62); }
  .op-line { color: rgba(255,255,255,0.65); }
  .proc-step .pk { color: rgba(255,255,255,0.55); }
  .wf-node .k { color: rgba(255,255,255,0.5); }
  .wf-node .s { color: rgba(255,255,255,0.48); }

  @media (max-width: 900px) {
    .wf-section { height: auto; }
    .wf-sticky { position: static; height: auto; padding-top: 18vh; padding-bottom: 18vh; }
    .wf-app { height: 480px; }
    .wf-atmo { display: none; }
    .wf-side { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding-top: 0; gap: 0; }
    .wf-side-item { flex: 1 1 0; flex-direction: row; justify-content: center; gap: 7px; padding: 11px 0; }
    .wf-side-item svg { width: 14px; height: 14px; }
    .wf-side-item span { font-size: 8px; }
    .wf-prog { left: 16%; right: 16%; bottom: 0; }
    .wf-body { flex-direction: column; }
    .wf-clock { left: auto; right: 14px; bottom: 10px; }
  }

  /* ---------- case studies — hard white inversion ---------- */
  .cases {
    background: #F7F5F1; color: #060606; position: relative; z-index: 12;
    padding: 18vh clamp(24px, 4vw, 56px);
  }
  .cases .zone-label { color: rgba(6,6,6,0.45); }
  .cases-head {
    font: 520 clamp(40px, 4.6vw, 72px)/1.08 var(--font-display);
    letter-spacing: -0.01em; color: #060606; margin: 0 0 72px; max-width: 800px;
  }
  .case-row {
    display: grid; grid-template-columns: 150px 90px 1fr auto; gap: 32px; align-items: center;
    padding: 34px 0 34px 0; border-top: 1px solid rgba(6,6,6,0.12);
    cursor: pointer; text-decoration: none; color: inherit;
    transition: padding-left 260ms cubic-bezier(0.44,0,0.56,1), background 260ms;
  }
  .case-row:last-of-type { border-bottom: 1px solid rgba(6,6,6,0.12); }
  .case-row:hover { padding-left: 18px; }
  .case-logo { font: 500 16px/1.2 var(--font-sans); letter-spacing: -0.01em; color: #060606; }
  .case-year { font: 400 12px/1 var(--font-mono); letter-spacing: 0.08em; color: rgba(6,6,6,0.45); }
  .case-main .case-title { font: 400 22px/1.2 var(--font-display); letter-spacing: -0.015em; color: #060606; }
  .case-main .case-desc { font: 300 14.5px/1.5 var(--font-sans); color: rgba(6,6,6,0.55); margin-top: 6px; }
  .case-arrow {
    font: 300 20px/1 var(--font-mono); color: rgba(6,6,6,0.4);
    transition: transform 260ms cubic-bezier(0.44,0,0.56,1), color 260ms;
  }
  .case-row:hover .case-arrow { transform: translateX(8px); color: #060606; }
  @media (max-width: 900px) {
    .case-row { grid-template-columns: 1fr auto; }
    .case-logo, .case-year { display: none; }
  }

  /* ---------- process — pinned cinematic stations ---------- */
  .proc-section { height: 260vh; position: relative; }
  .proc-sticky { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; align-items: center; padding: 0 clamp(24px,4vw,56px); box-sizing: border-box; }
  .proc-ghost {
    position: absolute; right: 4vw; top: 50%; transform: translateY(-50%);
    font: 300 30vh/1 var(--font-display); letter-spacing: -0.04em;
    color: rgba(255,255,255,0.03); pointer-events: none; user-select: none;
    font-variant-numeric: tabular-nums;
  }
  .proc-stage { max-width: 1240px; width: 100%; margin: 0 auto; position: relative; }
  .proc-step { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
  .proc-step .pk { font: 400 12px/1 var(--font-mono); letter-spacing: 0.18em; color: rgba(255,255,255,0.45); margin-bottom: 26px; opacity: 0; transition: opacity 400ms cubic-bezier(0.44,0,0.56,1) 120ms; }
  .proc-step.active .pk { opacity: 1; }
  .proc-step.exit .pk { opacity: 0; transition-delay: 0ms; }
  .proc-step .pt { overflow: hidden; }
  .proc-step .pt span {
    display: block; font: 520 clamp(44px, 5.4vw, 84px)/1.08 var(--font-display);
    letter-spacing: -0.03em; color: var(--ink);
    transform: translateY(112%); transition: transform 700ms cubic-bezier(0.44,0,0.56,1);
  }
  .proc-step .pd {
    font: 400 17px/1.7 var(--font-sans); color: #B9BEC7; max-width: 440px; margin-top: 26px;
    opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(0.44,0,0.56,1) 150ms, transform 600ms cubic-bezier(0.44,0,0.56,1) 150ms;
  }
  .proc-step { visibility: hidden; }
  .proc-step.active { visibility: visible; }
  .proc-step.active .pt span { transform: translateY(0); }
  .proc-step.active .pd { opacity: 1; transform: translateY(0); }
  .proc-step.exit { visibility: visible; }
  .proc-step.exit .pt span { transform: translateY(-112%); }
  .proc-step.exit .pd { opacity: 0; transform: translateY(-14px); }

  /* progress line 01 → 04 */
  .proc-progress { position: absolute; left: clamp(24px,4vw,56px); bottom: 8vh; display: flex; align-items: center; gap: 16px; }
  .proc-progress .pp-num { font: 400 11px/1 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.4); }
  .proc-progress .pp-track { width: 220px; height: 1px; background: rgba(255,255,255,0.12); position: relative; }
  .proc-progress .pp-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); width: 0%; transition: width 500ms cubic-bezier(0.44,0,0.56,1); }

  /* step artifact chips */
  .proc-artifact {
    position: absolute; right: clamp(24px,4vw,56px); bottom: 8vh;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 3px; background: rgba(13,13,13,0.7);
    padding: 14px 16px; display: flex; align-items: center; gap: 12px; min-width: 190px;
    font: 400 10px/1.5 var(--font-mono); letter-spacing: 0.12em; color: rgba(255,255,255,0.6); text-transform: uppercase;
    opacity: 0; transform: translateY(10px); transition: opacity 400ms cubic-bezier(0.44,0,0.56,1), transform 400ms cubic-bezier(0.44,0,0.56,1);
  }
  .proc-artifact.on { opacity: 1; transform: translateY(0); }
  .proc-artifact svg { width: 30px; height: 30px; flex-shrink: 0; }
  .pa-live b { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--ink); margin-right: 6px; animation: wfblink 1.6s infinite; }
  @media (max-width: 900px) {
    .proc-section { height: auto; }
    .proc-sticky { position: static; height: auto; overflow: visible; padding: 18vh clamp(24px,4vw,56px); display: block; }
    .proc-stage { position: static; }
    .proc-step { position: static; transform: none; visibility: visible; margin-bottom: 64px; }
    .proc-step .pt span { transform: none; }
    .proc-step .pd { opacity: 1; transform: none; }
    .proc-ghost, .proc-progress, .proc-artifact { display: none; }
    .proc-stage { counter-reset: pstep; }
    .proc-step { counter-increment: pstep; }
    .proc-step::before {
      content: counter(pstep, decimal-leading-zero);
      display: block; font: 300 clamp(60px, 21vw, 120px)/0.85 var(--font-display);
      color: rgba(255,255,255,0.05); letter-spacing: -0.04em; margin-bottom: -4px;
    }
  }

  /* ---------- engagement spec sheet ---------- */
  .spec-app {
    max-width: 900px; margin: 0 auto;
    background: var(--elev); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  }
  .spec-titlebar {
    /* wrap like .wf-titlebar: the demo badge is a third item and would overflow at 390px */
    display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; gap: 14px; padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08); background: #0d0d0d;
  }
  .spec-body { padding: 10px 0 18px; }
  .spec-line { border-bottom: 1px solid rgba(255,255,255,0.05); cursor: default; }
  .spec-line:last-child { border-bottom: none; }
  .spec-row {
    display: grid; grid-template-columns: 44px 1fr auto; gap: 18px; align-items: center;
    padding: 17px 22px; min-height: 44px; box-sizing: border-box;
  }
  .spec-idx { font: 400 10.5px/1 var(--font-mono); color: rgba(255,255,255,0.3); }
  .spec-name { font: 400 16.5px/1.35 var(--font-sans); color: rgba(255,255,255,0.9); }
  .spec-line .typed { opacity: 0; }
  .spec-line.in .typed { opacity: 1; }
  .spec-tag {
    font: 400 10px/1 var(--font-mono); letter-spacing: 0.16em;
    border: 1px solid rgba(255,255,255,0.8); color: var(--ink); border-radius: 2px;
    padding: 6px 10px; display: inline-block;
    opacity: 0; transform: scale(2.2) rotate(-4deg);
  }
  .spec-line.stamped .spec-tag {
    opacity: 1; transform: scale(1) rotate(0deg);
    transition: transform 240ms cubic-bezier(0.2, 1.4, 0.3, 1), opacity 100ms;
  }
  .spec-line .spec-flash { position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; }
  .spec-line { position: relative; }
  .spec-line.flash .spec-flash { opacity: 0.14; transition: none; }
  .spec-line .spec-flash { transition: opacity 260ms cubic-bezier(0.44,0,0.56,1); }
  .spec-detail {
    overflow: hidden; max-height: 0; transition: max-height 320ms cubic-bezier(0.44,0,0.56,1);
  }
  .spec-detail p { margin: 0; padding: 0 22px 16px 84px; font: 300 13.5px/1.5 var(--font-sans); color: rgba(255,255,255,0.5); }
  .spec-line:hover { background: rgba(255,255,255,0.025); }
  .spec-line:hover .spec-detail { max-height: 60px; }
  .spec-foot {
    display: flex; justify-content: space-between; padding: 14px 22px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.16em; color: rgba(255,255,255,0.35); text-transform: uppercase;
  }
  @media (max-width: 900px) {
    .spec-detail p { padding-left: 22px; }
  }

  /* ---------- FAQ ---------- */
  .faq-item { border-top: 1px solid rgba(255,255,255,0.08); }
  .faq-item:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .faq-q {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    display: grid; grid-template-columns: 56px 1fr auto; gap: 24px; align-items: baseline;
    padding: 26px 0; color: var(--ink);
  }
  .faq-q .idx { font: 400 12px/1 var(--font-mono); color: rgba(255,255,255,0.3); }
  .faq-q .q { font: 480 21px/1.35 var(--font-display); letter-spacing: -0.005em; }
  .faq-q .tog { font: 300 20px/1 var(--font-mono); color: rgba(255,255,255,0.4); transition: transform 300ms cubic-bezier(0.44,0,0.56,1); }
  .faq-item.open .tog { transform: rotate(45deg); }
  .faq-a {
    overflow: hidden; max-height: 0; transition: max-height 400ms cubic-bezier(0.44,0,0.56,1);
  }
  .faq-a p { margin: 0; padding: 0 0 28px 80px; font: 400 16px/1.7 var(--font-sans); color: #B9BEC7; max-width: 620px; }

  /* ---------- final CTA ---------- */
  .final-cta { min-height: 90vh; display: flex; align-items: center; }
  .final-cta h2 {
    font: 520 clamp(48px, 6.4vw, 96px)/1.08 var(--font-display);
    letter-spacing: -0.01em; color: var(--ink); margin: 0 0 44px; max-width: 900px;
  }
  .pill-cta.big { height: 56px; padding: 0 34px; font-size: 15px; }

  /* ---------- footer ---------- */
  .site-footer { border-top: 1px solid rgba(255,255,255,0.08); padding: 56px clamp(24px,4vw,56px) 40px; position: relative; z-index: 10; }
  .foot-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
  .foot-brand { font: 500 17px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--ink); }
  .foot-line { font: 400 14px/1.7 var(--font-sans); color: #B9BEC7; max-width: 260px; margin-top: 14px; }
  .foot-col { display: flex; flex-direction: column; gap: 12px; }
  .foot-h { font: 400 10px/1 var(--font-mono); letter-spacing: 0.18em; color: rgba(255,255,255,0.35); text-transform: uppercase; margin-bottom: 6px; }
  .foot-col a, .foot-col button { font: 300 14px/1 var(--font-sans); color: rgba(255,255,255,0.65); background: none; border: none; padding: 0; text-align: left; cursor: pointer; }
  .foot-col a:hover, .foot-col button:hover { color: var(--ink); }
  .foot-bottom { max-width: 1240px; margin: 48px auto 0; display: flex; justify-content: space-between; font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.16em; color: rgba(255,255,255,0.3); text-transform: uppercase; }

  @media (max-width: 900px) {
    .proc-row { grid-template-columns: 48px 1fr; }
    .proc-desc { grid-column: 2; }
    .faq-a p { padding-left: 0; }
    .foot-grid { grid-template-columns: 1fr; gap: 28px; }
    .pill-cta { height: 44px; }
  }

  /* nav split-flap letter roll */
  .nav-link.roll .roll-in { display: inline-flex; }
  .nav-link.roll .rl { display: inline-block; position: relative; overflow: hidden; height: 1em; }
  .nav-link.roll .rl span { display: block; height: 1em; line-height: 1em; transition: transform 260ms cubic-bezier(0.44,0,0.56,1); transition-delay: inherit; }
  .nav-link.roll:hover .rl span { transform: translateY(-1em); }

  /* CTA label swap roll */
  .heat-label.swap { display: inline-block; position: relative; overflow: hidden; height: 1.05em; }
  .heat-label.swap .swap-a, .heat-label.swap .swap-b { display: block; height: 1.05em; line-height: 1.05em; transition: transform 300ms cubic-bezier(0.44,0,0.56,1); white-space: nowrap; }
  .heat-pill:hover .swap-a, .heat-pill:hover .swap-b { transform: translateY(-1.05em); }

  /* case-row cursor preview card */
  #case-preview {
    position: fixed; top: 0; left: 0; z-index: 90; width: 270px; pointer-events: none;
    background: #0d0d0d; border: 1px solid rgba(255,255,255,0.14); border-radius: 4px;
    padding: 14px 16px; opacity: 0; will-change: transform;
    transition: opacity 220ms cubic-bezier(0.44,0,0.56,1), border-color 220ms;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  }
  #case-preview.on { opacity: 1; border-color: var(--molten); }
  #case-preview .cp-top { display: flex; justify-content: space-between; font: 400 9.5px/1 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.5); text-transform: uppercase; margin-bottom: 10px; }
  #case-preview .cp-body { font: 300 13px/1.5 var(--font-sans); color: rgba(255,255,255,0.85); }
  #case-preview .cp-foot { font: 400 9px/1 var(--font-mono); letter-spacing: 0.2em; color: var(--molten); margin-top: 12px; }

  /* operator strip — agent roster: horizontal, label under each chip */
  .op-strip { display: flex; flex-direction: column; gap: 18px; margin-bottom: 44px; align-items: flex-start; }
  .op-chips { display: flex; gap: 28px; flex-wrap: wrap; }
  .op-agent { display: flex; flex-direction: column; align-items: center; gap: 9px; }
  .op-chip {
    width: 46px; height: 46px; border-radius: 999px; flex-shrink: 0;
    background: #101010; border: 1px solid rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center; position: relative;
    transition: border-color 240ms cubic-bezier(0.44,0,0.56,1);
    cursor: default;
  }
  .op-chip:hover { border-color: var(--molten); }
  .op-chip:hover canvas { filter: drop-shadow(0 0 4px rgba(255,90,30,0.5)); }
  .op-chip canvas { width: 30px; height: 30px; display: block; }
  .op-chip b { position: absolute; right: 1px; bottom: 1px; width: 9px; height: 9px; border-radius: 999px; background: var(--ink); border: 2px solid #060606; font-weight: 400; animation: wfblink 2.4s infinite; }
  .op-label { font: 400 9px/1.5 var(--font-mono); letter-spacing: 0.12em; color: rgba(255,255,255,0.5); text-transform: uppercase; transition: color 200ms; text-align: center; }
  .op-label.hot { color: var(--molten); }
  .op-line { font: 400 10.5px/1.6 var(--font-mono); letter-spacing: 0.14em; color: rgba(255,255,255,0.55); text-transform: uppercase; }

  /* ---------- custom cursor ---------- */
  @media (hover: hover) and (pointer: fine) {
    body.cursor-on, body.cursor-on a, body.cursor-on button, body.cursor-on .svc-card { cursor: none; }
  }
  #cur-dot, #cur-ring {
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 200;
    border-radius: 999px; will-change: transform; display: none;
  }
  body.cursor-on #cur-dot, body.cursor-on #cur-ring { display: block; }
  #cur-dot { width: 5px; height: 5px; background: var(--ink); margin: -2.5px 0 0 -2.5px; }
  #cur-ring {
    width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.5); margin: -15px 0 0 -15px;
    transition: width 220ms cubic-bezier(0.44,0,0.56,1), height 220ms cubic-bezier(0.44,0,0.56,1), margin 220ms cubic-bezier(0.44,0,0.56,1), border-color 220ms, background 220ms;
    display: none; align-items: center; justify-content: center;
  }
  body.cursor-on #cur-ring { display: flex; }
  #cur-ring span { font: 400 9px/1 var(--font-mono); letter-spacing: 0.14em; color: #060606; opacity: 0; transition: opacity 160ms; }
  #cur-ring.grow { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-color: rgba(255,255,255,0.85); }
  #cur-ring.view { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--ink); border-color: var(--ink); }
  #cur-ring.view span { opacity: 1; }
  nav.fi-nav.inv ~ #cur-dot { background: #060606; }

  /* το hero μπαίνει άμεσα: 400ms fade, χωρίς τελετουργία (το boot cinematic αφαιρέθηκε) */
  .returning .line > span, .returning .lw, .returning .hero-aside, .returning .hero-label, .returning .scroll-cue, .returning nav.fi-nav { transition-duration: 400ms !important; transition-delay: 0ms !important; }

  /* ============================================================
     MOBILE — a purpose-built 390px layout system, not scaled desktop.
     Phone rhythm: 72px vertical section padding, 20px side gutters,
     clear space below the fixed nav, content-sized cards, zero overlaps.
     ============================================================ */
  @media (max-width: 720px) {
    /* ---- global rhythm ---- */
    section.zone { padding: 72px 20px; }
    .zone-inner { max-width: 100%; }
    .runway { height: 20vh; }

    /* ---- nav: compact — page links stay reachable, pill moves to in-page CTAs ---- */
    nav.fi-nav { padding: calc(env(safe-area-inset-top, 0px) + 4px) 16px 4px; }
    .nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; font-size: 9px; letter-spacing: 0.1em; }
    .nav-right { gap: 14px; }
    nav.fi-nav .pill-cta { display: none; }
    #nav-ind { bottom: 8px; }
    .nav-right { gap: 10px; }
    .pill-cta { height: 44px; padding: 0 18px; font-size: 13px; white-space: nowrap; }

    /* ---- hero: brain owns the top ~45%, headline + CTA anchored below ---- */
    .hero { padding-bottom: 44px; }
    .hero-grid { gap: 26px; }
    h1.hero-h { font-size: clamp(40px, 12vw, 62px); text-wrap: balance; line-height: 1.02; }
    .hero-label { top: calc(env(safe-area-inset-top, 0px) + 76px); }
    .hero-aside { flex-direction: column; align-items: flex-start; gap: 22px; }
    .hero-aside p { font-size: 15px; max-width: none; }

    /* ---- manifesto ---- */
    #manifesto-text { font-size: clamp(24px, 6.6vw, 32px); }

    /* ---- services: compact content-sized cards, no empty middles ---- */
    .svc-wrap { padding: 18px; background-size: 20px 20px; }
    .svc-grid { gap: 12px; }
    .svc-card { height: 172px; }
    .svc-face { padding: 18px; }
    .svc-num { font-size: 11px; }
    .svc-flip-chip { top: 15px; right: 15px; }
    .svc-icon { margin-top: 14px; width: 28px; height: 28px; }
    .svc-title { font-size: 22px; }
    .svc-back { justify-content: space-between; }
    .svc-desc { font-size: 13.5px; line-height: 1.5; }

    /* ---- stats ---- */
    .stat { padding: 26px 20px; }
    .stat-num { font-size: clamp(52px, 16vw, 76px); }

    /* ---- S3 chaos: linear, lighter ---- */
    .s3-section { height: 180vh; }
    .s3-count { font-size: clamp(56px, 17vw, 84px); }
    .s3-chip { padding: 7px 10px; font-size: 8.5px; }

    /* ---- workflow: clean vertical stack, centered dashed spine ---- */
    .wf-sticky { position: static; height: auto; padding: 72px 20px 40px; display: block; }
    .wf-app { height: auto; border-radius: 6px; }
    .wf-body { display: flex; flex-direction: column; }
    .wf-chat, .wf-stack { min-height: 440px; }
    .wf-msg { max-width: 82%; }
    .wf-srow svg { display: none; }
    .wf-toast { display: none; }
    .wf-canvas {
      display: flex; flex-direction: column; gap: 16px; padding: 20px;
      background-size: 18px 18px; min-height: 0; overflow: visible;
    }
    .wf-node {
      position: relative !important; left: auto !important; top: auto !important;
      width: 100%; box-sizing: border-box;
    }
    .wf-node + .wf-node::before {
      content: ""; position: absolute; top: -16px; left: 50%; width: 0; height: 16px;
      border-left: 1px dashed rgba(255,255,255,0.28);
    }
    .wf-node .t { font-size: 15px; }
    .wf-node .k, .wf-node .s { font-size: 12px; }
    .wf-wires { display: none; }
    .wf-cursor { display: none !important; }
    .wf-stamp {
      position: static !important; align-self: flex-start; margin: 2px 0 0;
      opacity: 1; transform: none;
    }
    .wf-caption { flex-direction: column; gap: 10px; margin-top: 22px; }
    .wf-caption h2 { font-size: 28px; }

    /* ---- process: trim the pinned padding ---- */
    .proc-sticky { padding: 72px 20px !important; }

    /* ---- cases ---- */
    .cases { padding: 72px 20px; }

    /* ---- spec sheet ---- */
    .spec-app { border-left: none; border-right: none; border-radius: 0; }
    .spec-row { grid-template-columns: 32px 1fr auto; gap: 12px; padding: 16px 18px; }
    .spec-detail p { padding: 0 18px 14px 62px; }

    /* ---- final CTA + roster: real vertical spacing, single row of 5 chips ---- */
    .final-cta { min-height: auto; display: block; }
    .op-strip { gap: 18px; margin-bottom: 30px; width: 100%; }
    .op-chips { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 4px; width: 100%; max-width: none; }
    .op-agent { flex: 1 1 0; gap: 8px; }         /* five in one row */
    .op-chip { width: 36px; height: 36px; }
    .op-chip canvas { width: 24px; height: 24px; }
    .op-chip b { width: 7px; height: 7px; }
    .op-label { font-size: 8px; letter-spacing: 0.05em; line-height: 1.4; }
    .op-line { font-size: 9px; letter-spacing: 0.05em; }
    .final-cta h2 { font-size: clamp(40px, 11vw, 60px); margin-bottom: 28px; }
    .pill-cta.big { height: 52px; }

    /* ---- footer ---- */
    .site-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .line > span, .lw, .hero-aside, nav.fi-nav, .hero-label, .scroll-cue { transition: none; transform: none; opacity: 1; }
  }

  /* wordmark / nav links can be anchors on subpages */
  a.wordmark, a.wordmark:hover { color: var(--ink); text-decoration: none; }
  a.nav-link, a.nav-link:hover { text-decoration: none; }
  .nav-link.page-on { color: var(--ink); }

  /* ===== CLUSTER E: headline mask/clip reveal + variable-weight settle, synced
     to the reveal beat. The clip rises from the baseline (a mask, not a plain
     fade) and the weight eases from bold to settled as it lands. Layers on the
     existing [data-reveal] opacity/transform. ===== */
  .cases-head, .final-cta h2, .wf-caption h2, .page-title, .s4-cap, .s5-cap, .s7-cap {
    clip-path: inset(-6% -2% -6% -2%);
    transition: opacity 800ms cubic-bezier(0.44,0,0.56,1), transform 800ms cubic-bezier(0.44,0,0.56,1),
                clip-path 900ms cubic-bezier(0.34,0,0.2,1), font-variation-settings 1100ms cubic-bezier(0.34,0,0.2,1);
  }
  .cases-head:not(.in), .final-cta h2:not(.in), .wf-caption h2:not(.in), .page-title:not(.in),
  .s4-cap:not(.in), .s5-cap:not(.in), .s7-cap:not(.in) {
    clip-path: inset(0 0 100% 0);           /* masked from the baseline up */
    font-variation-settings: "wght" 620;    /* enters heavier… */
  }
  .cases-head.in, .final-cta h2.in, .wf-caption h2.in, .page-title.in, .s4-cap.in, .s5-cap.in, .s7-cap.in {
    font-variation-settings: "wght" 500;    /* …settles lighter as it lands */
  }
  @media (prefers-reduced-motion: reduce) {
    .cases-head, .final-cta h2, .wf-caption h2, .page-title, .s4-cap, .s5-cap, .s7-cap { clip-path: none !important; transition: none; }
  }

/* ============ FUSION PASS 3 — SURFACES: luminous glass in the world ============ */
.wf-app, .spec-app, .ct-panel {
  border-radius: 22px;
  background-color: rgba(12,12,15,0.72);
  background-image: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0) 34%);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  border-color: rgba(255,255,255,0.13);
}
.wf-app {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 60px 110px -18px rgba(0,0,0,0.78),
    0 22px 44px rgba(0,0,0,0.5),
    0 0 90px 26px rgba(0,0,0,0.4),
    0 46px 130px -30px rgba(255,90,30,0.16); /* warm under-glow */
}
.spec-app {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 30px 70px -24px rgba(0,0,0,0.65), 0 40px 110px -34px rgba(255,90,30,0.14);
}
.svc-face {
  border-radius: 20px;
  background-color: rgba(14,14,17,0.66);
  background-image: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0) 36%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 54px -20px rgba(0,0,0,0.6), 0 30px 80px -30px rgba(255,90,30,0.1);
}
.wf-titlebar, .svc-vis-bar { background: rgba(255,255,255,0.03); }
.wf-side { background: rgba(255,255,255,0.02); }
.wf-canvas, .wf-pane { background-color: rgba(8,8,10,0.3); }
.wf-node { border-radius: 10px; background: rgba(18,18,21,0.85); }
.wf-toast { border-radius: 14px; background: rgba(20,20,23,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#case-preview { border-radius: 18px; background: rgba(12,12,15,0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* phones: glass without the blur bill */
@media (max-width: 720px) {
  .wf-app, .spec-app, .svc-face, .ct-panel, .wf-toast, #case-preview {
    backdrop-filter: none; -webkit-backdrop-filter: none; background-color: #0B0B0D;
  }
}

/* ============ FUSION PASS 4 — living objects: warm screen glow + depth ============ */
.wf-canvas, .wf-pane {
  box-shadow:
    inset 0 26px 60px -44px rgba(255,255,255,0.05),   /* top light falls into the screen */
    inset 0 -70px 130px -70px rgba(255,90,30,0.13);   /* warm glow rising from the work */
}
.op-chip { will-change: transform; }

/* cases-cut-softener: ease the dark hall under the white cases edge (no hard cut) */
.cases#cases { position:relative; }
.cases#cases::before { content:""; position:absolute; left:0; right:0; top:0; height:240px; background:linear-gradient(to bottom,#060606 0%,rgba(6,6,6,0.55) 42%,rgba(6,6,6,0) 100%); pointer-events:none; z-index:0; }
.cases#cases > .zone-inner { position:relative; z-index:1; }

/* boot scroll-lock: keep the page pinned at hero while the brain materializes, so scrolling during the ~2.5s boot never pops the formation at a scrolled position; released when FI_FORMED */
/* Boot hold. Deliberately NOT overflow:hidden/touch-action:none any more:
   while the page is completely unscrollable Chromium emits no wheel events at
   all (measured: 0 listener hits on window/document/body during the lock, 6/6
   the moment it lifts), so a hard lock hides the very signal we need to detect
   'the visitor wants to scroll'. The hold is now done in JS by snapping back to
   the hero, which keeps scroll/wheel/touch events flowing. */
html.boot-lock, html.boot-lock body { overscroll-behavior: none; }

/* ── MOBILE ≤720px · subpage brain dimming ───────────────────────────────────
   At 390px the fixed #gl brain canvas sits behind body copy on the subpages and
   washes out contrast (process station 02 paragraph, station 03 WHO'S INVOLVED
   row, services bullets 4-5). No text is ever hidden — the copy renders on top
   at full opacity — but dark-grey type over the light brain lobes loses
   contrast. Dimming the canvas on subpages only keeps every word legible.
   index is deliberately excluded: there the brain IS the hero, not a backdrop.
   Desktop (>720px) is untouched. */
@media (max-width: 720px) {
  body.subpage #gl { opacity: 0.4; }
}
/* ══ PHASE B — pin budget (Pheidias spec) ═════════════════════════════════════
   Before: scrollHeight 19,723px @1440 = 21.9 screens, 1350vh of pin, s3->s4 with
   a 0px gap. Target: <=10,000px, <=500vh pin, no zone >150vh, >=60vh of real
   scroll between two pins. The 3D brain, the hero and s5 are untouched. */

/* zone 1 — s3 + s4 become ONE pin: s3 keeps it at 150vh (was 250vh), s4 unpins
   into normal flow using the treatment already proven at <=720px. */
.s3-section { height: 150vh; }
.s4-section { height: auto; }
.s4-sticky  { position: static; min-height: 118svh; align-items: center; padding-bottom: 0; }

/* zone 2 — wf keeps its pin (the workflow demo needs the hold) but the hold is
   cut from 340vh to 150vh; the animation is scroll-progress driven, so it simply
   plays over a shorter track. */
.wf-section { height: 150vh; }

/* zone 3 — proc unpins entirely (the full story already lives at /process.html).
   Same treatment as the proven <=900px block, with one deliberate difference:
   that block also hides .proc-artifact, which is real content, so it stays
   visible here. Only .proc-ghost/.proc-progress are dropped - they are pin-only
   scroll affordances that mean nothing once the section is not pinned. */
.proc-section { height: auto; }
.proc-sticky  { position: static; height: auto; overflow: visible; padding: 18vh clamp(24px,4vw,56px); display: block; }
.proc-stage   { position: static; counter-reset: pstep; }
.proc-step    { position: static; transform: none; visibility: visible; margin-bottom: 64px; counter-increment: pstep; }
.proc-step .pt span { transform: none; }
.proc-step .pd { opacity: 1; transform: none; }
.proc-ghost, .proc-progress { display: none; }
.proc-step::before {
  content: counter(pstep, decimal-leading-zero);
  display: block; font: 300 clamp(48px, 6vw, 92px)/0.85 var(--font-display);
  color: rgba(255,255,255,0.05); letter-spacing: -0.04em; margin-bottom: -4px;
}

/* zone 4 — s7 sits immediately before the CTA, so it keeps a short pin (80vh,
   was 200vh) rather than unpinning: the caption reveal still lands, but it no
   longer holds the visitor two screens from the call to action. */
.s7-section { height: 80vh; }

/* mobile: no zone may exceed 100vh */
@media (max-width: 720px) {
  .s3-section { height: 100vh; }
  .s7-section { height: 80vh; }
}

/* ── language chip (EL / EN) ──────────────────────────────────────────────────
   Plain links, no JavaScript: the switch has to work with JS disabled (PRD K7)
   and a crawler has to be able to follow it. Sits in the nav beside the sound
   toggle; when audio is removed in Stage 2 it inherits that slot outright. */
.lang-chip { display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; }
.lang-chip a, .lang-chip .on { text-decoration: none; padding: 2px 1px; }
.lang-chip .on { color: var(--ink); }
.lang-chip a { color: rgba(244,241,236,0.42); transition: color 200ms; }
.lang-chip a:hover, .lang-chip a:focus-visible { color: var(--molten); }
.lang-chip i { font-style: normal; color: rgba(244,241,236,0.22); }
@media (max-width: 720px) { .lang-chip { font-size: 9px; letter-spacing: 0.12em; gap: 4px; } }

/* ══ MOBILE NAV SPLIT (<=720px) ══════════════════════════════════════════════
   Five items on one 390px line never fit legibly - that is what forced the
   9px labels, which sit under the 12px Greek floor (accented vowels and
   diphthongs blur below it in mono/tight tracking). So the nav splits in two:
   the top bar keeps only the wordmark and the EL/EN chip, and a new fixed
   bottom bar carries the two page links plus the CTA at full width.
   This also puts the CTA back on mobile - it was display:none, which is why
   K4 ("CTA within one interaction from any scroll position") was failing. */
.fi-botbar { display: none; }

@media (max-width: 720px) {
  /* top bar: no word-links left, so nothing has to shrink to 9px */
  nav.fi-nav .nav-link { display: none; }

  .fi-botbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    align-items: center; gap: 8px;
    padding: 8px max(env(safe-area-inset-right, 0px), 12px)
             calc(env(safe-area-inset-bottom, 0px) + 8px)
             max(env(safe-area-inset-left, 0px), 12px);
    background: rgba(6,6,6,0.92);
    backdrop-filter: saturate(1.1) blur(14px);
    -webkit-backdrop-filter: saturate(1.1) blur(14px);
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .fi-botbar .bb-item {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px;                 /* same tap target as .pill-cta mobile */
    font-family: var(--font-sans);
    font-size: 13px;                  /* same as .pill-cta mobile - no new scale */
    letter-spacing: 0.01em; line-height: 1;
    text-decoration: none; white-space: nowrap;
    color: rgba(244,241,236,0.72);
    border-radius: 6px;
    transition: color 200ms, background 200ms;
  }
  .fi-botbar .bb-item:active { background: rgba(255,255,255,0.06); }
  .fi-botbar .bb-item[aria-current="page"] { color: var(--ink); }
  .fi-botbar .bb-cta {
    height: 44px; padding: 0 14px; font-size: 13px;
    background: var(--molten); color: var(--ink);
    border-radius: 999px; font-weight: 500;
  }
  /* the bar is out of flow, so the footer needs room or it hides behind it */
  .site-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .fi-botbar .bb-item { transition: none; }
}

/* ── connected-systems caption (world zone) ──────────────────────────────────
   Explains the drifting tokens. It was first drawn on the canvas, which failed
   twice over: the canvas sits BELOW the DOM, so the hero CTA clipped it at
   390/0%, and a static ink colour cannot survive a background that cycles from
   near-black to a bright floor - a blind reviewer measured 1.09:1 contrast at
   25% scroll. In the DOM it carries its own backdrop, so contrast is fixed by
   construction, and z-index puts it above the scene instead of under it.
   Opacity is driven by world.js from the same value the canvases already use. */
#world-cap {
  position: fixed; left: max(env(safe-area-inset-left, 0px), 22px); bottom: 22px;
  /* .content is z-index:10, so 6 put the caption UNDER every page element - the
     hero CTA painted straight over it at 390/0%. Sits above content now, still
     below the nav (40) and the bottom bar (41). */
  z-index: 12;
  display: inline-flex; align-items: center;
  padding: 7px 11px; border-radius: 4px;
  /* near-opaque on purpose: world.js fades this element with the scene, and at
     0.77 opacity a 0.72 panel washed out to 1.08:1 over the bright act */
  background: rgba(6,6,6,0.94);
  backdrop-filter: saturate(1.1) blur(10px);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  border: 1px solid rgba(255,255,255,0.10);
  font: 400 10px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244,241,236,0.86);
  opacity: 0; pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.44,0,0.56,1);
}
/* Geist Mono ships no greek subset, so Greek would fall back mid-label */
#world-cap:lang(el) { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.10em; }
/* clear of the fixed bottom bar */
@media (max-width: 720px) {
  /* clears both the fixed bottom bar (top 783) and the in-hero CTA (752-796) */
  #world-cap { bottom: calc(env(safe-area-inset-bottom, 0px) + 124px); font-size: 9px; padding: 6px 9px; }
  /* At 390 the hero fills the screen, so there is no free spot for a fixed chip
     at the very top: raising it off the CTA landed it on the hero paragraph
     instead. The caption belongs to the world zone, so on phones it waits until
     the visitor has left the hero. Keyed off the nav's existing .scrolled state
     (set from ~8% down) - no new scroll listener. visibility, not opacity,
     because world.js drives opacity inline and inline wins. */
  #world-cap { visibility: hidden; }
  nav.fi-nav.scrolled ~ #world-cap { visibility: visible; }
}
@media (prefers-reduced-motion: reduce) { #world-cap { transition: none; } }

/* Geist Mono ships no greek subset, so Greek pills fell back mid-word. story.js
   tags them lang="el" when the dictionary is Greek; /en/ keeps the mono face. */
.s3-chip:lang(el) { font-family: var(--font-sans); letter-spacing: 0.04em; }

/* ── #cases: the Aetheria demo link ──────────────────────────────────────────
   This slot was the CASE STUDIES band; Stage 1 emptied it (ADR-001, no source)
   and it has sat as a 0px <div aria-hidden> since. Deliberately NOT reusing the
   reserved .cases styling: that is a full white band with 18vh padding built for
   a multi-row table (+324px of padding alone at 1440 for a single link), and
   adding the class would also wake sections.js:174, whose nav-inversion has
   never run in production. A compact card in the surrounding dark instead.
   Because the position previously implied "client work", the badge and the
   "not a client installation" line lead - they must not read as a customer. */
/* z-index 12 is borrowed from the reserved .cases rule, which carried it for
   exactly this reason: the workflow section's position:sticky child paints
   over this slot otherwise - measured, .wf-sticky sat on top of the badge. */
#cases {
  position: relative; z-index: 12;
  padding: 0 clamp(24px, 4vw, 56px);
  /* The slot had no vertical space of its own while it was a 0px div. The
     next section's \u25a8 PROCESS label was measured landing INSIDE the card
     box at 390, and the card's opaque panel clipped the descenders of the
     headline above it. Give the zone its own margins so neither neighbour
     shares its vertical band. */
  margin: clamp(56px, 7vh, 96px) 0 clamp(72px, 9vh, 120px);
}
.case-demo {
  display: block; max-width: 720px; margin: 0 auto;
  padding: 30px clamp(22px, 3vw, 38px) 28px;
  /* Opaque, not a 2.8% tint: at 390 the card lands over the proc zone-label
     (\u25a8 PROCESS), the wf caption and the vertical grid-lines, and a
     translucent panel let all three read straight through the copy. */
  background: rgba(9,9,10,0.94);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: border-color 260ms cubic-bezier(0.44,0,0.56,1),
              background 260ms cubic-bezier(0.44,0,0.56,1);
}
.case-demo:hover, .case-demo:focus-visible {
  border-color: rgba(255,90,30,0.55); background: rgba(14,14,16,0.96);
}
/* same badge as the workflow demo titlebar - one visual language for "synthetic" */
/* idio me to .wf-example[lang="el"]: to Geist Mono den exei greek subset */
.case-demo-badge[lang="el"] { font-family: var(--font-sans); letter-spacing: 0.10em; }
.case-demo-badge {
  display: inline-block; margin-bottom: 18px;
  font: 400 10.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.92); background: rgba(255,90,30,0.16);
  border: 1px solid rgba(255,90,30,0.7); border-radius: 3px;
  padding: 4px 8px; white-space: nowrap;
}
.case-demo-h {
  font: 300 clamp(26px, 3vw, 38px)/1.1 var(--font-display);
  letter-spacing: -0.015em; color: var(--ink); margin: 0 0 14px;
}
.case-demo-p {
  font: 300 15px/1.65 var(--font-sans); color: rgba(244,241,236,0.74);
  margin: 0 0 22px; max-width: 60ch;
}
.case-demo-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font: 400 11px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--molten);
}
.case-demo-cta::after { content: "\2197"; font-size: 13px; }   /* leaves the site */
@media (max-width: 720px) {
  #cases { padding: 0 20px; }
  .case-demo { padding: 24px 20px 22px; }
  .case-demo-p { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .case-demo { transition: none; } }

/* ===== αντεστραμμένη (λευκή) μπάρα — διόρθωση προϋπάρχοντος =====
   ΕΥΡΗΜΑ, μετρημένο ΚΑΙ στο ζωντανό forgeint.gr σήμερα: όταν η μπάρα γυρίζει
   λευκή (`nav.fi-nav.inv`, πάνω από τη λευκή ζώνη), το λεκτικό ForgeInt μένει
   `rgb(244,241,236)` — off-white πάνω σε λευκό, δηλαδή πρακτικά αόρατο. Ο
   κανόνας της γραμμής 256 (`nav.fi-nav.inv .wordmark { color:#060606 }`)
   ΤΑΙΡΙΑΖΕΙ (το επιβεβαίωσα με `Element.matches` = true) αλλά χάνει στην
   πράξη — το computed έμενε off-white και πριν αγγίξω τίποτα. Δεν το προκάλεσα
   εγώ και δεν είναι του σήματος: το ίδιο συμβαίνει στο κείμενο.

   Γιατί με νοιάζει εδώ: το BRANDKIT απαιτεί το σήμα να διαβάζεται ΚΑΙ στα δύο
   φόντα, και το glyph παίρνει το χρώμα του από το .wordmark μέσω currentColor.
   Αν το λεκτικό είναι αόρατο, το σήμα είναι κι αυτό — ακριβώς το «μαύρο
   τετράγωνο σε λευκή μπάρα» ανάποδα.

   Η διόρθωση ονομάζει τον τύπο του στοιχείου (`a.wordmark` / `span.wordmark` —
   η αρχική χρησιμοποιεί span, οι υπόλοιπες a), ώστε να κερδίζει καθαρά αντί να
   στηρίζεται σε σειρά αρχείου. Ένας κανόνας, και τα δύο δέντρα, όλες οι σελίδες. */
nav.fi-nav.inv a.wordmark,
nav.fi-nav.inv span.wordmark,
nav.fi-nav.inv a.wordmark:hover,
nav.fi-nav.inv .nav-link { color: #060606; }
/* Το σήμα ΔΕΝ αλλάζει χρώμα στη λευκή μπάρα: το #C96A3C είναι εγκεκριμένο και
   για τα δύο φόντα (BRANDKIT §3 — 3,74:1 σε λευκό, πάνω από το 3:1 για
   μη-κείμενο). Ένα σήμα που γίνεται μαύρο σε λευκό θα ήταν δεύτερη εκδοχή του
   σήματος, που το §6 απαγορεύει. Το λεκτικό δίπλα του γυρίζει σκούρο· το σήμα
   μένει το ίδιο, και στα δύο. */