/* Telegraph Storage landing — editorial storytelling with progressive motion. */
:root {
  --landing-max: 1240px;
  --landing-gutter: max(24px, calc((100vw - var(--landing-max)) / 2));
  --landing-line: color-mix(in srgb, var(--md-sys-color-outline-variant) 82%, transparent);
  --landing-accent: var(--md-sys-color-primary);
  --landing-warm: var(--md-sys-color-secondary);
  --landing-blue: var(--md-sys-color-tertiary);
  --landing-accent-soft: color-mix(in srgb, var(--md-sys-color-primary-container) 62%, var(--md-sys-color-surface));
  --landing-warm-soft: color-mix(in srgb, var(--md-sys-color-secondary-container) 54%, var(--md-sys-color-surface));
  --landing-blue-soft: color-mix(in srgb, var(--md-sys-color-tertiary-container) 48%, var(--md-sys-color-surface));
  --landing-ease: cubic-bezier(.2, .72, .18, 1);
  --landing-ease-spring: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.landing-body {
  margin: 0;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  font-family: var(--font);
  overflow-x: hidden;
}
body.landing-body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--landing-line) 1px, transparent 1px), linear-gradient(90deg, var(--landing-line) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: .13;
  mask-image: linear-gradient(to bottom, black, transparent 48%);
}
body.landing-body.has-custom-background::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--landing-background-image) center / cover no-repeat;
  opacity: .075;
  pointer-events: none;
}
.landing-body > main, .landing-footer { position: relative; z-index: var(--z-content); }
a { color: inherit; }

/* Navigation gently compacts after the first scroll. */
.landing-header {
  position: sticky;
  z-index: var(--z-app-header);
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 var(--landing-gutter);
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--md-sys-color-surface) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.25);
  transition: min-height 420ms var(--landing-ease), border-color 420ms var(--landing-ease), background 420ms var(--landing-ease), box-shadow 420ms var(--landing-ease);
}
.landing-header.is-scrolled {
  min-height: 64px;
  border-color: var(--landing-line);
  background: color-mix(in srgb, var(--md-sys-color-surface) 94%, transparent);
  box-shadow: 0 8px 32px rgba(var(--md-sys-color-shadow), .06);
}
.scroll-progress { position: absolute; inset: auto 0 -1px; height: 2px; overflow: hidden; pointer-events: none; }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--landing-accent); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.landing-brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.landing-brand .brand-mark { width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--landing-accent) 16%, transparent); border-radius: 11px; transition: transform 500ms var(--landing-ease-spring), border-radius 500ms var(--landing-ease), background 300ms var(--landing-ease); }
.landing-brand .brand-mark svg { width: 21px; height: 21px; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font-size: .94rem; line-height: 1.1; letter-spacing: -.015em; }
.brand-copy small { color: var(--md-sys-color-on-surface-variant); font: 600 .61rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.landing-nav { display: flex; align-items: center; gap: 4px; }
.landing-nav > a { position: relative; padding: 10px 12px; color: var(--md-sys-color-on-surface-variant); text-decoration: none; font-size: .84rem; transition: color 240ms var(--landing-ease); }
.landing-nav > a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 360ms var(--landing-ease); }
.nav-divider { width: 1px; height: 22px; margin: 0 5px; background: var(--landing-line); }
.language-btn { min-width: 42px; height: 40px; border: 0; border-radius: 10px; color: var(--md-sys-color-on-surface-variant); background: transparent; font: 750 .75rem/1 var(--font-mono); cursor: pointer; transition: color 220ms var(--landing-ease), background 220ms var(--landing-ease), transform 220ms var(--landing-ease); }
.theme-icon { transition: transform 560ms var(--landing-ease); }
#theme-btn.theme-switching .theme-icon { transform: rotate(180deg) scale(.72); }

