/* ==============================================================
   DUKLANA IT — »INK ON METAL«
   Base chassis: dark datacenter modernism (Design 1)
   Artifact layer: Viennese registry objects (Design 4_fable_2)
   Grammar: screen things are rounded + cool · paper things are
   square + warm-cream. Artifacts only certify claims.
   ============================================================== */

/* --- 1. Tokens --- */
:root {
  /* metal (screen layer) */
  --base-black: #0B0B0F;
  --surface: #141418;
  --border: #1F1F26;
  --text-primary: #EAEAEC;
  --text-muted: #7C7C88;
  --accent: #E05A3A;
  --accent-deep: #C94D32;
  --accent-amber: #F2994A;
  --error: #EF4444;

  /* ink (paper layer) */
  --paper: #EDE5D2;
  --paper-dim: rgba(237, 229, 210, 0.55);
  --paper-ghost: rgba(237, 229, 210, 0.05);
  --paper-line: rgba(237, 229, 210, 0.16);
  --ops-green: #6CBA80;
  --ops-green-bg: #1B2A20;
  --ops-green-line: #3D5C46;
  --dust: #8E8674;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-ledger: 'Fraunces', Georgia, 'Times New Roman', serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --transition-fast: 180ms ease-out;
  --transition-base: 250ms ease-out;
  --transition-slow: 400ms ease-out;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: dark;
}

/* --- 2. Reset / Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* NB: no `scroll-behavior: smooth` here. It animates the scroll jumps that
     GSAP ScrollTrigger performs while measuring during a refresh (resize, tab
     switch, font load), so the pinned horizontal showcase gets measured
     mid-scroll and its start lands offset by the current scroll amount — the
     pin then snaps in early. Smooth in-page anchor jumps are handled in JS
     (see main.js) instead, which doesn't interfere with ScrollTrigger. */
  scroll-padding-top: 88px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--base-black);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-primary);
  background-color: var(--base-black);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

button { cursor: pointer; }

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link {
  position: fixed;
  top: -60px;
  left: 32px;
  z-index: 10010;
  background: var(--paper);
  color: var(--base-black);
  padding: 10px 16px;
  font: 600 13px var(--font-body);
  transition: top 0.2s;
}
.skip-link:focus { top: 32px; }

[hidden] { display: none !important; }

/* --- 3. Grain & Progress --- */

/* Film grain over everything — the paper layer breathing through */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
}

/* Reading progress */
.scroll-progress-track {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
}

.scroll-progress {
  width: 0%;
  height: 100%;
  background: var(--accent);
  transition: width 50ms linear;
}

/* --- 4. Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
}

h1 {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

h2 { font-size: clamp(32px, 4vw, 56px); }
h3 { font-size: clamp(22px, 2.5vw, 32px); }

.text-outline {
  -webkit-text-stroke: 1.5px var(--text-primary);
  color: transparent;
}

.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-mono { font-family: var(--font-mono); }

.kicker {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Numbered section rule — "POS. 01 ——————" */
.pos-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.pos-rule::before {
  content: "";
  width: clamp(20px, 4vw, 56px);
  height: 1px;
  background: var(--border);
}
.pos-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.pos-num {
  font: 600 11px/1 var(--font-mono);
  color: var(--accent);
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.pos-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Giant ledger numerals behind sections — the registrar's hand */
.ghost-num {
  position: absolute;
  top: -0.02em;
  right: -0.04em;
  z-index: 0;
  font-family: var(--font-ledger);
  font-weight: 300;
  font-size: clamp(170px, 26vw, 360px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  color: var(--paper-ghost);
  pointer-events: none;
  user-select: none;
}
.ghost-left { left: -0.04em; right: auto; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ghost-num {
      animation: ghost-drift linear both;
      animation-timeline: view();
    }
    @keyframes ghost-drift {
      from { translate: 0 70px; }
      to   { translate: 0 -70px; }
    }
  }
}

/* Figure captions — paper voice */
.fig-cap {
  margin-top: 12px;
  font: 400 10px var(--font-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* One italic pull-quote per page — Fraunces with the wonk */
.closer {
  margin-top: 26px;
  font-family: var(--font-ledger);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.45;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  color: var(--paper);
  text-wrap: balance;
}

/* Form letterhead line */
.letterhead {
  font: 400 10.5px var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 28px;
}

/* --- 5. Layout --- */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

.section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.section-sm { padding: 80px 0; }

.beilage { margin-top: clamp(64px, 9vw, 110px); }

.grid-2 {
  display: grid;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.g-5-7 { grid-template-columns: 5fr 7fr; }
.g-7-5 { grid-template-columns: 7fr 5fr; }

/* --- 6. Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn:active { transform: translate(1px, 1px); }

.btn-primary {
  background: var(--accent);
  color: var(--base-black);
}

.btn-primary:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(224, 90, 58, 0.25);
}

.btn-primary:hover:active { transform: translate(1px, 1px); }

.btn-ghost {
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 14px;
}

/* --- 7. Marks & Chips — the artifact layer --- */

/* Availability badge */
.domain-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.domain-badge-available {
  background: rgba(108, 186, 128, 0.12);
  color: var(--ops-green);
}

/* Flat grey mark for things that are gone */
.mark-taken {
  display: inline-block;
  border: 1px solid var(--dust);
  color: var(--dust);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 10px;
}

/* Operations chip — measured, calm, green */
.uptime {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ops-green-bg);
  border: 1px solid var(--ops-green-line);
  padding: 7px 11px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}

.sq {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--ops-green);
  flex: none;
}

.chip-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}

/* Rotated fact chips (about page) */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}
.fact {
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 11px 15px;
  mix-blend-mode: screen;
}
.fact:nth-child(odd) { transform: rotate(-1.2deg); }
.fact:nth-child(even) { transform: rotate(1deg); }

/* --- 8. Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 40px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: rgba(20, 20, 24, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(31, 31, 38, 0.5);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.nav-logo .dot { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-link {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  position: relative;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-link .num {
  font: 500 10px var(--font-mono);
  color: var(--accent);
  letter-spacing: 0.05em;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.nav-link:hover,
.nav-link.active { color: var(--text-primary); }

.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* Nav dropdowns (Website / Server) */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 72px;
}

