/* ================================================================
   AERION — DESIGN SYSTEM
   Source of truth: AERION Brand Brief v1.0 (May 2026).
   Two type families. Six colours. No tints, shades, decorative
   gradients. Mint is punctuation, not fill — never > 5 % of any
   layout. Whitespace is the loudest element.
================================================================ */

:root {
  /* ─── BRAND PALETTE — six colours, no exceptions ─── */
  --color-obsidian:    #0B0B0B;           /* primary surface (dark)    */
  --color-cream:       #EFEAE0;           /* primary text on dark      */
  --color-muted-cream: #BCB9B1;           /* secondary text · meta     */
  --color-sage:        #4B7755;           /* brand mark primary green  */
  --color-deep-sage:   #2F4F38;           /* pressed/active · light bg */
  --color-mint:        #8BE3A0;           /* accent — never > 5 %       */

  /* Semantic mapping (preserve API surface used across the site) */
  --color-primary:     var(--color-obsidian);
  --color-text:        var(--color-cream);
  --color-muted:       var(--color-muted-cream);
  --color-accent:      var(--color-mint);
  --color-secondary:   var(--color-sage);
  --color-tertiary:    var(--color-deep-sage);

  /* Surfaces & dividers */
  --color-card:        #111111;
  --color-card-2:      #141414;
  --color-border:      #2A2A2A;            /* Brand Brief §5: divider 0.5pt */
  --color-border-strong: #3A3A3A;
  --color-danger:      var(--color-muted-cream);
  --color-bg-deep:     #06080F;            /* deeper section-gradient end */
  --color-nav-bg:      rgba(11, 11, 11, 0.72);

  /* The single permitted gradient: the brand mark (Sage → Deep Sage) */
  --grad-mark: linear-gradient(135deg, #4B7755 0%, #2F4F38 100%);

  /* Legacy gradient aliases (kept so the rest of the system inherits
     the new restraint without massive refactors). All resolve to the
     mark gradient — i.e. neutralised to a single value, no rainbow. */
  --grad-energy:        var(--grad-mark);
  --grad-energy-soft:   linear-gradient(135deg, rgba(75,119,85,0.10), rgba(47,79,56,0.04));
  --grad-radial:        radial-gradient(circle at 30% 30%, #4B7755 0%, #2F4F38 100%);
  --color-accent-soft:    rgba(139,227,160,0.10);
  --color-secondary-soft: rgba(75,119,85,0.10);
}

/* ----------------------------------------------------------------
   LIGHT THEME — flips the base palette for every page that adopts
   data-theme="light". Components mostly use the semantic CSS variables
   (--color-primary, --color-text, --color-card, --color-border)
   so flipping these covers ~95 % of surfaces automatically.
---------------------------------------------------------------- */
:root[data-theme="light"] {
  --color-primary:       #F4F0E8;
  --color-text:          #1c1e18;
  --color-muted:         #6a665b;
  --color-card:          #EFEAE0;
  --color-card-2:        #E7E0D2;
  --color-border:        #D7D2C6;
  --color-border-strong: #B8B2A4;
  --color-bg-deep:       #EFEAE0;
  --color-nav-bg:        rgba(244,240,232,.78);
}
:root[data-theme="light"] body {
  background: var(--color-primary);
  color: var(--color-text);
}
:root {

  /* 8 px rhythm (Brand Brief §5: all spacing in multiples of 4pt / 8px) */
  --rhythm: 8px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-2xl: 96px;
  --space-3xl: 160px;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;
  --text-6xl: 6rem;
  --text-7xl: 8rem;

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Duration */
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;

  /* Type families — exactly two, per Brand Brief §3 */
  --font-display: 'Cormorant Garamond', Cormorant, Georgia, 'Times New Roman', serif;
  --font-body:    'JetBrains Mono', 'SF Mono', Menlo, ui-monospace, monospace;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, ui-monospace, monospace;
}

/* ================================================================
   LIGHT THEME — Brand Brief §2 light layout
   bg Cream · text/headlines Obsidian · accent & dividers Sage.
   Values flip by ROLE; the colour-named values (--color-cream /
   --color-obsidian) also flip because they are used as text/surface
   roles across the system. Dark media sections (hero, breaker) keep
   their own dark context via a scoped re-override below.
================================================================ */
:root[data-theme="light"] {
  --color-obsidian:    #EFEAE0;   /* surface value now reads as light ground */
  --color-cream:       #11130F;   /* text value now reads as near-black ink   */
  --color-muted-cream: #5C5C52;
  --color-sage:        #2F4F38;   /* darker sage holds contrast on cream       */
  --color-deep-sage:   #233A2A;
  --color-mint:        #2F6B43;   /* mint → forest so accents read on cream    */

  --color-primary:     #EFEAE0;
  --color-text:        #11130F;
  --color-muted:       #5C5C52;
  --color-accent:      #2F6B43;
  --color-secondary:   #2F4F38;
  --color-tertiary:    #233A2A;

  --color-card:        #E7E1D5;
  --color-card-2:      #DED7C8;
  --color-border:      #CBC5B8;   /* Brand Brief §5: light divider = muted cream */
  --color-border-strong: #B0AA9B;
  --color-danger:      #5C5C52;
  --color-bg-deep:     #E2DBCD;
  --color-nav-bg:      rgba(239, 234, 224, 0.78);
  --color-accent-soft:    rgba(47,107,67,0.10);
  --color-secondary-soft: rgba(47,79,56,0.10);
}

/* Dark media sections stay dark in light mode so their 3-D scenes and
   overlaid copy remain legible. Variables are re-overridden locally. */
:root[data-theme="light"] .hero,
:root[data-theme="light"] .breaker {
  --color-primary: #0B0B0B;
  --color-cream:   #EFEAE0;
  --color-text:    #EFEAE0;
  --color-muted:   #BCB9B1;
  --color-sage:    #4B7755;
  --color-mint:    #8BE3A0;
  --color-bg-deep: #06080F;
}
:root[data-theme="light"] .vignette { opacity: 0; }

/* Team cards keep their dark portrait surface in light mode, so their
   overlaid name/role copy must stay light to remain legible. */
:root[data-theme="light"] .tc-node {
  --color-text:  #EFEAE0;
  --color-muted: #BCB9B1;
}

/* Smooth cross-fade when toggling */
html { transition: background-color 400ms ease; }
body { transition: background-color 400ms ease, color 400ms ease; }

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis smooth scroll devralacak */
}

body {
  font-family: var(--font-body);
  font-size: 0.95rem;              /* Brand Brief §3: body 9–10pt, JBM Regular */
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body p {
  max-width: 165mm;                /* Brand Brief §3: body max-width 165 mm */
}

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

/* Touch devices: bring back default cursor */
@media (hover: none) {
  body { cursor: auto; }
}

/* ----- Typography — Brand Brief §3 -----
   Display + headlines: Cormorant Garamond, italic, medium (500).
   Body / labels: JetBrains Mono. Mint terminal dot on statements. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.012em;     /* tracking -10 to -25; this is the gentle mid */
  line-height: 1.0;             /* 0.95–1.05 per brief */
  text-wrap: balance;
  color: var(--color-cream);
}

.display {
  font-size: clamp(3.4rem, 9vw, var(--text-7xl));
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 0.96;
}

.h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
.h2 { font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.014em; }
.h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.h4 { font-size: 1.3rem; }

/* Section label — Brand Brief §5 style-code: short rule + ALL CAPS mint, 0.18em */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;             /* 7.5–9 pt */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-mint);
  font-weight: 500;
}

.lead {
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1.25vw, 1.1rem);
  line-height: 1.55;
  color: var(--color-cream);
  max-width: 56ch;
}

.muted { color: var(--color-muted); }

p { text-wrap: pretty; }

/* Brand Brief §5: statement headlines close with a mint full-stop.
   Authored explicitly in HTML via <span class="mint-dot">.</span>
   so it composes cleanly with data-split letter reveals. */
.mint-dot { color: var(--color-mint); font-style: normal; }

/* Em-dash prefix on pull-quotes, per Brand Brief §5 style-code */
.em-prefix::before { content: "— "; color: var(--color-muted-cream); font-style: italic; }

/* ----- Layout ----- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.container-wide { max-width: 1440px; }

.section {
  position: relative;
  padding-block: clamp(72px, 12vh, 160px);
}

/* ================================================================
   CUSTOM CURSOR
================================================================ */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transform: translate3d(-50%, -50%, 0);
  transition: width 280ms var(--ease-out-expo), height 280ms var(--ease-out-expo),
              background 280ms ease;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 9998;
  transform: translate3d(-50%, -50%, 0);
  transition: width 360ms var(--ease-out-expo), height 360ms var(--ease-out-expo),
              border-color 280ms ease;
}

.cursor.is-hover { width: 0; height: 0; }
.cursor-ring.is-hover { width: 80px; height: 80px; border-color: var(--color-accent); }

/* custom cursor removed — native OS cursor everywhere (default / pointer on clickables) */
.cursor, .cursor-ring { display: none !important; }

/* ================================================================
   NAVBAR
================================================================ */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 20px 0;
  transition: background var(--duration-base) ease, backdrop-filter var(--duration-base) ease,
              padding var(--duration-base) ease;
}

.navbar.is-scrolled {
  background: var(--color-nav-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.navbar-logo { width: 132px; }
.navbar-logo svg { width: 100%; height: auto; }

/* Day/night toggle */
.navbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  grid-column: 3;     /* always sit in the right column of .navbar-inner grid */
  justify-self: end;
}
.theme-toggle {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-cream);
  background: transparent;
  transition: border-color var(--duration-fast) ease, color var(--duration-fast) ease,
              background var(--duration-fast) ease;
}
.theme-toggle:hover { border-color: var(--color-sage); color: var(--color-mint); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun  { display: block; }

.navbar-links {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.navbar-links a {
  position: relative;
  transition: color var(--duration-fast);
}
.navbar-links a:hover { color: var(--color-text); }
.navbar-links a::after {
  content: '';
  position: absolute;
  inset: auto 0 -6px 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out-expo);
}
.navbar-links a:hover::after { transform: scaleX(1); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  border: 1px solid var(--color-border);
  padding: 6px 4px;
  border-radius: 100px;
}
.lang-switch button {
  padding: 4px 10px;
  border-radius: 100px;
  color: var(--color-muted);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.lang-switch button.is-active { background: var(--color-accent); color: var(--color-primary); }

@media (max-width: 768px) {
  .navbar-links { display: none; }
}

/* ================================================================
   BUTTONS
================================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 100px;
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  transition: transform var(--duration-fast) var(--ease-out-expo),
              background var(--duration-base), color var(--duration-base),
              border-color var(--duration-base);
  white-space: nowrap;
  border: 1px solid transparent;
  will-change: transform;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-secondary); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-border-strong);
  color: var(--color-text);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--color-accent); color: var(--color-accent); }

.btn-text {
  background: none;
  color: var(--color-text);
  padding: 14px 8px;
}
.btn-text:hover { color: var(--color-accent); }

.btn .arrow {
  transition: transform var(--duration-base) var(--ease-out-expo);
}
.btn:hover .arrow { transform: translateX(4px); }

/* ================================================================
   HERO
================================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 140px 0 80px;
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Optional reportage video backdrop — only shown once it can play
   (the .has-video class is added by scene/main JS when the file loads). */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 800ms ease;
}
.hero.has-video .hero-video { opacity: 1; }
.hero.has-video #hero-canvas { opacity: 0.18; }   /* keep a faint living layer */
.hero-video-tint {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease;
  /* Brand Brief §6: documentary footage graded to obsidian + sage */
  background:
    linear-gradient(180deg, rgba(11,11,11,0.55), rgba(11,11,11,0.78)),
    radial-gradient(80% 60% at 50% 30%, rgba(75,119,85,0.30), transparent 70%);
}
.hero.has-video .hero-video-tint { opacity: 1; }

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Sage atmosphere — one broad, even top wash plus a low horizon
     glow. Deliberately NO concentrated corner blobs: a tight glow in
     a corner reads as a hard-edged rectangle against the vignette,
     which was the "box" the team kept seeing. Keep it diffuse. */
  background:
    radial-gradient(140% 90% at 50% -25%, rgba(75, 119, 85, 0.20), transparent 60%),
    radial-gradient(120% 80% at 80% 78%, rgba(47, 79, 56, 0.14), transparent 62%);
  z-index: 1;
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 220px;
  background: linear-gradient(to bottom, transparent, var(--color-primary));
  z-index: 1;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 28px;
  max-width: 1100px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}
.hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: 0 0 0 6px rgba(75,119,85,0.18);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 6px rgba(75,119,85,0.18); }
  50% { box-shadow: 0 0 0 10px rgba(75,119,85,0.06); }
}

.hero-title { font-family: var(--font-display); }
.hero-title .line { display: block; overflow: hidden; }
.hero-title .word {
  display: inline-block;
  background: linear-gradient(180deg, #FFFFFF 0%, #B8C0D6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-title .word.accent {
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub { color: var(--color-muted); max-width: 60ch; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
}
.hero-stat .num {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  color: var(--color-accent);
  font-weight: 500;
}
.hero-stat .label {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  right: clamp(20px, 4vw, 48px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--color-muted);
}
.hero-scroll-bar {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
  position: relative;
  overflow: hidden;
}
.hero-scroll-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  animation: scrollBar 2.2s var(--ease-in-out-cubic) infinite;
}
@keyframes scrollBar {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* Floating turbine for ambient depth */
.hero-turbine {
  position: absolute;
  right: -120px;
  top: 50%;
  width: 600px;
  height: 600px;
  transform: translateY(-50%);
  opacity: 0.25;
  z-index: 1;
  pointer-events: none;
}
.hero-turbine svg { width: 100%; height: 100%; }
.turbine-rotor {
  transform-origin: 200px 200px;
  animation: rotate 14s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  .hero-turbine { display: none; }
  .hero-stats { gap: 18px; }
}

/* ================================================================
   SECTION HEAD
================================================================ */
.section-head {
  display: grid;
  gap: 16px;
  max-width: 880px;
  margin-bottom: 64px;
}

/* ================================================================
   PROBLEM SECTION
================================================================ */
.problem {
  position: relative;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-bg-deep) 100%);
  /* Ekstra dwell zone — content reveal'dan sonra section
     bir süre okunabilir kalır (kullanıcının nefes alma alanı). */
  padding-bottom: clamp(160px, 22vh, 320px) !important;
  min-height: 110vh;
}
.problem::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
}

.metric-card {
  position: relative;
  padding: 40px 28px;
  background: linear-gradient(180deg, var(--color-card) 0%, var(--color-card-2) 100%);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out-expo),
              border-color var(--duration-base);
  will-change: transform;
}
.metric-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 300px at var(--mx, 50%) var(--my, 50%),
                              rgba(75, 119, 85, 0.10), transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  pointer-events: none;
}
.metric-card:hover { border-color: var(--color-accent); transform: translateY(-4px); }
.metric-card:hover::before { opacity: 1; }

.metric-num {
  /* Brand Brief §3: large numbers set in Cormorant Italic — not a
     mono display. Numbers are concrete, statements: "50 GW", "€24.25M". */
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  font-weight: 500;
  color: var(--color-cream);
  letter-spacing: -0.018em;
  line-height: 1;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.metric-suffix { font-size: 0.55em; color: var(--color-text); -webkit-text-fill-color: var(--color-text); }

.metric-title {
  font-size: var(--text-base);
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--color-text);
}
.metric-sub {
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-style: italic;
}

.problem-closer {
  margin-top: 64px;
  padding: 28px;
  border-left: 2px solid var(--color-accent);
  font-size: clamp(1.125rem, 2vw, 1.4rem);
  font-weight: 500;
  max-width: 760px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .metric-grid { grid-template-columns: 1fr; }
}

/* Smooth the 3-col -> 1-col jump across the large-phone / small-tablet
   band: a 2-up step at 601–768px keeps the metric cards from going from
   three columns straight to one. (≤600px already inherits the 1fr rule
   above; restated here for clarity and to keep the gap consistent.) */
@media (min-width: 601px) and (max-width: 768px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ================================================================
   SOLUTION SECTION
================================================================ */
.solution { position: relative; }

.solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 80px;
}

.solution-flow {
  width: 100%;
  aspect-ratio: 1.1 / 1;
  position: relative;
}

.value-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.value-card {
  position: relative;
  padding: 36px 28px 32px;
  background: linear-gradient(180deg, var(--color-card) 0%, var(--color-card-2) 100%);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  transition: transform var(--duration-base) var(--ease-out-expo),
              border-color var(--duration-base);
  overflow: hidden;
}
.value-card:hover { transform: translateY(-6px); border-color: var(--color-accent); }
.value-card .icon {
  width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--color-accent-soft);
  border-radius: 14px;
  margin-bottom: 20px;
  color: var(--color-accent);
}
.value-card h3 { font-size: var(--text-xl); margin-bottom: 10px; font-weight: 600; }
.value-card p { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }

@media (max-width: 900px) {
  .solution-grid { grid-template-columns: 1fr; gap: 40px; }
  .value-cards { grid-template-columns: 1fr; }
}

/* Soften the 3-col -> 1-col transition for the value cards: keep a
   2-up layout through the small-tablet / large-phone band so they don't
   drop to a single column abruptly while there is still room for two. */
@media (min-width: 601px) and (max-width: 900px) {
  .value-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ================================================================
   HOW IT WORKS — HORIZONTAL SCROLL
================================================================ */
.how {
  position: relative;
  height: 500vh;
  background: linear-gradient(180deg, var(--color-bg-deep) 0%, var(--color-primary) 100%);
}
.how-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.how-track {
  display: flex;
  height: 100%;
  align-items: center;
  /* Extra leading/trailing padding so the first / last step land
     at viewport center as the horizontal scroll engages and disengages. */
  padding-left:  max(calc(50vw - min(260px, 43vw)), 24px);
  padding-right: max(calc(50vw - min(260px, 43vw)), 24px);
  gap: clamp(40px, 6vw, 96px);
  will-change: transform;
}

.how-step {
  flex: 0 0 auto;
  width: min(520px, 86vw);
  height: min(560px, 70vh);
  padding: 40px;
  background: linear-gradient(180deg, var(--color-card) 0%, var(--color-card-2) 100%);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: border-color var(--duration-base), transform var(--duration-base) var(--ease-out-expo);
}
.how-step.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 24px 60px -32px rgba(75,119,85,0.22),
              0 0 0 1px rgba(75,119,85,0.30) inset;
}
.how-step .num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  letter-spacing: 0.16em;
}
.how-step h3 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  margin: 12px 0 18px;
}
.how-step p { color: var(--color-muted); font-size: var(--text-base); line-height: 1.65; }

.how-step .visual {
  margin-top: 32px;
  height: 200px;
  border-radius: 14px;
  background: rgba(75, 119, 85, 0.04);
  border: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .how { height: auto; }
  .how-pin { position: static; height: auto; padding: 60px 0; }
  .how-track { flex-direction: column; height: auto; gap: 16px; transform: none !important; padding: 0 20px; }
  .how-step { width: 100%; height: auto; min-height: 380px; }
}

/* ================================================================
   OPPORTUNITY WINDOW
================================================================ */
.opportunity {
  position: relative;
  background: var(--color-primary);
}

.timeline {
  position: relative;
  padding: 60px 0 30px;
  margin-bottom: 60px;
}
.timeline-track {
  position: relative;
  height: 2px;
  background: var(--color-border);
  border-radius: 1px;
}
.timeline-window {
  position: absolute;
  left: 14.28%;
  width: 28.57%;
  top: -14px;
  height: 30px;
  background: linear-gradient(90deg, rgba(139,227,160,0.14), rgba(75,119,85,0.18));
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-secondary);
  border-radius: 4px;
}
.timeline-window::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  animation: windowPulse 2.4s ease-in-out infinite;
}
@keyframes windowPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.06); }
}
.timeline-marker {
  position: absolute;
  top: -8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-muted);
  transform: translateX(-50%);
}
.timeline-marker.is-window { border-color: var(--color-accent); background: var(--color-accent); }
.timeline-marker .yr {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-muted);
  white-space: nowrap;
}
.timeline-marker.is-window .yr { color: var(--color-accent); }
.timeline-window-label {
  position: absolute;
  left: 28.57%;           /* centre of the 2026–2028 window band */
  top: 14px;              /* sits inside the timeline padding, above the band */
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  color: var(--color-secondary);
  text-transform: uppercase;
}

.market-table {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
}
.market-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1fr;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--duration-fast);
  gap: 20px;
}
.market-row:last-child { border-bottom: 0; }
.market-row.head {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  background: rgba(255,255,255,0.02);
}
.market-row:not(.head):hover { background: rgba(75, 119, 85, 0.04); }
.market-flag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}
.market-flag .flag {
  width: 28px; height: 18px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.market-trigger { color: var(--color-muted); font-size: var(--text-sm); }
.market-window {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-align: right;
}

@media (max-width: 768px) {
  .market-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 20px; }
  .market-window { text-align: left; }
}

/* Large-phone treatment: the 3-column 1.2fr 2fr 1fr table is
   unreadably cramped at 320–600px, so collapse it to a clean single
   column and give each cell breathing room. The header row's column
   labels lose their meaning once stacked, so hide it on phones. */
@media (max-width: 600px) {
  .market-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 18px;
  }
  .market-row.head { display: none; }
  .market-window { text-align: left; }
}

/* ================================================================
   ARCHITECTURE — MODUS I & II
================================================================ */
.architecture { position: relative; background: var(--color-primary); }

.modus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-card);
}

.modus-cell {
  position: relative;
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  align-content: space-between;
  gap: 20px;
  min-height: 560px;
  overflow: hidden;
}
.modus-cell.green {
  background: linear-gradient(180deg, rgba(75,119,85,0.10), rgba(75,119,85,0.04));
  border-right: 1px solid var(--color-border);
}
.modus-cell.blue {
  background: linear-gradient(180deg, rgba(139,227,160,0.08), rgba(139,227,160,0.02));
}

