/* GENERATED by scripts/shell/sync-shell.mjs from css/style.css and its imports. Do not edit; edit the canonical files. */
/* ================================================================
   TEKNOIFY MARKETING — STYLE MANIFEST
   Cascade layers make precedence explicit and independent of file
   order or selector specificity:
     tokens     design tokens (CSS custom properties)
     base       reset and global defaults
     legacy     pre-redesign component and page styles (being replaced)
     foundation the Phase C visual foundation (wins over legacy)
   Page-specific stylesheets loaded by individual pages stay unlayered
   and therefore override everything here for their own selectors.
   ================================================================ */
@layer tokens, base, legacy, foundation;

@layer tokens {
/* ---- 00-settings/tokens.css ---- */
/* ================================================================
   TEKNOIFY MARKETING — DESIGN TOKENS (Phase C foundation)
   Direction: "Ink & Signal" — deep ink canvas, typographic hierarchy,
   hairline surfaces, one amber signal accent, cyan reserved for data.
   Every visual value used by the foundation layer comes from here.
   Legacy aliases at the bottom keep older stylesheets working.
   ================================================================ */
:root {
  /* ---- Color roles: "Deep Field" (default, dark) ----
     The palette encodes the product transformation:
       steel  = raw inputs (muted)            → --color-signal
       ion    = intelligence + interactive UI → --color-accent
       solar  = action / outcome + primary CTA → --color-action
     Brand UI stays near-monochrome; the spectral range lives in diagrams. */
  --color-bg-canvas: #070a10;
  --color-bg-surface: #0e121a;
  --color-bg-elevated: #141924;
  --color-bg-inset: #0a0d14;
  --color-bg-overlay: rgba(7, 10, 16, 0.8);

  --color-fg-primary: #eef1f6;
  --color-fg-secondary: #a8b1bf;
  --color-fg-tertiary: #717c8d;
  --color-fg-inverse: #0b0e14;

  --color-border-subtle: rgba(238, 241, 246, 0.08);
  --color-border-strong: rgba(238, 241, 246, 0.16);
  --color-border-accent: rgba(143, 227, 255, 0.45);

  --color-accent: #8fe3ff;            /* ion: intelligence, links, focus, interactive */
  --color-accent-hover: #b4edff;
  --color-accent-active: #6fd3f2;
  --color-accent-soft: rgba(143, 227, 255, 0.12);
  --color-accent-fg: #06141a;         /* text on ion */

  --color-action: #f0c65e;            /* gold: resolved action / outcomes (diagrams, rails, resolved states) */
  --color-action-hover: #f7d27a;
  --color-action-active: #e0b54a;
  --color-action-soft: rgba(240, 198, 94, 0.12);
  --color-action-fg: #1a1403;         /* text on gold */

  --color-cta: #eef1f6;               /* primary CTA: luminous, the brightest object on the stage */
  --color-cta-hover: #ffffff;
  --color-cta-active: #d9dee6;
  --color-cta-fg: #0b0e14;

  --color-signal: #8797ad;            /* steel: raw inputs, technical labels */
  --color-signal-soft: rgba(135, 151, 173, 0.12);

  --color-positive: #5ee0a0;
  --color-warning: #ff8a5b;
  --color-destructive: #ff6b6b;

  --color-focus: #b4edff;

  /* ---- Typography ---- */
  --font-display: 'Schibsted Grotesk', 'Inter Tight', system-ui, sans-serif;
  --font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'JetBrains Mono', Consolas, monospace;

  /* fluid scale: min at 375px, max at 1440px */
  --text-display: clamp(2.5rem, 1.6rem + 3.8vw, 4.25rem);   /* 40 → 68 */
  --text-h1: clamp(2.125rem, 1.45rem + 2.9vw, 3.5rem);      /* 34 → 56 */
  --text-h2: clamp(1.625rem, 1.25rem + 1.6vw, 2.375rem);    /* 26 → 38 */
  --text-h3: clamp(1.25rem, 1.1rem + 0.65vw, 1.625rem);     /* 20 → 26 */
  --text-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17 → 19 */
  --text-body: 1rem;                                         /* 16 */
  --text-small: 0.875rem;                                    /* 14 */
  --text-caption: 0.75rem;                                   /* 12 */
  --text-nav: 0.9375rem;                                     /* 15 */

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-label: 0.08em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Layout ---- */
  --container-prose: 42rem;   /* ~65ch body copy */
  --container-md: 64rem;
  --container-lg: 72rem;      /* 1152px: default content width */
  --container-xl: 80rem;      /* 1280px: wide compositions */
  --gutter: 1.25rem;          /* 20px mobile; raised by breakpoints in layout */
  --section-y: clamp(4rem, 3rem + 4vw, 7rem);
  --header-height: 4.25rem;   /* 68px */

  /* ---- Surface language ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-round: 999px;

  --shadow-raised: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 24px 60px -20px rgba(0, 0, 0, 0.7);

  /* ---- Motion ---- */
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 2px var(--color-bg-canvas), 0 0 0 4px var(--color-focus);

  /* ================================================================
     Legacy aliases (consumed by older stylesheets; do not use in new code)
     ================================================================ */
  --primary: var(--color-accent);
  --primary-hover: var(--color-accent-hover);
  --secondary: var(--color-signal);
  --accent: var(--color-destructive);
  --bg-body: var(--color-bg-canvas);
  --bg-surface: var(--color-bg-surface);
  --bg-input: rgba(255, 255, 255, 0.03);
  --border-light: var(--color-border-subtle);
  --border-focus: var(--color-border-accent);
  --font-main: var(--font-sans);
  --text-main: var(--color-fg-primary);
  --text-muted: var(--color-fg-secondary);
  --container-width: var(--container-lg);
  --ease-fast: var(--duration-fast) var(--ease-out);
  --ease-smooth: var(--duration-slow) var(--ease-out);
}

/* Paper mode: warm light surfaces for sections that need editorial contrast
   (legal texts, long-form content, future light compositions). Apply with
   class="theme-paper" on a section or region. */
.theme-paper {
  --color-bg-canvas: #f6f3ec;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-inset: #eee9df;
  --color-fg-primary: #12151b;
  --color-fg-secondary: #4b5462;
  --color-fg-tertiary: #6f7887;
  --color-fg-inverse: #f3f5f8;
  --color-border-subtle: rgba(18, 21, 27, 0.1);
  --color-border-strong: rgba(18, 21, 27, 0.2);
  --color-accent: #0b6f8a;
  --color-accent-hover: #095a70;
  --color-accent-active: #074a5c;
  --color-accent-soft: rgba(11, 111, 138, 0.12);
  --color-accent-fg: #ffffff;
  --color-action: #b7790f;
  --color-action-hover: #9d660a;
  --color-action-active: #85560a;
  --color-action-soft: rgba(183, 121, 15, 0.12);
  --color-action-fg: #ffffff;
  --color-cta: #12151b;
  --color-cta-hover: #000000;
  --color-cta-active: #2a2f38;
  --color-cta-fg: #ffffff;
  --color-signal: #5f6b7c;
  --color-focus: #0b6f8a;
  --focus-ring: 0 0 0 2px var(--color-bg-canvas), 0 0 0 4px var(--color-focus);
  --bg-body: var(--color-bg-canvas);
  --bg-surface: var(--color-bg-surface);
  --text-main: var(--color-fg-primary);
  --text-muted: var(--color-fg-secondary);
  --border-light: var(--color-border-subtle);
  --primary: var(--color-accent);
  background: var(--color-bg-canvas);
  color: var(--color-fg-primary);
  color-scheme: light;
}

/* Gutter and header scale with viewport */
@media (min-width: 30rem) {  /* 480px */
  :root { --gutter: 1.5rem; }
}
@media (min-width: 64rem) {  /* 1024px */
  :root { --gutter: 2rem; --header-height: 4.5rem; }
}
@media (min-width: 90rem) {  /* 1440px */
  :root { --gutter: 2.5rem; }
}
}
@layer base {
/* ---- 02-generic/base.css ---- */
/* ================================================================
   BASE & RESET — global defaults built on the token layer
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-fg-primary);
  background-color: var(--color-bg-canvas);
  /* deep field canvas: one quiet horizon of light behind the hero, and a faint
     dot field for texture; sections never add their own gradients */
  background-image:
    radial-gradient(70rem 34rem at 62% -8rem, rgba(143, 227, 255, 0.07), transparent 70%),
    radial-gradient(1px 1px at 50% 50%, rgba(238, 241, 246, 0.05) 50%, transparent 51%);
  background-size: auto, 26px 26px;
  background-repeat: no-repeat, repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: none; background: none; cursor: pointer; }

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

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-canvas); }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 10px; border: 2px solid var(--color-bg-canvas); }

/* Reduced motion: opt out of non-essential motion globally */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html:not(.force-motion) *, html:not(.force-motion) *::before, html:not(.force-motion) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
}

@layer legacy {
/* ---- 03-elements/forms-buttons.css ---- */
/* ================================================================
[LAYER 2] ATOMIC COMPONENTS (Buttons, Inputs)
Küçük yapı taşları
================================================================
*/




/* 2.1 Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--ease-fast);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn-block { width: 100%; }




.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25);
}
.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}




.btn-secondary {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-light);
  color: var(--text-main);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}




.btn-outline {
  border: 1px solid var(--border-light);
  color: var(--text-muted);
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}




/* 2.2 Inputs & Forms */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrapper i {
  position: absolute;
  left: 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  pointer-events: none;
}




/* Input/Textarea/Select Genel Stilleri */
input,
textarea,
select {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.5rem; /* İkon payı */
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: inherit;
  transition:
    border-color var(--ease-fast),
    background-color var(--ease-fast),
    box-shadow var(--ease-fast);
}




/* Focus Efektleri */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  background: rgba(255,255,255,0.05);
}




/* Textarea ve Select Özel Ayarlar */
.textarea-wrapper { align-items: flex-start; }
.textarea-wrapper i { top: 1rem; }
textarea {
  resize: vertical;
  min-height: 120px;
  max-height: 320px;
  overflow: auto;
  transition:
    border-color var(--ease-fast),
    background-color var(--ease-fast),
    box-shadow var(--ease-fast);
}

textarea#message {
  scrollbar-gutter: stable;
}




/* Select (Dropdown) Özelleştirmeleri */
select { appearance: none; cursor: pointer; }
.select-arrow {
  position: absolute; right: 1rem; left: auto; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: 0.8rem; color: var(--text-muted);
}




/* Select İçindeki Seçeneklerin Rengi (Dark Mode Uyumlu) */
select option {
  background-color: #14161c !important;
  color: #f3f4f6 !important;
  padding: 10px;
}




/* Placeholder Rengi */
::placeholder {
  color: rgba(255, 255, 255, 0.2) !important;
}




/* 2.3 Form Validation (Hata Durumları) */
.form-error-msg {
  color: #ef4444; /* Kırmızı */
  font-size: 0.85rem;
  margin-top: 0.5rem;
  display: none; /* JS ile açılacak */
  padding-left: 0.5rem;
  font-weight: 500;
}




.input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
  background-color: rgba(239, 68, 68, 0.05) !important;
}




.input-wrapper.error i {
  color: #ef4444; /* Hata varken ikonu kırmızı yap */
}
}
@layer legacy {
/* ---- 04-objects/layout.css ---- */
/* ================================================================
[LAYER 3] LAYOUT MODULES
================================================================
*/




/* 3.1 Page Frame */
.page-frame {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  background-image: radial-gradient(circle at 50% 0%, rgba(99,102,241,0.08), transparent 40%);
}
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}




/* 3.2 Header & Nav */
.header {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(5, 5, 5, 0.8);
  backdrop-filter: blur(12px);
  transition: all var(--ease-smooth);
}
.header.scrolled {
  background: rgba(5, 5, 5, 0.95);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  padding: 0;
}




.nav-container {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; width: 100%; max-width: var(--container-width);
  margin: 0 auto; padding: 0 1.5rem;
}
.logo-text { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.logo-icon { color: var(--primary); margin-right: 8px; }




.nav-menu { display: flex; align-items: center; gap: 2rem; }
.nav-link { font-size: 0.9rem; color: var(--text-muted); font-weight: 500; }
.nav-link:hover { color: #fff; }




/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0.5rem; min-width: 200px;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: all var(--ease-fast);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a { display: block; padding: 0.6rem 1rem; border-radius: 4px; color: var(--text-muted); font-size: 0.9rem; }
.dropdown-menu a:hover { background: rgba(255,255,255,0.05); color: #fff; }




.hamburger { display: none; }
}
@layer legacy {
/* ---- 05-components/hero-services.css ---- */
/* 3.3 Hero Section */
.home-page-shell {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(20, 24, 38, 0.58), transparent 56%),
    radial-gradient(ellipse at 50% 78%, rgba(99, 102, 241, 0.06), transparent 52%),
    linear-gradient(180deg, #050507 0%, #07070a 42%, #050507 100%);
}

.home-page-shell::before,
.home-page-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.home-page-shell::before {
  background:
    radial-gradient(ellipse 82% 30% at 50% 18%, rgba(99, 102, 241, 0.095), transparent 68%),
    radial-gradient(ellipse 76% 28% at 50% 56%, rgba(125, 211, 252, 0.04), transparent 70%),
    radial-gradient(ellipse 90% 38% at 50% 92%, rgba(99, 102, 241, 0.045), transparent 72%);
  opacity: 0.86;
}

.home-page-shell::after {
  background: linear-gradient(to bottom, rgba(5, 5, 7, 0) 0%, rgba(5, 5, 7, 0.08) 72%, rgba(5, 5, 7, 0.14) 100%);
}

.home-background-stage {
  position: relative;
  z-index: 1;
}

.home-background-surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  pointer-events: none;
  overflow: hidden;
  background-color: transparent;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(to right, rgba(99, 102, 241, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 102, 241, 0.017) 1px, transparent 1px);
  background-position: center top;
  background-size: 40px 40px, 40px 40px, 160px 160px, 160px 160px;
}

.home-background-surface.has-quantum-grid {
  background-image: none;
}

.quantum-grid-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.home-background-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 64% 26% at 50% 22%, rgba(99, 102, 241, 0.055), transparent 72%),
    radial-gradient(ellipse 86% 34% at 50% 63%, rgba(125, 211, 252, 0.028), transparent 76%);
  opacity: 0.72;
  pointer-events: none;
}

.home-background-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 5, 7, 0.02), rgba(5, 5, 7, 0.12));
  pointer-events: none;
}

.home-background-surface > :not(.quantum-grid-canvas) {
  position: relative;
  z-index: 1;
}

.hero {
  padding-top: 160px; padding-bottom: 80px; min-height: 90vh;
  display: flex; align-items: center; position: relative; z-index: 1;
}
.hero-container {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
  width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 1.5rem;
}
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; font-weight: 800; margin-bottom: 1.5rem;
}
.gradient-text {
  background: linear-gradient(135deg, #fff 30%, var(--primary));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-subtitle { font-size: 1.1rem; color: var(--text-muted); max-width: 500px; margin-bottom: 2rem; }
.hero-ctas { display: flex; gap: 1rem; }




/* 3.4 Hero Terminal and Orbit Visuals */
.hero-right {
  min-width: 0;
}

.hero-right--terminal-only {
  position: relative;
  display: flex;
  min-height: 390px;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.hero-right--terminal-only::before {
  content: "";
  position: absolute;
  inset: 7% 5%;
  border-radius: 32px;
  background:
    radial-gradient(circle at 48% 42%, rgba(99, 102, 241, 0.2), transparent 42%),
    radial-gradient(circle at 75% 72%, rgba(125, 211, 252, 0.08), transparent 34%);
  filter: blur(14px);
  opacity: 0.72;
  pointer-events: none;
}

.teknoify-orbit {
  --orbit-rotation: 0deg;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 430px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 48%, rgba(99, 102, 241, 0.16), transparent 31%),
    radial-gradient(circle at 78% 16%, rgba(125, 211, 252, 0.08), transparent 24%),
    linear-gradient(145deg, rgba(17, 19, 28, 0.88), rgba(7, 8, 12, 0.92));
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  cursor: grab;
}

.teknoify-orbit--services {
  height: 100%;
  min-height: 620px;
  border-color: rgba(255, 255, 255, 0.065);
  background:
    radial-gradient(circle at 50% 48%, rgba(99, 102, 241, 0.12), transparent 34%),
    radial-gradient(circle at 70% 24%, rgba(125, 211, 252, 0.075), transparent 28%),
    linear-gradient(145deg, rgba(17, 19, 28, 0.36), rgba(7, 8, 12, 0.2));
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.teknoify-orbit::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-lg) - 1px);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at center, #000 0%, #000 46%, transparent 82%);
  opacity: 0.46;
  pointer-events: none;
}