.drop-caret {
  flex-shrink: 0;
  align-self: center;
  color: var(--text-muted);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.nav-item:hover .drop-caret,
.nav-item:focus-within .drop-caret {
  color: var(--accent);
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% - 8px);
  left: -18px;
  min-width: 180px;
  padding: 10px 0;
  background: rgba(20, 20, 24, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast),
    visibility var(--transition-fast);
  z-index: 1001;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-drop-link {
  display: block;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-drop-link:hover,
.nav-drop-link.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Language switch — flag buttons */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lang-btn {
  display: flex;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.lang-btn img {
  width: 21px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.lang-btn:hover { opacity: 0.85; }

.lang-btn.is-active {
  opacity: 1;
  border-color: var(--border);
}

.nav-dash {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  white-space: nowrap;
}

.nav-dash:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  transition: all var(--transition-base);
}

.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 999;
  padding: 100px 40px 40px;
  transition: right var(--transition-slow);
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}

.mobile-drawer.open { right: 0; }

.mobile-drawer .nav-link { font-size: 18px; }
.mobile-drawer .nav-link .num { font-size: 12px; }
.mobile-drawer .nav-link::after { display: none; }

.drawer-foot {
  margin-top: auto;
  font: 400 10px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.mobile-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* --- 9. Cards & Bento --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.card:hover {
  border-color: rgba(224, 90, 58, 0.4);
  transform: scale(1.015);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.card-code {
  position: absolute;
  top: 26px;
  right: 28px;
  font: 500 10px var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--text-muted);
  transition: color var(--transition-base);
}

.card:hover .card-code { color: var(--accent); }

.card-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}

.card-text {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.card-price {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--accent);
  margin-top: 16px;
}

.card-arrow {
  position: absolute;
  bottom: 32px;
  right: 32px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  color: var(--text-muted);
}

.card:hover .card-arrow {
  border-color: var(--accent);
  color: var(--accent);
  transform: translate(2px, -2px);
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.bento-grid .span-2 { grid-column: span 2; }
.bento-grid .span-3 { grid-column: span 3; }
.bento-grid .span-4 { grid-column: span 4; }

/* --- 10. Hero --- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 72px;
  position: relative;
  overflow: hidden;
}

/* The hero is a flex row, so the container would otherwise shrink-wrap to the
   copy and centre itself. Pin it to the standard width so the copy stays left-
   anchored, in line with the nav and the section headings below. */
.hero .container { width: 100%; }

.hero-content {
  display: grid;
  /* copy sits in a left column; the right side is the floating-cubes canvas */
  grid-template-columns: minmax(0, 660px);
  align-items: center;
  width: 100%;
  position: relative;
}

.hero-kicker {
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-height: 1.4em;
  margin-bottom: 18px;
}

.caret {
  display: inline-block;
  width: 8px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--paper);
}
.caret.caret-off { opacity: 0; transition: opacity 0.3s 0.2s; }

.hero-headline-wrap { position: relative; }

.hero-headline-ghost {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px rgba(160, 160, 170, 0.025);
  color: transparent;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(30px);
  animation: ghostFadeIn 0.6s ease-out forwards;
}

@keyframes ghostFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

.hero-headline { display: flex; flex-direction: column; gap: 0; }

.hero-headline span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-transform: uppercase;
}

.hero-sub {
  color: var(--text-muted);
  font-size: 18px;
  margin-top: 24px;
  margin-bottom: 32px;
}

/* Floating status cards */
.hero-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  /* compensates the kicker line above the headline so the cards keep
     their original position relative to the word INFRASTRUCTURE */
  margin-top: 35px;
}

.hero-stat-card {
  background: rgba(20, 20, 24, 0.88);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all var(--transition-base);
}

.hero-stat-card:nth-child(1) { transform: translateX(20px); }
.hero-stat-card:nth-child(2) { transform: translateX(-10px); }
.hero-stat-card:nth-child(3) { transform: translateX(30px); }

.hero-stat-card:hover { border-color: rgba(224, 90, 58, 0.3); }

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(224, 90, 58, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 20px;
  flex-shrink: 0;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 14px;
  color: var(--text-muted);
}

/* Protocol footnote under the hero cards */
.hero-protocol {
  margin-top: 4px;
  padding-left: 30px;
  font: 400 9.5px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.hero-protocol a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.hero-protocol a:hover { color: var(--accent); }

/* Dots that live */
.live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ops-green);
  flex: none;
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.74); opacity: 0.65; }
}

.pulse-dot {
  width: 10px;
  height: 10px;
  background: var(--ops-green);
  border-radius: 50%;
  position: relative;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--ops-green);
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

.sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
}

.sparkline-bar {
  width: 4px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.6;
}

/* --- 11. Background textures (screen layer) --- */
.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(234, 234, 236, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

.grid-accent-top,
.grid-accent-bottom {
  position: absolute;
  left: -20%;
  width: 140%;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 100px, rgba(234, 234, 236, 0.09) 100px, rgba(234, 234, 236, 0.09) 101px),
    repeating-linear-gradient(-45deg, transparent, transparent 100px, rgba(234, 234, 236, 0.09) 100px, rgba(234, 234, 236, 0.09) 101px);
}

.grid-accent-top {
  top: -35px;
  height: 900px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.grid-accent-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 100px, rgba(224, 90, 58, 1) 100px, rgba(224, 90, 58, 1) 101px),
    repeating-linear-gradient(-45deg, transparent, transparent 100px, rgba(224, 90, 58, 1) 100px, rgba(224, 90, 58, 1) 101px);
  mask-image: radial-gradient(ellipse 1600px 1300px at top right, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 1600px 1300px at top right, black 0%, transparent 80%);
  pointer-events: none;
}

.grid-accent-bottom {
  bottom: 0;
  height: 600px;
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 30%, transparent 65%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 30%, transparent 65%);
}

.gradient-blob {
  position: absolute;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  filter: blur(150px);
  pointer-events: none;
  opacity: 0.08;
}

.gradient-blob-accent { background: var(--accent); }
.gradient-blob-amber { background: var(--accent-amber); }

/* Millimeter paper — appears only inside artifact figures */
.mmgrid {
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(0deg,  rgba(237,229,210,.045) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(237,229,210,.045) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(0deg,  rgba(237,229,210,.07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(237,229,210,.07) 0 1px, transparent 1px 40px);
}

/* --- 12. Domain search --- */
.domain-search {
  max-width: 700px;
  position: relative;
}

.domain-search-compact { max-width: 520px; }

.domain-search-row {
  display: flex;
  align-items: stretch;
  border-bottom: 3px solid var(--border);
  transition: border-color var(--transition-base);
}

.domain-search-row:focus-within { border-color: var(--accent); }

.domain-search input {
  flex: 1;
  min-width: 0;
  padding: 16px 0;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--text-primary);
  background: transparent;
}

.domain-search input::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
}