.modus-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  width: fit-content;
}
.modus-tag .pip { width: 8px; height: 8px; border-radius: 50%; }
.modus-cell.green .pip { background: var(--color-secondary); box-shadow: none; }
.modus-cell.blue .pip { background: var(--color-accent); box-shadow: none; }
.modus-cell.green .modus-tag { color: var(--color-secondary); }
.modus-cell.blue .modus-tag { color: var(--color-accent); }

.modus-title { font-size: clamp(1.5rem, 3vw, 2rem); }
.modus-desc { color: var(--color-muted); }
.modus-list { display: grid; gap: 10px; }
.modus-list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.modus-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 10px; height: 1px;
  background: currentColor;
}
.modus-cell.green .modus-list li::before { color: var(--color-secondary); }
.modus-cell.blue .modus-list li::before { color: var(--color-accent); }

.modus-vis { height: 120px; position: relative; }
.modus-vis svg { width: 100%; height: 100%; }

@media (max-width: 880px) {
  .modus-grid { grid-template-columns: 1fr; }
  .modus-cell.green { border-right: 0; border-bottom: 1px solid var(--color-border); }
}

.architecture-pull {
  margin-top: 56px;
  padding: 28px 32px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: rgba(75, 119, 85, 0.04);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 500;
  text-align: center;
  text-wrap: balance;
}
.architecture-pull strong { color: var(--color-accent); }
.architecture-pull em { font-style: normal; color: var(--color-secondary); font-weight: 600; }

/* ================================================================
   ECOSYSTEM — ORBITAL
================================================================ */
.ecosystem {
  position: relative;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-bg-deep) 100%);
  padding-block: clamp(72px, 12vh, 160px);
}
.ecosystem .container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ecosystem .section-head-v2 {
  padding: 0 0 12px;
  margin-bottom: 0;
}
.ecosystem .section-head-v2 .h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
}
/* Plate anchor — orbital'in arkasında dekoratif backdrop, layout'a yer kaplamaz */
.ecosystem .plate-anchor.ecosystem {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56vmin;
  height: 56vmin;
  max-width: 540px;
  max-height: 540px;
  margin: 0;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}
.ecosystem .plate-anchor.ecosystem .plate-anchor-frame,
.ecosystem .plate-anchor.ecosystem .plate-anchor-label {
  display: none;
}
/* Section number — pin sırasında görünmez tut (ekran karmaşası) */
.ecosystem .section-number { display: none; }

/* ================================================================
   ECOSYSTEM — layered index list (replaces the radial hub)
   Five "layers of one system" as an editorial, scannable stack:
   large display numbers, a left accent rail that lights on hover,
   icon · italic title · category tag, then the description.
================================================================ */
.eco-stack {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  width: 100%;
}
.eco-layer {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: start;
  gap: 8px 24px;
  padding: 28px 24px 28px 20px;
  border-top: 1px solid var(--color-border);
  border-left: 2px solid transparent;
  border-radius: 0 12px 12px 0;
  transition: background 420ms var(--ease-out-expo),
              border-left-color 320ms var(--ease-out-expo);
}
.eco-layer:last-child { border-bottom: 1px solid var(--color-border); }
.eco-layer:hover,
.eco-layer:focus-within {
  background: linear-gradient(90deg, var(--color-card) 0%, transparent 92%);
  border-left-color: var(--color-accent);
}

.eco-layer-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  line-height: 0.9;
  color: var(--color-secondary);
  transition: color 320ms var(--ease-out-expo);
}
.eco-layer:hover .eco-layer-num,
.eco-layer:focus-within .eco-layer-num { color: var(--color-accent); }

.eco-layer-text { min-width: 0; }
.eco-layer-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.eco-layer-ic {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-sage);
  transition: color 320ms var(--ease-out-expo);
}
.eco-layer:hover .eco-layer-ic,
.eco-layer:focus-within .eco-layer-ic { color: var(--color-mint); }
.eco-layer-head h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  letter-spacing: -0.01em;
  color: var(--color-cream);
  line-height: 1.05;
  transition: color 320ms var(--ease-out-expo);
}
.eco-layer:hover .eco-layer-head h4,
.eco-layer:focus-within .eco-layer-head h4 { color: var(--color-accent); }
.eco-layer-tag {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mint);
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
}
.eco-layer-text p {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  color: var(--color-muted);
  line-height: 1.62;
  max-width: 64ch;
}

@media (max-width: 640px) {
  .eco-stack { margin-top: 28px; }
  .eco-layer {
    grid-template-columns: 52px 1fr;
    gap: 6px 16px;
    padding: 22px 14px 22px 14px;
  }
  .eco-layer-num { font-size: 1.6rem; }
  .eco-layer-head { flex-wrap: wrap; gap: 10px; }
  .eco-layer-tag { margin-left: 0; order: 3; flex-basis: 100%; width: max-content; }
}

/* ================================================================
   ROADMAP — HORIZONTAL TIMELINE
================================================================ */
.roadmap {
  position: relative;
  height: 400vh;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-bg-deep) 100%);
}
.roadmap-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.roadmap-head {
  padding: 0 clamp(20px, 4vw, 80px);
  margin-bottom: 40px;
}
.roadmap-track {
  display: flex;
  gap: 24px;
  padding: 0 clamp(20px, 4vw, 80px);
  position: relative;
  will-change: transform;
}
.roadmap-track::before {
  content: '';
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}
.roadmap-item {
  flex: 0 0 auto;
  width: min(360px, 80vw);
  padding-top: 80px;
  position: relative;
}
.roadmap-item .marker {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--color-card);
  border: 2px solid var(--color-muted);
  transition: all var(--duration-base);
}
.roadmap-item.is-active .marker {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 8px rgba(75,119,85,0.18);
}
.roadmap-item .quarter {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.roadmap-item h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: 10px;
}
.roadmap-item p { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }

/* ≤1024px (raised from 768): the horizontal scroll-pin shows only ~2 of 7 cards at rest on
   narrow tablets, reading as cut-off content with an empty band. Stack vertically through
   tablet widths; the JS pin in main.js is gated to the same 1024 threshold (desktop only). */
@media (max-width: 1024px) {
  .roadmap { height: auto; }
  .roadmap-pin { position: static; height: auto; padding: 60px 0; }
  .roadmap-track { flex-direction: column; gap: 12px; transform: none !important; }
  .roadmap-track::before { left: 30px; right: auto; top: 30px; bottom: 30px; width: 1px; height: auto; }
  .roadmap-item { width: 100%; padding-top: 0; padding-left: 64px; }
  .roadmap-item .marker { top: 4px; left: 22px; }
}

/* ================================================================
   TEAM
================================================================ */
.team { position: relative; }

/* ----------------------------------------------------------------
   TEAM CONSTELLATION
   Asymmetric hierarchy grid + halftone "scanned" portraits, drifting
   scan-line, huge editorial italic initials as poster-art watermarks,
   thin mint connectors between primary nodes.
---------------------------------------------------------------- */
.team-constellation{ position:relative; margin-bottom:56px; }
.team-constellation::after{
  content:""; position:absolute; inset:-16px; pointer-events:none; z-index:0;
  background-image: radial-gradient(rgba(244,240,232,.05) 1px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image:radial-gradient(60% 80% at 50% 50%, #000, transparent 75%);
          mask-image:radial-gradient(60% 80% at 50% 50%, #000, transparent 75%);
}

.tc-grid{
  position:relative; z-index:1;
  display:grid; gap:14px;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  grid-template-rows: minmax(160px,1fr) minmax(160px,1fr);
  grid-template-areas:
    "M M D D"
    "M M H T";
}
.tc-node.is-mareen { grid-area:M; }
.tc-node.is-dirk   { grid-area:D; }
.tc-node.is-huseyin{ grid-area:H; }
.tc-node.is-tim    { grid-area:T; }

.tc-node{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--color-border); border-radius:16px;
  background: linear-gradient(180deg,#0a0d0b 0%,#06080a 100%);
  overflow:hidden; isolation:isolate;
  transition: border-color .45s ease, transform .55s var(--ease-out-expo), box-shadow .4s ease;
}
.tc-node:hover{
  border-color: var(--color-accent); transform: translateY(-4px);
  box-shadow: 0 16px 50px -22px rgba(139,227,160,.45);
}

.tc-portrait{ position:relative; flex:1 1 auto; min-height:170px; overflow:hidden; background:#0a0d0b; }
.tc-portrait img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: contrast(1.05) saturate(.9);
}
.tc-portrait::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(139,227,160,.85) .7px, transparent 1.2px);
  background-size: 4px 4px; mix-blend-mode: screen; opacity:.55;
  transition: opacity .5s ease;
}
.tc-node:hover .tc-portrait::before{ opacity:.32; }
.tc-portrait::after{
  content:""; position:absolute; left:0; right:0; top:-3px; height:42px; pointer-events:none;
  background: linear-gradient(180deg, transparent 0%, rgba(139,227,160,.18) 60%,
              rgba(139,227,160,.55) 78%, transparent 100%);
  filter:blur(.5px); animation: tcScan 5.5s linear infinite; z-index:1;
}
@keyframes tcScan{ 0%{transform:translateY(-30%);} 100%{transform:translateY(900%);} }

.tc-initial{
  position:absolute; left:14px; bottom:4px; z-index:2;
  font-family: var(--font-display); font-style:italic; font-weight:500;
  color: rgba(244,240,232,.94); line-height:.9; letter-spacing:-.02em;
  text-shadow:0 6px 36px rgba(0,0,0,.7), 0 1px 0 rgba(139,227,160,.15);
  font-size: clamp(2.4rem, 5vw, 5rem);
}
.tc-meta{
  padding:14px 18px 18px; display:flex; flex-direction:column; gap:4px;
  border-top:1px solid var(--color-border); background: rgba(0,0,0,.32);
  position:relative; z-index:2;
}
.tc-name{ font-size:var(--text-lg); font-weight:600; color:var(--color-text); }
.tc-role{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--color-muted);
}

.is-mareen  .tc-initial{ font-size: clamp(4rem, 9vw, 9.5rem); }
.is-mareen  .tc-name   { font-size: var(--text-xl); }
.is-dirk    .tc-initial{ font-size: clamp(3rem, 6vw, 6.4rem); }
.is-huseyin .tc-initial, .is-tim .tc-initial{ font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
.is-huseyin .tc-name,    .is-tim .tc-name   { font-size: var(--text-base); }

/* family-tree dashed connector inside the grid */
.tc-grid::before{
  content:""; position:absolute; pointer-events:none; z-index:0;
  left: calc(60% - 1px); top: 26%; width:1px; height: 48%;
  background: repeating-linear-gradient(180deg,
    rgba(139,227,160,.35) 0 6px, transparent 6px 12px);
}

.tc-extended-label{
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-muted); margin:28px 0 12px;
}
.tc-extras{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(112px,1fr));
  gap:10px;
}
.tc-extra{
  position:relative; padding:12px 14px; border:1px solid var(--color-border);
  border-radius:12px; background: rgba(255,255,255,.02);
  display:flex; align-items:center; gap:10px;
  transition: border-color .3s ease, background .3s ease, transform .35s var(--ease-out-expo);
}
.tc-extra:hover{ border-color: var(--color-accent); background: rgba(139,227,160,.06); transform: translateY(-2px); }
.tc-extra .dot{
  width:7px; height:7px; border-radius:50%; flex:0 0 7px;
  background: var(--color-accent); box-shadow: 0 0 10px rgba(139,227,160,.7);
}
.tc-extra .nm{
  font-family: var(--font-display); font-style:italic; font-weight:500;
  font-size: 1.05rem; color: var(--color-text); line-height:1;
}