.teknoify-orbit::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.16), transparent 58%);
  filter: blur(24px);
  opacity: 0.65;
  pointer-events: none;
}

.teknoify-orbit.is-dragging {
  cursor: grabbing;
}

.teknoify-orbit__ambient {
  position: absolute;
  inset: -25%;
  background:
    conic-gradient(from 120deg, transparent, rgba(99, 102, 241, 0.11), transparent 34%),
    radial-gradient(circle at 28% 32%, rgba(255, 255, 255, 0.12), transparent 1px),
    radial-gradient(circle at 72% 68%, rgba(255, 255, 255, 0.09), transparent 1px);
  opacity: 0.72;
  pointer-events: none;
}

.teknoify-orbit__core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 40;
  display: flex;
  min-width: 150px;
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.05rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 22px;
  background: rgba(13, 15, 20, 0.78);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 44px rgba(99, 102, 241, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  pointer-events: none;
}

.teknoify-orbit__core-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(99, 102, 241, 0.14);
  color: var(--primary);
  box-shadow: inset 0 0 18px rgba(99, 102, 241, 0.16);
}

.teknoify-orbit__core-title {
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.teknoify-orbit__core small {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.teknoify-orbit__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(64deg) rotateZ(var(--orbit-rotation));
  transform-style: preserve-3d;
  pointer-events: none;
}

.teknoify-orbit__ring::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: radial-gradient(closest-side, transparent calc(100% - 18px), rgba(165, 180, 252, 0.045) calc(100% - 11px), transparent 100%);
  filter: blur(8px);
  opacity: 0.8;
}

.teknoify-orbit__particle {
  position: absolute;
  left: var(--particle-x, 50%);
  top: var(--particle-y, 50%);
  width: var(--particle-size, 2px);
  height: var(--particle-size, 2px);
  border-radius: 999px;
  background: rgba(255, 255, 255, var(--particle-alpha, 0.72));
  box-shadow:
    0 0 calc(var(--particle-size, 2px) * 2.7) rgba(255, 255, 255, 0.62),
    0 0 calc(var(--particle-size, 2px) * 6) rgba(99, 102, 241, 0.2);
  transform: translate(-50%, -50%);
  opacity: var(--particle-alpha, 0.72);
}

.teknoify-orbit__ring--outer {
  width: min(88%, 500px);
  height: min(88%, 500px);
  opacity: 0.84;
}

.teknoify-orbit__ring--middle {
  width: min(74%, 410px);
  height: min(74%, 410px);
  opacity: 0.78;
}

.teknoify-orbit__ring--inner {
  width: min(58%, 318px);
  height: min(58%, 318px);
  opacity: 0.72;
}

.hero-terminal {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(18, 21, 31, 0.92), rgba(8, 10, 16, 0.95)),
    radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.16), transparent 36%);
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.44),
    0 0 42px rgba(99, 102, 241, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.hero-terminal--primary {
  z-index: 2;
  width: min(100%, 520px);
  min-height: 244px;
}

.hero-terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  opacity: 0.52;
  pointer-events: none;
}

.term-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  min-height: 42px;
  padding: 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.term-controls {
  display: inline-flex;
  gap: 0.42rem;
}

.term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}

.term-dot.red { background: #ff5f57; color: rgba(255, 95, 87, 0.48); }
.term-dot.yellow { background: #ffbd2e; color: rgba(255, 189, 46, 0.44); }
.term-dot.green { background: #28c840; color: rgba(40, 200, 64, 0.44); }

.term-title {
  justify-self: center;
  color: rgba(226, 232, 240, 0.78);
  font-family: 'Fira Code', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.term-body {
  position: relative;
  z-index: 1;
  height: 190px;
  padding: 1rem 1.05rem 1.2rem;
  overflow: hidden;
  color: #e2e8f0;
  font-size: clamp(0.68rem, 1.15vw, 0.82rem);
  line-height: 1.58;
}

.teknoify-orbit__items {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.teknoify-orbit__item {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  min-width: 116px;
  max-width: 168px;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.62rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(13, 15, 20, 0.78);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  backdrop-filter: blur(14px);
  pointer-events: auto;
  -webkit-user-drag: none;
  --orbit-x: 0px;
  --orbit-y: 0px;
  --orbit-scale: 1;
  --orbit-hover-scale: 1;
  transform: translate3d(calc(-50% + var(--orbit-x)), calc(-50% + var(--orbit-y)), 0)
    scale(calc(var(--orbit-scale) * var(--orbit-hover-scale)));
  will-change: transform, opacity;
  transition:
    border-color var(--ease-fast),
    background var(--ease-fast),
    box-shadow var(--ease-fast),
    color var(--ease-fast),
    filter var(--ease-fast);
}

.teknoify-orbit__item i {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 0.95rem;
}

.teknoify-orbit__item span,
.teknoify-orbit__item small {
  pointer-events: none;
}

.teknoify-orbit__item small {
  display: block;
  width: 100%;
  margin-left: -0.2rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 500;
}

.teknoify-orbit__item:hover,
.teknoify-orbit__item:focus-visible {
  --orbit-hover-scale: 1.06;
  border-color: rgba(165, 180, 252, 0.38);
  background: rgba(22, 25, 36, 0.9);
  color: #fff;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.32),
    0 0 24px rgba(99, 102, 241, 0.2);
  filter: brightness(1.1);
}

.teknoify-orbit__item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

.teknoify-orbit:has(.teknoify-orbit__item:hover, .teknoify-orbit__item:focus-visible) .teknoify-orbit__particle {
  --particle-alpha: 0.9;
  box-shadow:
    0 0 calc(var(--particle-size, 2px) * 3.4) rgba(255, 255, 255, 0.78),
    0 0 calc(var(--particle-size, 2px) * 8) rgba(99, 102, 241, 0.28);
}

@media (max-width: 900px) {
  .hero-right--terminal-only {
    min-height: 320px;
  }

  .hero-terminal--primary {
    width: min(100%, 460px);
  }

  .teknoify-orbit--services {
    min-height: 520px;
  }

  .teknoify-orbit__core {
    min-width: 132px;
    padding: 0.9rem 1rem;
  }

  .teknoify-orbit__core-icon {
    width: 36px;
    height: 36px;
  }

  .teknoify-orbit__item {
    min-width: 104px;
    max-width: 138px;
    padding: 0.55rem 0.66rem;
    font-size: 0.76rem;
  }
}

@media (max-width: 576px) {
  .hero-right--terminal-only {
    min-height: 280px;
  }

  .hero-terminal--primary {
    width: 100%;
    min-height: 188px;
  }

  .term-body {
    height: 146px;
    padding: 0.85rem;
  }

  .teknoify-orbit {
    min-height: 330px;
    border-radius: var(--radius-md);
  }

  .teknoify-orbit--services {
    min-height: 460px;
  }

  .teknoify-orbit__core {
    min-width: 116px;
    border-radius: 18px;
  }

  .teknoify-orbit__core small {
    font-size: 0.68rem;
  }

  .teknoify-orbit__item {
    min-width: 72px;
    max-width: 96px;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.48rem 0.5rem;
    font-size: 0.68rem;
  }

  .teknoify-orbit__item small {
    display: none;
  }
}

/* 3.5 Services Hub */
.services {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 5rem 0 3.75rem;
  isolation: isolate;
}

.services::before {
  content: "";
  position: absolute;
  inset: 8% 0 3%;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.2), transparent 26%),
    radial-gradient(circle at 50% 48%, rgba(168, 85, 247, 0.12), transparent 36%),
    radial-gradient(circle at 18% 28%, rgba(125, 211, 252, 0.07) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 74%, rgba(196, 181, 253, 0.08) 0 1px, transparent 1.8px);
  background-size: auto, auto, 62px 62px, 74px 74px;
  opacity: 0.82;
  pointer-events: none;
}

.services::after {
  content: "";
  position: absolute;
  inset: 16% 7% 12%;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(165, 180, 252, 0.1) 48% 48.4%, transparent 48.4% 100%),
    linear-gradient(0deg, transparent 0 48%, rgba(125, 211, 252, 0.08) 48% 48.3%, transparent 48.3% 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 62%);
  opacity: 0.45;
  pointer-events: none;
}

.services > .container { position: relative; z-index: 1; }

.section-header { text-align: center; margin-bottom: 3.15rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.section-header h2 { font-size: clamp(2rem, 4vw, 2.5rem); margin-bottom: 1rem; font-weight: 700; }
.section-header p { color: var(--text-muted); font-size: 1.1rem; }

.services-hub {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 230px);
  grid-template-areas:
    "education investment rpa"
    "finance   demo       scraping"
    "api       analytics  ai";
  justify-content: center;
  align-items: center;
  gap: 46px 90px;
  width: min(100%, 1020px);
  margin: 0 auto;
  min-height: 650px;
  isolation: isolate;
}

.services-hub__connectors {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}

.services-hub-connector,
.services-hub-signal { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }

.services-hub-connector { stroke: rgba(165, 180, 252, 0.34); stroke-width: 1.35; opacity: 0.86; }
.services-hub-signal { stroke: rgba(125, 211, 252, 0.96); stroke-width: 3; stroke-dasharray: 16 100; stroke-dashoffset: 116; opacity: 0; }
.services-hub__connector-nodes circle { fill: rgba(196, 181, 253, 0.7); opacity: 0.68; filter: drop-shadow(0 0 7px rgba(168, 85, 247, 0.35)); }
.services-hub__connector-nodes .services-hub__connector-core-node { fill: rgba(224, 231, 255, 0.95); opacity: 0.92; filter: drop-shadow(0 0 15px rgba(125, 211, 252, 0.55)); }

.service-hub-card,
.services-hub-center,
.services-hub-demo { position: relative; z-index: 1; color: #fff; text-decoration: none; -webkit-user-drag: none; }

.service-hub-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.58rem;
  width: 210px;
  min-height: 170px;
  padding: 1.15rem 1rem;
  border: 1px solid rgba(165, 180, 252, 0.36);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), transparent 31%),
    radial-gradient(circle at 50% 0%, rgba(129, 140, 248, 0.18), transparent 48%),
    linear-gradient(145deg, rgba(24, 27, 43, 0.97), rgba(8, 10, 20, 0.96));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -18px 34px rgba(15, 23, 42, 0.34);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.service-hub-card::before { content: ""; position: absolute; inset: 10px 22px auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(224,231,255,.75), transparent); opacity: .7; }
.service-hub-card--education { grid-area: education; }
.service-hub-card--investment { grid-area: investment; }
.service-hub-card--rpa { grid-area: rpa; }
.service-hub-card--finance { grid-area: finance; }
.service-hub-card--scraping { grid-area: scraping; }
.service-hub-card--api { grid-area: api; }
.service-hub-card--analytics { grid-area: analytics; }
.service-hub-card--ai { grid-area: ai; }

.service-hub-card__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(196,181,253,.42); border-radius: 15px; background: linear-gradient(145deg, rgba(99,102,241,.24), rgba(109,40,217,.16)); color: #c4b5fd; font-size: 1.06rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 18px rgba(99,102,241,.18); transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease; }
.service-hub-card__title { display: block; color: rgba(255,255,255,.98); font-size: 1.04rem; font-weight: 780; line-height: 1.12; white-space: nowrap; }
.service-hub-card__description { display: block; color: rgba(203,213,225,.78); font-size: .88rem; font-weight: 500; line-height: 1.38; max-width: 16ch; }
.service-hub-card:hover, .service-hub-card:focus-visible { transform: translateY(-4px); border-color: rgba(216,180,254,.58); box-shadow: 0 22px 48px rgba(0,0,0,.34), 0 0 26px rgba(124,58,237,.22), inset 0 1px 0 rgba(255,255,255,.16); }
.service-hub-card:hover .service-hub-card__icon, .service-hub-card:focus-visible .service-hub-card__icon { color: #f5f3ff; border-color: rgba(216,180,254,.62); background: rgba(124,58,237,.28); }
.service-hub-card:focus-visible, .services-hub-demo:focus-visible { outline: 2px solid rgba(216,180,254,.86); outline-offset: 4px; }

.services-hub-center { grid-area: demo; justify-self: center; display: grid; place-items: center; width: 220px; min-height: 170px; border-radius: 34px; }
.services-hub-center::before { content: ""; position: absolute; inset: -36px; z-index: -2; border-radius: 50%; background: radial-gradient(circle, rgba(125,211,252,.16), rgba(168,85,247,.14) 36%, transparent 68%); filter: blur(1px); }
.services-hub-core-network { position: absolute; inset: -10px; z-index: -1; overflow: visible; opacity: .9; filter: drop-shadow(0 0 15px rgba(99,102,241,.26)); transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease; }
.services-hub-core-network path, .services-hub-core-network circle { fill: none; stroke: rgba(196,181,253,.5); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.services-hub-core-network circle { fill: rgba(99,102,241,.28); stroke: rgba(216,180,254,.7); }
.services-hub-demo { display: inline-flex; align-items: center; justify-content: center; width: 182px; min-height: 56px; padding: 0 1.25rem; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(rgba(10,11,18,.97), rgba(10,11,18,.97)) padding-box, linear-gradient(135deg, rgba(125,211,252,.78), rgba(168,85,247,.9), rgba(99,102,241,.78)) border-box; box-shadow: 0 0 0 8px rgba(99,102,241,.08), 0 14px 34px rgba(67,56,202,.28); font-size: .96rem; font-weight: 760; letter-spacing: .01em; transition: transform 220ms ease, box-shadow 220ms ease; }
.services-hub-demo::before { content: ""; position: absolute; inset: -24px; z-index: -1; border-radius: 999px; background: radial-gradient(circle, rgba(168,85,247,.2), transparent 68%); pointer-events: none; }
.services-hub-demo:hover, .services-hub-demo:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 9px rgba(99,102,241,.1), 0 18px 38px rgba(124,58,237,.3); }

.services-hub:has(.service-hub-card:hover) .services-hub-core-network, .services-hub:has(.service-hub-card:focus-visible) .services-hub-core-network { opacity: 1; filter: drop-shadow(0 0 18px rgba(125,211,252,.32)) drop-shadow(0 0 28px rgba(168,85,247,.22)); transform: scale(1.025); }
.services-hub:has(.service-hub-card:hover) .services-hub-demo, .services-hub:has(.service-hub-card:focus-visible) .services-hub-demo { box-shadow: 0 0 0 10px rgba(99,102,241,.09), 0 18px 40px rgba(124,58,237,.32), 0 0 28px rgba(125,211,252,.16); }
.services-hub:has(.service-hub-card--education:hover) .services-hub-signal--education, .services-hub:has(.service-hub-card--education:focus-visible) .services-hub-signal--education,
.services-hub:has(.service-hub-card--investment:hover) .services-hub-signal--investment, .services-hub:has(.service-hub-card--investment:focus-visible) .services-hub-signal--investment,
.services-hub:has(.service-hub-card--rpa:hover) .services-hub-signal--rpa, .services-hub:has(.service-hub-card--rpa:focus-visible) .services-hub-signal--rpa,
.services-hub:has(.service-hub-card--finance:hover) .services-hub-signal--finance, .services-hub:has(.service-hub-card--finance:focus-visible) .services-hub-signal--finance,
.services-hub:has(.service-hub-card--scraping:hover) .services-hub-signal--scraping, .services-hub:has(.service-hub-card--scraping:focus-visible) .services-hub-signal--scraping,
.services-hub:has(.service-hub-card--api:hover) .services-hub-signal--api, .services-hub:has(.service-hub-card--api:focus-visible) .services-hub-signal--api,
.services-hub:has(.service-hub-card--analytics:hover) .services-hub-signal--analytics, .services-hub:has(.service-hub-card--analytics:focus-visible) .services-hub-signal--analytics,
.services-hub:has(.service-hub-card--ai:hover) .services-hub-signal--ai, .services-hub:has(.service-hub-card--ai:focus-visible) .services-hub-signal--ai { opacity: 1; animation: servicesHubSignal 1100ms ease-out forwards; }
.services-hub:has(.service-hub-card--education:hover) .services-hub-connector--education, .services-hub:has(.service-hub-card--education:focus-visible) .services-hub-connector--education,
.services-hub:has(.service-hub-card--investment:hover) .services-hub-connector--investment, .services-hub:has(.service-hub-card--investment:focus-visible) .services-hub-connector--investment,
.services-hub:has(.service-hub-card--rpa:hover) .services-hub-connector--rpa, .services-hub:has(.service-hub-card--rpa:focus-visible) .services-hub-connector--rpa,
.services-hub:has(.service-hub-card--finance:hover) .services-hub-connector--finance, .services-hub:has(.service-hub-card--finance:focus-visible) .services-hub-connector--finance,
.services-hub:has(.service-hub-card--scraping:hover) .services-hub-connector--scraping, .services-hub:has(.service-hub-card--scraping:focus-visible) .services-hub-connector--scraping,
.services-hub:has(.service-hub-card--api:hover) .services-hub-connector--api, .services-hub:has(.service-hub-card--api:focus-visible) .services-hub-connector--api,
.services-hub:has(.service-hub-card--analytics:hover) .services-hub-connector--analytics, .services-hub:has(.service-hub-card--analytics:focus-visible) .services-hub-connector--analytics,
.services-hub:has(.service-hub-card--ai:hover) .services-hub-connector--ai, .services-hub:has(.service-hub-card--ai:focus-visible) .services-hub-connector--ai { stroke: rgba(196,181,253,.68); stroke-width: 1.7; opacity: 1; }

@keyframes servicesHubSignal { 0% { stroke-dashoffset: 116; opacity: 0; } 12% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .18; } }