.domain-search-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-muted);
  transition: all var(--transition-base);
}

.domain-search-btn:hover {
  color: var(--accent);
  background: rgba(224, 90, 58, 0.08);
}

.domain-search-row:focus-within .domain-search-btn { color: var(--accent); }

.tld-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.tld-pill {
  padding: 6px 14px;
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition-base);
}

.tld-pill:hover {
  background: var(--accent);
  color: var(--base-black);
  border-color: var(--accent);
  transform: scale(1.05);
}

/* Live results — the registry answers */
.domain-result-zone { min-height: 10px; }

.ticker {
  display: inline-block;
  padding-top: 24px;
  font: 400 13px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.form-err {
  display: inline-block;
  padding-top: 24px;
  font: 400 13px var(--font-mono);
  color: var(--error);
}

.result-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px 2px 6px;
}

.result-row.is-taken { opacity: 0.75; }

.r-name {
  font: 500 18px var(--font-mono);
  overflow-wrap: anywhere;
}

.r-price {
  font: 400 14px var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
}

.r-alt {
  font: 400 12.5px var(--font-mono);
  color: var(--text-muted);
}

.alt-suggest {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: 500 12.5px var(--font-mono);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.alt-suggest:hover { text-decoration-thickness: 3px; }

/* Dotted-leader price rows (price sheets, spec lists) */
.leader-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 2px;
  border-top: 1px solid var(--border);
  font: 400 14px var(--font-mono);
}
.leader-list li:last-child { border-bottom: 1px solid var(--border); }

.leader-label { font-weight: 500; white-space: nowrap; }

.leader-dots {
  flex: 1;
  min-width: 24px;
  border-bottom: 2px dotted var(--border);
  transform: translateY(-4px);
}

.leader-value {
  color: var(--text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- 13. Page header --- */
/* no overflow clip: the corner glow and crosshatch fade out past the
   header's edge instead of being cut off at its bottom */
.page-header {
  padding-top: 150px;
  padding-bottom: 60px;
  position: relative;
}

.page-header h1 { line-height: 0.95; }

.page-header .subtitle {
  color: var(--text-muted);
  font-size: 18px;
  margin-top: 20px;
  max-width: 540px;
}

/* --- Domains header: copy on the left, live globe on the right --- */
.page-header--domains { padding-bottom: 80px; }

/* Keep the copy + search clear of the globe so nothing runs underneath it. */
.page-header--domains .page-header-copy { max-width: 560px; }

/* Search now sits in the header, left-aligned with the headline. */
.domain-search-header {
  max-width: 540px;
  margin-top: 40px;
}

/* The globe canvas — right half of the header, dissolving toward the copy.
   Background layer / progressive enhancement: blank until domains3d.js paints. */
.header-canvas {
  position: absolute;
  top: 50%;
  /* Anchored by its centre at ~70% across, so it sits between the headline and
     the right edge with a clear gap — never touching/overflowing the right. */
  left: 70%;
  transform: translate(-50%, -50%);
  /* Wider than tall on purpose: the camera's vertical view is fixed, so a wide
     box gives the orbits horizontal headroom and keeps them off the edges. */
  width: min(60vw, 800px);
  height: min(76vh, 660px);
  z-index: 0;            /* above blobs/grid, below .page-header-copy (z-index:1) */
  pointer-events: none;
  /* Soft-fade a small band at the BOTTOM only — at some orbit angles a ring
     still grazes the lower edge; this dissolves it out instead of hard-slicing
     it, same trick as the home hero canvas. */
  -webkit-mask-image: linear-gradient(to top, transparent, #000 9%);
  mask-image: linear-gradient(to top, transparent, #000 9%);
  opacity: 0;
  animation: heroCanvasIn 1.2s ease-out 0.2s forwards;
}

/* On narrow screens the globe would fight the copy — retire it, recentre copy. */
@media (max-width: 980px) {
  .header-canvas { display: none; }
  .page-header--domains .page-header-copy { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .header-canvas { animation: none; opacity: 0.85; }
}

/* --- 16. OS switch — a mechanical knob --- */
.vps-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.vps-intro {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 52ch;
  margin-top: 16px;
}

.vps-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 6px;
}

.os-switch {
  position: relative;
  display: inline-flex;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.knob {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  background: var(--accent);
  border-radius: 6px;
  transition: transform 0.28s var(--ease-spring);
}

.os-switch.win .knob { transform: translateX(100%); }

.os-opt {
  position: relative;
  z-index: 1;
  width: 116px;
  padding: 11px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: 500 12px var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--text-muted);
  transition: color 0.2s;
}

.os-opt.is-active { color: var(--base-black); }

/* --- 17. VPS cards --- */
.vps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.vps-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-base);
  position: relative;
}

.vps-card:hover {
  border-color: rgba(224, 90, 58, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.vps-card.featured {
  border-color: var(--accent);
  transform: scale(1.04);
  z-index: 1;
}

.vps-card.featured:hover { transform: scale(1.04) translateY(-4px); }

.vps-popular-tag {
  position: absolute;
  top: -1px;
  right: 24px;
  background: var(--accent);
  color: var(--base-black);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.vps-tier-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
}

.vc-code {
  font: 400 11px var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--text-muted);
  white-space: nowrap;
}

.vps-price {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.vps-price-period {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.os-note {
  font: 400 11px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.vps-spec-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 36px;
  flex-grow: 1;
}

.vps-spec-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 2px;
  font-size: 13px;
}

.vps-spec-label {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.vps-spec-value {
  font-family: var(--font-mono);
  font-weight: 500;
  white-space: nowrap;
}

.swap { transition: opacity 0.15s; }
.swapping .swap { opacity: 0; }

.vps-foot {
  margin-top: 36px;
  font: 400 10.5px var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* --- 18. Transit line — Line D / Line M --- */
.linie-sect {
  position: relative;
  padding: clamp(48px, 6vw, 84px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}

.linie-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.linie-badge {
  width: 36px;
  height: 36px;
  flex: none;
  background: var(--accent);
  color: var(--base-black);
  font: 700 19px/1 var(--font-display);
  display: grid;
  place-items: center;
}

.linie {
  --stops: 4;
  display: flex;
  position: relative;
  margin-top: 44px;
}

.linie--5 { --stops: 5; }

/* track runs from the first dot's center to the last dot's center */
.linie::before,
.linie::after {
  content: "";
  position: absolute;
  left: calc(100% / (var(--stops) * 2));
  right: calc(100% / (var(--stops) * 2));
  top: 8px;
  height: 2px;
}

.linie::before { background: var(--border); }
.linie::after {
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 1.1s ease 0.05s;
}

.js .linie:not(.drawn)::after { transform: scaleX(0); }

.linie li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.linie .dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--base-black);
  border: 3px solid var(--accent);
  transform: scale(1);
  transition: transform 0.25s var(--ease-spring);
}

.terminus .dot { background: var(--accent); }

.js .linie:not(.drawn) .dot { transform: scale(0); }
.js .linie.drawn li:nth-child(1) .dot { transition-delay: 0.1s; }
.js .linie.drawn li:nth-child(2) .dot { transition-delay: 0.42s; }
.js .linie.drawn li:nth-child(3) .dot { transition-delay: 0.74s; }
.js .linie.drawn li:nth-child(4) .dot { transition-delay: 1.06s; }
.js .linie.drawn li:nth-child(5) .dot { transition-delay: 1.38s; }

.lbl {
  font: 500 10.5px var(--font-mono);
  letter-spacing: 0.13em;
  color: var(--text-primary);
  text-align: center;
}

.linie li:last-child .lbl {
  color: var(--accent);
  font-weight: 600;
}

.linie-cap {
  margin-top: 30px;
  font-size: 15.5px;
  color: var(--text-muted);
  max-width: 60ch;
}

/* --- 19. Why grid --- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.why-item { text-align: center; }

.why-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border: 1.5px solid var(--text-muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--text-muted);
  transition: all var(--transition-base);
}

.why-item:hover .why-icon {
  border-color: var(--accent);
  color: var(--accent);
}

.why-item h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.why-item p {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.7;
}

.why-item .fig-cap { margin-top: 16px; }

/* --- 20. Step cards --- */
.karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 38px;
}

.karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  transition: all var(--transition-base);
}

.karte:hover {
  border-color: rgba(224, 90, 58, 0.3);
  transform: translateY(-2px);
}

.k-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.karte h3 {
  font-size: 17px;
  line-height: 1.3;
}

.k-code {
  font: 400 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--text-muted);
  white-space: nowrap;
}

.karte p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* --- 21. Q & A --- */
.fragen {
  margin-top: 38px;
  border-top: 1px solid var(--border);
  max-width: 780px;
}

.fragen details { border-bottom: 1px solid var(--border); }

.fragen summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 19px 2px;
  cursor: pointer;
  list-style: none;
  font: 600 15.5px/1.45 var(--font-body);
}

.fragen summary::-webkit-details-marker { display: none; }

.fragen summary::before {
  content: "Q.";
  flex: none;
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--accent);
}