main { overflow: clip; }
.landing-hero {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  gap: clamp(42px, 5.5vw, 82px);
  align-items: center;
  width: min(var(--landing-max), calc(100% - 48px));
  min-height: min(760px, calc(100svh - 76px));
  margin: 0 auto;
  padding: 76px 0 88px;
}
.landing-hero::before {
  content: '';
  position: absolute;
  right: clamp(250px, 29vw, 410px);
  top: 13%;
  width: clamp(130px, 16vw, 220px);
  aspect-ratio: 1;
  border: 1px dashed color-mix(in srgb, var(--landing-blue) 32%, transparent);
  border-radius: 50%;
  opacity: .45;
  pointer-events: none;
  animation: hero-orbit 24s linear infinite;
}
.hero-copy { position: relative; z-index: var(--z-content); }
.eyebrow, .section-kicker { margin: 0 0 18px; color: var(--landing-accent); font: 780 .7rem/1.4 var(--font-mono); letter-spacing: .115em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.signal-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--landing-accent); }
.signal-dot::before { content: ''; position: absolute; inset: -5px; border: 1px solid var(--landing-accent); border-radius: 50%; animation: signal-pulse 2.2s ease-out infinite; }
.hero-copy h1 { max-width: 720px; margin: 0; font-size: clamp(3rem, 5.8vw, 5.15rem); font-weight: 680; line-height: .98; letter-spacing: -.064em; text-wrap: balance; }
.hero-lede { max-width: 650px; margin: 29px 0 0; color: var(--md-sys-color-on-surface-variant); font-size: clamp(1rem, 1.7vw, 1.19rem); line-height: 1.66; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 33px; }
.hero-actions .btn { position: relative; min-height: 48px; padding-inline: 20px; overflow: hidden; border-radius: 12px; text-decoration: none; transition: color 280ms var(--landing-ease), background 280ms var(--landing-ease), border-color 280ms var(--landing-ease), transform 280ms var(--landing-ease), box-shadow 280ms var(--landing-ease); }
.hero-actions .btn svg { width: 18px; height: 18px; transition: transform 280ms var(--landing-ease); }
.hero-actions .landing-primary { color: var(--md-sys-color-on-primary); background: var(--landing-accent); box-shadow: 0 9px 24px color-mix(in srgb, var(--landing-accent) 20%, transparent); }
.hero-actions .landing-primary:active { color: var(--md-sys-color-on-primary); background: color-mix(in srgb, var(--md-sys-color-on-primary) 14%, var(--landing-accent)); transform: translateY(0); }
.landing-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, color-mix(in srgb, white 25%, transparent) 48%, transparent 70%); transform: translateX(-130%); transition: transform 700ms var(--landing-ease); }
.landing-primary > * { position: relative; }
.hero-actions .source-action { border: 1px solid var(--landing-line); color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-surface) 76%, transparent); }
.hero-note { display: flex; gap: 8px; margin: 16px 0 0; color: var(--md-sys-color-on-surface-variant); font-size: .79rem; line-height: 1.5; }
.hero-note > span:first-child { color: var(--landing-accent); }