@media (max-width: 980px){
  .tc-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(240px,auto) minmax(180px,auto) minmax(180px,auto);
    grid-template-areas: "M M" "D D" "H T";
  }
  .tc-grid::before{ display:none; }
}
@media (max-width: 560px){
  .tc-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "M" "D" "H" "T";
  }
  .is-mareen .tc-initial{ font-size: clamp(3.6rem, 16vw, 5.5rem); }
}

.partners-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 24px;
}
.partners {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.partner {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-muted);
  padding: 12px 20px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: color var(--duration-base), border-color var(--duration-base);
}
.partner:hover { color: var(--color-text); border-color: var(--color-border-strong); }

/* Company — roadmap closer */
.roadmap-closer{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  margin-top:48px; padding:0 24px;
}
.roadmap-closer .rc-divider{
  width:1px; height:40px;
  background:linear-gradient(180deg, transparent, var(--color-accent));
}
.roadmap-closer .rc-line{
  margin:0; text-align:center;
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--color-muted); letter-spacing:.01em;
}
@media (max-width: 980px){
  .roadmap-closer{ margin-top:32px; }
}

/* Company — extended team functional groups */
.tc-extra .fn{
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing:.16em;
  text-transform:uppercase; color: var(--color-muted); line-height:1;
}
.tc-extra .nm + .fn{ margin-left:2px; }
.tc-extras-note,
.partners-note{
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing:.04em;
  color: var(--color-muted); margin:14px 0 0; line-height:1.6;
}
.partners-note{ margin-top:18px; }

@media (max-width: 880px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   FAQ
================================================================ */
.faq { position: relative; }

.faq-list {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--color-border);
}
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 8px;
  text-align: left;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 500;
  transition: color var(--duration-fast);
}
.faq-q:hover { color: var(--color-accent); }
.faq-q .toggle {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out-expo), border-color var(--duration-base);
}
.faq-item.is-open .faq-q .toggle { transform: rotate(45deg); border-color: var(--color-accent); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-base) var(--ease-out-expo);
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1.7;
}
.faq-a-inner { padding: 4px 8px 28px; max-width: 720px; }

/* ================================================================
   FINAL CTA
================================================================ */
.cta-final {
  position: relative;
  text-align: center;
  padding: clamp(96px, 16vh, 200px) 0;
  background:
    radial-gradient(800px 500px at 50% 30%, rgba(139,227,160,0.12), transparent 70%),
    var(--color-primary);
  overflow: hidden;
}
.cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  pointer-events: none;
}

.cta-headline {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
  margin-bottom: 28px;
  position: relative;
}
.cta-headline span { color: var(--color-cream); }
.cta-headline .accent { color: var(--color-sage); }

.cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 32px;
  position: relative;
}

.newsletter {
  margin: 56px auto 0;
  max-width: 520px;
  display: flex;
  gap: 8px;
  padding: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  position: relative;
}
.newsletter input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 12px 18px;
  color: var(--color-text);
  font-size: var(--text-sm);
}
.newsletter input::placeholder { color: var(--color-muted); }

/* ================================================================
   FOOTER
================================================================ */
.footer {
  background: var(--color-bg-deep);
  border-top: 1px solid var(--color-border);
  padding: 80px 0 40px;
  position: relative;
  z-index: 2;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 64px;
}
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  padding: 6px 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: color var(--duration-fast);
}
.footer-col a:hover { color: var(--color-accent); }
.footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: 12px;
  max-width: 32ch;
  line-height: 1.6;
}

.footer-legal {
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.legal-disclaimer {
  margin-top: 24px;
  padding: 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1.7;
}

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   UTILITIES & ANIMATION HELPERS
================================================================ */
.gpu { transform: translateZ(0); will-change: transform; }

.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 800ms var(--ease-out-expo), transform 800ms var(--ease-out-expo); }
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

.fade-in { opacity: 0; transition: opacity 1000ms var(--ease-out-expo); }
.fade-in.is-visible { opacity: 1; }

/* Split text characters */
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(70%) rotateX(-90deg);
  transform-origin: 50% 100%;
  transition: opacity 600ms var(--ease-out-expo), transform 800ms var(--ease-out-expo);
}
.split-char.is-visible { opacity: 1; transform: translateY(0) rotateX(0); }

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

::selection { background: var(--color-accent); color: var(--color-primary); }

/* ════════════════════════════════════════════════════════════════════
   ════════════ V3 — BRAND-AUTHENTIC EXPERIENCE LAYER ═══════════════
   Aerion brand greens · Bricolage display · Plus Jakarta body
   Cinematic intro · Minimal nav + fullscreen menu · Cursor states
══════════════════════════════════════════════════════════════════════ */

/* ───── Page typography globals (override) ───── */
body { font-family: var(--font-body); font-feature-settings: "ss01", "cv11"; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

/* ───── INTRO PRELOADER ─────
   Cinematic 3-second sequence — black wipe → counter → reveal
*/
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr;
  pointer-events: none;
  overflow: hidden;
}
.intro.is-done { display: none; }

.intro-mark {
  grid-row: 2;
  display: grid;
  place-items: center;
  gap: 36px;
  padding: 24px;
}
.intro-logo {
  width: 92px;
  height: 92px;
  opacity: 0;
  transform: scale(0.7) rotate(-8deg);
  /* Brand Brief §9: no glows. */
  filter: none;
}
.intro-logo.is-in {
  opacity: 1;
  transform: scale(1) rotate(0);
  transition: opacity 800ms var(--ease-out-expo),
              transform 1100ms var(--ease-out-expo);
}

.intro-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--color-accent);
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 12px;
  opacity: 0;
}
.intro-counter.is-in { opacity: 1; transition: opacity 600ms ease; }
.intro-counter-num {
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--color-text);
  min-width: 3ch;
  display: inline-block;
  text-align: right;
}
.intro-counter-bar {
  width: 0%;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
  margin-top: 4px;
  transition: width 100ms linear;
}

.intro-status {
  position: absolute;
  bottom: 32px;
  left: clamp(20px, 4vw, 48px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-muted);
  opacity: 0;
}
.intro-status.is-in { opacity: 1; transition: opacity 400ms ease; }
.intro-status .pip {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  animation: pipBlink 0.8s linear infinite;
}

.intro-version {
  position: absolute;
  bottom: 32px;
  right: clamp(20px, 4vw, 48px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--color-muted);
  opacity: 0;
}
.intro-version.is-in { opacity: 1; transition: opacity 400ms ease; }

/* Curtain reveal: 2 horizontal panels split apart */
.intro-curtain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.intro-curtain::before,
.intro-curtain::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  background: #000;
  transition: transform 1100ms cubic-bezier(0.76, 0, 0.24, 1);
}
.intro-curtain::before { top: 0; }
.intro-curtain::after { bottom: 0; }
.intro-curtain.is-open::before { transform: translateY(-101%); }
.intro-curtain.is-open::after { transform: translateY(101%); }

/* ───── NAVBAR — minimal v3 ───── */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 22px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 400ms ease, padding 400ms ease, border-color 400ms ease;
  pointer-events: none;
}
.navbar.is-scrolled {
  padding: 14px 0;
  background: var(--color-nav-bg);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.navbar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 0 clamp(20px, 4vw, 48px);
  pointer-events: auto;
}
.navbar-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 28px;
}
.navbar-logo img {
  height: 100%;
  width: auto;
  /* Brand Brief §9: no glows or drop-shadows of any kind. */
  filter: none;
}
/* Wordmark — Brand Brief §3: JBM Medium, tracking 0.45em, ALL CAPS, Cream */
.navbar-logo-word {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--color-cream);
}

.navbar-spec {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.navbar-spec .spec-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: none;
  animation: pipBlink 1.6s ease-in-out infinite;
}

/* Multi-page top navigation (replaces the centred spec) */
.navbar-nav {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: auto;
}
.navbar-nav a {
  position: relative;
  color: var(--color-muted);
  transition: color var(--duration-fast) ease;
  padding-bottom: 4px;
}
.navbar-nav a:hover { color: var(--color-cream); }
.navbar-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--color-mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out-expo);
}
.navbar-nav a:hover::after,
.navbar-nav a.is-current::after { transform: scaleX(1); }
.navbar-nav a.is-current { color: var(--color-cream); }

/* Active page in the fullscreen menu */
.menu-link.is-current .menu-label { color: var(--color-mint); }
.menu-link.is-current .menu-num { color: var(--color-cream); }

@media (max-width: 880px) {
  .navbar-spec { display: none; }
  .navbar-nav { display: none; }   /* mobile uses the fullscreen menu */
}

.menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: border-color 240ms ease, background 240ms ease;
}
.menu-trigger:hover {
  border-color: var(--color-accent);
  background: rgba(75, 119, 85, 0.06);
}
.menu-trigger-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 14px;
}
.menu-trigger-bars span {
  display: block;
  height: 1.5px;
  background: var(--color-text);
  transition: transform 320ms var(--ease-out-expo),
              width 320ms var(--ease-out-expo);
}
.menu-trigger-bars span:first-child { width: 14px; }
.menu-trigger-bars span:last-child { width: 9px; align-self: flex-end; }
.menu-trigger:hover .menu-trigger-bars span:last-child { width: 14px; }
.menu-trigger.is-open .menu-trigger-bars span:first-child { transform: rotate(45deg) translate(2px, 2px); width: 16px; }
.menu-trigger.is-open .menu-trigger-bars span:last-child { transform: rotate(-45deg) translate(1px, -1px); width: 16px; }

/* ───── FULLSCREEN MENU OVERLAY ───── */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  visibility: hidden;
}
.menu-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
  overflow-y: auto;            /* allow the menu to scroll when taller than viewport */
  -webkit-overflow-scrolling: touch;
}
.menu-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  /* Curtain reveal from top */
  transform: translateY(-101%);
  transition: transform 700ms cubic-bezier(0.76, 0, 0.24, 1);
}
.menu-overlay.is-open .menu-backdrop { transform: translateY(0); }
.menu-backdrop::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 80% 10%, rgba(75, 119, 85, 0.10), transparent 60%),
    radial-gradient(700px 600px at 20% 90%, rgba(47, 79, 56, 0.08), transparent 60%);
}
.menu-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.3;
}

.menu-content {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 100px clamp(20px, 4vw, 80px) 40px;
  opacity: 0;
  transition: opacity 400ms ease 200ms;
}
.menu-overlay.is-open .menu-content { opacity: 1; }