@media (max-width: 999px) {
  .services { padding: 4.75rem 0 3.4rem; }
  .section-header { margin-bottom: 2.7rem; }
  .services-hub { grid-template-columns: repeat(3, minmax(0, 188px)); gap: 32px 46px; width: min(100%, 700px); min-height: 560px; }
  .service-hub-card { width: auto; min-height: 154px; padding: 1rem .85rem; }
  .service-hub-card__description { font-size: .84rem; }
  .services-hub-center { width: 190px; min-height: 154px; }
  .services-hub-demo { width: 168px; }
  .services-hub__connectors { inset: 1% 0; opacity: .78; }
}

@media (max-width: 760px) {
  .services { padding: 4.5rem 0 3rem; }
  .services .container { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  .section-header { margin-bottom: 2.2rem; }
  .services-hub { grid-template-columns: 1fr; grid-template-areas: "demo" "education" "investment" "rpa" "finance" "scraping" "api" "analytics" "ai"; gap: 1rem; width: 100%; min-height: 0; }
  .services-hub__connectors { display: none; }
  .service-hub-card, .service-hub-card--api, .service-hub-card--ai { width: 100%; min-height: 108px; transform: none; display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: .9rem; row-gap: .25rem; align-items: center; justify-items: start; text-align: left; padding: 1rem; }
  .service-hub-card:hover, .service-hub-card:focus-visible, .service-hub-card--api:hover, .service-hub-card--api:focus-visible, .service-hub-card--ai:hover, .service-hub-card--ai:focus-visible { transform: translateY(-3px); }
  .service-hub-card__icon { grid-row: 1 / span 2; width: 46px; height: 46px; }
  .service-hub-card__description { max-width: none; }
  .services-hub-center { width: min(100%, 220px); min-height: 132px; margin: 0 auto .2rem; }
  .services-hub-core-network { opacity: .64; transform: scale(.92); }
  .services-hub-demo { width: min(100%, 190px); min-height: 54px; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .services-hub-signal { animation: none !important; stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* ================================================================
[LAYER 4] MODULE: LOGIN MODAL
================================================================
*/
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none; transition: all var(--ease-smooth);
}
.modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }




.modal-container {
  background: #14161c; border: 1px solid rgba(255,255,255,0.1);
  width: 100%; max-width: 420px; padding: 2.5rem;
  border-radius: var(--radius-lg); position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  transform: scale(0.95) translateY(10px); transition: transform var(--ease-smooth);
}
.modal-overlay.active .modal-container { transform: scale(1) translateY(0); }




.modal-close {
  position: absolute; top: 1rem; right: 1rem; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); border-radius: 50%; transition: background var(--ease-fast);
}
.modal-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.modal-header { text-align: center; margin-bottom: 2rem; }
.modal-header h3 { font-size: 1.75rem; margin-bottom: 0.5rem; }
.modal-header p { color: var(--text-muted); font-size: 0.9rem; }
.form-actions { margin-top: 1.5rem; }
.form-footer { margin-top: 1.5rem; text-align: center; font-size: 0.85rem; }
.link-sm { color: var(--text-muted); border-bottom: 1px dotted transparent; }
.link-sm:hover { color: var(--primary); border-color: var(--primary); }
}
@layer legacy {
/* ---- 05-components/contact-modal.css ---- */
.footer {
  border-top: 1px solid var(--border-light);
  padding: 2rem 0;
  margin-top: 4rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

@media (max-width: 968px) {
  .hero-container { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
  .hero-left { order: 1; display: flex; flex-direction: column; align-items: center; }
  .hero-right { order: 2; width: 100%; margin-top: 2rem; }
  .hero-terminal { height: 300px; }
  .nav-menu { display: none; }
  .hamburger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
  .hamburger .bar { width: 25px; height: 2px; background: #fff; border-radius: 2px; }
  .nav-menu.active {
    display: flex; flex-direction: column;
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--bg-surface); padding: 2rem;
    border-bottom: 1px solid var(--border-light);
    animation: slideDown 0.3s ease-out forwards;
  }
  .contact-wrapper { grid-template-columns: 1fr; gap: 3rem; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 1.5rem; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1); border-radius: 10px; border: 2px solid var(--bg-body);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

::selection { background: rgba(99, 102, 241, 0.3); color: #fff; }

@keyframes floatParticle {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100vh); opacity: 0; }
}

.blink-cursor::after {
  content: '▋'; color: var(--primary); margin-left: 2px;
  animation: cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.contact-section {
  padding: 4rem 0 6rem 0;
  position: relative;
  z-index: 1;
  isolation: auto;
  overflow: visible;
  background: transparent;
}

.contact-section::before,
.contact-section::after {
  content: none;
}

.contact-section > .container {
  position: relative;
  z-index: 1;
}

.contact-glow {
  display: none;
}

.contact-wrapper {
  display: grid; 
  grid-template-columns: 1fr 1.5fr; 
  gap: 4rem; 
  margin-top: 2rem; 
  align-items: start;
}

.contact-info { display: flex; flex-direction: column; gap: 2rem; }

.info-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, rgba(17, 18, 31, 0.99), rgba(12, 13, 22, 0.985));
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem; 
  border-radius: var(--radius-md);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.info-card h3,
.info-card p {
  position: relative;
  z-index: 1;
}
.info-card h3 { color: #fff; margin-bottom: 1rem; font-size: 1.25rem; }
.info-card p { color: rgba(229, 231, 235, 0.82); font-size: 0.95rem; line-height: 1.6; }

.contact-methods { display: flex; flex-direction: column; gap: 1.5rem; }
.method-item { display: flex; align-items: center; gap: 1rem; }
.icon-circle {
  width: 45px; 
  height: 45px; 
  background: rgba(99, 102, 241, 0.1); 
  color: var(--primary);
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  font-size: 1.1rem; 
  flex-shrink: 0;
}
.method-item span { display: block; font-size: 0.85rem; color: var(--text-muted); }
.method-item a, .method-item p { color: #fff; font-weight: 500; font-size: 1rem; }
.method-item a:hover { color: var(--primary); }

.contact-form {
  background: var(--bg-surface); 
  border: 1px solid var(--border-light);
  padding: 2.5rem; 
  border-radius: var(--radius-lg); 
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.form-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 1.5rem; 
}

.contact-form select {
  width: 100%;
  background: #181824;
  color: #fff;
  border: 1px solid var(--border-light);
  padding: 0.8rem 1rem 0.8rem 2.5rem;
  border-radius: var(--radius-md);
  appearance: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-form select option {
  background: #1c1c2b;
  color: #fff;
}

#btn-contact-submit.btn-block {
  width: 100%;
  padding: 0.9rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--primary) 0%, #818cf8 100%);
  color: #fff;
  border: none;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 12px rgba(99, 102, 241, 0.2);
  margin-top: 1rem;
}

#btn-contact-submit.btn-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
  filter: brightness(1.05);
}

#btn-contact-submit.btn-block:active {
  transform: translateY(1px);
}

#btn-contact-submit.btn-block i {
  transition: transform 0.3s ease;
}

#btn-contact-submit.btn-block:hover i {
  transform: translateX(5px) translateY(-5px) rotate(-10deg);
}

.service-select-wrapper {
  align-items: stretch;
}

.native-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.custom-select {
  position: relative;
  width: 100%;
}

.custom-select-trigger {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--ease-fast);
}

.custom-select-trigger:hover,
.custom-select.is-open .custom-select-trigger {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.05);
}

.custom-select-trigger:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.custom-select.has-error .custom-select-trigger {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
  background: rgba(239, 68, 68, 0.06);
}

.custom-select-value {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select:not(.has-value) .custom-select-value {
  color: rgba(255, 255, 255, 0.45);
}

.custom-select .custom-select-leading-icon,
.custom-select .custom-select-option-icon,
.custom-select .custom-select-chevron {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  line-height: 1;
  color: var(--text-muted);
  transform: none;
  pointer-events: none;
}

.custom-select .custom-select-leading-icon {
  font-size: 0.9rem;
}

.custom-select .custom-select-chevron {
  justify-self: end;
  font-size: 0.8rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.custom-select.is-open .custom-select-chevron {
  color: var(--primary);
  transform: rotate(180deg);
}

.custom-select-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 280px;
  padding: 0.45rem;
  margin: 0;
  list-style: none;
  background: rgba(18, 18, 30, 0.98);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(99, 102, 241, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  overflow-y: auto;
}

.custom-select.is-open .custom-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.custom-select-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 42px;
  padding: 0.65rem 2.25rem 0.65rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.custom-select .custom-select-option-icon {
  color: var(--primary);
  font-size: 0.9rem;
  opacity: 0.82;
}

.custom-select-option:hover,
.custom-select-option.is-focused,
.custom-select-option[aria-selected="true"] {
  background: rgba(99, 102, 241, 0.12);
  color: #fff;
}

.custom-select-option[aria-selected="true"]::after {
  position: absolute;
  right: 0.8rem;
  color: var(--primary);
  font-family: "Font Awesome 5 Free";
  font-size: 0.8rem;
  font-weight: 900;
  content: "\f00c";
}

@media (max-width: 576px) {
  .custom-select-menu {
    max-height: 240px;
  }

  .custom-select-option {
    min-height: 46px;
  }
}
}
@layer legacy {
/* ---- 05-components/footer.css ---- */
/* =========================================
   ULTRA COMPACT FOOTER (Minimum Yükseklik)
   ========================================= */


.footer {
    position: relative;
    z-index: 2;
    isolation: isolate;
    background: linear-gradient(180deg, #0c0e16 0%, #080a10 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-top: 5rem; /* Üstteki içerikle mesafe */
    padding: 1.75rem 0 0.9rem; /* İç boşluklar MİNİMUMA indirildi */
}


.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr; /* Sol sütunu biraz daralttık */
    column-gap: clamp(2rem, 5vw, 5rem);
    margin-bottom: 0.8rem; /* Alt çizgi ile mesafe kısaldı */
    align-items: start;
    padding: 0;
}


.footer-col {
    position: relative;
    min-height: 100%;
    padding: 0;
}


/* --- BAŞLIKLAR (Daha kompakt) --- */
.footer-col h4 {
    color: #fff;
    font-size: 0.9rem; /* Font küçüldü */
    margin-bottom: 0.5rem; /* Başlık altı boşluk azaldı */
    position: relative;
    display: inline-block;
    font-weight: 600;
}


/* Başlık Altı Çizgi */
.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: -4px; /* Çizgi başlığa yaklaştı */
    width: 20px; height: 2px;
    background: var(--primary);
    border-radius: 2px;
}


/* Açıklama Metni (Sol Sütun) */
.footer-desc {
    color: var(--text-muted);
    font-size: 0.8rem; /* Font küçüldü */
    line-height: 1.3;  /* Satır aralığı sıkılaştı */
    margin: 0.3rem 0 0.5rem 0; /* Marginler sıkılaştı */
    max-width: 260px;
}


/* --- 1. KOLON (SOL - LOGO) --- */
.footer-col:nth-child(1) {
    text-align: left;
    display: flex; flex-direction: column; align-items: flex-start;
}
.footer-col:nth-child(1) h4::after { left: 0; } 


/* Logo ayarı (Biraz küçültelim) */
.footer-col:nth-child(1) .logo-text { font-size: 1.1rem; }
.footer-col:nth-child(1) .logo-icon { font-size: 1rem; }




/* --- 2. KOLON (ORTA - YASAL - 2x2 GRID SIKIŞTIRILMIŞ) --- */
.footer-col:nth-child(2) {
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.footer-col:nth-child(2) h4::after {
    left: 50%; transform: translateX(-50%); 
}


.footer-col:nth-child(2) ul {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    column-gap: 1.5rem; /* Yan boşluk */
    row-gap: 0.2rem;    /* Satır boşluğu MİNİMUM */
    padding: 0; margin: 0;
    list-style: none;
}


.footer-col:nth-child(2) ul li {
    margin: 0;
    text-align: center;
    white-space: nowrap;
}




/* --- 3. KOLON (SAĞ - İLETİŞİM) --- */
.footer-col:nth-child(3) {
    text-align: right;
    display: flex; flex-direction: column; align-items: flex-end;
}
.footer-col:nth-child(3) h4::after {
    left: auto; right: 0; 
}




/* --- LİNKLER & YAZILAR (Küçük Punto) --- */
.footer-col ul li a {
    color: var(--text-muted);
    text-decoration: none;
    transition: 0.3s;
    font-size: 0.75rem; /* Link fontları küçüldü */
}
.footer-col ul li a:hover { color: var(--primary); }


/* İletişim Listesi */
.contact-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.75rem; /* İletişim fontu küçüldü */
    margin-bottom: 0.3rem; /* Satır arası sıkılaştı */
    flex-direction: row-reverse; 
}
.contact-list i { color: var(--primary); font-size: 0.8rem; }


/* Sosyal Medya (İkonlar ufaldı) */
.social-links { display: flex; gap: 6px; margin-top: 2px; }
.social-links a {
    width: 24px; height: 24px; /* İkon kutusu küçüldü */
    font-size: 0.75rem;       /* İkon simgesi küçüldü */
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: #fff;
    border: 1px solid var(--border-light);
    transition: 0.3s;
    text-decoration: none;
}
.social-links a:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}


/* Footer Alt (Telif) */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05); /* Çizgi daha silik */
    padding-top: 0.8rem; /* Üst boşluk azaldı */
    text-align: center;
    color: var(--text-muted);
    font-size: 0.7rem; /* Font küçüldü */
    opacity: 0.6;
}