/* Hero process map: motion explains the workflow rather than decorating it. */
.storage-visual {
  --visual-rx: 0deg;
  --visual-ry: 0deg;
  position: relative;
  min-height: 530px;
  overflow: hidden;
  border: 1px solid var(--landing-line);
  border-radius: 24px 24px 72px 24px;
  background: color-mix(in srgb, var(--landing-accent-soft) 36%, var(--md-sys-color-surface-container-low));
  box-shadow: 0 28px 70px rgba(var(--md-sys-color-shadow), .09);
  transform: perspective(1100px) rotateX(var(--visual-rx)) rotateY(var(--visual-ry));
  transform-style: preserve-3d;
  transition: transform 180ms ease-out, border-color 420ms var(--landing-ease), border-radius 500ms var(--landing-ease), box-shadow 500ms var(--landing-ease);
}
.visual-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--landing-line) 1px, transparent 1px), linear-gradient(90deg, var(--landing-line) 1px, transparent 1px); background-size: 46px 46px; opacity: .35; mask-image: radial-gradient(circle at 50% 48%, black, transparent 77%); }
.visual-topline { position: absolute; top: 18px; left: 20px; right: 20px; display: flex; justify-content: space-between; color: var(--md-sys-color-outline); font: 650 .61rem/1 var(--font-mono); letter-spacing: .1em; }
.visual-status { display: flex; align-items: center; gap: 7px; }
.visual-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--landing-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--landing-accent) 12%, transparent); animation: status-blink 1.7s ease-in-out infinite; }
.orbit-field { position: absolute; inset: 52px 20px 56px; }
.flow-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-path { fill: none; stroke-width: 1.25; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; animation: route-dash 18s linear infinite; }
.flow-path-a { stroke: color-mix(in srgb, var(--landing-accent) 42%, var(--landing-line)); }
.flow-path-b { stroke: color-mix(in srgb, var(--landing-warm) 38%, var(--landing-line)); animation-direction: reverse; animation-duration: 22s; }
.flow-path-c { stroke: color-mix(in srgb, var(--landing-blue) 38%, var(--landing-line)); animation-duration: 12s; }
.flow-node { --node-accent: var(--landing-accent); position: absolute; display: grid; gap: 7px; width: 132px; padding: 13px; border: 1px solid color-mix(in srgb, var(--node-accent) 20%, var(--landing-line)); border-radius: 12px; background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 92%, var(--node-accent)); box-shadow: 0 8px 18px rgba(var(--md-sys-color-shadow), .06); transition: transform 380ms var(--landing-ease-spring), border-color 380ms var(--landing-ease), background 380ms var(--landing-ease), box-shadow 380ms var(--landing-ease); }
.flow-node span { color: var(--node-accent); font: 700 .61rem/1 var(--font-mono); }
.flow-node strong { font-size: .76rem; line-height: 1.28; }
.node-stage { left: 0; top: 20px; animation: node-float-a 5.8s ease-in-out infinite; }
.node-review { --node-accent: var(--landing-blue); right: 0; top: 24px; animation: node-float-b 6.6s ease-in-out infinite; }
.node-push { --node-accent: var(--landing-warm); left: 0; bottom: 20px; animation: node-float-b 6.2s ease-in-out infinite; }
.node-remote { right: 0; bottom: 20px; animation: node-float-a 7s ease-in-out infinite; }
.flow-hub { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 82px; height: 82px; border: 1px solid var(--landing-accent); border-radius: 24px; color: var(--landing-accent); background: var(--md-sys-color-primary-container); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 16px 42px color-mix(in srgb, var(--landing-accent) 16%, transparent); }
.flow-hub svg { width: 32px; height: 32px; transform: rotate(-45deg); }
.hub-ring { position: absolute; inset: -13px; border: 1px solid color-mix(in srgb, var(--landing-accent) 36%, transparent); border-radius: 31px; animation: hub-breathe 2.8s ease-in-out infinite; }
.packet { position: absolute; width: 7px; height: 7px; border: 2px solid var(--md-sys-color-surface); border-radius: 50%; background: var(--landing-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--landing-accent) 18%, transparent); }
.packet-a { animation: packet-a 5.4s var(--landing-ease) infinite; }
.packet-b { background: var(--landing-warm); animation: packet-b 6.2s var(--landing-ease) 1.1s infinite; }
.packet-c { background: var(--landing-blue); animation: packet-c 4.5s var(--landing-ease) .6s infinite; }
.visual-caption { position: absolute; left: 20px; right: 20px; bottom: 18px; display: flex; align-items: center; gap: 14px; color: var(--md-sys-color-on-surface-variant); font: 650 .64rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.visual-caption i { flex: 1; height: 1px; background: var(--landing-line); transform-origin: left; animation: caption-line 3.4s var(--landing-ease) infinite; }

/* Initial load is orchestrated only after JS marks the document ready. */
.hero-reveal { opacity: 1; transform: none; }
.motion-ready .hero-reveal { opacity: 0; transform: translateY(24px); }
.motion-ready .storage-visual.hero-reveal { transform: perspective(1100px) translateY(30px) rotateX(2deg) scale(.97); }
.motion-ready.landing-ready .hero-reveal { opacity: 1; transform: translateY(0); transition: opacity 800ms var(--landing-ease), transform 900ms var(--landing-ease); }
.landing-ready .hero-copy .hero-reveal:nth-child(1) { transition-delay: 80ms; }
.landing-ready .hero-copy .hero-reveal:nth-child(2) { transition-delay: 160ms; }
.landing-ready .hero-copy .hero-reveal:nth-child(3) { transition-delay: 260ms; }
.landing-ready .hero-copy .hero-reveal:nth-child(4) { transition-delay: 360ms; }
.landing-ready .hero-copy .hero-reveal:nth-child(5) { transition-delay: 450ms; }
.landing-ready .storage-visual.hero-reveal { transform: perspective(1100px) rotateX(var(--visual-rx)) rotateY(var(--visual-ry)); transition-delay: 260ms; }

.motion-rail { position: relative; overflow: hidden; padding: 17px 0; border-block: 1px solid color-mix(in srgb, var(--md-sys-color-inverse-primary) 34%, transparent); background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); transform: rotate(-1.1deg) scale(1.025); }
.motion-track { display: flex; align-items: center; width: max-content; animation: rail-motion 32s linear infinite; }
.motion-track span { padding-inline: 28px; font: 680 clamp(.72rem, 1.4vw, .9rem)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.motion-track i { color: var(--md-sys-color-inverse-primary); font-style: normal; font-size: .62rem; }

/* Sticky story keeps the product narrative central while steps move past it. */
.workflow-story { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); gap: clamp(60px, 10vw, 150px); width: min(var(--landing-max), calc(100% - 48px)); margin: 0 auto; padding: 150px 0 130px; }
.story-intro { position: sticky; top: 128px; align-self: start; }
.story-intro h2, .section-heading h2, .lineage h2 { max-width: 700px; margin: 0; font-size: clamp(2.15rem, 4.2vw, 3.7rem); font-weight: 650; line-height: 1.05; letter-spacing: -.052em; text-wrap: balance; }
.story-intro > p:not(.section-kicker) { max-width: 520px; margin: 28px 0 0; color: var(--md-sys-color-on-surface-variant); font-size: 1rem; line-height: 1.75; }
.story-index { display: block; margin-top: 44px; color: var(--md-sys-color-outline); font: 650 .66rem/1 var(--font-mono); letter-spacing: .13em; }
.workflow-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.workflow-step { position: relative; display: grid; grid-template-columns: 52px 1fr 54px; gap: 22px; align-items: start; min-height: 230px; padding: 6px 0 64px; color: var(--md-sys-color-on-surface-variant); border-top: 1px solid var(--landing-line); transition: color 600ms var(--landing-ease), transform 600ms var(--landing-ease), background 420ms var(--landing-ease); }
.workflow-step:last-child { min-height: 170px; }
.workflow-step::before { content: ''; position: absolute; left: 51px; top: -1px; width: 0; height: 1px; background: var(--landing-accent); transition: width 850ms var(--landing-ease); }
.workflow-step.is-visible { color: var(--md-sys-color-on-surface); }
.workflow-step.is-visible::before { width: calc(100% - 51px); }
.step-marker { position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin-top: 22px; border: 1px solid var(--landing-line); border-radius: 50%; color: var(--md-sys-color-outline); font: 700 .61rem/1 var(--font-mono); transition: color 500ms var(--landing-ease), background 500ms var(--landing-ease), border-color 500ms var(--landing-ease), transform 500ms var(--landing-ease); }
.step-marker i { position: absolute; top: 34px; width: 1px; height: 175px; background: var(--landing-line); transform: scaleY(0); transform-origin: top; transition: transform 1s var(--landing-ease) .2s; }
.workflow-step.is-visible .step-marker { color: var(--md-sys-color-on-primary); border-color: var(--landing-accent); background: var(--landing-accent); transform: rotate(360deg); }
.workflow-step.is-visible .step-marker i { transform: scaleY(1); }
.workflow-step:last-child .step-marker i { display: none; }
.workflow-step h3 { margin: 20px 0 12px; color: var(--md-sys-color-on-surface); font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -.03em; transition: color 420ms var(--landing-ease); }
.workflow-step p { max-width: 540px; margin: 0; font-size: .94rem; line-height: 1.7; }
.workflow-step > svg { width: 46px; height: 46px; margin-top: 18px; color: var(--md-sys-color-outline); transition: color 500ms var(--landing-ease), transform 650ms var(--landing-ease); }
.workflow-step.is-visible > svg { color: var(--landing-accent); transform: translateY(-5px) rotate(-5deg); }