.menu-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.menu-meta-block {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.menu-meta-label { color: var(--color-muted); }
.menu-meta-count { color: var(--color-accent); }

.menu-nav {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 32px 0;
}
.menu-link {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  transition: color 300ms ease, padding-left 360ms var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.menu-link:last-child { border-bottom: 1px solid var(--color-border); }
.menu-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(75, 119, 85, 0.06), transparent 60%);
  transform: translateX(-100%);
  transition: transform 480ms var(--ease-out-expo);
}
.menu-link:hover {
  color: var(--color-accent);
  padding-left: 16px;
}
.menu-link:hover::before { transform: translateX(0); }
.menu-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--color-muted);
  align-self: start;
  padding-top: 12px;
}
.menu-label { position: relative; }
.menu-arrow {
  font-size: 0.5em;
  font-weight: 400;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 300ms ease, transform 360ms var(--ease-out-expo);
}
.menu-link:hover .menu-arrow {
  opacity: 1;
  transform: translateX(0);
}

.menu-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.menu-footer-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.menu-footer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 4px;
}
.menu-footer-col a { color: var(--color-text); transition: color 200ms; }
.menu-footer-col a:hover { color: var(--color-accent); }

@media (max-width: 768px) {
  .menu-nav { padding: 20px 0; }
  .menu-link { grid-template-columns: 40px 1fr auto; gap: 16px; padding: 14px 0; }
  .menu-footer { grid-template-columns: 1fr; gap: 16px; }
}

/* Soften the menu footer's 3-col -> 1-col jump: keep two columns of link
   lists through the large-phone band before stacking fully. */
@media (min-width: 481px) and (max-width: 768px) {
  .menu-footer { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; }
}

/* ───── ENHANCED CURSOR with state label ───── */
.cursor {
  background: var(--color-accent);
  width: 8px; height: 8px;
}
.cursor-ring {
  border-color: rgba(75, 119, 85, 0.5);
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: transparent;
  transition: width 320ms var(--ease-out-expo),
              height 320ms var(--ease-out-expo),
              border-color 280ms ease,
              color 200ms ease,
              background-color 320ms ease;
}
.cursor-ring.is-hover {
  width: 96px; height: 96px;
  border-color: var(--color-accent);
  background: rgba(75, 119, 85, 0.08);
  color: var(--color-accent);
}
.cursor-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-weight: 500;
}

/* ───── Brand Brief §9: no decorative drop-shadows. Override removed. ───── */
.navbar.is-scrolled .navbar-logo img { filter: none; }

/* Lock body when menu open */
body.menu-open { overflow: hidden; }

/* ───── Mevcut HUD/buton/accent renklerini brand'a sync ───── */
.btn-primary {
  background: var(--grad-energy);
  color: #051a0e;
  border: 0;
  font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.1) saturate(1.2); }
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.metric-card .metric-tag::before { background: var(--color-accent); }
.eyebrow { color: var(--color-accent); }
.scroll-progress::after {
  background: var(--grad-energy);
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.footer-logo img { height: 36px; }
.footer-logo span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* ───── HERO TAGLINE — POWER NEVER SLEEPS ───── */
.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--color-accent);
  width: fit-content;
}
.hero-tagline-rule {
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
}

/* Hero title — keep brand on, ensure gradient uses brand greens */
.hero-title .word,
.hero-title .word .split-char {
  background: linear-gradient(180deg, #FFFFFF 0%, #C8D2C0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-title .word.accent,
.hero-title .word.accent .split-char {
  background: linear-gradient(135deg, #4B7755 0%, #2F4F38 60%, #2F4F38 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ───── 3D scene colour ambiance — defers to the primary .hero::before
   (diffuse sage wash) defined above. The old lime/forest blob here was
   overriding it and reading as a hard-edged box top-left. ───── */
.hero::before {
  background:
    radial-gradient(140% 90% at 50% -25%, rgba(75, 119, 85, 0.20), transparent 60%),
    radial-gradient(120% 80% at 80% 78%, rgba(47, 79, 56, 0.14), transparent 62%);
}

/* ================================================================
   ════════════════════ V2 — ENERGY-SECTOR LAYER ════════════════════
   Industrial HUD chrome · cinematic typography · 3D editorial layouts
   Bu blok v1 üzerine eklenmiştir — daha sinematik, atmospheric ve
   enerji-sektörü odaklı bir hisse geçer.
================================================================ */

/* ================================================================
   PAGE HERO (sub-pages) + NEXT-PAGE NAV
================================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(140px, 18vh, 220px);
  padding-bottom: clamp(40px, 6vh, 72px);
  min-height: clamp(420px, 62vh, 640px);
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(75,119,85,0.16), transparent 60%),
    var(--color-primary);
}
/* Pinned hero: the scene + titles stay fixed while the page content
   scrolls up and over them. Desktop only (scene is hidden on mobile). */
@media (min-width: 721px) {
  #main > .page-hero {
    position: sticky;
    top: 0;
    z-index: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 0;
  }
  /* opaque layer that rides up over the pinned hero */
  .page-flow {
    position: relative;
    z-index: 1;
    background: var(--color-primary);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -40px 80px -40px rgba(0, 0, 0, 0.25);
  }
}
/* v2 isometric infrastructure board, driven by left↔right mouse */
.page-hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* keeps the headline legible over the scene in either theme */
.page-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--color-primary) 0%, rgba(11,11,11,0) 58%),
    linear-gradient(180deg, var(--color-primary) 0%, rgba(11,11,11,0) 22%, rgba(11,11,11,0) 70%, var(--color-primary) 100%);
}
:root[data-theme="light"] .page-hero-veil {
  background:
    linear-gradient(90deg, var(--color-primary) 0%, rgba(239,234,224,0) 58%),
    linear-gradient(180deg, var(--color-primary) 0%, rgba(239,234,224,0) 22%, rgba(239,234,224,0) 70%, var(--color-primary) 100%);
}
.page-hero > .container {
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {
  .page-hero { min-height: 0; }
  .page-hero-scene, .page-hero-veil { display: none; }
}
.page-hero-title {
  margin-top: 22px;
  max-width: 16ch;
}
.page-hero-lead {
  margin-top: 22px;
  max-width: 60ch;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.65;
}

/* Continue-to-next-page band */
/* "Continue →" block — same glass-card shell as the footer (.footer-inner):
   same .container width, --color-card surface, 24px radius, --color-bg-deep
   section ground, so it reads as a sibling of the footer card above it. */
.page-next {
  background: var(--color-bg-deep);
  border-top: 1px solid var(--color-border);
  padding: 56px 0 0;
}
.page-next > .container { padding-inline: clamp(20px, 4vw, 56px); }
.page-next a {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 48px);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background var(--duration-base) ease, border-color var(--duration-base) ease;
}
.page-next a:hover { background: var(--color-card-2); border-color: var(--color-border-strong); }
.pn-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-mint);
  white-space: nowrap;
}
.pn-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  color: var(--color-text);
  line-height: 1;
  flex: 1;
}
.pn-arrow {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--color-secondary);
  transition: transform var(--duration-base) var(--ease-out-expo), color var(--duration-base) ease;
}
.page-next a:hover .pn-arrow { transform: translateX(10px); color: var(--color-accent); }

/* ================================================================
   BRAND VIDEO LAYERS
   Documentary footage graded to obsidian + sage (Brand Brief §6:
   "Tinted to obsidian + sage with selective mint highlights. Never
   raw."). Each video sits behind a tint so it unifies with the
   palette and never overpowers the copy.
================================================================ */

/* ── Architecture Mode cards ── */
.modus-3d .modus-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.72;
  filter: saturate(0.95) brightness(0.98);
  transition: opacity 600ms var(--ease-out-expo);
}
.modus-3d .modus-video-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Balanced scrim — video clearly visible, but title (top) and the
   copy below stay legible. Slightly darker at top + bottom where the
   text sits, lightest through the middle so the footage shows. */
.modus-3d.green .modus-video-tint {
  background:
    linear-gradient(180deg, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0.28) 38%, rgba(11,11,11,0.40) 70%, rgba(11,11,11,0.70) 100%),
    radial-gradient(90% 55% at 30% 12%, rgba(75,119,85,0.18), transparent 70%);
}
.modus-3d.blue .modus-video-tint {
  background:
    linear-gradient(180deg, rgba(11,11,11,0.55) 0%, rgba(11,11,11,0.28) 38%, rgba(11,11,11,0.40) 70%, rgba(11,11,11,0.70) 100%),
    radial-gradient(90% 55% at 70% 12%, rgba(139,227,160,0.14), transparent 70%);
}
.modus-3d:hover .modus-video { opacity: 0.9; }
/* with a video present the SVG scenery / glow stay out of the way */
.modus-3d:has(.modus-video) .scenery { opacity: 0.12; }
.modus-3d:has(.modus-video) .glow-blob { opacity: 0.18; }

/* ================================================================
   CINEMATIC VIDEO CARDS — video prominent, copy collected into a
   compact bottom banner. The footage reads first; text sits on a
   bottom scrim so nothing fights the middle of the frame.
================================================================ */
.modus-3d:has(.modus-video) .modus-video { opacity: 1; filter: none; }
.modus-3d:has(.modus-video):hover .modus-video { opacity: 1; transform: scale(1.04); transition: transform 1.2s var(--ease-out-expo), opacity .6s; }
.modus-3d:has(.modus-video) .modus-video-tint {
  background: linear-gradient(180deg,
    rgba(11,11,11,0.18) 0%, rgba(11,11,11,0) 30%,
    rgba(11,11,11,0) 52%, rgba(11,11,11,0.55) 78%, rgba(11,11,11,0.90) 100%) !important;
}
.modus-3d:has(.modus-video)::after { display: none; }   /* drop the scan sweep over footage */

/* top mode tag */
.modus-3d:has(.modus-video) .modus-tag {
  position: absolute; top: clamp(20px,2.5vw,30px); left: clamp(22px,3vw,40px); z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #EFEAE0; margin: 0;
}
.modus-3d:has(.modus-video) .modus-tag .pip {
  width: 7px; height: 7px; border-radius: 50%; background: #8BE3A0;
  box-shadow: 0 0 10px #8BE3A0;
}

/* bottom banner */
.modus-3d:has(.modus-video) .modus-banner {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: clamp(24px,3vw,44px);
  display: flex; flex-direction: column; gap: 12px;
}
.modus-3d:has(.modus-video) .modus-title {
  margin: 0; color: #F6F2EA;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1; letter-spacing: -0.01em;
}
.modus-3d:has(.modus-video) .modus-line {
  margin: 0; color: rgba(246,242,234,0.84);
  font-family: var(--font-body); font-size: clamp(0.86rem, 1vw, 0.98rem);
  line-height: 1.55; max-width: 46ch;
}
.modus-3d:has(.modus-video) .modus-stat {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(246,242,234,0.62);
  border-top: 1px solid rgba(246,242,234,0.18); padding-top: 14px; margin-top: 4px;
}
.modus-3d:has(.modus-video) .modus-stat .v { color: #8BE3A0; }

/* ── Breaker section ── */
.breaker-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.9;
  filter: saturate(0.95) brightness(1);
}
.breaker-video-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* lighter, edge-weighted so the footage reads but the centred
     headline keeps contrast */
  background:
    radial-gradient(75% 65% at 50% 45%, rgba(11,11,11,0.20), rgba(11,11,11,0.62) 100%),
    radial-gradient(70% 60% at 50% 40%, rgba(75,119,85,0.14), transparent 72%);
}
/* video supersedes the 3-D breaker canvas */
#breaker-1 #breaker-canvas { display: none; }