/* Mobil */
@media (max-width: 768px) {
    .footer { margin-top: 3rem; padding: 2rem 0 1rem; }
    .footer-grid {
        grid-template-columns: 1fr; 
        row-gap: 1.25rem;
        text-align: center;
        margin-bottom: 1.5rem;
        padding: 0;
    }
    .footer-col {
        padding: 0;
    }
    .footer-col:first-child {
        padding-top: 0;
    }
    .footer-col:last-child {
        padding-bottom: 0;
    }
    .footer-col:nth-child(1),
    .footer-col:nth-child(3) {
        align-items: center;
        text-align: center;
    }
    .footer-col:nth-child(2),
    .footer-col:nth-child(3) {
        border-left: 0;
        border-top: 0;
        padding-left: 0;
    }
    .footer-col h4::after {
        left: 50% !important; right: auto !important; transform: translateX(-50%);
    }
    .contact-list li { flex-direction: row; justify-content: center; }
}
}
@layer legacy {
/* ---- 06-pages/home.css ---- */
/* =========================================
   ÇEREZ UYARI BANDI (Cookie Banner)
   ========================================= */

.cookie-banner {
    position: fixed;
    bottom: -300px;
    left: 20px;
    right: 20px;
    max-width: 450px;
    background: rgba(21, 21, 25, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    padding: 20px;
    z-index: 99999;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: bottom 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    font-family: 'Inter Tight', sans-serif;
}

.cookie-banner.show {
    bottom: 20px;
}

.cookie-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.cookie-icon {
    font-size: 1.5rem;
    color: var(--primary);
    margin-top: 3px;
}

.cookie-text h4 {
    color: #fff;
    font-size: 1rem;
    margin: 0 0 5px 0;
    font-weight: 600;
}

.cookie-text p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}

.cookie-text a {
    color: #fff;
    text-decoration: underline;
    transition: 0.3s;
}

.cookie-text a:hover {
    color: var(--primary);
}

.cookie-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-cookie-accept {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 24px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.btn-cookie-accept:hover {
    background: #5e50ee;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(115, 103, 240, 0.4);
}

.btn-cookie-close {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.3s;
}

.btn-cookie-close:hover {
    color: #fff;
    border-color: #fff;
}

@media (max-width: 576px) {
    .cookie-banner {
        left: 10px;
        right: 10px;
        bottom: -300px;
    }

    .cookie-banner.show {
        bottom: 10px;
    }
}


/* =========================================
   HİZMET KARTLARI - ANA ÇERÇEVE
   ========================================= */

.service-card {
    position: relative;
    background-color: #0d0d12; 
    border-radius: 12px;
    padding: 30px;
    z-index: 1; 
    display: flex;
    flex-direction: column;
    border: none; 
}

/* Ana Kart Çerçevesi */
.service-card::after {
    content: "";
    position: absolute;
    inset: -1px; 
    border-radius: 13px; 
    pointer-events: none; 
    z-index: 2; 
    
    background: 
        radial-gradient(circle at top left, var(--primary) 0%, transparent 25px),
        radial-gradient(circle at top right, var(--primary) 0%, transparent 25px),
        radial-gradient(circle at bottom left, var(--primary) 0%, transparent 25px),
        radial-gradient(circle at bottom right, var(--primary) 0%, transparent 25px),
        #1a1a24; 
        
    padding: 1px; 
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}


/* =========================================
   İKON KUTUSU - DÖNEN IŞIK EFEKTİ
   ========================================= */

.service-icon-box {
    position: relative;
    width: 54px; 
    height: 54px; 
    border-radius: 12px;
    background-color: #12121a; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    z-index: 5;
}

/* Dönen Işık Çerçevesi */
.service-icon-box::before {
    content: "";
    position: absolute;
    inset: -1.5px; 
    border-radius: 13.5px; 
    background: conic-gradient(from 0deg, transparent 60%, var(--primary) 100%);
    animation: spinLight 2s linear infinite; 
    padding: 1.5px;
    
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Dönüş Animasyonu */
@keyframes spinLight {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.service-icon-box i, 
.service-icon-box svg {
    color: var(--primary); 
    font-size: 1.5rem;
    z-index: 10;
}

.service-card h3 {
    margin-top: 5px;
    margin-bottom: 10px;
    color: #ffffff;
}

.service-card p {
    color: #a0a0b0;
    line-height: 1.6;
    margin-bottom: 20px;
}

.services--ecosystem .services-grid {
    display: none;
}

.home-page-shell {
    padding-bottom: clamp(3rem, 7vw, 5rem);
}

.home-page-shell ~ .footer {
    margin-top: 0;
}


/* =========================================
   HERO AI CORE TERMINAL
   ========================================= */

.hero-right--terminal-only {
    min-height: clamp(430px, 35vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.hero-right--terminal-only .hero-terminal.hero-terminal--primary {
    width: min(100%, 585px);
    height: clamp(340px, 30vw, 390px);
    max-width: 585px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 0 0 auto;
}

.hero-right--terminal-only .hero-terminal.hero-terminal--primary .term-header {
    flex: 0 0 auto;
}

.hero-right--terminal-only .hero-terminal.hero-terminal--primary .term-body {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    scrollbar-width: none;
    overscroll-behavior: contain;
}

.hero-right--terminal-only .hero-terminal.hero-terminal--primary .term-body::-webkit-scrollbar {
    display: none;
}

.hero-right--terminal-only .hero-terminal.hero-terminal--primary .term-body > div {
    max-width: 100%;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================
   YÖRÜNGE (ORBIT) EKOSİSTEMİ
   ========================================= */

.services--ecosystem .services-orbit-visual {
    width: min(100%, clamp(720px, 78vw, 1080px));
    min-height: clamp(560px, min(58vw, 78vh), 760px);
}

.services--ecosystem .services-orbit-demo-cta {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 18;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(148px, 17vw, 190px);
    min-height: clamp(43px, 4.7vw, 52px);
    padding: 0.7rem clamp(1.18rem, 2.5vw, 1.7rem);
    overflow: hidden;
    border: 1px solid rgba(216, 180, 254, 0.42);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.98);
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(49, 46, 129, 0.76)),
        radial-gradient(circle at 32% 18%, rgba(125, 211, 252, 0.34), transparent 42%);
    box-shadow:
        0 16px 36px rgba(15, 23, 42, 0.32),
        0 0 0 6px rgba(99, 102, 241, 0.06),
        0 0 22px rgba(168, 85, 247, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-family: var(--font-main);
    font-size: clamp(0.78rem, 0.92vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.018em;
    line-height: 1.12;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    text-shadow: 0 0 14px rgba(125, 211, 252, 0.34);
    transform: translate(-50%, -50%) translateZ(0);
    transition:
        border-color var(--ease-fast),
        box-shadow var(--ease-fast),
        transform var(--ease-fast),
        background var(--ease-fast);
}

.services--ecosystem .services-orbit-demo-cta::before {
    content: "";
    position: absolute;
    top: -45%;
    left: -55%;
    width: 38%;
    height: 190%;
    z-index: 0;
    background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 28%,
        rgba(255, 255, 255, 0.28) 48%,
        rgba(129, 140, 248, 0.18) 58%,
        transparent 76%
    );
    opacity: 0;
    transform: translateX(0) rotate(12deg);
    animation: orbitCtaBeam 3.4s ease-in-out infinite;
    pointer-events: none;
}

.services--ecosystem .services-orbit-demo-cta span {
    position: relative;
    z-index: 1;
}

@keyframes orbitCtaBeam {
    0% {
        opacity: 0;
        transform: translateX(0) rotate(12deg);
    }

    18% {
        opacity: 0.62;
    }

    54% {
        opacity: 0.74;
    }

    100% {
        opacity: 0;
        transform: translateX(430%) rotate(12deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .services--ecosystem .services-orbit-demo-cta::before {
        animation: none;
    }
}

.services--ecosystem .services-orbit-demo-cta:hover,
.services--ecosystem .services-orbit-demo-cta:focus-visible {
    border-color: rgba(125, 211, 252, 0.76);
    background:
        linear-gradient(135deg, rgba(30, 41, 59, 0.94), rgba(67, 56, 202, 0.82)),
        radial-gradient(circle at 32% 18%, rgba(125, 211, 252, 0.44), transparent 42%);
    box-shadow:
        0 18px 42px rgba(15, 23, 42, 0.38),
        0 0 0 7px rgba(125, 211, 252, 0.08),
        0 0 28px rgba(125, 211, 252, 0.28),
        0 0 34px rgba(168, 85, 247, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    transform: translate(-50%, -50%) translateY(-1px) translateZ(0);
}

.services--ecosystem .services-orbit-demo-cta:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.86);
    outline-offset: 5px;
}

/* Ring ölçüsünü JS tarafındaki radius hesabıyla hizalamak için eklendi */
.services--ecosystem .services-orbit-ring {
    aspect-ratio: 1 / 1;
    height: auto;
}

.services--ecosystem .services-orbit-node {
    /* Çizgileri kısalttık */
    --services-node-horizontal-length: 120px;
    --services-node-elbow-x: 34px;
    --services-node-elbow-y: -18px;
    --services-node-elbow-length: 38.47px;
    --services-node-elbow-angle: -27.9deg;
    
    /* Yazı hizalaması: 120 + 34 + 10px boşluk = 164px */
    --services-node-label-x: 164px;
    --services-node-label-y: -76px;
    
    --services-node-line-gradient: linear-gradient(
        90deg,
        rgba(216, 180, 254, 0.76),
        rgba(125, 211, 252, 0.22) 84%,
        transparent
    );
    --services-node-line-gradient-left: linear-gradient(
        90deg,
        transparent,
        rgba(125, 211, 252, 0.22) 16%,
        rgba(216, 180, 254, 0.76) 100%
    );

    /* Kapsayıcı küçüldü */
    width: 350px;
    height: 190px;
}

.services--ecosystem .services-orbit-node::before {
    content: none;
}

.services--ecosystem .services-orbit-node__connector {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    opacity: 0.76;
    pointer-events: none;
}

.services--ecosystem .services-orbit-node {
    overflow: visible;
}

.services--ecosystem .services-orbit-node__connector {
    overflow: visible;
    will-change: transform;
}

.services--ecosystem .services-orbit-node__connector-line,
.services--ecosystem .services-orbit-node__connector-elbow {
    min-width: 1px;
    backface-visibility: hidden;
}

.services--ecosystem .services-orbit-node__dot {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.services--ecosystem .services-orbit-node__connector {
    transform: translateZ(0);
}

.services--ecosystem .services-orbit-node__connector-line,
.services--ecosystem .services-orbit-node__connector-elbow {
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.16);
}

.services--ecosystem .services-orbit-node__connector-line,
.services--ecosystem .services-orbit-node__connector-elbow {
    position: absolute;
    display: block;
    height: 2px;
    pointer-events: none;
    border-radius: 999px;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.services--ecosystem .services-orbit-node__connector-line {
    left: calc(var(--services-node-elbow-x) - 3px);
    top: var(--services-node-elbow-y);
    width: calc(var(--services-node-horizontal-length) + 6px);
    background: var(--services-node-line-gradient);
    transform: translateY(-50%) translateZ(0);
    transform-origin: 0 50%;
}

.services--ecosystem .services-orbit-node__connector-elbow {
    left: 0;
    top: 0;
    width: calc(var(--services-node-elbow-length) + 4px);
    background: linear-gradient(90deg, rgba(216, 180, 254, 0.96), rgba(216, 180, 254, 0.68));
    transform: translateY(-50%) translateZ(0) rotate(var(--services-node-elbow-angle));
    transform-origin: 0 50%;
}

.services--ecosystem .services-orbit-node.is-left .services-orbit-node__connector-line {
    left: calc(-1 * (var(--services-node-horizontal-length) + var(--services-node-elbow-x)) - 3px);
    width: calc(var(--services-node-horizontal-length) + 6px);
    background: var(--services-node-line-gradient-left);
    transform: translateY(-50%) translateZ(0);
    transform-origin: 100% 50%;
}

.services--ecosystem .services-orbit-node.is-left .services-orbit-node__connector-elbow {
    left: 0;
    top: 0;
    transform: translateY(-50%) rotate(var(--services-node-elbow-angle));
    transform-origin: 0 50%;
}

.services--ecosystem .services-orbit-node__dot {
    z-index: 2;
    width: 7px;
    height: 7px;
    border: 0;
    background:
        radial-gradient(circle at 36% 32%, #fff 0 14%, rgba(255, 255, 255, 0.62) 15% 28%, transparent 29%),
        radial-gradient(circle, rgba(216, 180, 254, 0.98), rgba(139, 92, 246, 0.9) 52%, rgba(37, 99, 235, 0.58));
    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.22),
        0 0 22px rgba(168, 85, 247, 0.5),
        0 0 34px rgba(37, 99, 235, 0.2);
}

.services--ecosystem .services-orbit-node__dot::after {
    content: none;
}

.services--ecosystem .services-orbit-node__label {
    position: absolute;
    width: clamp(178px, 15vw, 210px);
    max-width: none;
    min-height: 84px;
    gap: 0.18rem;
    padding: 0;
    color: rgba(255, 255, 255, 0.94);
    text-align: left;
    text-shadow: 0 0 26px rgba(99, 102, 241, 0.22);
    transform: translate3d(var(--services-node-label-x), calc(-50% + var(--services-node-label-y)), 0);
}

.services--ecosystem .services-orbit-node__label::before,
.services--ecosystem .services-orbit-node__label::after {
    content: none;
}

.services--ecosystem .services-orbit-node__index {
    display: block;
    color: rgba(165, 180, 252, 0.68);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1;
}

.services--ecosystem .services-orbit-node__title {
    display: block;
    margin-top: 0.38rem;
    color: rgba(255, 255, 255, 0.98);
    font-size: clamp(0.84rem, 1vw, 1rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.services--ecosystem .services-orbit-node__copy {
    display: block;
    margin-top: 0.38rem;
    color: rgba(203, 213, 225, 0.76);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.018em;
    line-height: 1.25;
    white-space: nowrap;
}

.services--ecosystem .services-orbit-node.is-left .services-orbit-node__label {
    text-align: right;
    transform: translate3d(calc(-100% + var(--services-node-label-x)), calc(-50% + var(--services-node-label-y)), 0);
}

.services--ecosystem .services-orbit-node:hover,
.services--ecosystem .services-orbit-node:focus-visible,
.services--ecosystem .services-orbit-node.is-active {
    filter: none;
}

.services--ecosystem .services-orbit-node:hover .services-orbit-node__connector,
.services--ecosystem .services-orbit-node:focus-visible .services-orbit-node__connector,
.services--ecosystem .services-orbit-node.is-active .services-orbit-node__connector {
    opacity: 0.76;
}

.services--ecosystem .services-orbit-node:hover .services-orbit-node__connector-line,
.services--ecosystem .services-orbit-node:focus-visible .services-orbit-node__connector-line,
.services--ecosystem .services-orbit-node.is-active .services-orbit-node__connector-line {
    background: var(--services-node-line-gradient);
}

.services--ecosystem .services-orbit-node:hover .services-orbit-node__connector-elbow,
.services--ecosystem .services-orbit-node:focus-visible .services-orbit-node__connector-elbow,
.services--ecosystem .services-orbit-node.is-active .services-orbit-node__connector-elbow {
    background: linear-gradient(90deg, rgba(216, 180, 254, 0.94), rgba(216, 180, 254, 0.58));
}

.services--ecosystem .services-orbit-node.is-left:hover .services-orbit-node__connector-line,
.services--ecosystem .services-orbit-node.is-left:focus-visible .services-orbit-node__connector-line,
.services--ecosystem .services-orbit-node.is-left.is-active .services-orbit-node__connector-line {
    background: var(--services-node-line-gradient-left);
}

.services--ecosystem .services-orbit-node.is-left:hover .services-orbit-node__connector-elbow,
.services--ecosystem .services-orbit-node.is-left:focus-visible .services-orbit-node__connector-elbow,
.services--ecosystem .services-orbit-node.is-left.is-active .services-orbit-node__connector-elbow {
    background: linear-gradient(90deg, rgba(216, 180, 254, 0.94), rgba(216, 180, 254, 0.58));
}

.services--ecosystem .services-orbit-node:hover .services-orbit-node__dot,
.services--ecosystem .services-orbit-node:focus-visible .services-orbit-node__dot,
.services--ecosystem .services-orbit-node.is-active .services-orbit-node__dot {
    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.22),
        0 0 22px rgba(168, 85, 247, 0.5),
        0 0 34px rgba(37, 99, 235, 0.2);
}

@media (max-width: 980px) {
    .hero-right--terminal-only {
        min-height: 390px;
    }

    .hero-right--terminal-only .hero-terminal.hero-terminal--primary {
        height: 310px;
    }

    .services--ecosystem .services-orbit-visual {
        min-height: clamp(600px, min(84vw, 76vh), 760px);
    }

    .services--ecosystem .services-orbit-node {
        --services-node-horizontal-length: 80px;
        --services-node-elbow-x: 24px;
        --services-node-label-x: 114px; 
        
        width: 250px;
        height: 164px;
    }

    .services--ecosystem .services-orbit-node__label {
        width: 168px;
    }

    .services--ecosystem .services-orbit-node__copy {
        font-size: 0.66rem;
    }
}

@media (max-width: 576px) {
    .hero-right--terminal-only {
        min-height: 300px;
    }

    .hero-right--terminal-only .hero-terminal.hero-terminal--primary {
        height: 240px;
    }

    .services--ecosystem .services-orbit-visual {
        min-height: clamp(500px, 118vw, 560px);
    }

    .services--ecosystem .services-orbit-demo-cta {
        min-width: 136px;
        min-height: 40px;
        padding: 0.62rem 1rem;
        font-size: 0.72rem;
        letter-spacing: 0.012em;
    }

    .services--ecosystem .services-orbit-node {
        --services-node-horizontal-length: 40px;
        --services-node-elbow-x: 16px;
        --services-node-elbow-y: -10px;
        --services-node-elbow-length: 20.59px;
        --services-node-elbow-angle: -29.1deg;
        
        --services-node-label-x: 62px;
        width: 180px;
        height: 112px;
    }

    .services--ecosystem .services-orbit-node__label {
        width: 108px;
        min-height: 72px;
    }

    .services--ecosystem .services-orbit-node__index {
        font-size: 0.48rem;
        letter-spacing: 0.16em;
    }

    .services--ecosystem .services-orbit-node__title {
        margin-top: 0.26rem;
        font-size: 0.64rem;
        letter-spacing: 0.04em;
    }

    .services--ecosystem .services-orbit-node__copy {
        margin-top: 0.25rem;
        font-size: 0.52rem;
        line-height: 1.16;
        white-space: normal;
    }
}
}

@layer foundation {
/* ---- 01-foundation/typography.css ---- */
/* ================================================================
   FOUNDATION — TYPOGRAPHY
   Display and headings use the display face; body uses the sans.
   Sizes come from the fluid token scale; nothing is sized ad hoc.
   ================================================================ */
h1, h2, h3, h4, .t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--color-fg-primary);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.t-display { font-size: var(--text-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); font-weight: var(--weight-bold); }
h1, .t-h1 { font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2, .t-h2 { font-size: var(--text-h2); line-height: var(--leading-snug); letter-spacing: var(--tracking-heading); }
h3, .t-h3 { font-size: var(--text-h3); line-height: var(--leading-snug); letter-spacing: var(--tracking-heading); }
h4 { font-size: var(--text-body-lg); line-height: var(--leading-snug); font-weight: var(--weight-semibold); }

p { max-width: var(--container-prose); }
.t-lead { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); color: var(--color-fg-secondary); }
.t-body { font-size: var(--text-body); line-height: var(--leading-normal); }
.t-small { font-size: var(--text-small); line-height: var(--leading-normal); color: var(--color-fg-secondary); }
.t-caption { font-size: var(--text-caption); line-height: var(--leading-normal); color: var(--color-fg-tertiary); }

/* Technical label: monospace, small caps tracking, used for kickers and data tags */
.t-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-tertiary);
}
.t-label--signal { color: var(--color-signal); }
.t-label--accent { color: var(--color-accent); }

/* Accent word inside a heading: solid amber, no gradient text */
.t-accent { color: var(--color-accent); }

/* Prose block for long-form pages */
.prose { max-width: var(--container-prose); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-10); }
.prose h3 { margin-top: var(--space-8); }
.prose p, .prose li { color: var(--color-fg-secondary); line-height: var(--leading-relaxed); }
.prose strong { color: var(--color-fg-primary); font-weight: var(--weight-semibold); }
.prose a { color: var(--color-fg-primary); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 0.2em; }
.prose a:hover { text-decoration-color: var(--color-accent); }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose ol { list-style: decimal; padding-left: 1.25em; }
code, .t-mono { font-family: var(--font-mono); font-size: 0.92em; }
}
@layer foundation {
/* ---- 01-foundation/layout.css ---- */
/* ================================================================
   FOUNDATION — LAYOUT
   One container system, one section rhythm, layout primitives.
   Breakpoints (rem): 30 (480) · 48 (768) · 64 (1024) · 80 (1280) · 90 (1440)
   ================================================================ */
.container,
.l-container {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.l-container--wide { max-width: var(--container-xl); }
.l-container--narrow { max-width: var(--container-md); }
.l-container--prose { max-width: calc(var(--container-prose) + 2 * var(--gutter)); }

/* Page frame: the old frame drew its own gradient and capped width; now it is only a positioning root */
.page-frame { max-width: none; margin: 0; background-image: none; position: relative; }

/* Section rhythm */
.l-section { padding-block: var(--section-y); }
.l-section--tight { padding-block: calc(var(--section-y) * 0.6); }
.l-section--flush-top { padding-top: 0; }
.l-section + .l-section { border-top: 1px solid var(--color-border-subtle); }

/* Section header: kicker + heading + lead, left-aligned by default */
.l-section-head { max-width: var(--container-md); margin-bottom: var(--space-12); }
.l-section-head > * + * { margin-top: var(--space-4); }
.l-section-head .t-label { margin-bottom: var(--space-2); }
.l-section-head--center { margin-inline: auto; text-align: center; }
.l-section-head--center p { margin-inline: auto; }

/* Stack / cluster / grid primitives */
.l-stack > * + * { margin-top: var(--space-6); }
.l-stack--sm > * + * { margin-top: var(--space-3); }
.l-stack--lg > * + * { margin-top: var(--space-10); }
.l-cluster { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }
.l-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.l-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.l-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

/* Two-column split that stays a real two-column composition until tablet */
.l-split { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 64rem) {
  .l-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); }
  .l-split--even { grid-template-columns: 1fr 1fr; }
}

/* Header offset for fixed/sticky header */
.l-header-offset { padding-top: var(--header-height); }

/* Hairline separators */
.l-rule { border: 0; border-top: 1px solid var(--color-border-subtle); }
.l-rule--strong { border-top-color: var(--color-border-strong); }
}
@layer foundation {
/* ---- 01-foundation/surfaces.css ---- */
/* ================================================================
   FOUNDATION — SURFACES
   Depth comes from hairlines and one inner highlight, not from
   glow, blur or stacked shadows. Cards exist only to group or act.
   ================================================================ */
.s-surface {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}
.s-surface--elevated {
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-raised);
}
.s-surface--inset {
  background: var(--color-bg-inset);
  border-color: var(--color-border-subtle);
}
.s-surface--interactive {
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.s-surface--interactive:hover { border-color: var(--color-border-strong); background: var(--color-bg-elevated); }

.s-pad { padding: var(--space-6); }
.s-pad--lg { padding: var(--space-8); }
@media (min-width: 64rem) { .s-pad--lg { padding: var(--space-10); } }

/* Highlighted content: an amber left rule, no box */
.s-highlight { padding-left: var(--space-4); border-left: 2px solid var(--color-accent); }

/* Technical / code surface */
.s-code {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-secondary);
  background: var(--color-bg-inset);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
}
.s-code__bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-fg-tertiary);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Status dot: the amber "signal" indicator, paired with text (never color alone) */
.s-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-round); background: var(--color-accent); vertical-align: middle; }
.s-dot--signal { background: var(--color-signal); }
.s-dot--positive { background: var(--color-positive); }