.capabilities { position: relative; padding: 126px var(--landing-gutter) 136px; border-block: 1px solid var(--landing-line); background: var(--md-sys-color-surface-container-low); }
.capabilities::before { content: 'TS'; position: absolute; top: 48px; right: var(--landing-gutter); color: var(--landing-line); font: 800 clamp(5rem, 12vw, 10rem)/1 var(--font-mono); letter-spacing: -.1em; pointer-events: none; }
.section-heading { position: relative; max-width: 780px; margin-bottom: 68px; }
.capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(var(--landing-max), 100%); margin: 0 auto; }
.capability-card { --card-accent: var(--landing-accent); --card-soft: var(--landing-accent-soft); position: relative; display: grid; grid-template-columns: 40px minmax(145px, .82fr) minmax(0, 1.18fr); gap: 24px; align-items: center; min-height: 340px; padding: clamp(24px, 4vw, 46px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--card-accent) 14%, var(--landing-line)); border-radius: 20px; background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 96%, var(--card-soft)); transition: transform 520ms var(--landing-ease-spring), border-radius 520ms var(--landing-ease), box-shadow 520ms var(--landing-ease), border-color 520ms var(--landing-ease), background 520ms var(--landing-ease); }
.capability-card::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--card-accent); transform: scaleX(.16); transform-origin: left; opacity: .74; transition: transform 620ms var(--landing-ease-spring), opacity 320ms var(--landing-ease); }
.capability-card::after { content: ''; position: absolute; right: -54px; bottom: -74px; width: 150px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--card-accent) 24%, transparent); border-radius: 50%; opacity: .42; transform: scale(.76); transition: transform 720ms var(--landing-ease-spring), opacity 420ms var(--landing-ease); pointer-events: none; }
.capability-preview { --card-accent: var(--landing-blue); --card-soft: var(--landing-blue-soft); }
.capability-links { --card-accent: var(--landing-warm); --card-soft: var(--landing-warm-soft); }
.capability-number { position: relative; z-index: 1; align-self: start; color: var(--card-accent); font: 700 .65rem/1 var(--font-mono); }
.capability-card > div:last-child { position: relative; z-index: 1; }
.capability-card h3 { margin: 0 0 17px; font-size: 1.22rem; letter-spacing: -.025em; transition: color 320ms var(--landing-ease); }
.capability-card p { margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: .89rem; line-height: 1.68; }
.capability-art { position: relative; z-index: 1; min-height: 180px; }
.album-art span { position: absolute; left: 50%; width: 138px; height: 92px; border: 1px solid var(--landing-line); border-radius: 12px; background: var(--md-sys-color-surface-container); transform-origin: bottom center; transition: transform 650ms var(--landing-ease); }
.album-art span::before { content: ''; position: absolute; top: -9px; left: 12px; width: 46px; height: 10px; border: 1px solid var(--landing-line); border-bottom: 0; border-radius: 6px 6px 0 0; background: inherit; }
.album-art span:nth-child(1) { top: 55px; transform: translateX(-50%) rotate(-9deg); }
.album-art span:nth-child(2) { top: 41px; background: var(--md-sys-color-secondary-container); transform: translateX(-50%) rotate(3deg); }
.album-art span:nth-child(3) { top: 25px; background: var(--md-sys-color-primary-container); transform: translateX(-50%) rotate(-2deg); }
.preview-art { display: flex; align-items: end; justify-content: center; gap: 5px; padding-bottom: 12px; }
.preview-frame { position: absolute; left: 50%; top: 12px; width: 148px; height: 110px; overflow: hidden; border: 1px solid var(--landing-line); border-radius: 12px; background: var(--md-sys-color-surface-container); transform: translateX(-50%) rotate(-2deg); transition: transform 600ms var(--landing-ease), border-radius 600ms var(--landing-ease); }
.preview-frame i { position: absolute; left: 20px; bottom: 19px; width: 45px; height: 45px; border-radius: 50%; background: var(--md-sys-color-primary-container); }
.preview-frame b { position: absolute; right: 16px; bottom: 18px; width: 58px; height: 38px; background: var(--md-sys-color-tertiary-container); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.preview-type { position: relative; padding: 6px 8px; border: 1px solid var(--landing-line); border-radius: 7px; background: var(--md-sys-color-surface-container-lowest); font: 700 .55rem/1 var(--font-mono); transition: transform 500ms var(--landing-ease); }
.code-art { display: grid; align-content: center; gap: 12px; font: 600 .56rem/1.4 var(--font-mono); color: var(--md-sys-color-on-surface-variant); }
.code-art span { position: relative; display: block; max-width: 165px; overflow: hidden; padding: 10px; border: 1px solid var(--landing-line); border-radius: 8px; background: var(--md-sys-color-surface-container); white-space: nowrap; transition: transform 520ms var(--landing-ease), color 520ms var(--landing-ease); }
.code-art span:nth-child(2) { margin-left: 19px; }
.code-art span:nth-child(3) { margin-left: 8px; }
.code-art i { position: absolute; left: 8px; top: 15%; width: 2px; height: 70%; background: var(--card-accent); transform: scaleY(0); transform-origin: top; transition: transform 700ms var(--landing-ease); }
.remote-art { display: grid; place-items: center; }
.remote-core { width: 50px; height: 50px; border-radius: 16px; background: var(--md-sys-color-primary-container); transform: rotate(45deg); transition: transform 800ms var(--landing-ease), border-radius 800ms var(--landing-ease); }
.remote-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid var(--landing-line); border-radius: 50%; transform: translate(-50%, -50%) rotate(-17deg); }
.orbit-one { width: 150px; height: 70px; }
.orbit-two { width: 95px; height: 150px; }
.remote-art i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--landing-accent); }
.remote-art i:nth-of-type(1) { transform: translate(65px, -15px); }
.remote-art i:nth-of-type(2) { transform: translate(-54px, 35px); background: var(--landing-warm); }
.remote-art i:nth-of-type(3) { transform: translate(-3px, -76px); background: var(--landing-blue); }