/* ── Live pilot site feed (the showcase — keep it vivid) ── */
.live-cam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  filter: saturate(1) brightness(1);
}
.live-cam-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* faint top scrim for the REC label, clear middle so the footage reads,
     strong bottom scrim for the caption banner */
  background: linear-gradient(180deg, rgba(11,11,11,0.32) 0%, rgba(11,11,11,0) 20%, rgba(11,11,11,0) 50%, rgba(11,11,11,0.55) 76%, rgba(11,11,11,0.90) 100%);
}
.live-cam.has-feed .live-cam-body { z-index: 3; }
.live-cam.has-feed .live-cam-title { color: #F6F2EA; }
.live-cam.has-feed .live-cam-rec { color: #8BE3A0; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.live-cam-rec {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-mint);
}
.live-cam-rec .rec-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-mint);
  animation: pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .modus-video, .breaker-video, .live-cam-video { display: none; }
}

/* ================================================================
   LIVE PILOT STATION
================================================================ */
.live-pilot { position: relative; background: var(--color-primary); }
.live-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 880px) { .live-grid { grid-template-columns: 1fr; } }

.live-readout {
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(180deg, var(--color-card) 0%, var(--color-card-2) 100%);
  position: relative;
  overflow: hidden;
}
.live-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-mint);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.live-status .pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-mint);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

.live-flops {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
}
.live-flops-value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3rem, 7vw, 5.2rem);
  line-height: 1;
  color: var(--color-cream);
  font-variant-numeric: tabular-nums;
}
.live-flops-unit {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--color-sage);
}
.live-flops-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted-cream);
  margin-top: 8px;
}
.live-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 28px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.live-metric {
  background: var(--color-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lm-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.lm-value {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--color-cream);
  font-variant-numeric: tabular-nums;
}
.live-note {
  font-family: var(--font-body);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin-top: 22px;
  max-width: 48ch;
}

/* Livecam placeholder */
.live-cam {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 40%, rgba(75,119,85,0.10), transparent 70%),
    var(--color-card-2);
  display: grid;
  place-items: center;
  min-height: 280px;
  overflow: hidden;
}
.live-cam-frame { position: absolute; inset: 18px; pointer-events: none; }
.live-cam-frame .corner {
  position: absolute; width: 22px; height: 22px;
  border: 1px solid var(--color-sage);
}
.live-cam-frame .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.live-cam-frame .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.live-cam-frame .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.live-cam-frame .br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.live-cam-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: clamp(22px, 3vw, 40px);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-sage);
}
.live-cam-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  color: #F6F2EA;
}
.live-cam-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #8BE3A0;
}
.live-cam-scan {
  position: absolute;
  left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,227,160,0.5), transparent);
  top: 0;
  animation: camScan 4.5s linear infinite;
}
@keyframes camScan { 0%{top:6%;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{top:94%;opacity:0} }

/* ───── Brand Brief §6: imagery has no textures. Grain disabled. ───── */
.grain {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ───── Vignette ───── */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 66%, rgba(0,0,0,0.26) 100%);
}

/* ───── Industrial HUD chrome ───── */
.hud {
  position: absolute;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.hud .label { color: var(--color-muted); opacity: 0.7; }
.hud .value { color: var(--color-accent); font-variant-numeric: tabular-nums; min-width: 7ch; }
.hud .value.green { color: var(--color-secondary); }
.hud .pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: none;
}
.hud .pip.red { background: var(--color-muted-cream); box-shadow: none; }
.hud .corner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 1px solid var(--color-accent);
  position: relative;
}
.hud .corner.tl { border-right: 0; border-bottom: 0; }
.hud .corner.tr { border-left: 0; border-bottom: 0; }
.hud .corner.bl { border-right: 0; border-top: 0; }
.hud .corner.br { border-left: 0; border-top: 0; }

.hud-tl { top: 100px; left: clamp(20px, 4vw, 48px); }
.hud-tr { top: 100px; right: clamp(20px, 4vw, 48px); }
.hud-bl { bottom: 32px; left: clamp(20px, 4vw, 48px); }
.hud-br { bottom: 32px; right: clamp(20px, 4vw, 48px); flex-direction: column; align-items: flex-end; gap: 6px; }

.hud-frame::before, .hud-frame::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  border: 1px solid rgba(75, 119, 85, 0.5);
  z-index: 3;
  pointer-events: none;
}
.hud-frame::before { top: 88px; left: clamp(20px, 4vw, 48px); border-right: 0; border-bottom: 0; }
.hud-frame::after { top: 88px; right: clamp(20px, 4vw, 48px); border-left: 0; border-bottom: 0; }
.hud-frame .corner-bl,
.hud-frame .corner-br {
  position: absolute;
  width: 28px; height: 28px;
  border: 1px solid rgba(75, 119, 85, 0.5);
  z-index: 3;
  pointer-events: none;
}
.hud-frame .corner-bl { bottom: 16px; left: clamp(20px, 4vw, 48px); border-right: 0; border-top: 0; }
.hud-frame .corner-br { bottom: 16px; right: clamp(20px, 4vw, 48px); border-left: 0; border-top: 0; }

.hud-ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  border-top: 1px solid var(--color-border);
  background: linear-gradient(180deg, transparent, rgba(11, 11, 11, 0.7));
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  text-decoration: none;
  transition: background var(--duration-base) ease;
}
.hud-ticker:hover {
  background: linear-gradient(180deg, rgba(75,119,85,0.10), rgba(75,119,85,0.20));
}
.hud-ticker-track {
  display: inline-flex;
  gap: 36px;
  animation: tickerSlide 40s linear infinite;
  white-space: nowrap;
  padding-left: 36px;
}
.hud-ticker-item {
  color: var(--color-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.hud-ticker-item .v { color: var(--color-accent); font-weight: 500; }
.hud-ticker-item .v.green { color: var(--color-secondary); }
.hud-ticker-item .v.red { color: var(--color-muted-cream); }
.hud-ticker-item::after {
  content: '◆';
  color: var(--color-border);
  margin-left: 36px;
}
@keyframes tickerSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .hud-tl, .hud-tr, .hud-bl, .hud-br { display: none; }
  .hud-frame::before, .hud-frame::after,
  .hud-frame .corner-bl, .hud-frame .corner-br { display: none; }
}

/* ───── HERO v2 ───── */
.hero {
  min-height: 100svh;
  padding: 0;
  display: block;
}
.hero-inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  padding: 120px clamp(20px, 5vw, 64px) 90px;
  max-width: none;
  pointer-events: none;
  gap: 28px;
}
.hero-inner > * { pointer-events: auto; }

.hero-eyebrow {
  margin: 0;
}

/* Brand Brief §3: display set in Cormorant Garamond Medium Italic.
   Tracking -0.012em, leading 0.98. Solid cream — no gradient fills
   in body content (mark is the only exception). Accent words are
   set in Sage (#4B7755) for a single, structural emphasis. */
.hero-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 0.98;
  font-size: clamp(2.6rem, 7.2vw, 6.2rem);
  margin: 0;
  text-wrap: balance;
  color: var(--color-cream);
}
.hero-title .line {
  display: block;
  overflow: hidden;
  position: relative;
  padding-bottom: 0.22em;
  margin-bottom: -0.18em;
}
.hero-title .line:nth-child(2) { padding-left: 4vw; }
.hero-title .word,
.hero-title .word .split-char {
  display: inline-block;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--color-cream);
}
.hero-title .word.accent,
.hero-title .word.accent .split-char {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--color-sage);
}
/* Brand Brief §5: terminal punctuation rendered in mint — the only
   place mint appears in this headline. */
.hero-title .split-char.mint-dot {
  color: var(--color-mint) !important;
  background: none !important;
  -webkit-text-fill-color: var(--color-mint) !important;
}
.hero-title .word.hollow,
.hero-title .word.hollow .split-char {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-text);
}

/* Hero side rail (left vertical text) */
.hero-rail {
  position: absolute;
  left: clamp(12px, 2.5vw, 32px);
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-muted);
  z-index: 4;
  white-space: nowrap;
  display: flex;
  gap: 16px;
  align-items: center;
}
.hero-rail .line-mark {
  width: 32px;
  height: 1px;
  background: var(--color-accent);
}

/* Hero scroll indicator (bottom) — refined */
.hero-scroll {
  bottom: 50px;
  right: clamp(20px, 4vw, 48px);
  z-index: 4;
}

/* Hero meta block (bottom-left, asymmetric) */
.hero-meta {
  position: absolute;
  bottom: 60px;
  left: clamp(20px, 4vw, 48px);
  z-index: 4;
  max-width: 320px;
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.55;
  border-left: 1px solid var(--color-accent);
  padding-left: 16px;
}
.hero-meta strong { color: var(--color-text); display: block; margin-bottom: 4px; font-weight: 500; }

@media (max-width: 768px) {
  .hero-rail { display: none; }
  .hero-meta { position: relative; bottom: auto; left: auto; padding: 0; border: 0; margin-top: 24px; }
  .hero-title { font-size: clamp(2.4rem, 11vw, 4rem); }
  .hero-title .line:nth-child(2) { padding-left: 0; }
}

/* Section number — big editorial mark */
.section-number {
  font-family: var(--font-mono);
  font-size: clamp(6rem, 14vw, 14rem);
  font-weight: 300;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.08);
  letter-spacing: -0.04em;
  position: absolute;
  top: -0.1em;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.section-number.right { right: clamp(20px, 4vw, 48px); }
.section-number.left { left: clamp(20px, 4vw, 48px); }

/* ───── Editorial section head v2 ───── */
.section-head-v2 {
  position: relative;
  padding: clamp(80px, 14vh, 160px) 0 60px;
}
.section-head-v2 .eyebrow-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.section-head-v2 .eyebrow-bar .rule {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  max-width: 240px;
}
.section-head-v2 .eyebrow-bar .index-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ───── Industrial readout panel ───── */
.readout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: rgba(75, 119, 85, 0.04);
  border: 1px solid rgba(75,119,85,0.18);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.readout .pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: none;
  animation: pipBlink 1.6s ease-in-out infinite;
}
@keyframes pipBlink {
  0%, 100% { opacity: 1; box-shadow: none; }
  50% { opacity: 0.4; box-shadow: 0 0 4px var(--color-secondary); }
}
.readout .label { color: var(--color-muted); }
.readout .value { color: var(--color-accent); font-variant-numeric: tabular-nums; }

/* ───── Asymmetric editorial layout for Problem ───── */
.problem-editorial {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  margin-bottom: 80px;
  z-index: 1;
}
.problem-editorial .lead-block { padding-top: 40px; }
.problem-editorial .massive {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 11rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.18);
  text-align: right;
}
.problem-editorial .massive .accent {
  -webkit-text-stroke: 1.5px var(--color-accent);
  display: block;
}
.problem-editorial .massive .unit {
  font-family: var(--font-mono);
  font-size: 0.18em;
  font-weight: 400;
  letter-spacing: 0.18em;
  display: block;
  margin-top: 16px;
  color: var(--color-muted);
  -webkit-text-stroke: 0;
  text-align: right;
}