/* Tag / chip: rectangular, small radius, not a pill */
.s-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.3rem 0.6rem;
  font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.04em;
  color: var(--color-fg-secondary);
  background: var(--color-bg-inset);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}
.s-tag--accent { color: var(--color-accent); border-color: var(--color-border-accent); background: var(--color-accent-soft); }
}
@layer foundation {
/* ---- 01-foundation/actions.css ---- */
/* ================================================================
   FOUNDATION — ACTIONS (buttons, links)
   Class names stay compatible with existing markup (.btn, .btn-primary,
   .btn-secondary, .btn-outline, .btn-sm, .btn-block).
   ================================================================ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-fg-primary);
  --btn-border: var(--color-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;               /* 44px touch target */
  padding: 0 var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.005em;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: none;
  text-shadow: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn i, .btn svg { width: 1em; height: 1em; flex: none; }

.btn-primary {
  --btn-bg: var(--color-cta);
  --btn-fg: var(--color-cta-fg);
  --btn-border: var(--color-cta);
  box-shadow: 0 0 0 1px rgba(238, 241, 246, 0.08), 0 10px 30px -12px rgba(238, 241, 246, 0.35);
}
.btn-primary:hover { --btn-bg: var(--color-cta-hover); --btn-border: var(--color-cta-hover); transform: none; }
.btn-primary:active { --btn-bg: var(--color-cta-active); }
.btn-primary:focus-visible { box-shadow: var(--focus-ring); }

.btn-secondary,
.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--color-fg-primary);
  --btn-border: var(--color-border-strong);
}
.btn-secondary:hover, .btn-outline:hover { --btn-border: var(--color-fg-tertiary); --btn-bg: rgba(243, 245, 248, 0.04); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-fg-secondary);
  --btn-border: transparent;
}
.btn-ghost:hover { --btn-fg: var(--color-fg-primary); --btn-bg: rgba(243, 245, 248, 0.05); }

.btn-sm { min-height: 2.5rem; padding: 0 var(--space-4); font-size: var(--text-small); }
.btn-lg { min-height: 3.25rem; padding: 0 var(--space-6); font-size: var(--text-body); }
.btn-block { width: 100%; }

/* Text action with arrow affordance */
.link-action {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2.75rem;
  font-weight: var(--weight-semibold); font-size: var(--text-small);
  color: var(--color-fg-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.link-action::after { content: "→"; transition: transform var(--duration-fast) var(--ease-out); }
.link-action:hover { color: var(--color-accent); }
.link-action:hover::after { transform: translateX(3px); }
.link-action:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Inline link inside body text */
.link-inline {
  color: var(--color-fg-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duration-fast) var(--ease-out);
}
.link-inline:hover { text-decoration-color: var(--color-accent); }
.link-inline:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }

/* Generic focus policy for anything focusable that has no component style */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.btn:focus-visible, .link-action:focus-visible, .link-inline:focus-visible { outline: none; }
}
@layer foundation {
/* ---- 01-foundation/header.css ---- */
/* ================================================================
   FOUNDATION — HEADER / NAVIGATION SHELL
   Visual shell only; the full information architecture is the next
   phase. Works with the existing markup classes (.header, .navbar,
   .nav-container, .logo, .nav-menu, .nav-item, .nav-link,
   .nav-login-btn, .hamburger, .dropdown-menu) on every page.
   ================================================================ */
.header {
  position: fixed; inset-inline: 0; top: 0; z-index: 1000;
  height: var(--header-height);
  padding: 0;
  background: var(--color-bg-overlay);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: none;
  transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.header.scrolled { background: rgba(7, 10, 16, 0.9); border-bottom-color: var(--color-border-strong); box-shadow: none; }
/* On the stage the header is part of the field: transparent, no line, until the page scrolls */
.header--stage:not(.scrolled) { background: linear-gradient(to bottom, rgba(7, 10, 16, 0.85), rgba(7, 10, 16, 0)); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.header--stage .nav-container { height: calc(var(--header-height) + 0.5rem); }

.nav-container {
  height: var(--header-height);
  max-width: var(--container-xl);
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
}

/* Wordmark */
.logo a {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 2.75rem;
  color: var(--color-fg-primary);
  border-radius: var(--radius-sm);
}
.logo-lockup { display: block; height: 1.875rem; width: auto; flex: none; }   /* canonical lockup: images/brand/teknoify-logo.svg (996 × 216) */
.logo-icon { color: var(--color-accent); margin-right: 0; font-size: 1.1rem; }   /* legacy icon fallback on old pages */
.logo-text { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--color-fg-primary); }
html.type-b { --font-display: 'Host Grotesk', 'Inter Tight', system-ui, sans-serif; }   /* review-only: ?type=b */

/* Primary navigation */
.nav-menu { display: flex; align-items: center; gap: var(--space-1); }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 2.5rem; padding: 0 var(--space-3);
  font-size: var(--text-nav); font-weight: var(--weight-medium);
  color: var(--color-fg-secondary);
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.nav-link:hover { color: var(--color-fg-primary); background: rgba(243, 245, 248, 0.05); }
.nav-link[aria-current="page"], .nav-link.is-active { color: var(--color-fg-primary); }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -0.35rem;
  height: 2px; background: var(--color-accent); border-radius: 1px;
}
.nav-link i { font-size: 0.65em; opacity: 0.7; }

/* Dropdown (interim: hover on desktop; the next phase replaces this with a disclosure button) */
.dropdown-menu {
  position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 16rem;
  padding: var(--space-2);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
}
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu a {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 2.5rem; padding: 0 var(--space-3);
  font-size: var(--text-small); color: var(--color-fg-secondary);
  border-radius: var(--radius-sm);
}
.dropdown-menu a:hover { color: var(--color-fg-primary); background: rgba(243, 245, 248, 0.05); }
.dropdown-menu a i { width: 1.1em; color: var(--color-fg-tertiary); }
/* the entry of the page being viewed (stamped by scripts/shell/sync-shell.mjs) */
.dropdown-menu a[aria-current="page"] { color: var(--color-fg-primary); background: rgba(243, 245, 248, 0.05); }
.dropdown-menu a[aria-current="page"] i { color: var(--color-accent); }

/* Actions cluster: sign-in (ghost) + start (primary) */
.nav-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-3); }
.nav-login-btn { margin-left: var(--space-2); }
.nav-login-btn .btn,
.nav-login-btn .btn:hover { position: static; overflow: visible; }
.nav-login-btn .btn::before, .nav-login-btn .btn::after { content: none; }

/* Hamburger: a real button on new markup; still styled when it is the legacy div */
.hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; padding: 0 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.hamburger .bar { display: block; width: 100%; height: 2px; background: var(--color-fg-primary); border-radius: 2px; transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast); }
.hamburger.active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active .bar:nth-child(2) { opacity: 0; }
.hamburger.active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile / tablet: menu becomes a sheet under the header */
@media (max-width: 63.99rem) {
  .nav-menu { display: none; }
  .hamburger { display: flex; }
  .nav-menu.active {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1);
    position: absolute; top: var(--header-height); left: 0; right: 0;
    max-height: calc(100vh - var(--header-height)); overflow-y: auto;
    padding: var(--space-4) var(--gutter) var(--space-6);
    background: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-overlay);
    animation: nav-sheet-in var(--duration-base) var(--ease-out) both;
  }
  .nav-menu.active .nav-item { width: 100%; }
  .nav-menu.active .nav-link { width: 100%; min-height: 3rem; font-size: var(--text-body); }
  /* Inline the dropdown so every destination is reachable on touch */
  .nav-menu.active .dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 var(--space-2) var(--space-4);
    background: transparent; border: 0; box-shadow: none;
  }
  .nav-menu.active .nav-actions, .nav-menu.active .nav-login-btn { margin: var(--space-3) 0 0; width: 100%; }
  .nav-menu.active .nav-actions { flex-direction: column; align-items: stretch; }
  .nav-menu.active .nav-login-btn .btn, .nav-menu.active .nav-actions .btn { width: 100%; min-height: 3rem; }
}
@keyframes nav-sheet-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Skip link */
.skip-link {
  position: absolute; left: var(--gutter); top: -100%;
  z-index: 2000; padding: var(--space-3) var(--space-4);
  background: var(--color-accent); color: var(--color-accent-fg);
  font-weight: var(--weight-semibold); border-radius: var(--radius-md);
}
.skip-link:focus { top: var(--space-3); outline: none; box-shadow: var(--focus-ring); }
.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; }
}
@layer foundation {
/* ---- 01-foundation/motion.css ---- */
/* ================================================================
   FOUNDATION — MOTION
   Durations: fast 150ms (hover/focus), base 220ms (state), slow 320ms
   (entrances). Entrances run once, translate ≤ 8px, never loop.
   Everything here is disabled by the reduced-motion rule in base.css.
   ================================================================ */
.m-reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.m-reveal.is-visible { opacity: 1; transform: none; }
.m-reveal--delay-1 { transition-delay: 60ms; }
.m-reveal--delay-2 { transition-delay: 120ms; }
.m-reveal--delay-3 { transition-delay: 180ms; }

/* Blinking cursor for technical surfaces: a step, not a fade */
.blink-cursor::after { content: '▋'; color: var(--color-accent); margin-left: 2px; animation: m-cursor 1s step-end infinite; }
@keyframes m-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .m-reveal { opacity: 1; transform: none; transition: none; }
  .blink-cursor::after { animation: none; }
}
}
@layer foundation {
/* ---- 01-foundation/experience.css ---- */
/* ================================================================
   FOUNDATION — EXPERIENCE CHROME (homepage v2)
   The fixed environmental field, its veil, the scroll progress bar,
   the optional custom cursor and the shared "window" surface used by
   the hero and the product journey. Behaviour: js/experience/*.
   ================================================================ */
.field { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.field-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 95% at 50% 42%, rgba(7, 10, 16, 0) 34%, rgba(7, 10, 16, 0.92) 100%); }
.home-v2 main, .home-v2 .footer { position: relative; z-index: 2; }
.home-v2 body, .home-v2 { background: var(--color-bg-canvas); }
.home-v2 .home-background-stage { position: relative; }
.home-v2 #stars-container, .home-v2 .home-background-surface, .home-v2 .hero-surface { display: none; }