.fragen summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  align-self: center;
  font: 400 22px/1 var(--font-mono);
  color: var(--text-muted);
  transition: rotate 0.2s;
}

.fragen details[open] summary::after { rotate: 45deg; }

.antwort {
  display: flex;
  gap: 14px;
  padding: 0 2px 22px;
}

.antwort::before {
  content: "A.";
  flex: none;
  translate: 0 4px;
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ops-green);
}

.antwort p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 62ch;
}

.antwort a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 22. Annex note --- */
.annex-note {
  margin-top: clamp(48px, 7vw, 72px);
  padding: 18px 22px;
  border: 1px dashed var(--dust);
  font: 400 13px/1.7 var(--font-mono);
  color: var(--text-muted);
  max-width: 72ch;
}

.annex-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 23. File navigation (prev / next) --- */
.file-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: clamp(48px, 7vw, 80px);
}

.file-nav a {
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  transition: border-color var(--transition-fast);
}

.file-nav a:hover { border-color: var(--accent); }

.fn-dir {
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fn-name {
  font: 600 19px/1.3 var(--font-display);
  transition: color var(--transition-fast);
}

.file-nav a:hover .fn-name { color: var(--accent); }

.fn-next {
  align-items: flex-end;
  text-align: right;
}

/* --- 24. Browser mockup — blueprint inside the screen --- */
.browser {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.b-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--base-black);
  border-bottom: 1px solid var(--border);
}

.b-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}
.b-dot-red { background: var(--error); }
.b-dot-yellow { background: var(--accent-amber); }
.b-dot-green { background: var(--ops-green); }

.b-addr {
  margin-left: 10px;
  font: 400 11px var(--font-mono);
  letter-spacing: 0.06em;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  padding: 4px 12px;
  border-radius: 20px;
}

/* The canvas: millimeter paper, square wireframe blocks */
.canvas {
  position: relative;
  height: 380px;
}

.blk {
  position: absolute;
  background: var(--base-black);
  border: 1px solid var(--paper);
  padding: 12px;
}

.line {
  display: block;
  height: 7px;
  background: var(--paper-line);
  margin: 9px 0 0;
}
.line:first-child { margin-top: 0; }

.w90 { width: 90%; }
.w75 { width: 75%; }
.w70 { width: 70%; }
.w55 { width: 55%; }
.w50 { width: 50%; }