.lineage { display: grid; grid-template-columns: 120px minmax(280px, .85fr) minmax(320px, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; width: min(var(--landing-max), calc(100% - 48px)); margin: 0 auto; padding: 132px 0; }
.lineage-mark { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border: 1px solid var(--landing-line); border-radius: 50%; color: var(--landing-accent); font: 800 1rem/1 var(--font-mono); }
.lineage-mark::before, .lineage-mark::after { content: ''; position: absolute; width: 16px; height: 16px; border: 1px solid var(--landing-accent); border-radius: 50%; }
.lineage-mark::before { top: -3px; right: 7px; animation: lineage-dot 4s ease-in-out infinite; }
.lineage-mark::after { left: -5px; bottom: 18px; animation: lineage-dot 4s ease-in-out 1.3s infinite; }
.lineage-mark i { position: absolute; inset: 11px; border: 1px dashed var(--landing-line); border-radius: 50%; animation: lineage-ring-spin 16s linear infinite; }
.lineage-copy p { margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: 1rem; line-height: 1.78; }
.lineage-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 31px; }
.lineage-actions a { color: var(--landing-accent); font-weight: 700; text-underline-offset: 5px; }
.lineage-actions .lineage-primary { min-height: 46px; padding-inline: 20px; border-radius: 12px; color: var(--md-sys-color-on-primary); background: var(--landing-accent); text-decoration: none; transition: color 260ms var(--landing-ease), background 260ms var(--landing-ease), transform 260ms var(--landing-ease), box-shadow 260ms var(--landing-ease); }