.scroll-progress { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 2px; background: var(--color-accent); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* custom cursor: opt-in after the first pointer movement on fine pointers with motion */
/* the custom cursor must sit above every fixed chrome layer (header 1000, mobile menu 2000) or it vanishes behind the scrolled header */
.cursor, .cursor__ring { position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none; border-radius: 50%; display: none; }
.cursor { width: 7px; height: 7px; background: var(--color-accent); }
.cursor__ring { width: 34px; height: 34px; border: 1px solid rgba(143, 227, 255, 0.55); transition: width var(--duration-slow), height var(--duration-slow), border-color var(--duration-slow), background var(--duration-slow), opacity var(--duration-slow); }
.cursor__ring.is-hover { width: 54px; height: 54px; background: rgba(143, 227, 255, 0.1); border-color: rgba(143, 227, 255, 0.9); }
.cursor.is-out, .cursor__ring.is-out { opacity: 0; }
html.has-cursor .cursor, html.has-cursor .cursor__ring { display: block; }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }

/* the window surface (hero library, journey device) */
.win { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: rgba(14, 18, 26, 0.74); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85); }
.win__bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--color-border-subtle); }
.win__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); }
.win__dot--a { background: rgba(143, 227, 255, 0.7); }
.win__title { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--color-fg-tertiary); pointer-events: none; }

/* the legacy shell clipped overflow, which breaks sticky sections; the field replaces its painted backgrounds */
.home-v2 .home-page-shell { overflow: visible; }
.home-v2 .home-page-shell::before, .home-v2 .home-page-shell::after { display: none; }
/* the legacy contact form is wider than small viewports; keep it from widening the document until its own redesign */
.home-v2 .contact-section--isolated { overflow-x: hidden; }
}
@layer foundation {
/* ---- 01-foundation/hero.css ---- */
/* ================================================================
   FOUNDATION — HERO v2
   Full-viewport opening: staged headline entrance (lines rise from
   a clipped box), copy and CTAs follow, the library window fades and
   settles in, a scroll cue; the grid parallaxes and fades on leaving.
   ================================================================ */
.hero-v2 { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--header-height) + clamp(2.5rem, 4vh, 4rem)) var(--gutter) clamp(4rem, 10vh, 7rem); }
.hero-v2__grid { width: 100%; max-width: var(--container-xl); margin: 0 auto; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; will-change: transform, opacity; }
.hero-v2__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0; }
.hero-v2__line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero-v2__line > span { display: block; transform: translateY(112%); transition: transform 1.15s var(--ease-out); }
.hero-v2__line:nth-child(2) > span { transition-delay: 0.09s; }
.hero-v2__line:nth-child(3) > span { transition-delay: 0.18s; }
.hero-v2__line em { font-style: normal; color: #9c8cee; background-image: linear-gradient(92deg, #f4f2ff 0%, #ddd5fb 28%, #b2a4f2 56%, #8371e2 82%, #5945d2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) { .hero-v2__line em { background-image: none; -webkit-text-fill-color: currentColor; } }
.hero-v2__sub { margin: var(--space-6) 0 0; max-width: 52ch; font-size: var(--text-body-lg); line-height: var(--leading-relaxed); color: var(--color-fg-secondary); opacity: 0; transform: translateY(16px); transition: opacity 0.9s 0.55s, transform 0.9s 0.55s var(--ease-out); }
.hero-v2__actions { margin-top: var(--space-8); display: flex; gap: var(--space-3); flex-wrap: wrap; opacity: 0; transform: translateY(16px); transition: opacity 0.9s 0.7s, transform 0.9s 0.7s var(--ease-out); }
.is-ready .hero-v2__sub, .is-ready .hero-v2__actions { opacity: 1; transform: none; }
.is-ready .hero-v2__line > span { transform: none; }
.hero-v2__hint { position: absolute; left: var(--gutter); bottom: 34px; display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-fg-tertiary); opacity: 0; transition: opacity 1s 1.3s; }
.is-ready .hero-v2__hint { opacity: 1; }
.hero-v2__hint i { position: relative; display: block; width: 1px; height: 46px; background: var(--color-border-subtle); overflow: hidden; }
.hero-v2__hint i::after { content: ""; position: absolute; inset: 0; background: var(--color-accent); transform: translateY(-100%); animation: hero-hint 2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes hero-hint { to { transform: translateY(100%); } }

/* the library window */
.hero-v2__window { --tx: 0deg; --ty: 0deg; min-height: 400px; transform: perspective(1200px) rotateX(var(--tx)) rotateY(var(--ty)); opacity: 0; scale: 0.96; transition: opacity 1s 0.35s, scale 1.3s 0.35s var(--ease-out), transform 0.3s ease-out; }
.is-ready .hero-v2__window { opacity: 1; scale: 1; }
.lib { flex: 1; padding: 18px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.lib__search { display: flex; align-items: flex-start; gap: 10px; min-height: 42px; padding: 11px 14px; line-height: 1.45; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 13.5px; color: var(--color-fg-primary); background: rgba(255, 255, 255, 0.02); }
.lib__search svg { color: var(--color-fg-tertiary); flex: 0 0 auto; margin-top: 2px; }
.lib__query { flex: 1; min-height: 1em; min-width: 0; overflow-wrap: anywhere; }
.lib__caret { display: inline-block; width: 7px; height: 1.05em; margin-left: 1px; background: var(--color-accent); vertical-align: text-bottom; animation: lib-blink 1s steps(2) infinite; }
@keyframes lib-blink { 50% { opacity: 0; } }
.lib__meta { font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-tertiary); letter-spacing: 0.04em; min-height: 1.4em; }
.lib__rows { display: grid; gap: 8px; }
.lib__row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.02); opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.lib__row.is-on { opacity: 1; transform: none; }
.lib__icon { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, rgba(143, 227, 255, 0.55), rgba(143, 227, 255, 0.15)); }
.lib__row b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.lib__row small { display: block; color: var(--color-fg-tertiary); font-size: 12px; line-height: 1.4; margin-top: 3px; }
.lib__kind { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); border: 1px solid var(--color-border-accent); border-radius: var(--radius-sm); padding: 3px 7px; white-space: nowrap; }

@media (max-width: 56.25rem) {
  .hero-v2 { padding-top: calc(var(--header-height) + 2.5rem); padding-bottom: 5.5rem; }
  .hero-v2__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-v2__window { min-height: 320px; }
  .hero-v2__hint { bottom: 26px; }
  .lib__row small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .hero-v2__hint i::after, html:not(.force-motion) .lib__caret { animation: none; }
  html:not(.force-motion) .hero-v2__line > span, html:not(.force-motion) .hero-v2__sub, html:not(.force-motion) .hero-v2__actions, html:not(.force-motion) .hero-v2__window, html:not(.force-motion) .hero-v2__hint { transition: none; transform: none; opacity: 1; scale: 1; }
  html:not(.force-motion) .lib__row { opacity: 1; transform: none; transition: none; }
}

/* shared: ion label and legacy section headers lifted onto the scale */
.t-label--ion { color: var(--color-accent); }
.section-header { text-align: left; max-width: var(--container-md); margin: 0 0 var(--space-12); }
.section-header h2 { font-size: var(--text-h2); margin-bottom: var(--space-3); }
.section-header p { font-size: var(--text-body-lg); color: var(--color-fg-secondary); }
.contact-section--isolated { border-top: 1px solid var(--color-border-subtle); }
.contact-section--isolated .section-header .t-label { margin-bottom: var(--space-4); }
}
@layer foundation {
/* ---- 01-foundation/manifesto.css ---- */
/* ================================================================
   FOUNDATION — MANIFESTO
   A 240vh section with a sticky viewport; scroll progress reveals the
   statement word by word (js/experience/manifesto.js) while the field
   behind it moves from chaos toward order.
   ================================================================ */
.manifesto { position: relative; height: 240vh; }
.manifesto__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding: 0 var(--gutter); }
.manifesto__text { max-width: 68rem; margin: 0 auto; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 1rem + 3vw, 3.3rem); line-height: 1.18; letter-spacing: -0.025em; color: var(--color-fg-primary); text-wrap: pretty; }
.manifesto__w { display: inline-block; opacity: 0.12; will-change: opacity; }
.manifesto__text strong { font-weight: 500; color: var(--color-action); }
@media (max-width: 56.25rem) { .manifesto { height: 200vh; } }
@media (prefers-reduced-motion: reduce) { html:not(.force-motion) .manifesto { height: auto; padding: var(--section-y) 0; } html:not(.force-motion) .manifesto__pin { position: static; height: auto; } html:not(.force-motion) .manifesto__w { opacity: 1 !important; } }
}
@layer foundation {
/* ---- 01-foundation/journey.css ---- */
/* ================================================================
   FOUNDATION — THE PRODUCT JOURNEY (pinned "how it works")
   A 440vh section with a sticky viewport: four tabs whose bars fill
   with scroll progress and one device window whose panel changes per
   step. Panels are the Product Discover flow as it exists on the
   platform; a scripted cursor demonstrates each step and every
   control also answers real input. js/experience/journey.js
   ================================================================ */
.journey { position: relative; height: 440vh; }
.journey__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--header-height) + 1.5rem) var(--gutter) 2.25rem; }
.journey__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1rem + 2vw, 2.5rem); line-height: 1.06; letter-spacing: -0.03em; text-align: center; margin: 0 0 var(--space-6); }
.journey__wrap { width: 100%; max-width: 72.5rem; }
.journey-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; background: rgba(14, 18, 26, 0.66); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.journey-tab { position: relative; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 15px 20px 17px; border: 0; border-right: 1px solid var(--color-border-subtle); background: none; color: var(--color-fg-tertiary); font: inherit; cursor: pointer; transition: background var(--duration-slow), color var(--duration-slow); }
.journey-tab:last-child { border-right: 0; }
.journey-tab:hover { color: var(--color-fg-primary); }
.journey-tab__name { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 9px; }
.journey-tab__name small { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--color-accent); }
.journey-tab__desc { font-size: 13px; line-height: 1.4; color: var(--color-fg-tertiary); }
.journey-tab.is-active { background: var(--color-accent-soft); color: var(--color-fg-primary); }
.journey-tab__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(0); }
.journey-stage { position: relative; margin-top: var(--space-4); height: min(56vh, 600px); min-height: 360px; }
.device__body { position: relative; flex: 1; overflow: hidden; }
.journey-panel { position: absolute; inset: 0; padding: 22px 26px; opacity: 0; visibility: hidden; transition: opacity 0.45s, visibility 0.45s; }
.journey-panel.is-active { opacity: 1; visibility: visible; }
.journey-panel[hidden] { display: block; }
/* scripted cursor */
.fcur { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; will-change: transform; }
.fcur.is-on { opacity: 1; }
.fcur svg { display: block; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.65)); transition: transform 0.12s; }
.fcur.is-click svg { transform: scale(0.85); }
.fcur::after { content: ""; position: absolute; left: -11px; top: -11px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--color-accent); opacity: 0; }
.fcur.is-click::after { animation: fcur-ring 0.5s ease-out; }
@keyframes fcur-ring { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.7); } }
.is-press { transform: scale(0.97) !important; }
/* step 1 · keşfet */
.p0__top { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.p0__search { flex: 1 1 200px; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); color: var(--color-fg-tertiary); font-size: 13.5px; background: rgba(255, 255, 255, 0.02); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-border-subtle); color: var(--color-fg-tertiary); background: none; white-space: nowrap; cursor: pointer; transition: background var(--duration-slow), border-color var(--duration-slow), color var(--duration-slow), transform 0.15s; }
.chip:hover { border-color: var(--color-border-accent); }
.chip.is-on { background: var(--color-accent-soft); border-color: var(--color-border-accent); color: var(--color-fg-primary); }
.p0__meta { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-tertiary); }
.tiles { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 14px; align-content: center; min-height: 120px; padding: 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.02); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: opacity 0.45s, transform 0.45s var(--ease-out), border-color var(--duration-slow), background var(--duration-slow), box-shadow var(--duration-slow); }
.tile i, .ic { display: block; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, rgba(143, 227, 255, 0.55), rgba(143, 227, 255, 0.15)); }
.tile i { grid-row: span 3; }
.tile b { font-weight: 600; font-size: 15px; line-height: 1.3; }
.tile small { color: var(--color-fg-tertiary); font-size: 12px; }
.tile p { font-size: 13px; color: var(--color-fg-tertiary); margin: 8px 0 0; line-height: 1.45; }
.tile.is-hidden { opacity: 0; transform: scale(0.95); pointer-events: none; }
.tile:hover, .tile.is-hover { border-color: var(--color-border-accent); }
.tile.is-sel { border-color: var(--color-border-accent); background: var(--color-accent-soft); box-shadow: 0 0 0 3px rgba(143, 227, 255, 0.12); }
/* step 2 · seç */
.p1 { display: grid; grid-template-columns: 1.25fr 0.85fr; gap: 26px; height: 100%; }
.detail__head { display: flex; align-items: center; gap: 14px; }
.detail__head .ic { width: 44px; height: 44px; border-radius: 12px; }
.detail__head b { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.2; }
.detail__head small { color: var(--color-fg-tertiary); font-size: 12.5px; }
.p1__main > p { margin: 14px 0 0; color: var(--color-fg-secondary); font-size: 15px; max-width: 44ch; }
.p1__list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.p1__list li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; }
.p1__list li i { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-action-soft); display: grid; place-items: center; }
.p1__list li i::after { content: ""; width: 8px; height: 5px; border-left: 1.6px solid var(--color-action); border-bottom: 1.6px solid var(--color-action); transform: translateY(-1px) rotate(-45deg); }
.sample { margin-top: 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: 12px 14px; background: rgba(255, 255, 255, 0.02); font-size: 13px; color: var(--color-fg-tertiary); line-height: 1.5; }
.sample__bar { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--color-accent); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--color-border-subtle); }
.sample__bar span { color: var(--color-fg-tertiary); }
.sample p { margin: 0; } .sample p + p { margin-top: 4px; }
.sample b { color: var(--color-fg-primary); font-weight: 600; }
.plan { display: flex; flex-direction: column; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: 20px; background: rgba(255, 255, 255, 0.02); }
.plan__title { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; }
.plan__sub { font-size: 13px; color: var(--color-fg-tertiary); margin-top: 2px; }
.perm { margin-top: 16px; border-top: 1px solid var(--color-border-subtle); padding-top: 12px; font-size: 14px; }
.perm > span { display: block; color: var(--color-fg-tertiary); font-size: 12.5px; margin-bottom: 4px; }
.perm ul { list-style: none; margin: 0; padding: 0; }
.perm li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--color-border-subtle); }
.perm em { font-style: normal; color: var(--color-fg-tertiary); }
.plan .btn { margin-top: auto; width: 100%; }
.btn.is-hover { transform: translateY(-2px); }
.btn.is-done { background: var(--color-action); color: #0b0e14; border-color: transparent; }
.toast { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 12px); opacity: 0; padding: 10px 16px; border-radius: var(--radius-md); background: rgba(20, 25, 36, 0.96); border: 1px solid rgba(240, 198, 94, 0.35); font-size: 13.5px; white-space: nowrap; transition: opacity 0.4s, transform 0.4s var(--ease-out); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* step 3 · bağla */
.hub { position: relative; width: 100%; height: 100%; }
.hub svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub line { stroke: rgba(143, 227, 255, 0.28); stroke-width: 1; stroke-dasharray: 4 5; transition: stroke 0.4s, stroke-width 0.4s; }
.hub line.is-on { stroke: var(--color-accent); stroke-dasharray: none; stroke-width: 1.5; }
.node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.node__card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: rgba(14, 18, 26, 0.94); font-size: 14px; font-weight: 500; white-space: nowrap; transition: border-color 0.3s, box-shadow 0.3s; }
.node__card i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-fg-tertiary); transition: background 0.3s, box-shadow 0.3s; }
.node__btn { font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--color-border-accent); color: var(--color-accent); background: rgba(14, 18, 26, 0.9); cursor: pointer; transition: border-color 0.3s, color 0.3s, transform 0.15s; }
.node.is-on .node__card { border-color: var(--color-border-accent); }
.node.is-on .node__card i { background: var(--color-action); box-shadow: 0 0 0 4px var(--color-action-soft); }
.node.is-on .node__btn { border-color: rgba(240, 198, 94, 0.4); color: var(--color-action); }
.node--core .node__card { padding: 14px 20px; border-color: var(--color-border-accent); background: linear-gradient(0deg, var(--color-accent-soft), var(--color-accent-soft)), #0e121a; font-family: var(--font-display); font-weight: 500; font-size: 16px; }
.node--core .node__card i { background: var(--color-accent); }
.node--store { left: 17%; top: 22%; } .node--market { left: 83%; top: 22%; } .node--catalog { left: 14%; top: 74%; } .node--workspace { left: 86%; top: 74%; } .node--chat { left: 50%; top: 88%; } .node--core { left: 50%; top: 50%; }
/* step 4 · çalıştır */
.p3 { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 22px 24px; height: 100%; align-content: start; }
.p3__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--color-fg-tertiary); padding: 6px 12px; border: 1px solid var(--color-border-subtle); border-radius: 999px; transition: color 0.3s, border-color 0.3s; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-fg-tertiary); }
.status.is-on { color: var(--color-action); border-color: rgba(240, 198, 94, 0.35); }
.status.is-on i { background: var(--color-action); box-shadow: 0 0 0 0 rgba(240, 198, 94, 0.6); animation: lib-pulse 1.8s infinite; }
.log { font-size: 14px; list-style: none; margin: 0; padding: 0; }
.log li { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--color-border-subtle); opacity: 0; transform: translateX(-8px); transition: opacity 0.5s, transform 0.5s var(--ease-out); }
.log li.is-on { opacity: 1; transform: none; }
.log time { color: var(--color-fg-tertiary); flex: 0 0 42px; font-family: var(--font-mono); font-size: 12.5px; }
.results { display: grid; gap: 12px; align-content: start; }
.result { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: 14px 18px; background: rgba(255, 255, 255, 0.02); }
.result b { display: block; font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.result span { display: block; font-size: 13px; line-height: 1.3; margin-top: 2px; color: var(--color-fg-tertiary); }

@media (max-width: 56.25rem) {
  .journey { height: 400vh; }
  .journey__pin { padding: calc(var(--header-height) + 1rem) var(--gutter) 1.5rem; }
  .journey__title { font-size: 1.4rem; margin-bottom: var(--space-4); }
  .journey-tab { padding: 10px 6px 12px; align-items: center; text-align: center; }
  .journey-tab__name { font-size: 13.5px; gap: 5px; }
  .journey-tab__desc { display: none; }
  .journey-stage { height: 54vh; min-height: 330px; margin-top: 12px; }
  .journey-panel { padding: 14px; }
  .p0__search { display: none; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
  .tile { padding: 10px 12px; min-height: 0; }
  .tile p { display: none; }
  .p1 { grid-template-columns: 1fr; gap: 14px; }
  .p1__list, .perm, .sample { display: none; }
  .plan { padding: 14px; gap: 12px; }
  .node__card { padding: 8px 10px; font-size: 12.5px; gap: 8px; }
  .node__btn { font-size: 11.5px; padding: 4px 10px; }
  .node--store { left: 22%; top: 14%; } .node--market { left: 78%; top: 14%; } .node--catalog { left: 22%; top: 86%; } .node--workspace { left: 78%; top: 86%; } .node--chat { display: none; }
  .p3 { grid-template-columns: 1fr; gap: 12px; }
  .log li:nth-child(6) { display: none; }
  .results { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .result { padding: 10px 12px; }
  .result b { font-size: 1.3rem; }
  .result span { font-size: 11.5px; }
}
@media (max-height: 820px) { .sample { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .status.is-on i { animation: none; }
  html:not(.force-motion) .fcur { display: none; }
}
}
@layer foundation {
/* ---- 01-foundation/audience.css ---- */
/* ================================================================
   FOUNDATION — AUDIENCE (Kimin için)
   Two self-contained surfaces inside the container; the hovered /
   focused / chosen one grows (1.22) while the other settles (0.92)
   and its capability rows unfold. Surfaces carry their own padding
   and a local reading zone, so nothing can clip at the edges.
   Below 64rem both lists are open. js/experience/audience.js
   ================================================================ */
.audience { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 14vh var(--gutter) 16vh; }
.audience::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 60% at 50% 50%, rgba(7, 10, 16, 0.78), rgba(7, 10, 16, 0.3) 70%, transparent 100%); }
.audience__wrap { width: 100%; max-width: var(--container-xl); margin: 0 auto; }
.audience__head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-8); margin-bottom: var(--space-10); }
.audience__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3rem); line-height: 1.06; letter-spacing: -0.03em; margin: var(--space-3) 0 0; max-width: 18ch; }
.audience__hint { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-fg-tertiary); white-space: nowrap; padding-bottom: 0.4rem; }
.audience__split { display: flex; gap: var(--space-5); align-items: stretch; }
/* while a half is open the other settles to its own content height instead of stretching to match */
.audience[data-open]:not([data-open=""]) .audience__split { align-items: flex-start; }