.blk-head {
  top: 18px;
  left: 18px;
  right: 18px;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.blk-bar {
  width: 36px;
  height: 14px;
  background: var(--paper);
  flex: none;
}

.blk-head .line { flex: 1; margin: 0; }

.blk-img {
  top: 92px;
  left: 18px;
  width: 46%;
  height: 128px;
}

.hatch {
  position: absolute;
  inset: 8px;
  background: repeating-linear-gradient(45deg, rgba(237,229,210,.17) 0 1px, transparent 1px 7px);
}

.blk-text {
  top: 92px;
  right: 18px;
  width: 38%;
}

.blk-drag {
  bottom: 86px;
  left: 24%;
  width: 44%;
  border: 1px dashed var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 3px;
  transform: rotate(-3deg);
}

.drag-tag {
  position: absolute;
  top: -11px;
  left: 10px;
  background: var(--base-black);
  border: 1px solid var(--accent);
  color: var(--accent);
  font: 500 9px var(--font-mono);
  letter-spacing: 0.16em;
  padding: 2px 7px;
}

.publish-btn {
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: var(--accent);
  color: var(--base-black);
  font: 700 13px/1 var(--font-display);
  letter-spacing: 0.1em;
  padding: 15px 20px;
}

/* Publish → deploy arrow → rack */
/* bottom-aligned so the rack and caption sit where the arrow points */
.deploy-line {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.deploy-arrow {
  width: 120px;
  height: 38px;
  flex: none;
}

.deploy-arrow path {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
  fill: none;
}

.deploy-arrow polygon { fill: var(--accent); }

.rack-icon {
  width: 26px;
  height: 36px;
  flex: none;
  /* the arrow tip sits ~7px above the line's bottom edge; dropping the
     rack centers it on the tip instead of leaving it above the arrow */
  transform: translateY(10px);
}

/* pulls the figure caption up into the deploy row's empty left half,
   level with the arrow, instead of stranding it below the whole row */
.fig-cap--pull { margin-top: -24px; }

.rack-icon rect,
.rack-icon line {
  fill: var(--surface);
  stroke: var(--paper);
  stroke-width: 1;
}

.rack-icon circle { fill: var(--ops-green); }
.rack-icon .led-off { fill: var(--border); }

/* Miniature canvas for the home bento card */
.mini-canvas {
  position: relative;
  height: 130px;
  margin: 20px 0 8px;
  border: 1px solid var(--border);
  pointer-events: none;
}

.mini-canvas .blk { padding: 8px; }
.mini-canvas .line { height: 5px; margin-top: 6px; }

.mc-head {
  top: 10px;
  left: 10px;
  right: 10px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-head .blk-bar { width: 24px; height: 9px; }
.mc-head .line { flex: 1; margin: 0; }

.mc-text {
  top: 52px;
  left: 10px;
  width: 46%;
}

.mc-drag {
  bottom: 12px;
  right: 10px;
  width: 38%;
  border: 1px dashed var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  transform: rotate(-3deg);
}

.mc-publish {
  position: absolute;
  left: 10px;
  bottom: 12px;
  background: var(--accent);
  color: var(--base-black);
  font: 700 8px/1 var(--font-display);
  letter-spacing: 0.12em;
  padding: 7px 9px;
}

/* --- 25. Schematic figures (rack, map) --- */
.schem-fig {
  border: 1px solid var(--border);
  padding: clamp(18px, 2.5vw, 28px);
}

.schem-fig svg,
.schem-fig img {
  display: block;
  width: 100%;
  height: auto;
}

.sch-stroke {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.sch-fill { fill: var(--surface); stroke: var(--paper); stroke-width: 1; }
.sch-led { fill: var(--ops-green); }
.sch-led-off { fill: var(--border); }

.sch-txt {
  font: 500 8px var(--font-mono);
  letter-spacing: 0.12em;
  fill: var(--paper-dim);
}

.ch { stroke: var(--accent); stroke-width: 0.8; opacity: 0.55; }
.vie-ring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.5; }
.vie-dot { fill: var(--accent); }
.vie-lbl {
  font: 600 9.5px var(--font-mono);
  letter-spacing: 0.18em;
  fill: var(--paper);
  text-anchor: middle;
}
.schem-note {
  font: 400 7.5px var(--font-mono);
  letter-spacing: 0.12em;
  fill: var(--text-muted);
  text-anchor: end;
}

/* --- 26. Letter --- */
.letter {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: clamp(28px, 5vw, 56px);
  max-width: 860px;
}

.letter h2 { margin-bottom: 18px; }

.letter > p { max-width: 58ch; color: var(--text-muted); }
.letter > p strong { color: var(--text-primary); }

.mail-row { margin-top: 30px; max-width: none; }

.mail-link {
  display: inline-block;
  font-family: var(--font-ledger);
  font-weight: 500;
  font-size: clamp(25px, 4.2vw, 44px);
  line-height: 1.15;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
  overflow-wrap: anywhere;
  transition: text-decoration-thickness 0.15s;
}

.mail-link:hover { text-decoration-thickness: 4px; }

.letter-sub {
  margin-top: 18px;
  font: 400 10.5px var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* --- 27. Terminal window --- */
.terminal-window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.terminal-header {
  padding: 12px 16px;
  background: var(--base-black);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}

.terminal-dot-red { background: var(--error); }
.terminal-dot-yellow { background: var(--accent-amber); }
.terminal-dot-green { background: var(--ops-green); }

.terminal-body {
  padding: 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 2;
  color: var(--text-muted);
}

.terminal-body .line-accent { color: var(--accent); }
.terminal-body .line-str { color: var(--accent-amber); }
.terminal-body .line-dim { color: #4A4A56; }

/* --- 28. Service splits --- */
.service-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.service-split-reverse { direction: rtl; }
.service-split-reverse > * { direction: ltr; }

.service-split-content h3 { margin-bottom: 16px; }

.service-split-content p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.service-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 10px;
}

.service-list {
  list-style: none;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-list li {
  color: var(--text-primary);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.service-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  flex-shrink: 0;
}

.os-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.os-tag {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
  background: rgba(224, 90, 58, 0.1);
  border: 1px solid rgba(224, 90, 58, 0.25);
  border-radius: var(--radius-sm);
  color: var(--accent);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.tag {
  padding: 6px 14px;
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 20px;
}

/* --- 29. Stats / values / two-col --- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}

.stat-number {
  font-family: var(--font-mono);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-desc {
  font-size: 16px;
  color: var(--text-muted);
  margin-top: 8px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.two-col p {
  color: var(--text-muted);
  line-height: 1.8;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  text-align: center;
  transition: all var(--transition-base);
}

.value-card:hover {
  border-color: rgba(224, 90, 58, 0.3);
  transform: translateY(-2px);
}

.value-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 22px;
}

.value-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.value-card p {
  color: var(--text-muted);
  font-size: 14px;
}

/* --- 30. Contact form --- */
.contact-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 80px;
  align-items: start;
}

.form-group { margin-bottom: 32px; }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 14px 0;
  font-size: 16px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--border);
  border-radius: 0;
  transition: border-color var(--transition-base);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--accent); }

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.4;
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C7C88' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
}

.form-select option {
  background: var(--surface);
  color: var(--text-primary);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-body);
}

.form-result {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 24px;
  min-height: 10px;
}