.landing-footer { display: flex; align-items: center; gap: 22px; width: min(var(--landing-max), calc(100% - 48px)); margin: 0 auto; padding: 28px 0 42px; border-top: 1px solid var(--landing-line); color: var(--md-sys-color-on-surface-variant); font-size: .79rem; }
.landing-footer span:first-child { color: var(--md-sys-color-on-surface); font-weight: 720; }
.landing-footer a { margin-left: auto; color: var(--landing-accent); font-weight: 700; }

/* Scroll reveals are progressive: content remains visible without JS. */
.reveal-on-scroll { opacity: 1; transform: none; }
.motion-ready .reveal-on-scroll:not(.is-visible) { opacity: 0; transform: translateY(42px); }
.motion-ready .reveal-on-scroll { transition: opacity 850ms var(--landing-ease), transform 900ms var(--landing-ease); }
.motion-ready .workflow-step.reveal-on-scroll { transition: opacity 850ms var(--landing-ease), transform 600ms var(--landing-ease-spring), color 600ms var(--landing-ease), background 420ms var(--landing-ease); }
.motion-ready .capability-card.reveal-on-scroll { transition: transform 520ms var(--landing-ease-spring), border-radius 520ms var(--landing-ease), box-shadow 520ms var(--landing-ease), border-color 520ms var(--landing-ease), background 520ms var(--landing-ease); }
.motion-ready .capability-card.reveal-on-scroll:not(.is-visible)::before { transform: scaleX(0); }
.motion-ready .capability-card.reveal-on-scroll.is-visible { animation: capability-reveal 850ms var(--landing-ease) var(--reveal-delay, 0ms) backwards; }
.motion-ready .capability-card:nth-child(2) { --reveal-delay: 90ms; }
.motion-ready .capability-card:nth-child(3) { --reveal-delay: 130ms; }
.motion-ready .capability-card:nth-child(4) { --reveal-delay: 200ms; }