/* the surface */
.half { position: relative; flex: 1 1 0; min-width: 0; padding: var(--space-8) var(--space-10) var(--space-8); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); background: linear-gradient(180deg, rgba(27, 33, 46, 0.9), rgba(17, 21, 30, 0.84)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 60px -40px rgba(0, 0, 0, 0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: flex 0.7s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), background-color 0.5s var(--ease-out); }
.half::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--half-line, var(--color-border-strong)), transparent); opacity: 0.8; }
.half::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 50% at 18% 0%, var(--half-glow, transparent), transparent 70%); opacity: 0; transition: opacity 0.5s var(--ease-out); }
.half--business { --half-line: rgba(143, 227, 255, 0.55); --half-glow: rgba(143, 227, 255, 0.16); }
.half--individual { --half-line: rgba(240, 198, 94, 0.55); --half-glow: rgba(240, 198, 94, 0.14); }
.half:hover, .half.is-open { border-color: var(--color-border-strong); }
.half.is-open { flex-grow: 1.22; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--half-line); }
.half.is-open::after { opacity: 1; }
.half.is-recede { flex-grow: 0.92; }

/* hierarchy */
.half__toggle { display: block; width: 100%; padding: 0; margin: 0 0 var(--space-4); background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-sm); }
.half__toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; }
.half__toggle h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); letter-spacing: -0.02em; margin: 0; }
.half__lead { color: var(--color-fg-secondary); max-width: 52ch; margin: 0; line-height: var(--leading-relaxed); }
.half__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 0; }
.half__tags span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-fg-tertiary); padding: 0.25rem 0.55rem; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.02); }

/* capability rows */
.half__list { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--ease-out); }
.half__list > ul { overflow: hidden; list-style: none; margin: 0; padding: 0; }
.half.is-open .half__list { grid-template-rows: 1fr; }
.half__list li { display: grid; grid-template-columns: 1.4rem minmax(0, 11rem) 1fr; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--color-border-subtle); font-size: var(--text-small); line-height: 1.35; }
.half__list li:first-child { margin-top: var(--space-6); }
.half__list li::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--half-line, var(--color-border-strong)); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04); margin-left: 0.3rem; }
.half__list b { font-weight: var(--weight-semibold); color: var(--color-fg-primary); }
.half__list b a { color: inherit; text-decoration: none; }
.half__list b a:hover, .half__list b a:focus-visible { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.half__list span { color: var(--color-fg-secondary); }
.half__list em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-fg-tertiary); margin-top: 0.15rem; }

@media (max-width: 63.99rem) {
  .audience { min-height: 0; padding: var(--space-16) var(--gutter); }
  .audience__head { flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-8); }
  .audience__hint { display: none; }
  .audience__split { flex-direction: column; gap: var(--space-4); }
  .half, .half.is-open, .half.is-recede { flex: 1 1 auto; padding: var(--space-6) var(--space-6) var(--space-5); }
  .half.is-open { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset; }
  .half::after { opacity: 1; }
  .half__list { grid-template-rows: 1fr !important; }
  .half__list li { grid-template-columns: 1.2rem 1fr; }
  .half__list li span { grid-column: 2; }
  .half__toggle { cursor: default; }
}
@media (hover: none) { .audience__hint { display: none; } }
@media (prefers-reduced-motion: reduce) { html:not(.force-motion) .half, html:not(.force-motion) .half__list, html:not(.force-motion) .half::after { transition: none; } }
}
@layer foundation {
/* ---- 01-foundation/catalog.css ---- */
/* ================================================================
   FOUNDATION — CAPABILITY CATALOG
   Wide: a 340vh section pins its viewport; native vertical scroll
   translates the card track horizontally while the rail stays put.
   Narrow: a native horizontal scroll-snap track. Every card carries
   a living vignette that animates only while in view.
   js/experience/catalog.js
   ================================================================ */
.catalog { position: relative; height: 340vh; }
.catalog__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; padding: calc(var(--header-height) + 1.5rem) 0 2.5rem; }
.catalog__grid { width: 100%; display: grid; grid-template-columns: minmax(17.5rem, 25rem) minmax(0, 1fr); gap: 3.5rem; padding-left: max(var(--gutter), calc((100vw - var(--container-xl)) / 2 + var(--gutter))); height: auto; }
.catalog__left { display: flex; flex-direction: column; min-width: 0; }
.catalog__label { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-5); }
.catalog__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3rem); line-height: 1.06; letter-spacing: -0.03em; margin: 0; }
.catalog__lead { margin: var(--space-3) 0 0; font-size: var(--text-body-lg); line-height: 1.35; max-width: 28ch; color: var(--color-fg-primary); }
.catalog__text { margin: var(--space-2) 0 0; color: var(--color-fg-secondary); font-size: var(--text-small); line-height: 1.5; max-width: 44ch; }
.catalog__index { margin-top: auto; padding-top: var(--space-4); display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.catalog__index button { font: inherit; font-size: var(--text-small); color: var(--color-fg-tertiary); background: none; border: 0; padding: 0.15rem 0; line-height: 1.35; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-3); transition: color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), padding var(--duration-base) var(--ease-out); }
.catalog__index button::before { content: attr(data-n); font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.06em; color: var(--color-fg-tertiary); }
.catalog__index button:hover { color: var(--color-fg-primary); }
.catalog__index button.is-active { color: var(--color-fg-primary); background: var(--color-accent-soft); padding: 0.25rem 0.7rem; margin: 0.1rem 0; }
.catalog__index button.is-active::before { color: var(--color-accent); }
.catalog__status { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.08em; color: var(--color-fg-tertiary); }
.catalog__link { margin-top: var(--space-2); }
/* The track wrapper clips only horizontally. Its box starts exactly at the cards' top edge, so a vertical clip
   sliced the active card's 4px lift (rounded corners, top hairline) and the cards' shadows; the pinned stage
   above still guards the vertical extent. overflow: hidden stays as the fallback for browsers without clip. */
.catalog__right { position: relative; overflow: hidden; overflow-x: clip; overflow-y: visible; min-width: 0; }
.catalog__track { display: flex; align-items: stretch; gap: 20px; height: 100%; padding-right: max(var(--gutter), calc((100vw - var(--container-xl)) / 2 + var(--gutter))); will-change: transform; }

/* ---- card ---- */
.kcard { --accent: var(--color-accent); --accent-soft: var(--color-accent-soft); --accent-line: var(--color-border-accent); position: relative; flex: 0 0 24rem; display: flex; flex-direction: column; padding: 18px 18px 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl, 20px); overflow: hidden; background: rgba(14, 18, 26, 0.74); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.85); transition: transform 0.5s var(--ease-out), border-color 0.4s; }
.kcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); }
.kcard::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: radial-gradient(70% 60% at 50% 0%, var(--accent-soft), transparent 72%); pointer-events: none; }
.kcard > * { position: relative; z-index: 1; }
.kcard:hover, .kcard.is-active { border-color: var(--accent-line); }
.kcard.is-active { transform: translateY(-4px); }
.kcard--oto { --accent: var(--color-action); --accent-soft: var(--color-action-soft); --accent-line: rgba(240, 198, 94, 0.45); }
.kcard--arac { --accent: #a9b8ff; --accent-soft: rgba(169, 184, 255, 0.12); --accent-line: rgba(169, 184, 255, 0.45); }
.kcard--end { background: linear-gradient(180deg, var(--color-accent-soft), rgba(143, 227, 255, 0.04)), rgba(14, 18, 26, 0.74); border-color: var(--color-border-accent); }
.kcard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kcard__type { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); padding: 4px 9px; border-radius: var(--radius-sm); border: 1px solid var(--accent-line); background: var(--accent-soft); }
.kcard__n { font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-tertiary); letter-spacing: 0.06em; }
.kcard__body { margin-top: 14px; }
.kcard__body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.kcard__body p { margin: 6px 0 0; font-size: var(--text-small); line-height: 1.45; color: var(--color-fg-secondary); }
.kcard__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--color-border-subtle); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--color-fg-tertiary); }
.kcard__foot .btn { height: 34px; padding: 0 14px; font-size: 13px; }