/* Problem metric grid v2 — diagonal/staggered */
.metric-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  position: relative;
  z-index: 1;
}
.metric-grid-v2 .metric-card {
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--color-border);
  background: transparent;
  padding: 48px 32px;
}
.metric-grid-v2 .metric-card:last-child { border-right: 0; }
.metric-grid-v2 .metric-card:hover {
  background: rgba(75, 119, 85, 0.03);
  transform: none;
  border-color: var(--color-border);
}
.metric-card .metric-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.metric-card .metric-tag::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
}

@media (max-width: 880px) {
  .problem-editorial { grid-template-columns: 1fr; gap: 32px; }
  .problem-editorial .massive { text-align: left; font-size: clamp(3rem, 18vw, 6rem); }
  .problem-editorial .massive .unit { text-align: left; }
  .metric-grid-v2 { grid-template-columns: 1fr; }
  .metric-grid-v2 .metric-card { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .metric-grid-v2 .metric-card:last-child { border-bottom: 0; }
}

/* Soften the v2 metric grid's 3-col -> 1-col jump across the large-phone /
   small-tablet band with a 2-up step. The cells divide with a right
   border, so re-seam them for two columns: drop the right border on the
   right-hand cell of each row and add a bottom border between rows. */
@media (min-width: 601px) and (max-width: 880px) {
  .metric-grid-v2 { grid-template-columns: repeat(2, 1fr); }
  .metric-grid-v2 .metric-card { border-bottom: 1px solid var(--color-border); }
  .metric-grid-v2 .metric-card:nth-child(2n) { border-right: 0; }
  .metric-grid-v2 .metric-card:nth-last-child(-n+2):nth-child(2n+1),
  .metric-grid-v2 .metric-card:last-child { border-bottom: 0; }
}

/* ───── 3D Section Breakers ───── */
.breaker {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, #0E1530 0%, var(--color-primary) 70%);
  border-block: 1px solid var(--color-border);
}
.breaker canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.breaker-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 20px;
}
.breaker-content .eyebrow {
  margin-bottom: 18px;
}
.breaker-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.02;
  text-wrap: balance;
  color: var(--color-cream);
}
.breaker-headline em {
  color: var(--color-sage);
  font-style: italic;       /* Brand Brief §3: all display is italic */
  font-weight: 500;
}
/* Ecosystem flow diagram between headline and spec line */
.eco-diagram {
  margin: 40px auto 8px;
  width: min(820px, 92%);
  max-width: 820px;
}
.eco-diagram svg { width: 100%; height: auto; overflow: visible; }
@media (max-width: 768px) {
  .eco-diagram { margin: 28px auto 4px; width: 100%; }
}

.breaker-spec {
  margin-top: 32px;
  display: inline-flex;
  gap: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.breaker-spec span strong { color: var(--color-accent); display: block; font-weight: 500; }

/* ───── Architecture v2 — 3D flip cards ───── */
.modus-3d-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  perspective: 1800px;
  transform-style: preserve-3d;
}
.modus-3d {
  position: relative;
  min-height: 600px;
  border-radius: 24px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 800ms var(--ease-out-expo);
  will-change: transform;
}
.modus-3d.green {
  background:
    radial-gradient(circle at 30% 30%, rgba(75,119,85,0.18), transparent 70%),
    linear-gradient(180deg, rgba(75,119,85,0.10), rgba(75,119,85,0.04));
  border: 1px solid rgba(47, 79, 56, 0.25);
}
.modus-3d.blue {
  background:
    radial-gradient(circle at 70% 30%, rgba(139,227,160,0.14), transparent 70%),
    linear-gradient(180deg, rgba(139,227,160,0.08), rgba(139,227,160,0.02));
  border: 1px solid rgba(75, 119, 85, 0.25);
}
.modus-3d:hover { transform: rotateY(6deg) rotateX(-2deg); }
.modus-3d.blue:hover { transform: rotateY(-6deg) rotateX(-2deg); }

.modus-3d .inner {
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 22px;
  height: 100%;
  position: relative;
  z-index: 2;
}

.modus-3d .glow-blob {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.42;
  z-index: 0;
  animation: modusPulse 7s ease-in-out infinite;
}
.modus-3d.green .glow-blob { background: var(--color-sage); top: -90px; right: -90px; }
.modus-3d.blue .glow-blob { background: var(--color-mint); bottom: -90px; left: -90px; animation-delay: -3.5s; }
@keyframes modusPulse {
  0%, 100% { opacity: 0.30; transform: scale(1); }
  50%      { opacity: 0.50; transform: scale(1.08); }
}

.modus-3d .scenery {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.42;
  animation: sceneryBreath 9s ease-in-out infinite;
}
@keyframes sceneryBreath {
  0%, 100% { opacity: 0.34; }
  50%      { opacity: 0.5; }
}

/* Architectural scan-sweep — a thin sage band drifting across the card.
   Mode I sweeps downward (steady base), Mode II sweeps across (dynamic). */
.modus-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 44%, rgba(139,227,160,0.10) 50%, transparent 56%);
  background-size: 100% 280%;
  animation: modusSweepY 6.5s linear infinite;
}
.modus-3d.blue::after {
  background: linear-gradient(90deg, transparent 44%, rgba(139,227,160,0.10) 50%, transparent 56%);
  background-size: 280% 100%;
  animation: modusSweepX 7.5s linear infinite;
}
@keyframes modusSweepY {
  0%   { background-position: 0 -140%; }
  100% { background-position: 0 140%; }
}
@keyframes modusSweepX {
  0%   { background-position: -140% 0; }
  100% { background-position: 140% 0; }
}

/* Hover lifts the scenery + brightens the border for a tactile response */
.modus-3d:hover .scenery { opacity: 0.62; }
.modus-3d.green:hover { border-color: rgba(75,119,85,0.55); }
.modus-3d.blue:hover  { border-color: rgba(139,227,160,0.45); }

@media (max-width: 880px) {
  .modus-3d-grid { grid-template-columns: 1fr; perspective: none; }
  .modus-3d { min-height: 520px; }
  .modus-3d:hover { transform: none; }
}

/* ───── Decorative scan lines (CRT/dashboard hint) ───── */
/* Brand Brief §6: imagery has no textures. The CRT scanline overlay
   is disabled — it also amplified JPEG banding in the darkest hero
   region, which read as a faint top-left "box". */
.scanlines {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ───── Hero CTA ───── */
.hero-cta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ───── Scrub progress edge bar ───── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.scroll-progress::after {
  content: '';
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
  transform-origin: left;
  transition: transform 60ms linear;
}

/* ───── Gigantic floating type for hero (kinetic) ───── */
.kinetic-mark {
  position: absolute;
  bottom: 28%;
  right: -3vw;
  font-family: var(--font-mono);
  font-size: clamp(14rem, 30vw, 36rem);
  font-weight: 200;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(75, 119, 85, 0.05);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 768px) {
  .kinetic-mark { display: none; }
}

/* ───── Energy pulse rings (decorative) ───── */
.pulse-ring {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  opacity: 0;
  animation: pulseRing 3s var(--ease-out-expo) infinite;
  pointer-events: none;
}
.pulse-ring:nth-child(2) { animation-delay: 1s; }
.pulse-ring:nth-child(3) { animation-delay: 2s; }
@keyframes pulseRing {
  0% { transform: scale(0.4); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}

/* Solution grid v2 */
.solution-grid { position: relative; }

/* ───── Improve cursor for energy theme ───── */
.cursor { background: var(--color-secondary); width: 10px; height: 10px; }
.cursor-ring { border-color: rgba(75, 119, 85, 0.6); width: 32px; height: 32px; }

/* ════════════════════════════════════════════════════════════════════
   ════════════ AERION PLATE — Traveling Shader Element ══════════════
   Mekanik: Plate fixed-positioned. JS, görünür anchor'ın
   getBoundingClientRect()'ini her frame okuyup plate'e lerp uygular.
   Plate, gerçek bir content elementi gibi davranır — eğim yok,
   sadece pozisyon + boyut değişir.
══════════════════════════════════════════════════════════════════════ */
.aerion-plate {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  /* transform/width/height/opacity/border-radius JS tarafından her frame set ediliyor */
  will-change: transform, width, height, opacity;
  box-shadow:
    0 24px 60px -20px rgba(75, 119, 85, 0.35),
    0 0 60px -10px rgba(47, 79, 56, 0.25);
  /* Eğim kesinlikle yok — sadece düz translate */
  transform-origin: 0 0;
}
.aerion-plate-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
/* Brand Brief §6: imagery has no textures. Grain disabled. */
.aerion-plate-grain { display: none; }
/* Brand Brief §9: no decorative shadows. Hairline rule instead. */
.aerion-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--color-border);
  pointer-events: none;
}

/* ───── ANCHOR — DOM placeholder for plate position/size ─────
   Anchor gerçek bir layout elementi. Boyutu/pozisyonu plate'in
   o section'da nereye park edeceğini belirler.
   Görsel olarak görünmez (transparent), sadece köşelerde subtle
   spec marker bırakır (kompozisyon hissini güçlendirir).
*/
.plate-anchor {
  position: relative;
  width: 100%;
  /* default boyut — section'a göre override edilir */
}
.plate-anchor-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.plate-anchor-frame .corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(75, 119, 85, 0.35);
}
.plate-anchor-frame .corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.plate-anchor-frame .corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.plate-anchor-frame .corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.plate-anchor-frame .corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.plate-anchor-label {
  position: absolute;
  top: 14px;
  left: 18px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  z-index: 6;
  mix-blend-mode: difference;
}

/* Plate ile content arasında doğru z-stacking */
.section { position: relative; }
.section .container { position: relative; z-index: 5; }
.navbar, .menu-overlay, .hud-ticker, .hero-scroll, .scroll-progress { z-index: 50 !important; }
.cursor, .cursor-ring { z-index: 9998; }

/* Section-specific anchor sizes */
.plate-anchor.solution    { aspect-ratio: 4 / 5; max-height: 600px; }
.plate-anchor.architecture { aspect-ratio: 4 / 5; max-height: 600px; }
.plate-anchor.ecosystem   { aspect-ratio: 1 / 1; max-width: 200px; max-height: 200px; margin: 0 auto; opacity: 0.4; }
.plate-anchor.cta-final   { aspect-ratio: 16 / 9; max-height: 70vh; }

@media (max-width: 880px) {
  .plate-anchor.solution    { aspect-ratio: 4 / 3; max-height: 360px; }
  .plate-anchor.architecture { aspect-ratio: 4 / 3; max-height: 360px; }
  .plate-anchor.ecosystem   { max-width: 100%; max-height: 320px; aspect-ratio: 4 / 3; }
}

/* ───── Solution section v3 — clean, plate-anchored ───── */
.solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 80px;
  min-height: 56vw;
  max-height: 720px;
}
.solution-copy {
  display: grid;
  gap: 40px;
  align-content: center;
}
.solution-flow-spec {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  max-width: 520px;
}
.flow-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flow-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  font-weight: 500;
}
.flow-label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.flow-line {
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
  position: relative;
}
.flow-line::after {
  content: '';
  position: absolute;
  right: -2px; top: -2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
}

/* (eski .plate-slot stilleri silindi — yeni anchor sistemi
   .plate-anchor sınıfını kullanıyor, yukarıda tanımlı.) */