@keyframes capability-reveal { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: none; } }
@keyframes hero-orbit { to { transform: rotate(360deg); } }
@keyframes signal-pulse { 0% { opacity: .7; transform: scale(.45); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes status-blink { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes route-dash { to { stroke-dashoffset: -120; } }
@keyframes node-float-a { 0%, 100% { margin-top: 0; } 50% { margin-top: -7px; } }
@keyframes node-float-b { 0%, 100% { margin-top: -4px; } 50% { margin-top: 4px; } }
@keyframes hub-breathe { 0%, 100% { opacity: .35; transform: scale(.84); } 50% { opacity: .95; transform: scale(1.08); } }
@keyframes packet-a { 0% { left: 12%; top: 17%; opacity: 0; } 12%, 88% { opacity: 1; } 50% { left: 50%; top: 50%; } 100% { left: 87%; top: 18%; opacity: 0; } }
@keyframes packet-b { 0% { left: 12%; top: 82%; opacity: 0; } 12%, 88% { opacity: 1; } 50% { left: 50%; top: 50%; } 100% { left: 87%; top: 82%; opacity: 0; } }
@keyframes packet-c { 0% { left: 50%; top: 50%; opacity: 0; } 20%, 75% { opacity: 1; } 100% { left: 50%; top: -3%; opacity: 0; } }
@keyframes caption-line { 0%, 100% { transform: scaleX(.2); opacity: .35; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes rail-motion { to { transform: translateX(-50%); } }
@keyframes remote-spin { to { transform: translate(-50%, -50%) rotate(343deg); } }
@keyframes remote-spin-reverse { to { transform: translate(-50%, -50%) rotate(-377deg); } }
@keyframes lineage-ring-spin { to { transform: rotate(360deg); } }
@keyframes lineage-dot { 0%, 100% { transform: scale(.7); opacity: .4; } 50% { transform: scale(1.15); opacity: 1; } }

@media (max-width: 1040px) {
  .landing-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap: 44px; }
  .hero-copy h1 { font-size: clamp(3rem, 6.3vw, 4.5rem); }
  .storage-visual { min-height: 490px; }
  .flow-node { width: 116px; padding: 11px; }
  .capability-card { grid-template-columns: 38px 1fr; }
  .capability-art { grid-column: 1 / -1; grid-row: 1; min-height: 155px; }
  .capability-number { grid-row: 2; }
  .capability-card > div:last-child { grid-row: 2; }
  .lineage { grid-template-columns: 92px minmax(0, 1fr); gap: 42px; }
  .lineage-copy { grid-column: 2; }
  .lineage-mark { width: 76px; height: 76px; }
}

@media (max-width: 880px) {
  .landing-nav > a { display: none; }
  .nav-divider { display: none; }
  .landing-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 64px; }
  .landing-hero::before { right: -28px; top: 41%; }
  .hero-copy { max-width: 720px; }
  .storage-visual { width: min(590px, 100%); min-height: 500px; }
  .workflow-story { grid-template-columns: 1fr; gap: 70px; padding-top: 110px; }
  .story-intro { position: relative; top: auto; }
  .story-intro > p:not(.section-kicker) { max-width: 680px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { grid-template-columns: 46px minmax(180px, .7fr) 1.3fr; }
  .capability-art { grid-column: auto; grid-row: auto; min-height: 180px; }
  .capability-number, .capability-card > div:last-child { grid-row: auto; }
  .lineage { grid-template-columns: 86px 1fr; }
  .lineage-copy { grid-column: 2; }
  .lineage-mark { width: 76px; height: 76px; }
}

@media (max-width: 600px) {
  :root { --landing-gutter: 18px; }
  body.landing-body::after { background-size: 48px 48px; }
  .landing-header { min-height: 66px; padding-inline: 18px; }
  .landing-header.is-scrolled { min-height: 60px; }
  .landing-brand .brand-mark { width: 34px; height: 34px; }
  .brand-copy small { display: none; }
  .landing-hero, .workflow-story, .lineage, .landing-footer { width: calc(100% - 36px); }
  .landing-hero { gap: 54px; padding: 50px 0 72px; }
  .hero-copy h1 { font-size: clamp(2.45rem, 12vw, 3.35rem); line-height: 1.01; }
  .hero-lede { font-size: 1rem; }
  .hero-actions { align-items: stretch; }
  .hero-actions .btn { flex: 1 1 100%; }
  .storage-visual { min-height: 430px; border-radius: 18px 18px 48px 18px; }
  .orbit-field { inset: 48px 13px 53px; }
  .visual-topline, .visual-caption { left: 14px; right: 14px; }
  .flow-node { width: 104px; padding: 9px; }
  .flow-node strong { font-size: .67rem; }
  .flow-hub { width: 66px; height: 66px; border-radius: 19px; }
  .flow-hub svg { width: 27px; height: 27px; }
  .hub-ring { inset: -9px; border-radius: 24px; }
  .motion-rail { padding-block: 14px; }
  .workflow-story { gap: 62px; padding: 96px 0 88px; }
  .story-intro h2, .section-heading h2, .lineage h2 { font-size: clamp(2.15rem, 11vw, 3rem); }
  .workflow-step { grid-template-columns: 42px 1fr; gap: 14px; min-height: 245px; }
  .workflow-step > svg { display: none; }
  .workflow-step::before { left: 41px; }
  .workflow-step.is-visible::before { width: calc(100% - 41px); }
  .step-marker i { height: 192px; }
  .workflow-step h3 { margin-top: 20px; }
  .capabilities { padding-block: 92px 98px; }
  .capabilities::before { top: 30px; }
  .section-heading { margin-bottom: 50px; }
  .capability-card { grid-template-columns: 34px 1fr; gap: 18px; min-height: 0; padding: 26px 22px 31px; }
  .capability-art { grid-column: 1 / -1; grid-row: 1; min-height: 160px; }
  .capability-number { grid-row: 2; }
  .capability-card > div:last-child { grid-row: 2; }
  .lineage { grid-template-columns: 1fr; gap: 30px; padding: 96px 0; }
  .lineage-mark { width: 72px; height: 72px; }
  .lineage-copy { grid-column: auto; }
  .lineage-actions { align-items: flex-start; flex-direction: column; }
  .landing-footer { align-items: flex-start; flex-wrap: wrap; }
  .landing-footer a { width: 100%; margin-left: 0; }
}

@media (max-width: 420px) {
  .landing-header { padding-inline: 14px; }
  .landing-hero, .workflow-story, .lineage, .landing-footer { width: calc(100% - 28px); }
  .hero-actions .btn { padding-inline: 16px; }
  .storage-visual { min-height: 402px; }
  .orbit-field { inset-inline: 10px; }
  .flow-node { width: 88px; padding: 8px; }
  .flow-node strong { font-size: .6rem; }
  .flow-hub { width: 58px; height: 58px; border-radius: 17px; }
  .flow-hub svg { width: 24px; height: 24px; }
  .visual-caption { font-size: .56rem; letter-spacing: .05em; }
  .capability-card { padding-inline: 18px; }
}

/* Hover motion is reserved for devices that actually have a precise pointer.
   This prevents sticky :hover colors and displaced cards on touch screens. */
@media (hover: hover) and (pointer: fine) {
  .landing-brand:hover .brand-mark { transform: rotate(-7deg) scale(1.05); border-radius: 14px 8px 14px 8px; background: var(--landing-accent-soft); }
  .landing-nav > a:hover { color: var(--md-sys-color-on-surface); }
  .landing-nav > a:hover::after { transform: scaleX(1); transform-origin: left; }
  .language-btn:hover, .landing-header .icon-btn:hover { color: var(--landing-accent); background: var(--landing-accent-soft); transform: translateY(-2px); }
  .hero-actions .btn:hover { transform: translateY(-3px); }
  .hero-actions .btn:hover svg { transform: translateX(3px); }
  .hero-actions .landing-primary:hover { color: var(--md-sys-color-on-primary); background: color-mix(in srgb, var(--md-sys-color-on-primary) 9%, var(--landing-accent)); box-shadow: 0 14px 30px color-mix(in srgb, var(--landing-accent) 25%, transparent); }
  .landing-primary:hover::before { transform: translateX(130%); }
  .source-action:hover { border-color: color-mix(in srgb, var(--landing-accent) 52%, var(--landing-line)); background: var(--landing-accent-soft); }
  .source-action:hover svg { transform: rotate(-7deg) scale(1.08); }
  .storage-visual:hover { border-color: color-mix(in srgb, var(--landing-accent) 34%, var(--landing-line)); border-radius: 24px 72px 24px 24px; box-shadow: 0 34px 84px rgba(var(--md-sys-color-shadow), .14); }
  .flow-node:hover { z-index: var(--z-content); transform: translateY(-7px) scale(1.03); border-color: var(--node-accent); background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 84%, var(--node-accent)); box-shadow: 0 14px 28px rgba(var(--md-sys-color-shadow), .1); animation-play-state: paused; }
  .motion-rail:hover .motion-track { animation-play-state: paused; }
  .workflow-step:hover { color: var(--md-sys-color-on-surface); transform: translateX(8px); background: color-mix(in srgb, var(--landing-accent-soft) 28%, transparent); }
  .workflow-step:hover h3 { color: var(--landing-accent); }
  .workflow-step:hover > svg { color: var(--landing-accent); transform: translateY(-7px) rotate(4deg) scale(1.05); }
  .capability-card:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--card-accent) 58%, var(--landing-line)); border-radius: 20px 48px 20px 20px; background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 89%, var(--card-soft)); box-shadow: 0 28px 56px rgba(var(--md-sys-color-shadow), .1); }
  .capability-card:nth-child(2):hover, .capability-card:nth-child(3):hover { border-radius: 48px 20px 20px 20px; }
  .capability-card:hover::before { transform: scaleX(1); opacity: 1; }
  .capability-card:hover::after { opacity: .78; transform: scale(1.14) translate(-7px, -7px); }
  .capability-card:hover h3 { color: var(--card-accent); }
  .capability-card:hover .album-art span:nth-child(1) { transform: translate(-64%, 12px) rotate(-14deg); }
  .capability-card:hover .album-art span:nth-child(2) { transform: translate(-44%, -2px) rotate(8deg); }
  .capability-card:hover .album-art span:nth-child(3) { transform: translate(-50%, -17px) rotate(-2deg); }
  .capability-card:hover .preview-frame { border-radius: 28px 12px 28px 12px; transform: translate(-50%, -10px) rotate(2deg); }
  .capability-card:hover .preview-type:nth-of-type(2) { transform: translateY(5px) rotate(-7deg); }
  .capability-card:hover .preview-type:nth-of-type(3) { transform: translateY(10px); }
  .capability-card:hover .preview-type:nth-of-type(4) { transform: translateY(5px) rotate(7deg); }
  .capability-card:hover .code-art i { transform: scaleY(1); }
  .capability-card:hover .code-art span:nth-child(1) { color: var(--card-accent); transform: translateX(10px); }
  .capability-card:hover .code-art span:nth-child(2) { transform: translateX(-5px); }
  .capability-card:hover .code-art span:nth-child(3) { transform: translateX(13px); }
  .capability-card:hover .remote-core { border-radius: 50%; transform: rotate(225deg) scale(1.14); }
  .capability-card:hover .orbit-one { animation: remote-spin 4s linear infinite; }
  .capability-card:hover .orbit-two { animation: remote-spin-reverse 5s linear infinite; }
  .lineage-actions .lineage-primary:hover { color: var(--md-sys-color-on-primary); background: color-mix(in srgb, var(--md-sys-color-on-primary) 9%, var(--landing-accent)); transform: translateY(-3px) rotate(-1deg); box-shadow: 0 12px 28px color-mix(in srgb, var(--landing-accent) 18%, transparent); }
}

@media (hover: hover) and (pointer: fine) and (max-width: 600px) {
  .storage-visual:hover { border-radius: 18px 48px 18px 18px; }
}

@media (hover: none), (pointer: coarse) {
  .storage-visual { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .landing-hero::before { animation: none; }
  .hero-reveal, .storage-visual.hero-reveal, .motion-ready .reveal-on-scroll:not(.is-visible) { opacity: 1; transform: none; }
  .motion-ready .capability-card.reveal-on-scroll:not(.is-visible)::before { transform: scaleX(.16); }
  .motion-track { transform: translateX(0); }
  .storage-visual { transform: none !important; }
  .hero-actions .btn:hover, .flow-node:hover, .workflow-step:hover, .capability-card:hover, .lineage-actions .lineage-primary:hover { transform: none; }
}