/* ---- living vignettes ---- */
.vg { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 7px; padding: 12px 14px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border-subtle); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)), radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: auto, 14px 14px; font-size: 12.5px; line-height: 1.35; color: var(--color-fg-primary); overflow: hidden; }
.vg__strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border-subtle); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-fg-tertiary); }
.vg__strip i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-soft); animation: vgPulse 1.8s infinite; }
@keyframes vgPulse { 70% { box-shadow: 0 0 0 6px transparent; } }
.vg__strip b { font-weight: 500; color: var(--color-fg-secondary); }
.vg .mute { color: var(--color-fg-tertiary); }
.vchip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; padding: 4px 9px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-subtle); color: var(--color-fg-secondary); background: rgba(14, 18, 26, 0.5); line-height: 1.3; max-width: 100%; }
.vchip--ok { color: var(--color-action); border-color: rgba(240, 198, 94, 0.4); }
.vchip--ac { color: var(--accent); border-color: var(--accent-line); }
.tick { width: 12px; height: 12px; border-radius: 50%; background: var(--color-action-soft); display: grid; place-items: center; flex: 0 0 12px; }
.tick::after { content: ""; width: 5px; height: 3px; border-left: 1.4px solid var(--color-action); border-bottom: 1.4px solid var(--color-action); transform: translateY(-1px) rotate(-45deg); }
.sk { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.sk--ac { background: var(--accent); opacity: 0.8; }
.vrow { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
.vrow .vchip { align-self: auto; }
.vrow .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-fg-secondary); }
.vline { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 12px; }
.vline .mono { font-family: var(--font-mono); font-size: 11px; color: var(--color-fg-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vline .st { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--color-fg-tertiary); white-space: nowrap; }
.vline > .sk { flex: 0 0 auto; }
.vline .st--ok { color: var(--color-action); }
.vline .st--ac { color: var(--accent); }
/* sentence-length rows (Product Discover, Sentiment Analysis): the main text may wrap to two lines instead of truncating */
.vline--wrap { align-items: flex-start; }
.vline--wrap .mono { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.vline--wrap .st { padding-top: 1px; }
.vbar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.vbar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; }
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vgrid__label { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--color-fg-tertiary); }
.vcell { height: 20px; border-radius: 6px; border: 1px solid var(--color-border-subtle); background: rgba(255, 255, 255, 0.03); display: flex; align-items: center; padding: 0 7px; }
.vcell .sk { width: 100%; height: 4px; }
.vcell--ac { border-color: var(--accent-line); background: var(--accent-soft); }
/* pipeline */
.pipe { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; }
.pnode { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--color-fg-tertiary); text-align: center; width: 66px; }
.pnode i { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--color-border-subtle); background: rgba(255, 255, 255, 0.04); display: grid; place-items: center; }
.pnode i::after { content: ""; width: 10px; height: 12px; border: 1.3px solid var(--color-fg-tertiary); border-radius: 2px; }
.pnode--end i { border-color: var(--accent-line); background: var(--accent-soft); }
.pnode--end i::after { border-color: var(--accent); }
.pline { position: relative; flex: 1; height: 1px; background: var(--color-border-subtle); margin-top: 15px; }
.tok { position: absolute; top: -6px; left: 0; width: 9px; height: 11px; border-radius: 2px; background: var(--accent); opacity: 0; animation: tok 3s linear infinite; }
.tok.t2 { animation-delay: 1s; } .tok.t3 { animation-delay: 2s; } .tok.t4 { animation-delay: 0.5s; } .tok.t5 { animation-delay: 1.9s; }
@keyframes tok { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 9px); opacity: 0; } }
/* sparkline / bars */
.spark { display: flex; align-items: flex-end; gap: 4px; height: 40px; padding-top: 4px; border-bottom: 1px solid var(--color-border-subtle); }
.spark i { flex: 1; background: var(--accent); opacity: 0.35; border-radius: 2px 2px 0 0; height: var(--h); transform-origin: bottom; }
.spark i.is-hi { opacity: 1; }
.spark--line { position: relative; }
.spark--line::before { content: ""; position: absolute; left: 0; right: 0; top: 30%; border-top: 1px dashed rgba(240, 198, 94, 0.55); }
/* end card mosaic */
.mosaic { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; align-content: center; margin: 4px 0; }
.mosaic i { display: block; aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--color-border-subtle); background: var(--color-accent-soft); animation: mos 5s infinite; }
.mosaic i:nth-child(3n) { animation-delay: 0.7s; } .mosaic i:nth-child(4n) { animation-delay: 1.4s; } .mosaic i:nth-child(5n) { animation-delay: 2.1s; } .mosaic i:nth-child(7n) { animation-delay: 2.9s; } .mosaic i:nth-child(11n) { animation-delay: 3.6s; }
@keyframes mos { 0%, 100% { background: rgba(143, 227, 255, 0.05); border-color: var(--color-border-subtle); } 50% { background: rgba(143, 227, 255, 0.24); border-color: rgba(143, 227, 255, 0.55); } }

/* ---- vignette timeline: an 11 s loop; s1…s5 enter in order, h2…h4 leave when the next state arrives ---- */
@keyframes vg1 { 0%, 4% { opacity: 0; transform: translateY(6px); } 11%, 86% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } }
@keyframes vg2 { 0%, 20% { opacity: 0; transform: translateY(6px); } 27%, 86% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } }
@keyframes vg3 { 0%, 38% { opacity: 0; transform: translateY(6px); } 45%, 86% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } }
@keyframes vg4 { 0%, 56% { opacity: 0; transform: translateY(6px); } 63%, 86% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } }
@keyframes vg5 { 0%, 70% { opacity: 0; transform: translateY(6px); } 77%, 86% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } }
@keyframes vgH2 { 0%, 25% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes vgH3 { 0%, 43% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes vgH4 { 0%, 61% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes vgBar { 0%, 22% { width: 0; } 60%, 86% { width: 100%; } 93%, 100% { width: 100%; } }
@keyframes vgGrow { 0%, 40% { transform: scaleY(0.15); } 62%, 86% { transform: none; } 93%, 100% { transform: scaleY(0.15); } }
.s1 { animation: vg1 11s infinite; } .s2 { animation: vg2 11s infinite; } .s3 { animation: vg3 11s infinite; } .s4 { animation: vg4 11s infinite; } .s5 { animation: vg5 11s infinite; }
.h2 { animation: vgH2 11s infinite; } .h3 { animation: vgH3 11s infinite; } .h4 { animation: vgH4 11s infinite; }
.vbar i { animation: vgBar 11s infinite; }
.spark i { animation: vgGrow 11s infinite; }
.kcard:not(.is-in) .vg *, .catalog.is-hidden-tab .vg *, .catalog.is-hidden-tab .mosaic i { animation-play-state: paused; }

/* ---- narrow: touch-native track ---- */
@media (max-width: 63.99rem) {
  .catalog { height: auto; }
  .catalog__pin { position: static; display: block; height: auto; overflow: visible; padding: var(--space-16) 0 var(--space-12); }
  .catalog__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding: 0; }
  .catalog__left { padding: 0 var(--gutter); }
  .catalog__index, .catalog__status { display: none; }
  .catalog__right { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .catalog__right::-webkit-scrollbar { display: none; }
  .catalog__track { transform: none !important; padding: 0 var(--gutter) 10px; height: auto; }
  .kcard { flex: 0 0 min(19rem, 82vw); padding: 16px; scroll-snap-align: start; }
  .kcard.is-active { transform: none; }
  .vg { padding: 10px 12px 12px; }
  .kcard__body h3 { font-size: 1.25rem; }
  .catalog__cue { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) var(--gutter) 0; font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-fg-tertiary); }
  .catalog__cue i { width: 2rem; height: 1px; background: linear-gradient(to right, var(--color-accent), transparent); }
}
@media (min-width: 64rem) { .catalog__cue { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .vg *, html:not(.force-motion) .mosaic i, html:not(.force-motion) .vg__strip i { animation: none !important; opacity: 1 !important; transform: none !important; }
  html:not(.force-motion) .vbar i { width: 100% !important; }
  html:not(.force-motion) .h2, html:not(.force-motion) .h3, html:not(.force-motion) .h4, html:not(.force-motion) .tok { display: none !important; }
  html:not(.force-motion) .kcard { transition: none; }
}
}
@layer foundation {
/* ---- 01-foundation/closing.css ---- */
/* ================================================================
   FOUNDATION — CLOSING (Neden Teknoify · Güven · Son çağrı · Footer)
   The homepage resolves after the catalog: motion drops to one
   authored reveal per block, layout returns to a document rhythm,
   the field settles (order → pulse). js/experience/closing.js only
   toggles .is-in on [data-reveal]; everything else is CSS.
   ================================================================ */
.home-v2 .home-page-shell { padding-bottom: 0; }

/* ---- shared reveal (one authored entrance, no loops) ---- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.12s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.24s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.36s; }

/* ================================================================
   1. WHY — the exploration resolves into four principles
   ================================================================ */
.why { position: relative; padding: 10vh var(--gutter) 14vh; }
.why__wrap { max-width: var(--container-xl); margin: 0 auto; }
/* the resolve line: the catalog's horizontal energy settles into one horizontal rule */
.why__resolve { display: flex; align-items: center; gap: var(--space-4); margin-bottom: clamp(4rem, 8vh, 6rem); }
.why__resolve i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--color-accent), var(--color-border-strong) 40%, var(--color-border-subtle)); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease-out); }
.why__resolve span { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-fg-tertiary); white-space: nowrap; opacity: 0; transition: opacity 0.8s var(--ease-out) 0.6s; }
.why__resolve.is-in i { transform: none; }
.why__resolve.is-in span { opacity: 1; }
.why__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.why__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 1.1rem + 2.9vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; margin: var(--space-4) 0 0; max-width: 14ch; }
.why__title em { font-style: normal; color: var(--color-fg-secondary); }
.why__intro { margin: var(--space-5) 0 0; color: var(--color-fg-secondary); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); max-width: 36ch; }
.why__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border-strong); }
.why__item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-8) 0; border-bottom: 1px solid var(--color-border-subtle); }
.why__n { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.1em; color: var(--color-accent); padding-top: 0.5rem; }
.why__item h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.why__item p { margin: var(--space-3) 0 0; color: var(--color-fg-secondary); line-height: var(--leading-relaxed); max-width: 52ch; }
.why__item--lead { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.why__item--lead h3 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); }
.why__item--lead p { font-size: var(--text-body-lg); color: var(--color-fg-primary); max-width: 40ch; }

/* ================================================================
   2. TRUST — not a black box
   ================================================================ */
.trust { position: relative; padding: 4vh var(--gutter) 14vh; }
.trust::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 50% 45%, rgba(7, 10, 16, 0.7), transparent 100%); }
.trust__wrap { max-width: var(--container-xl); margin: 0 auto; }
.trust__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.trust__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 1.1rem + 2.9vw, 3.4rem); line-height: 1.04; letter-spacing: -0.03em; margin: var(--space-4) 0 0; }
.trust__lead { margin: 0; color: var(--color-fg-secondary); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); max-width: 44ch; padding-bottom: 0.35em; }
.trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; background: var(--color-border-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.trust__item { position: relative; margin: 0; padding: var(--space-8) var(--space-8) var(--space-10); background: rgba(14, 18, 26, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.trust__item::before { content: ""; position: absolute; left: var(--space-8); top: 0; width: 2.5rem; height: 2px; background: var(--color-accent); opacity: 0.85; }
.trust__item dt { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem); letter-spacing: -0.015em; margin: var(--space-3) 0 0; }
.trust__item dt small { display: block; font-family: var(--font-mono); font-size: var(--text-caption); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-fg-tertiary); margin-bottom: var(--space-3); }
.trust__item dd { margin: var(--space-3) 0 0; color: var(--color-fg-secondary); line-height: var(--leading-relaxed); max-width: 46ch; }
.trust__item dd b { font-weight: var(--weight-medium, 500); color: var(--color-fg-primary); }

/* ================================================================
   3. FINAL CTA — the conclusion
   ================================================================ */
.cta { position: relative; min-height: 78vh; display: flex; align-items: center; padding: 12vh var(--gutter) 14vh; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 45% at 30% 55%, rgba(143, 227, 255, 0.07), transparent 100%); }
.cta__wrap { width: 100%; max-width: var(--container-xl); margin: 0 auto; }
.cta__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.75rem, 1.2rem + 7vw, 7rem); line-height: 0.98; letter-spacing: -0.045em; margin: var(--space-5) 0 0; }
.cta__line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.cta__line > span { display: block; transform: translateY(112%); transition: transform 1.1s var(--ease-out); }
.cta__line--accent > span { color: var(--color-accent); transition-delay: 0.1s; }
.cta.is-in .cta__line > span { transform: none; }
.cta__lead { margin: var(--space-8) 0 0; color: var(--color-fg-secondary); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: var(--leading-relaxed); max-width: 46ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-10); }
.cta__actions .btn-lg { min-height: 3.5rem; padding: 0 var(--space-8); font-size: var(--text-body-lg); }
.cta__actions .btn-primary { box-shadow: 0 0 0 0 rgba(240, 198, 94, 0.35); transition: box-shadow 0.6s var(--ease-out), background-color var(--duration-base) var(--ease-out); }
.cta.is-in .cta__actions .btn-primary { box-shadow: 0 0 0 6px rgba(240, 198, 94, 0), 0 18px 50px -20px rgba(240, 198, 94, 0.55); }
.cta__meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: var(--space-10) 0 0; font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.06em; color: var(--color-fg-tertiary); }
.cta__meta a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-border-strong); padding-bottom: 2px; }
.cta__meta a:hover, .cta__meta a:focus-visible { color: var(--color-fg-primary); border-color: var(--color-accent); }

/* ================================================================
   4. FOOTER — the canonical identity, real destinations only
   ================================================================ */
.site-footer { position: relative; z-index: 2; border-top: 1px solid var(--color-border-subtle); background: linear-gradient(180deg, rgba(10, 13, 20, 0.86), rgba(7, 10, 16, 0.97)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: clamp(2.5rem, 5vh, 3.5rem) var(--gutter) var(--space-6); }
.site-footer__wrap { max-width: var(--container-xl); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.site-footer__brand .logo-lockup { display: block; height: 1.75rem; width: auto; }
.site-footer__brand p { margin: var(--space-4) 0 0; color: var(--color-fg-secondary); font-size: var(--text-small); line-height: var(--leading-relaxed); max-width: 30ch; }
.site-footer__group h3 { font-family: var(--font-mono); font-size: var(--text-caption); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-fg-tertiary); margin: 0 0 var(--space-4); }
.site-footer__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__group li { font-size: var(--text-small); line-height: 1.4; color: var(--color-fg-secondary); }
.site-footer__group a { color: var(--color-fg-secondary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.site-footer__group a:hover, .site-footer__group a:focus-visible { color: var(--color-fg-primary); }
.site-footer__group a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }
.site-footer__bottom { max-width: var(--container-xl); margin: var(--space-10) auto 0; padding-top: var(--space-5); border-top: 1px solid var(--color-border-subtle); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.04em; color: var(--color-fg-tertiary); }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 63.99rem) {
  .why { padding: 8vh var(--gutter) 10vh; }
  .why__resolve { margin-bottom: var(--space-12); }
  .why__grid, .trust__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .why__title { max-width: 16ch; }
  .why__item { grid-template-columns: 2.75rem minmax(0, 1fr); padding: var(--space-6) 0; }
  .why__item--lead { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .trust { padding: 2vh var(--gutter) 10vh; }
  .trust__list { grid-template-columns: minmax(0, 1fr); }
  .trust__item { padding: var(--space-6) var(--space-6) var(--space-8); }
  .trust__item::before { left: var(--space-6); }
  .cta { min-height: 0; padding: 10vh var(--gutter) 12vh; }
  .cta__actions .btn-lg { flex: 1 1 auto; justify-content: center; }
  .site-footer__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  .site-footer__wrap { column-gap: var(--space-4); }
  .cta__title { font-size: clamp(2.5rem, 12vw, 3.25rem); }
  .cta__actions { flex-direction: column; }
}

/* ================================================================
   Reduced motion: every state at its end value, no transitions
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) [data-reveal], html:not(.force-motion) .cta__line > span, html:not(.force-motion) .why__resolve i, html:not(.force-motion) .why__resolve span, html:not(.force-motion) .cta__actions .btn-primary { transition: none; opacity: 1; transform: none; }
}
}
@layer foundation {
/* ---- 01-foundation/shell.css ---- */
/* ================================================================
   FOUNDATION — SECONDARY-PAGE SHELL (html.shell-v2)
   The homepage's environmental field and header, mounted behind pages
   that keep their legacy content. The fixed field canvas (.field) and
   its veil come from experience.css; this file only makes sure the
   page paints nothing opaque over them and stacks content above.
   Behaviour: js/experience/shell.js. Stamped by scripts/shell/sync-shell.mjs.
   ================================================================ */
html.shell-v2, html.shell-v2 body { background: var(--color-bg-canvas); background-image: none; }
html.shell-v2 main, html.shell-v2 .footer, html.shell-v2 .site-footer { position: relative; z-index: 2; }
html.shell-v2 .page-frame { background-image: none; }
/* legacy painted backgrounds and the old star canvas: the field replaces them */
html.shell-v2 #stars-container, html.shell-v2 .home-background-surface, html.shell-v2 .hero-surface, html.shell-v2 [class$="-background-surface"] { display: none; }
html.shell-v2 .home-page-shell::before, html.shell-v2 .home-page-shell::after { display: none; }
/* the legacy footer painted its own gradient; keep it as a translucent surface over the field */
html.shell-v2 .footer { background: linear-gradient(180deg, rgba(10, 13, 20, 0.86), rgba(7, 10, 16, 0.97)); }
}