@media (max-width: 880px) {
  .solution-grid { grid-template-columns: 1fr; gap: 40px; min-height: auto; }
  .arch-anchor-row { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ════════════ LOGO TRAVELER — Hero → Problem Journey ══════════════
   Aerion mark, fixed-positioned, scroll-driven travel + rotation.
   logo-traveler.js her frame'de active anchor'ın bounding rect'ini
   okuyup translate3d + rotate uygular.
══════════════════════════════════════════════════════════════════════ */
.logo-traveler {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4; /* above plate (1), below cursor (9998), below nav (50) */
  pointer-events: none;
  will-change: transform, width, height, opacity;
  transform-origin: 0 0;
  /* Logo formation peak'iyle birlikte parlak fade-in:
     0s   intro done → streaks başlar
     0.4s streaks peak
     0.6s logo fade-in başlar (CSS delay 600ms)
     1.2s logo tam opaklıkta, streaks fade-out ile birlikte
  */
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) 600ms;
}
html.intro-done .logo-traveler { opacity: 1; }
.logo-traveler img {
  width: 100%;
  height: 100%;
  display: block;
  /* Brand Brief §9: no glows. The mark carries its sage gradient unaided. */
  filter: none;
}

/* Hero anchor — sağ orta, kompakt boyut */
.logo-anchor {
  pointer-events: none;
}
.logo-anchor-hero {
  position: absolute;
  right: clamp(48px, 9vw, 160px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(150px, 17vw, 240px);
  aspect-ratio: 1;
  z-index: 1;
}

/* Problem anchor — to the left of the title, smaller */
.logo-anchor-problem {
  width: clamp(72px, 8vw, 120px);
  aspect-ratio: 1;
  flex-shrink: 0;
}

/* Mechanism step anchors — small marker in the top-right of each card.
   The logo glides into these and dwells while the step is centered. */
/* Problem section head grid: logo + title side-by-side. This is the
   only section that participates in the traveller journey now. */
.section-head-v2.with-logo .head-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: center;
  margin-top: 24px;
}

@media (max-width: 768px) {
  /* On mobile, logo lives only in hero (smaller); the Problem anchor
     is hidden and the title takes the full column. */
  .logo-anchor-hero { width: clamp(140px, 38vw, 220px); right: 4vw; }
  .logo-anchor-problem { display: none; }
  .section-head-v2.with-logo .head-row { grid-template-columns: 1fr; }
}



/* ── Responsive fixes (mobile-first, additive; desktop >=1024px untouched) ── */

/* Finding 2: timeline year labels overlapping on small screens */
@media (max-width: 640px) {
  .timeline-marker .yr {
    font-size: 9px;
    top: 20px;
  }
}
@media (max-width: 400px) {
  .timeline-marker:nth-child(even) .yr {
    display: none;
  }
}

/* Finding 3: tall market-trigger cells / awkward wrapping in 1-col mobile */
@media (max-width: 480px) {
  .market-row {
    padding: 12px 16px;
  }
  .market-trigger {
    font-size: var(--text-xs);
    word-break: break-word;
  }
}

/* ================================================================
   TECHNOLOGY PAGE — 2026-06 content update additions
   (scoped, additive; existing rules untouched)
================================================================ */
/* Hero: licensing sub-headline + explore cue */
.page-hero-sub {
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 1.1vw, 0.96rem);
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--color-secondary);
  margin-top: 14px;
  max-width: 62ch;
}
.page-hero-cue {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-muted);
  margin-top: 26px;
}

/* Architecture Mode II: live surplus ticker overlay (top-right) */
.modus-3d .modus-ticker {
  position: absolute;
  top: clamp(48px, 6vw, 64px);   /* sits just below the MODE tag row — never collides with it */
  right: clamp(18px, 3vw, 34px);
  left: auto;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 8px;
  max-width: min(72%, 340px);
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(11, 11, 11, 0.5);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid rgba(139, 227, 160, 0.26);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, 0.82);
  text-align: right;
  line-height: 1.4;
}
.modus-3d .modus-ticker .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #8BE3A0; box-shadow: 0 0 10px #8BE3A0;
  animation: pulse 1.6s ease-in-out infinite;
  flex: none;
}
.modus-3d .modus-ticker .tk-val { color: #8BE3A0; }
.modus-3d .modus-ticker .tk-sep { opacity: 0.4; }
@media (max-width: 560px) {
  .modus-3d .modus-ticker { max-width: calc(100% - 36px); font-size: 8px; letter-spacing: 0.06em; }
}

/* Live pilot: 3-column (3x2) stat grid */
.live-metrics.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) { .live-metrics.cols-3 { grid-template-columns: 1fr 1fr; } }

/* ================================================================
   PAGE CONTENT — 2026-06 additions
   (scoped, additive; existing rules untouched)
================================================================ */
/* Hero: "The Three Shifts" triad anchor — smaller than body, larger than a footnote */
.three-shifts { margin-top: 32px; max-width: 840px; }
.three-shifts .ts-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.three-shifts .ts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.three-shifts .ts-item {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}
.three-shifts .ts-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--color-secondary);
}
.three-shifts .ts-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 6px 0 8px;
}
.three-shifts .ts-body {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-muted);
}
.three-shifts .ts-closer {
  margin-top: 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: var(--color-secondary);
}
@media (max-width: 720px) {
  .three-shifts .ts-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Why-now timeline: pulsing right edge = window closes at 2028 */
.timeline-window::before {
  content: '';
  position: absolute;
  right: -2px; top: -6px; bottom: -6px;
  width: 3px;
  background: var(--color-accent);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--color-accent);
  animation: pulse 1.6s ease-in-out infinite;
}

/* Why-now: single-line closer summarising the section */
.table-closer {
  margin-top: 22px;
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-align: center;
}
.table-closer .yr { color: var(--color-accent); font-style: normal; }

/* ================================================================
   PAGE HERO — interactive map nodes (DOM overlay projected from the
   3D scene each frame by hero-iso.js). Green dots over key structures;
   the label reveals on hover, the click smooth-scrolls to the section.
================================================================ */
.hero-nodes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-node {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: 9px;
  opacity: 0;
  pointer-events: none;            /* JS flips to auto once revealed */
  text-decoration: none;
  will-change: transform, opacity;
  transition: opacity .4s ease;
}
.hero-node .hn-dot {
  position: relative; flex: none;
  width: 11px; height: 11px; border-radius: 50%;
  background: #8BE3A0;
  box-shadow: 0 0 0 4px rgba(139,227,160,0.16), 0 0 12px rgba(139,227,160,0.8);
  transition: box-shadow .25s ease;
}
.hero-node .hn-dot::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid rgba(139,227,160,0.7);
  animation: heroNodePulse 2.2s ease-out infinite;
}
@keyframes heroNodePulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}
.hero-node .hn-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #EFEAE0;
  background: rgba(11,11,11,0.52);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(139,227,160,0.28);
  border-radius: 999px; padding: 5px 11px;
  white-space: nowrap;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.hero-node:hover .hn-label,
.hero-node:focus-visible .hn-label { opacity: 1; transform: translateX(0); }
.hero-node:hover .hn-dot,
.hero-node:focus-visible .hn-dot { box-shadow: 0 0 0 5px rgba(139,227,160,0.26), 0 0 16px rgba(139,227,160,1); }
@media (prefers-reduced-motion: reduce) {
  .hero-node .hn-dot::after { animation: none; }
}
@media (max-width: 768px) { .hero-nodes { display: none; } }

/* ===== Content-fit optimizations ===== */

/* company.html — Hüseyin/Tim roles grew to long strings in the narrow 1fr grid cells; ease the wrap without touching the larger M/D cards */
.is-huseyin .tc-role, .is-tim .tc-role {
  font-size: 9.5px; letter-spacing: .1em; line-height: 1.45;
}

/* ================================================================
   UNIFIED HEADER + FOOTER  (parity with index.html)
   Subpages adopt the canonical `.nav` / `.footer-inner` markup so the
   menu and footer are pixel-identical to the home page. These rules sit
   at the end of the file so they win over the legacy `.navbar*` /
   `.footer*` blocks above (same specificity, later in source).
================================================================ */

/* ---- Floating glass-pill navbar ---- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: 18px 0;
  pointer-events: none;                 /* let the iso-scene receive drags through the bar */
  transition: padding 550ms var(--ease-out-expo);
}
.nav .nav-inner {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  pointer-events: auto;
  border: 1px solid transparent;
  border-radius: 100px;
  transition: max-width 550ms var(--ease-out-expo), padding 550ms var(--ease-out-expo),
              background 550ms var(--ease-out-expo), border-color 550ms var(--ease-out-expo),
              box-shadow 550ms var(--ease-out-expo);
}
.nav.scrolled { padding: 12px 0; }
.nav.scrolled .nav-inner {
  max-width: 1080px;
  padding: 9px clamp(16px, 2.2vw, 24px);
  background: var(--color-nav-bg);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-color: var(--color-border);
  box-shadow: 0 18px 48px -22px rgba(0,0,0,.42), 0 2px 8px -4px rgba(0,0,0,.16),
              inset 0 1px 0 rgba(255,255,255,.30);
  animation: navPillIn 600ms var(--ease-out-expo);
}
@keyframes navPillIn {
  0%   { transform: translateY(-14px) scale(.985); opacity: .4; }
  100% { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .nav, .nav .nav-inner { transition: none; }
  .nav.scrolled .nav-inner { animation: none; }
}

.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand img { height: clamp(18px, 5vw, 26px); width: auto; }
.brand-word {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  letter-spacing: 0.45em; text-transform: uppercase; color: var(--color-text);
}
.nav-cta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; border: 1px solid var(--color-text); border-radius: 999px;
  padding: 10px 18px; color: var(--color-text); white-space: nowrap;
  transition: background .3s ease, color .3s ease;
}
.nav-cta:hover { background: var(--color-text); color: var(--color-primary); }
@media (max-width: 520px) { .nav-cta { display: none; } }
@media (max-width: 360px) {
  .nav .nav-inner { gap: 10px; }
  .brand-word { letter-spacing: 0.28em; }
}

/* ---- Footer (glass card, identical to index.html) ---- */
.footer {
  background: var(--color-bg-deep);
  border-top: 1px solid var(--color-border);
  padding: 56px 0 36px;
  position: relative;
  z-index: 2;
}
.footer > .container { padding-inline: clamp(20px, 4vw, 56px); }  /* match index.html exactly */
.footer-inner {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 48px);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 0;
}
.footer h5 {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--color-muted); margin-bottom: 14px;
}
.footer a {
  display: block; color: var(--color-text); font-size: .84rem;
  margin-bottom: 7px; padding: 0; opacity: .8;
}
.footer a:hover { opacity: 1; color: var(--color-secondary); }
.footer-note {
  margin-top: 34px; padding: 18px 20px;
  background: var(--color-secondary-soft);
  border: 1px solid var(--color-border); border-radius: 12px;
  font-family: var(--font-mono); font-size: .66rem; line-height: 1.7;
  letter-spacing: .01em; color: var(--color-muted);
  /* opt out of the global `body p { max-width:165mm }` reading-measure so the
     disclaimer spans the full footer width on subpages. */
  max-width: none;
}
.footer-legal {
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--color-border);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--color-muted);
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 16px; } }