.form-result .form-note {
  font: 400 11px var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-item-label {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-item-value {
  font-size: 16px;
  color: var(--text-primary);
}

.contact-item-value a { transition: color var(--transition-fast); }
.contact-item-value a:hover { color: var(--accent); }

.social-links {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.social-link {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 16px;
  transition: all var(--transition-base);
}

.social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- 31. CTA section --- */
.cta-section {
  text-align: center;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.cta-section h2 { margin-bottom: 32px; }

.cta-sub {
  color: var(--text-muted);
  font-size: 18px;
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}

/* --- 32. Footer --- */
.footer {
  border-top: 1px solid var(--border);
  padding: 80px 0 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 60px;
  margin-bottom: 60px;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

.footer-brand .dot { color: var(--accent); }

.footer-desc {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 280px;
}

.footer-tag {
  margin-top: 16px;
  font: 400 10px var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.footer-link .num {
  font: 500 10px var(--font-mono);
  color: var(--accent);
  letter-spacing: 0.05em;
}

.footer-link:hover { color: var(--accent); }

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

.footer-file {
  font: 400 10px var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* --- 33. Scroll animations --- */
.js .fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 60ms; }
.stagger-3 { transition-delay: 120ms; }
.stagger-4 { transition-delay: 180ms; }
.stagger-5 { transition-delay: 240ms; }
.stagger-6 { transition-delay: 300ms; }

/* --- 33b. Wegweiser (Formular W-1) --- */
.wz { max-width: 760px; margin: 0 auto; }

.wz-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.wz-step {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.wz-ctrl { display: flex; gap: 20px; }

.wz-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: 500 11.5px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.wz-link:hover,
.wz-link:focus-visible { color: var(--accent); }

.wz-q { margin: 0; }

.wz-hint {
  color: var(--text-muted);
  font-size: 15px;
  margin: 12px 0 0;
}

.wz-opts {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.wz-opt {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  cursor: pointer;
  transition: all var(--transition-base);
}

.wz-opt:hover,
.wz-opt:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.wz-opt:active { transform: translate(1px, 1px); }

.wz-key {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  font: 500 12.5px var(--font-mono);
  color: var(--accent);
}

.wz-result-kicker {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

.wz-intro {
  color: var(--text-muted);
  font-size: 15.5px;
  margin: 14px 0 0;
}

.wz-recs {
  display: grid;
  gap: 14px;
  margin: 30px 0 8px;
}

.wz-rec {
  display: block;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.wz-rec:hover {
  border-color: rgba(224, 90, 58, 0.45);
  transform: translateY(-2px);
}

.wz-rec h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 8px;
  font-size: 19px;
}

.wz-rec-num {
  font: 500 11px var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--accent);
}

.wz-rec p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 12px;
}

.wz-rec-link {
  font: 500 11.5px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.wz-outro {
  color: var(--text-muted);
  font-size: 15px;
  margin: 22px 0 0;
}

.wz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

.wz-anim { animation: wz-in 0.3s ease-out both; }

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

.wz-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 34px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.wz-meta li {
  font: 400 11px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.wz-meta li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 10px;
  background: var(--accent);
  vertical-align: 2px;
}

/* Wegweiser teaser on the home page */
.wz-teaser {
  max-width: 720px;
  margin: 0 auto;
  padding: 52px 48px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.wz-teaser .kicker { display: block; margin-bottom: 18px; }

.wz-teaser h2 { margin-bottom: 16px; }

.wz-teaser p {
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 28px;
}

@media (max-width: 768px) {
  .wz-opt { padding: 15px 16px; gap: 14px; }
  .wz-teaser { padding: 36px 24px; }
  .wz-top { flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .wz-anim { animation: none; }
}

/* --- 34. Responsive --- */
@media (max-width: 1200px) {
  .container { padding: 0 32px; }

  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-grid .span-2 { grid-column: span 2; }
  .bento-grid .span-3,
  .bento-grid .span-4 { grid-column: span 2; }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (max-width: 1280px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 980px) {
  .g-5-7, .g-7-5 { grid-template-columns: 1fr; }

  .vps-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .vps-card.featured { transform: none; }
  .vps-card.featured:hover { transform: translateY(-4px); }

  .vps-tools { align-items: flex-start; }

  .karten {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .ghost-num { font-size: clamp(140px, 30vw, 240px); }
}

@media (max-width: 768px) {
  .nav { padding: 0 24px; }

  .container { padding: 0 24px; }

  .section { padding: 80px 0; }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-cards { display: none; }

  .bento-grid { grid-template-columns: 1fr; }
  .bento-grid .span-2,
  .bento-grid .span-3,
  .bento-grid .span-4 { grid-column: span 1; }

  .service-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .service-split-reverse { direction: ltr; }

  .linie {
    flex-direction: column;
    gap: 30px;
    margin-top: 36px;
  }

  .linie::before, .linie::after {
    left: 8px;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 2px;
    height: auto;
  }

  .linie::after {
    transform: scaleY(1);
    transform-origin: top center;
  }

  .js .linie:not(.drawn)::after { transform: scaleY(0); }

  .linie li,
  .linie li:first-child,
  .linie li:last-child {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex: none;
  }

  .lbl { text-align: left; }

  .canvas { height: 330px; }
  .blk-drag { left: 12%; width: 56%; }

  .stats-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .two-col {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .values-grid { grid-template-columns: 1fr; }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .page-header { padding-top: 120px; }

  .file-nav { grid-template-columns: 1fr; }
  .fn-next { align-items: flex-start; text-align: left; }

  /* phones don't reliably honor the body-level overflow guard, so the
     corner glow and ghost numerals could open a horizontal scroll;
     clip the x-axis only — the glow still fades downward freely */
  html, body { overflow-x: hidden; overflow-x: clip; }
  .page-header { overflow-x: clip; }

  /* no room next to the deploy row here — drop the schematic caption */
  .fig-cap--pull { display: none; }

  /* deploy row sits centered under the full-width mockup */
  .deploy-line { justify-content: center; }

  /* services: when a console comes first in the markup (sysadmin split),
     send it below its text so the two consoles don't stack back-to-back;
     the extra margin keeps it clear of the Line M band that follows */
  .service-split > .terminal-window:first-child {
    order: 2;
    margin-bottom: 40px;
  }
  .terminal-body {
    padding: 16px 18px;
    font-size: 11.5px;
    max-height: 190px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  }

  /* long uptime chips (e.g. »Flotten-Verfügbarkeit«) wrap instead of
     forcing their column wider than the screen */
  .uptime {
    white-space: normal;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }

  /* the drawer carries the CTA; keep logo, flags, and burger */
  .nav .nav-dash { display: none; }

  .section { padding: 60px 0; }

  .hero {
    min-height: auto;
    padding-top: 120px;
    padding-bottom: 60px;
  }

  .domain-search input { font-size: 15px; }

  .cta-section { padding: 60px 0; }

  .os-opt { width: 96px; }

  .result-row { gap: 14px; }
}

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

  html { scroll-behavior: auto; }

  .js .fade-up {
    opacity: 1;
    transform: none;
  }

  .js .linie .dot { transform: scale(1) !important; }
  .js .linie::after { transform: none !important; }

  .caret { display: none; }

  .ghost-num { animation: none; }
}

/* ==============================================================
   36. Hero schematic — Three.js canvas (home only)
   Background layer behind the hero copy: a quiet wireframe machine.
   ============================================================== */
.hero-canvas {
  position: absolute;
  top: 50%;
  right: clamp(-50px, -1.5vw, 0px);
  transform: translateY(-50%);
  /* Big box: spans most of the hero so the cubes have room and read larger. */
  width: min(78vw, 1180px);
  height: min(100vh, 1000px);
  z-index: 0;            /* above blobs/grid, below .hero-content (z-index:1) */
  pointer-events: none;
  /* Soft-fade the BOTTOM edge only. The cluster is taller than the hero can
     show, so its lowest cubes reach the hero's bottom boundary (where the
     showcase section begins). This gradient dissolves them out there instead
     of letting the hero's overflow hard-slice them. No left fade — the cubes
     sit clear of that edge, and fading it caused an unwanted left cutoff. */
  -webkit-mask-image: linear-gradient(to top, transparent, #000 11%);
  mask-image: linear-gradient(to top, transparent, #000 11%);
  opacity: 0;
  animation: heroCanvasIn 1.2s ease-out 0.2s forwards;
}
@keyframes heroCanvasIn { to { opacity: 0.85; } }

/* On narrow screens the machine would fight the copy — retire it. */
@media (max-width: 980px) {
  .hero-canvas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-canvas { animation: none; opacity: 0.7; }
}

/* ==============================================================
   37. POS. 01 — pinned horizontal showcase (Leistungsverzeichnis)
   GSAP pins .hwrap and scrubs .htrack sideways. Falls back to a
   native swipe row under .no-hpin / on touch / reduced motion.
   ============================================================== */
.showcase-head { max-width: 1280px; }
.showcase-head h2 { margin-bottom: 18px; }
.showcase-lead {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 62ch;
}

/* Scroll-down hint for the horizontal product directory. A muted vertical
   rule with an accent segment running downward — the vertical cousin of the
   hero's moving-line idiom. In the fallback (swipe) row it sits in normal
   flow under the panels; while the directory is pinned it's anchored to the
   foot of the viewport so it stays in view throughout the sideways scroll. */
.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(40px, 6vw, 72px);
  color: var(--text-muted);
}
@media (min-width: 1024px) and (min-height: 640px) {
  html:not(.no-hpin) .scroll-cue {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(18px, 4vh, 38px);
    margin-top: 0;
    z-index: 2;
  }
}
.scroll-cue-label {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.scroll-cue-line {
  position: relative;
  width: 1px;
  height: 56px;
  background: rgba(124, 124, 136, 0.22);
  overflow: hidden;
}
.scroll-cue-line i {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 18px;
  background: var(--accent);
  animation: scroll-cue-run 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes scroll-cue-run {
  0%   { transform: translateY(-20px); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(58px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-line i { animation: none; transform: translateY(19px); }
}

.hwrap { position: relative; margin-top: clamp(32px, 5vw, 56px); }

.htrack {
  display: flex;
  gap: clamp(16px, 1.8vw, 26px);
  /* first panel aligns to the container's content edge */
  padding-inline: max(40px, calc((100vw - 1280px) / 2 + 40px));
  width: max-content;
  will-change: transform;
}

/* While pinned, the track is vertically centred in the viewport. */
@media (min-width: 1024px) and (min-height: 640px) {
  html:not(.no-hpin) .hwrap {
    height: 100vh; height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    margin-top: 0;
  }
}

/* --- panels (screen objects: rounded + cool) --- */
.panel {
  position: relative;
  flex: none;
  width: clamp(360px, 33vw, 470px);
  background: linear-gradient(168deg, var(--surface), #101014 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.2vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.panel-wide { width: clamp(420px, 44vw, 660px); }

.panel::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; opacity: 0;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 0%), rgba(224, 90, 58, 0.10), transparent 64%);
  transition: opacity var(--transition-slow);
}
.panel:hover {
  border-color: rgba(224, 90, 58, 0.42);
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}
.panel:hover::after { opacity: 1; }

.panel-top { display: flex; align-items: baseline; justify-content: space-between; }
.panel-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.panel-code {
  font: 500 10px var(--font-mono);
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.panel-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.1;
}
.panel-desc {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* the inset mock (paper-dark screen) */
.panel-visual {
  background: var(--base-black);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  height: clamp(118px, 14vh, 150px);
  padding: 14px;
  overflow: hidden;
  flex: none;
}

.panel-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}
.panel-price {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
}
.panel-price-soft { color: var(--paper); opacity: 0.85; }
.panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 500 10px var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  transition: all var(--transition-base);
  white-space: nowrap;
}
.panel-cta svg { transition: transform var(--transition-base); }
.panel:hover .panel-cta { border-color: var(--accent); color: var(--accent); }
.panel:hover .panel-cta svg { transform: translate(2px, -2px); }

/* --- fallback: native swipe row (no GSAP / touch / reduced motion) --- */
html.no-hpin .hwrap { overflow: visible; }
html.no-hpin .htrack {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}
html.no-hpin .htrack::-webkit-scrollbar { display: none; }
html.no-hpin .panel { scroll-snap-align: center; }

/* ==============================================================
   38. Showcase mini-mocks (CSS-only, subtle life via keyframes)
   ============================================================== */
.sv-build { padding: 0; display: flex; flex-direction: column; }
.sv-build-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
}
.sv-build-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(124, 124, 136, 0.4); }
.sv-build-bar i:first-child { background: rgba(224, 90, 58, 0.75); }
.sv-build-bar .mono { margin-left: 8px; font-size: 10px; letter-spacing: 0.12em; color: var(--text-muted); }

/* builder canvas */
.sv-build-canvas { flex: 1; padding: 10px 13px; display: flex; flex-direction: column; gap: 7px; }
.sv-bm { border-radius: 5px; background: rgba(124, 124, 136, 0.12); }
.sv-bm-nav { height: 12px; display: flex; align-items: center; gap: 6px; padding-inline: 6px; }
.sv-bm-nav i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sv-bm-nav u { width: 40%; height: 4px; border-radius: 99px; background: rgba(124, 124, 136, 0.3); }
.sv-bm-hero { flex: 1; min-height: 24px; display: flex; flex-direction: column; gap: 5px; justify-content: center; padding-inline: 10px;
  background: linear-gradient(120deg, rgba(224, 90, 58, 0.16), rgba(242, 153, 74, 0.06)); }
.sv-bm-hero i { width: 55%; height: 5px; border-radius: 99px; background: rgba(234, 234, 236, 0.34); }
.sv-bm-hero b { width: 34%; height: 4px; border-radius: 99px; background: rgba(234, 234, 236, 0.18); }
.sv-bm-cols { display: flex; gap: 7px; height: 16px; }
.sv-bm-col { flex: 1; }
.sv-bm-btn { width: 60px; height: 11px; border-radius: 99px; background: var(--accent); opacity: 0.85; }

/* domains search */
.sv-dom { display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.sv-dom-input {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 11px; color: var(--text-muted);
}
.sv-dom-input .mono { font-size: 12px; color: var(--text-primary); letter-spacing: 0.02em; }
.sv-dom-caret { width: 1.5px; height: 13px; background: var(--accent); animation: svCaret 1.05s step-end infinite; }
@keyframes svCaret { 50% { opacity: 0; } }
.sv-dom-row { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; }
.sv-dom-row b { font-weight: 500; color: var(--text-primary); }
.sv-dom-row em { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--ops-green); border: 1px solid var(--ops-green-line); border-radius: 99px; padding: 2px 9px; }

/* vps resource bars */
.sv-vps { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.sv-vps-row { display: flex; align-items: center; gap: 10px; }
.sv-vps-row .mono { font-size: 10px; letter-spacing: 0.1em; color: var(--text-muted); width: 36px; flex: none; }
.sv-vps-bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(124, 124, 136, 0.14); overflow: hidden; }
.sv-vps-bar i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--accent); animation: svBar 3.4s ease-in-out infinite alternate; }
.sv-vps-row:nth-child(2) .sv-vps-bar i { animation-duration: 2.7s; animation-delay: 0.4s; }
.sv-vps-row:nth-child(3) .sv-vps-bar i { animation-duration: 4.1s; }
@keyframes svBar { from { width: calc(var(--w) * 0.5); } to { width: var(--w); } }
.sv-vps-status { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--text-muted); letter-spacing: 0.06em; }
.sv-vps-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ops-green); box-shadow: 0 0 9px var(--ops-green); animation: svLed 2s infinite; }

/* dedicated rack */
.sv-rack { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.sv-ru {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 11px; background: linear-gradient(90deg, #0e0f14, #0a0b0f);
}
.sv-ru .led { width: 6px; height: 6px; border-radius: 50%; background: var(--ops-green); animation: svLed 1.6s infinite; }
.sv-ru .led:nth-child(2) { background: var(--accent); animation-delay: 0.55s; animation-duration: 2.3s; }
.sv-ru:nth-child(2) .led:first-child { animation-delay: 0.9s; }
.sv-ru:nth-child(3) .led:nth-child(2) { animation-delay: 1.4s; }
@keyframes svLed { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.sv-ru b { width: 34%; height: 5px; border-radius: 99px; background: rgba(124, 124, 136, 0.16); }
.sv-ru .vent { margin-left: auto; width: 30%; height: 11px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(124, 124, 136, 0.18) 0 2px, transparent 2px 6px); }

/* services code mock */
.sv-code { display: flex; flex-direction: column; gap: 6px; justify-content: center; font-family: var(--font-mono); }
.sv-code-line { font-size: 12px; line-height: 1.5; color: var(--text-primary); white-space: nowrap; }
.sv-code-line.sv-ind { padding-left: 18px; }
.sv-tok-key { color: var(--accent); }
.sv-tok-fn { color: var(--accent-amber); }
.sv-tok-str { color: var(--ops-green); }
.sv-tok-op { color: var(--text-muted); }
.sv-code-out { margin-top: 4px; font-size: 11px; color: var(--ops-green); letter-spacing: 0.04em; }

/* webhosting: .zip in -> live site out */
.sv-host { display: flex; align-items: center; gap: 12px; justify-content: center; }
.sv-host-zip { flex: none; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.sv-host-zip .pkg {
  width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--border); color: var(--accent);
  background: linear-gradient(135deg, rgba(224, 90, 58, 0.16), rgba(242, 153, 74, 0.05));
  display: flex; align-items: center; justify-content: center;
}
.sv-host-zip .mono { font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-muted); }

.sv-host-pipe {
  flex: 1; min-width: 22px; height: 2px; position: relative; border-radius: 99px;
  background: repeating-linear-gradient(90deg, var(--border) 0 4px, transparent 4px 9px);
}
.sv-host-pipe i {
  position: absolute; top: 50%; left: 0; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  animation: svHostFlow 2.6s ease-in-out infinite;
}
@keyframes svHostFlow {
  0% { left: 0; opacity: 0; } 15% { opacity: 1; }
  85% { opacity: 1; } 100% { left: 100%; opacity: 0; }
}

.sv-host-site {
  flex: none; width: 138px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--base-black);
}
.sv-host-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-bottom: 1px solid var(--border); color: var(--ops-green);
}
.sv-host-bar .mono { font-size: 9.5px; color: var(--text-primary); letter-spacing: 0.02em; }
.sv-host-bar .live {
  margin-left: auto; display: flex; align-items: center; gap: 4px;
  font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.sv-host-bar .live i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ops-green); box-shadow: 0 0 7px var(--ops-green); animation: svLed 2s infinite;
}
.sv-host-page { padding: 10px 9px; display: flex; flex-direction: column; gap: 6px; }
.sv-host-page i { height: 10px; width: 68%; border-radius: 3px;
  background: linear-gradient(120deg, rgba(224, 90, 58, 0.2), rgba(242, 153, 74, 0.06)); }
.sv-host-page b { height: 4px; width: 90%; border-radius: 99px; background: rgba(234, 234, 236, 0.16); }
.sv-host-page u { height: 4px; width: 58%; border-radius: 99px; background: rgba(124, 124, 136, 0.22); }

/* ==============================================================
   39. Showcase responsive + reduced motion
   ============================================================== */
@media (max-width: 1023px) {
  .htrack { padding-inline: 32px; }
  .panel, .panel-wide { width: min(78vw, 420px); }
}
@media (max-width: 768px) {
  .htrack { padding-inline: 24px; gap: 16px; }
  .panel, .panel-wide { width: 82vw; padding: 24px; }
  .showcase-lead { font-size: 15.5px; }
}
@media (max-width: 480px) {
  .htrack { padding-inline: 16px; }
  .panel, .panel-wide { width: 86vw; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-vps-bar i, .sv-dom-caret, .sv-ru .led, .sv-vps-status i,
  .sv-host-pipe i, .sv-host-bar .live i { animation: none !important; }
}