body.iw-page,
.iw-experience {
  color-scheme: dark;
  --ink: #f7f9fc;
  --muted: #aeb9cb;
  --muted-strong: #d5ddea;
  --page: #060d17;
  --page-deep: #040912;
  --surface: rgba(14, 25, 40, 0.78);
  --surface-strong: #101d2d;
  --surface-soft: rgba(255, 255, 255, 0.035);
  --line: rgba(164, 187, 218, 0.22);
  --line-strong: rgba(164, 187, 218, 0.38);
  --blue: #2e8cff;
  --blue-bright: #56b0ff;
  --teal: #4de0b5;
  --teal-soft: rgba(77, 224, 181, 0.12);
  --warning: #f5b84b;
  --danger: #ff7486;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --content-width: 1200px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

.iw-experience,
.iw-experience *,
.iw-experience *::before,
.iw-experience *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.iw-page {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 55% -8%, rgba(58, 104, 180, 0.18), transparent 34rem),
    radial-gradient(circle at -12% 54%, rgba(31, 120, 144, 0.12), transparent 34rem),
    linear-gradient(145deg, var(--page-deep), var(--page) 48%, #07111e);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.iw-page::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: .2;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.iw-experience button, .iw-experience a { -webkit-tap-highlight-color: transparent; }
.iw-experience button { font: inherit; }
.iw-experience a { color: inherit; }
.iw-experience :focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 4px; }

.site-shell {
  width: min(calc(100% - 40px), var(--content-width));
  margin: 0 auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 11px 16px;
  color: #04111b;
  background: var(--teal);
  border-radius: 10px;
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  border-bottom: 1px solid rgba(164, 187, 218, 0.14);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.brand img { width: 42px; height: 42px; }
.brand-name { font-size: .86rem; color: var(--muted-strong); white-space: nowrap; }
.brand-name strong { color: #b9d9ff; }

.header-context {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .23em;
  text-transform: uppercase;
}
.header-context i { width: 3px; height: 3px; background: currentColor; border-radius: 50%; }

.experience-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 48px;
  padding: clamp(42px, 7vw, 78px) 0 38px;
}
.overline, .step-kicker {
  margin: 0 0 12px;
  color: var(--teal);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.experience-intro h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(3rem, 7vw, 5.9rem);
  line-height: .92;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.dek {
  max-width: 760px;
  margin: 22px 0 0;
  color: var(--muted-strong);
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  line-height: 1.42;
  text-wrap: balance;
}
.thesis-card {
  min-width: 218px;
  padding: 21px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--muted-strong);
  font-size: .68rem;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
  background: rgba(6, 13, 23, .38);
}
.thesis-card span, .thesis-card strong { display: block; }
.thesis-card strong { margin-top: 3px; color: var(--ink); font-weight: 600; }
.thesis-card i { display: block; width: 54px; height: 2px; margin: 16px auto 0; background: linear-gradient(90deg, var(--blue), var(--teal)); }

.progress-region {
  padding: 18px 0 28px;
  border-top: 1px solid var(--line);
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: .78rem;
}
.progress-meta strong { color: var(--ink); }
.progress-track-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}
.component-progress {
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0 2px 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  list-style: none;
  scroll-snap-type: x proximity;
}
.component-progress::before, .component-progress::after { content: ""; min-width: 1px; }
.component-progress::-webkit-scrollbar { height: 3px; }
.component-progress::-webkit-scrollbar-track { background: transparent; }
.component-progress::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.progress-item { position: relative; flex: 0 0 74px; text-align: center; scroll-snap-align: center; }
.progress-item::after {
  position: absolute;
  top: 17px;
  left: calc(50% + 19px);
  width: 40px;
  height: 1px;
  content: "";
  background: var(--line-strong);
}
.progress-item:last-child::after { display: none; }
.progress-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: none;
  cursor: pointer;
}
.progress-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #0b1523;
  font-size: .78rem;
  font-weight: 800;
  transition: border-color .25s ease, color .25s ease, background .25s ease, box-shadow .25s ease;
}
.progress-label { max-width: 90px; margin-top: 8px; font-size: .65rem; line-height: 1.2; }
.progress-button[aria-current="step"] { color: var(--ink); }
.progress-button[aria-current="step"] .progress-number {
  color: white;
  border-color: var(--blue-bright);
  background: #0b58c3;
  box-shadow: 0 0 0 4px rgba(46, 140, 255, .13), 0 0 28px rgba(46, 140, 255, .3);
}
.progress-button.is-complete .progress-number { color: var(--teal); border-color: rgba(77, 224, 181, .52); background: rgba(77, 224, 181, .08); }
.bookend {
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.bookend.is-current { color: var(--ink); border-color: var(--blue); background: rgba(46, 140, 255, .12); }
.bookend.is-complete { color: var(--teal); border-color: rgba(77, 224, 181, .35); }

.story-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(340px, .8fr);
  grid-template-areas: "visual content";
  gap: 24px;
  min-height: 610px;
}
.content-card, .visual-card, .insight-strip {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(17, 30, 47, .88), rgba(9, 18, 29, .82));
  box-shadow: var(--shadow);
}
.content-card {
  grid-area: content;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4.2vw, 44px);
  border-radius: var(--radius-lg);
  outline: none;
}
.content-card:focus-visible { outline-width: 2px; box-shadow: var(--shadow); }
.step-kicker {
  align-self: flex-start;
  padding: 6px 11px;
  border: 1px solid rgba(77, 224, 181, .45);
  border-radius: 999px;
  background: var(--teal-soft);
  letter-spacing: .08em;
}
.content-card h2 {
  margin: 8px 0 18px;
  font-size: clamp(2.2rem, 4.2vw, 3.75rem);
  line-height: .99;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.step-summary { margin: 0; color: var(--muted-strong); font-size: 1.12rem; line-height: 1.55; }
.detail-list { display: grid; gap: 0; margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.detail-item { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.detail-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--teal);
  background: rgba(255,255,255,.025);
  font-size: .72rem;
  font-weight: 900;
}
.detail-item h3 { margin: 1px 0 3px; font-size: .95rem; }
.detail-item p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.takeaway {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  margin-top: auto;
  padding: 20px;
  border: 1px solid rgba(77, 224, 181, .35);
  border-radius: var(--radius-sm);
  background: rgba(6, 65, 60, .13);
}
.takeaway-icon, .insight-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(77, 224, 181, .4);
  border-radius: 50%;
  color: var(--teal);
  background: rgba(77, 224, 181, .06);
}
.takeaway h3 { margin: 0 0 4px; font-size: .92rem; }
.takeaway p { margin: 0; color: var(--muted-strong); font-size: .84rem; }

.visual-card {
  grid-area: visual;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: clamp(18px, 3vw, 32px);
  overflow: hidden;
  border-color: rgba(46, 140, 255, .38);
  border-radius: var(--radius-lg);
}
.visual-frame { position: relative; flex: 1; display: grid; place-items: center; min-height: 480px; }
.visual-card figcaption { margin-top: 16px; color: var(--muted); font-size: .78rem; text-align: center; }

.system-visual { position: relative; width: min(100%, 660px); min-height: 420px; }
.system-browser {
  position: absolute;
  inset: 45px 10% 40px;
  z-index: 3;
  overflow: hidden;
  border: 1px solid rgba(112, 173, 255, .58);
  border-radius: 18px;
  background: linear-gradient(145deg, #14243a, #09121e);
  box-shadow: 0 0 0 10px rgba(46, 140, 255, .05), 0 32px 70px rgba(0,0,0,.4);
}
.browser-bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #506078; }
.browser-bar span { flex: 1; height: 18px; margin-left: 8px; border-radius: 999px; background: rgba(255,255,255,.06); }
.customer-page { display: grid; place-items: center; height: calc(100% - 42px); padding: 26px; text-align: center; }
.customer-page div { width: 78%; }
.customer-page strong { display: block; font-size: clamp(1.6rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.05em; }
.customer-page p { margin: 14px 0 20px; color: var(--muted); }
.visual-cta { display: inline-block; padding: 10px 18px; border-radius: 999px; color: white; background: var(--blue); font-weight: 800; }
.system-node {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 88px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--muted-strong);
  background: #0e1b2b;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.node-domain { top: 0; left: 6%; }
.node-search { top: 12px; right: 5%; }
.node-server { bottom: 0; left: 4%; }
.node-data { bottom: 5px; right: 4%; }
.system-line { position: absolute; z-index: 0; height: 1px; transform-origin: left; background: linear-gradient(90deg, var(--blue), rgba(77,224,181,.28)); }
.line-a { top: 45px; left: 18%; width: 35%; transform: rotate(24deg); }
.line-b { top: 55px; right: 17%; width: 32%; transform: rotate(155deg); }
.line-c { bottom: 45px; left: 16%; width: 39%; transform: rotate(-25deg); }
.line-d { bottom: 42px; right: 15%; width: 38%; transform: rotate(205deg); }
.system-pulse { position: absolute; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 18px var(--teal); animation: orbit 4.2s var(--ease) 1 both; }

.dns-visual { width: min(100%, 640px); }
.address-bar { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--line-strong); border-radius: 16px; background: #101e30; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.address-lock { color: var(--teal); }
.typed-address { flex: 1; color: var(--ink); font-size: clamp(1rem, 2vw, 1.28rem); }
.typed-address::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.15em; background: var(--blue-bright); animation: blink .7s steps(1) 5 both; }
.resolution-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: center; margin-top: 52px; }
.resolve-node { position: relative; padding: 24px 12px; border: 1px solid var(--line); border-radius: 15px; text-align: center; background: rgba(255,255,255,.025); }
.resolve-node + .resolve-node::before { position: absolute; top: 50%; right: calc(100% + 1px); width: 15px; height: 1px; content: ""; background: var(--blue); }
.resolve-node strong { display: block; font-size: .83rem; }
.resolve-node span { display: block; margin-top: 5px; color: var(--muted); font-size: .68rem; }
.resolve-node.is-active { border-color: var(--teal); box-shadow: 0 0 26px rgba(77,224,181,.12); animation: resolve 3.4s ease-in-out 1 both; }
.dns-records { display: grid; gap: 8px; margin-top: 34px; }
.dns-record { display: grid; grid-template-columns: 42px 1fr auto; gap: 14px; align-items: center; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(5,12,20,.46); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .69rem; }
.dns-record b { color: var(--blue-bright); }
.dns-record em { color: var(--teal); font-style: normal; }

.story-stage.is-entering .content-card { animation: stage-content-in .52s var(--ease) both; }
.story-stage.is-entering .visual-card { animation: stage-visual-in .58s var(--ease) both; }
body.is-document-hidden .iw-experience * { animation-play-state: paused !important; }

/* Surface / frontend */
.surface-visual { width: min(100%, 660px); }
.surface-browser, .a11y-browser {
  overflow: hidden;
  border: 1px solid rgba(112, 173, 255, .5);
  border-radius: 20px;
  background: #0b1522;
  box-shadow: 0 28px 64px rgba(0,0,0,.36), 0 0 0 9px rgba(46,140,255,.04);
}
.surface-page { padding: 18px; }
.surface-part, .surface-card-row span { opacity: 0; transform: translateY(12px); animation: surface-build .6s var(--ease) forwards; }
.surface-nav { display: flex; align-items: center; justify-content: flex-end; gap: 9px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; animation-delay: .2s; }
.surface-nav span { width: 34px; height: 5px; border-radius: 99px; background: #425168; }
.surface-nav .surface-logo { width: 26px; height: 26px; margin-right: auto; border: 1px solid var(--teal); border-radius: 8px; background: rgba(77,224,181,.1); }
.surface-hero { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; min-height: 195px; margin-top: 12px; padding: 30px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg, rgba(46,140,255,.1), rgba(255,255,255,.015)); animation-delay: .65s; }
.surface-hero div { align-self: center; }
.surface-hero b { display: block; font-size: clamp(1.35rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -.04em; }
.surface-hero i { display: block; width: 80%; height: 7px; margin-top: 12px; border-radius: 99px; background: #344258; }
.surface-hero i + i { width: 60%; margin-top: 8px; }
.surface-button { display: block; width: 104px; height: 28px; margin-top: 22px; border-radius: 99px; background: var(--blue); }
.surface-art { min-height: 135px; border: 1px solid rgba(77,224,181,.24); border-radius: 50% 50% 18px 18px; background: radial-gradient(circle at 50% 30%, rgba(77,224,181,.28), transparent 33%), linear-gradient(145deg, #142b3b, #0c1725); }
.surface-card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.surface-card-row span { height: 82px; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); animation-delay: calc(.95s + var(--card-order, 0) * .16s); }
.surface-card-row span:nth-child(1) { --card-order: 0; }
.surface-card-row span:nth-child(2) { --card-order: 1; }
.surface-card-row span:nth-child(3) { --card-order: 2; }
.build-legend, .signal-chips, .a11y-notes, .security-layers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.build-legend span, .signal-chips span, .a11y-notes span, .security-layers span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.02);
  font: 700 .64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Discoverability */
.search-visual { position: relative; width: min(100%, 640px); padding: clamp(18px, 4vw, 34px); border: 1px solid rgba(112,173,255,.38); border-radius: 22px; background: linear-gradient(155deg, #121f30, #07101a); box-shadow: 0 28px 70px rgba(0,0,0,.38); }
.search-query { display: flex; align-items: center; gap: 13px; padding: 15px 19px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted-strong); background: rgba(255,255,255,.045); }
.search-query span { display: grid; color: var(--blue-bright); }
.search-query strong { overflow: hidden; font-size: clamp(.82rem, 2vw, 1rem); text-overflow: ellipsis; white-space: nowrap; }
.search-tabs { display: flex; gap: 24px; padding: 19px 10px 13px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .74rem; }
.search-tabs b { position: relative; color: var(--blue-bright); }
.search-tabs b::after { position: absolute; left: 0; right: 0; bottom: -14px; height: 2px; content: ""; background: var(--blue); }
.result-card { position: relative; margin-top: 18px; padding: 24px; overflow: hidden; border: 1px solid rgba(46,140,255,.58); border-radius: 15px; background: rgba(5,13,22,.58); box-shadow: 0 0 0 4px rgba(46,140,255,.05); }
.result-type { display: inline-block; margin-bottom: 12px; padding: 5px 8px; border: 1px solid rgba(77,224,181,.3); border-radius: 999px; color: var(--teal); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.result-card h3 { margin: 0; color: var(--blue-bright); font-size: clamp(1.35rem, 3vw, 2rem); }
.result-url { margin: 3px 0 11px; color: #a8c6eb; font-size: .78rem; }
.result-rating { color: var(--muted-strong); font-size: .78rem; }
.result-rating span { color: var(--warning); letter-spacing: .08em; }
.result-card > p:last-of-type { max-width: 390px; margin: 12px 0 0; color: var(--muted); font-size: .8rem; }
.scan-beam { position: absolute; top: 0; bottom: 0; width: 2px; opacity: 0; background: var(--teal); box-shadow: 0 0 22px 5px rgba(77,224,181,.38); animation: scan-result 3.2s ease .4s 1 both; }
.signal-chips span { color: #8bbaf5; border-color: rgba(46,140,255,.25); }

/* Conversion */
.conversion-visual { width: min(100%, 650px); }
.conversion-person { display: inline-flex; flex-direction: column; padding: 12px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); }
.conversion-person span, .journey-node small, .lead-card small, .owner-notice small { color: var(--muted); font-size: .68rem; }
.conversion-person b { font-size: .9rem; }
.conversion-path { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 22px; }
.conversion-path > i { color: var(--blue-bright); font-style: normal; animation: arrow-pulse .7s ease calc(.45s + var(--arrow-order, 0) * .5s) 2 alternate; }
.conversion-path > i:nth-of-type(2) { --arrow-order: 1; }
.journey-node { min-width: 0; padding: 18px 13px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(46,140,255,.07), rgba(255,255,255,.02)); text-align: center; opacity: 0; transform: translateY(10px); animation: journey-arrive .55s var(--ease) forwards; }
.journey-node:nth-of-type(1) { animation-delay: .15s; }
.journey-node:nth-of-type(2) { animation-delay: .65s; }
.journey-node:nth-of-type(3) { animation-delay: 1.15s; }
.journey-node span { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto 9px; border-radius: 50%; color: var(--teal); background: var(--teal-soft); font-size: .63rem; font-weight: 900; }
.journey-node strong, .journey-node small { display: block; }
.journey-node strong { font-size: .84rem; }
.lead-card { display: flex; flex-direction: column; gap: 6px; margin: 28px 0 0 10%; padding: 20px; border: 1px solid rgba(46,140,255,.42); border-radius: 15px; background: #101f32; box-shadow: 0 18px 42px rgba(0,0,0,.28); opacity: 0; transform: translateX(-18px); animation: lead-arrive .65s var(--ease) 1.75s forwards; }
.lead-card .lead-status { align-self: flex-start; padding: 4px 8px; border-radius: 999px; color: #031712; background: var(--teal); font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.owner-notice { display: flex; align-items: center; gap: 12px; width: max-content; max-width: 90%; margin: -7px 6% 0 auto; padding: 13px 16px; border: 1px solid rgba(77,224,181,.3); border-radius: 13px; background: #0c2a29; opacity: 0; transform: translateY(12px); animation: owner-notice .55s var(--ease) 2.35s forwards; }
.owner-notice > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #062019; background: var(--teal); font-weight: 900; }
.owner-notice b, .owner-notice small { display: block; }

/* Performance */
.performance-visual { width: min(100%, 650px); }
.resource-pipeline { display: flex; align-items: center; gap: 8px; padding: 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.resource-pipeline span { flex: 0 1 auto; padding: 7px 10px; border: 1px solid rgba(46,140,255,.3); border-radius: 8px; color: #b8d8ff; background: rgba(46,140,255,.08); font: 700 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0; transform: translateX(-10px); animation: resource-load .45s var(--ease) forwards; }
.resource-pipeline span:nth-child(2) { animation-delay: .23s; }.resource-pipeline span:nth-child(3) { animation-delay: .46s; }.resource-pipeline span:nth-child(4) { animation-delay: .69s; }
.resource-pipeline i { margin-left: auto; color: var(--teal); font-size: .7rem; font-style: normal; white-space: nowrap; opacity: 0; animation: resource-load .45s var(--ease) 1.05s forwards; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.metric-card { display: flex; flex-direction: column; align-items: center; padding: 24px 10px 20px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(155deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); }
.metric-ring { display: grid; place-items: center; width: clamp(82px, 12vw, 108px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle closest-side, #0e1a29 80%, transparent 82%), conic-gradient(var(--teal) calc(var(--score) * 1%), rgba(255,255,255,.08) 0); transform: rotate(-90deg); }
.metric-lcp { --score: 82; }.metric-inp { --score: 91; }.metric-cls { --score: 96; }
.metric-ring b { color: var(--ink); font-size: 1rem; transform: rotate(90deg); }
.metric-card > strong { margin-top: 14px; font-size: .83rem; }
.metric-card > small { color: var(--muted); font-size: .66rem; }
.performance-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; color: var(--muted); font-size: .7rem; }
.performance-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px rgba(77,224,181,.55); }

/* Security */
.security-visual { position: relative; width: min(100%, 640px); min-height: 430px; }
.request-stream { position: absolute; left: 0; display: grid; grid-template-columns: minmax(110px, 1fr) 80px auto; align-items: center; gap: 8px; width: 52%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .62rem; }
.request-stream i { height: 1px; background: currentColor; transform-origin: left; animation: request-travel 1s ease .4s 1 both; }
.request-stream b { font-size: .58rem; text-transform: uppercase; }
.request-safe { top: 80px; color: var(--teal); }
.request-risk { top: 154px; color: var(--danger); }
.request-risk i { animation: request-block 1s ease .8s 1 both; }
.security-shield { position: absolute; top: 62px; left: 51%; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 126px; color: var(--blue-bright); transform: translateX(-50%); }
.security-shield svg { width: 94px; filter: drop-shadow(0 0 22px rgba(46,140,255,.22)); }
.security-shield strong { margin-top: -2px; color: var(--muted-strong); font-size: .7rem; }
.protected-data { position: absolute; top: 96px; right: 0; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid rgba(77,224,181,.33); border-radius: 13px; background: rgba(77,224,181,.055); }
.protected-data span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--teal); background: var(--teal-soft); }
.protected-data b, .protected-data small { display: block; }
.protected-data b { font-size: .82rem; }
.protected-data small { color: var(--muted); font-size: .65rem; }
.security-layers { position: absolute; right: 0; bottom: 58px; left: 0; }
.security-layers span { color: #91bfff; opacity: 0; animation: layer-secure .45s var(--ease) forwards; }
.security-layers span:nth-child(1) { animation-delay: 1.2s; }.security-layers span:nth-child(2) { animation-delay: 1.4s; }.security-layers span:nth-child(3) { animation-delay: 1.6s; }.security-layers span:nth-child(4) { animation-delay: 1.8s; }

/* Accessibility */
.accessibility-visual { width: min(100%, 640px); }
.a11y-page { display: grid; gap: 14px; padding: 28px; }
.focus-stop { position: relative; border: 2px solid transparent; }
.a11y-heading { padding: 14px 16px; border-radius: 11px; background: rgba(46,140,255,.08); }
.a11y-heading small, .a11y-field small { display: block; margin-bottom: 5px; color: var(--teal); font: 800 .58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.a11y-heading strong { font-size: clamp(1.25rem, 3vw, 2rem); }
.a11y-field { padding: 12px 14px; border-color: var(--line); border-radius: 10px; color: var(--muted-strong); background: rgba(255,255,255,.025); }
.a11y-action { width: max-content; padding: 12px 18px; border-radius: 999px; color: white; background: var(--blue); font-size: .78rem; font-weight: 800; }
.a11y-link { width: max-content; max-width: 100%; padding: 6px 2px; color: #9dc8ff; font-size: .72rem; text-decoration: underline; text-underline-offset: 3px; }
.focus-stop { animation: focus-travel .65s ease calc(.3s + var(--focus-order) * .65s) 1 both; }
.focus-stop:nth-child(1) { --focus-order: 0; }.focus-stop:nth-child(2) { --focus-order: 1; }.focus-stop:nth-child(3) { --focus-order: 2; }.focus-stop:nth-child(4) { --focus-order: 3; }
.focus-stop::after { position: absolute; top: 6px; right: 7px; display: grid; place-items: center; min-width: 32px; height: 21px; padding: 0 5px; content: "Tab"; color: #062019; background: var(--teal); border-radius: 999px; font-size: .56rem; font-weight: 900; opacity: 0; }
.focus-stop::after { animation: focus-tag .65s ease calc(.3s + var(--focus-order) * .65s) 1 both; }
.a11y-notes span { color: var(--teal); border-color: rgba(77,224,181,.24); }

/* Data & backend */
.backend-visual { width: min(100%, 670px); }
.backend-route { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr; align-items: center; gap: 3px; }
.backend-node { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 112px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 15px; text-align: center; background: linear-gradient(145deg, rgba(46,140,255,.08), rgba(255,255,255,.015)); }
.backend-node span { font-size: .82rem; font-weight: 800; }
.backend-node small { margin-top: 5px; color: var(--muted); font-size: .6rem; line-height: 1.25; }
.cache-node { border-color: rgba(77,224,181,.32); background: rgba(77,224,181,.055); }
.database-node::before, .database-node::after { position: absolute; right: 18%; left: 18%; height: 7px; content: ""; border: 1px solid rgba(86,176,255,.38); border-radius: 50%; }
.database-node::before { top: 16px; }.database-node::after { bottom: 16px; }
.packet { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); animation: packet-hop .9s ease forwards; }
.packet-one { animation-delay: .2s; }.packet-two { animation-delay: .85s; }.packet-three { animation-delay: 1.5s; }
.backend-timing { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.backend-timing > div { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: .72rem; }
.backend-timing b { color: var(--muted-strong); }
.backend-timing .fast { border-color: rgba(77,224,181,.32); color: var(--teal); background: rgba(77,224,181,.05); }
.backend-timing .fast b { color: var(--teal); }
.cache-hit { margin: 18px 0 0; color: var(--muted); font-size: .72rem; text-align: center; }
.cache-hit span { color: var(--warning); }

/* Measurement */
.measurement-visual { width: min(100%, 660px); }
.event-row { display: flex; justify-content: center; gap: 10px; }
.event-row span { position: relative; padding: 8px 11px; border: 1px solid rgba(46,140,255,.26); border-radius: 999px; color: #9fc9ff; background: rgba(46,140,255,.06); font: 700 .61rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0; animation: event-in .45s var(--ease) forwards; }
.event-row span:nth-child(2) { animation-delay: .22s; }.event-row span:nth-child(3) { animation-delay: .44s; }
.report-card { margin-top: 20px; padding: 22px 24px 18px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); }
.report-head { display: flex; align-items: center; justify-content: space-between; }
.report-head small, .report-head strong { display: block; }
.report-head small { color: var(--muted); font-size: .67rem; }
.report-head strong { margin-top: 2px; font-size: 1.8rem; }
.report-head > span { padding: 5px 8px; border-radius: 999px; color: var(--teal); background: var(--teal-soft); font-size: .68rem; font-weight: 800; }
.report-chart { width: 100%; height: 185px; overflow: visible; }
.chart-line { stroke-dasharray: 800; stroke-dashoffset: 800; animation: draw-chart 2s var(--ease) .35s forwards; }
.report-labels { display: flex; justify-content: space-between; color: #77879d; font-size: .6rem; }
.measurement-insight { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 14px; padding: 13px 15px; border: 1px solid rgba(77,224,181,.28); border-radius: 12px; color: var(--muted-strong); background: rgba(77,224,181,.045); font-size: .7rem; }
.measurement-insight b { color: var(--teal); text-transform: uppercase; }

/* Off-site presence */
.offsite-visual { position: relative; width: min(100%, 640px); min-height: 430px; }
.site-hub { position: absolute; top: 145px; left: 50%; z-index: 3; display: flex; flex-direction: column; justify-content: center; width: 180px; height: 118px; padding: 18px; border: 1px solid rgba(46,140,255,.52); border-radius: 22px; background: #102039; box-shadow: 0 0 0 8px rgba(46,140,255,.04), 0 20px 40px rgba(0,0,0,.32); transform: translateX(-50%); }
.site-hub span, .site-hub small { color: var(--muted); font-size: .62rem; }
.site-hub b { margin: 4px 0; }
.listing-node { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: space-between; width: 132px; padding: 13px 14px; border: 1px solid rgba(77,224,181,.25); border-radius: 12px; color: var(--muted-strong); background: #0c1a29; font-size: .7rem; }
.listing-node b { color: var(--teal); }
.listing-maps { top: 40px; left: 4%; }.listing-directory { top: 36px; right: 4%; }.listing-reviews { bottom: 74px; left: 2%; }.listing-social { right: 2%; bottom: 72px; }
.listing-social .sync-status { color: var(--warning); animation: listing-sync 2.4s steps(1) .35s 1 both; }
.network-line { position: absolute; z-index: 0; left: 50%; width: 184px; height: 1px; background: linear-gradient(90deg, rgba(46,140,255,.2), var(--blue)); transform-origin: left; }
.line-one { top: 174px; transform: rotate(-139deg); }.line-two { top: 174px; transform: rotate(-41deg); }.line-three { top: 231px; transform: rotate(139deg); }.line-four { top: 231px; transform: rotate(41deg); }
.nap-card { position: absolute; right: 14%; bottom: 2px; left: 14%; display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.025); font-size: .62rem; }
.nap-card b { color: var(--teal); }

/* Housekeeping */
.housekeeping-visual { width: min(100%, 620px); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #0a1522; box-shadow: 0 24px 56px rgba(0,0,0,.3); }
.maintenance-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.025); }
.maintenance-head small, .maintenance-head strong { display: block; }.maintenance-head small { color: var(--muted); font-size: .65rem; }.maintenance-head strong { margin-top: 3px; font-size: .94rem; }
.health-pulse { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(77,224,181,.35); animation: health-ping 1.8s ease 2; }
.maintenance-list { padding: 7px 18px; }
.maintenance-row { display: grid; grid-template-columns: 1fr auto 30px; align-items: center; gap: 12px; padding: 15px 5px; border-bottom: 1px solid var(--line); }
.maintenance-row:last-child { border: 0; }
.maintenance-row span { font-size: .77rem; font-weight: 700; }.maintenance-row small { color: var(--muted); font-size: .63rem; }.maintenance-row b { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(77,224,181,.3); border-radius: 50%; color: var(--teal); opacity: 0; transform: scale(.65); animation: check-item .4s var(--ease) .25s forwards; }
.maintenance-row:nth-child(2) b { animation-delay: .5s; }.maintenance-row:nth-child(3) b { animation-delay: .75s; }.maintenance-row:nth-child(4) b { animation-delay: 1s; }.maintenance-row:nth-child(5) b { animation-delay: 1.25s; }
.maintenance-footer { display: flex; justify-content: space-between; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line); color: #77879c; background: rgba(0,0,0,.12); font-size: .61rem; }

/* At scale */
.scale-visual { width: min(100%, 670px); }
.scale-controls { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: .68rem; }
.scale-controls b { margin-left: auto; color: var(--teal); }
.traffic-bars { display: flex; align-items: end; gap: 3px; height: 22px; }.traffic-bars i { width: 5px; border-radius: 3px 3px 0 0; background: var(--blue); animation: traffic-grow .65s var(--ease) forwards; }.traffic-bars i:nth-child(1) { height: 25%; }.traffic-bars i:nth-child(2) { height: 45%; }.traffic-bars i:nth-child(3) { height: 70%; }.traffic-bars i:nth-child(4) { height: 100%; }
.delivery-pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 30px; }
.delivery-pipeline > i { color: #6e8199; font-style: normal; }
.pipeline-node { min-width: 0; padding: 18px 8px; border: 1px solid var(--line); border-radius: 13px; text-align: center; background: rgba(255,255,255,.02); opacity: 0; animation: pipeline-in .45s var(--ease) forwards; }
.pipeline-node:nth-of-type(2) { animation-delay: .25s; }.pipeline-node:nth-of-type(3) { animation-delay: .5s; }.pipeline-node:nth-of-type(4) { animation-delay: .75s; }
.pipeline-node small, .pipeline-node strong { display: block; }.pipeline-node small { color: var(--muted); font-size: .57rem; }.pipeline-node strong { margin-top: 4px; font-size: .78rem; }
.pipeline-node.active { border-color: rgba(77,224,181,.42); color: var(--teal); background: var(--teal-soft); }
.scale-cluster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 24px; }
.scale-cluster > div { padding: 17px 12px; border: 1px solid rgba(46,140,255,.25); border-radius: 12px; background: rgba(46,140,255,.045); }
.scale-cluster span, .scale-cluster b { display: block; }.scale-cluster span { color: var(--muted); font-size: .6rem; }.scale-cluster b { margin-top: 4px; color: #a9d1ff; font-size: 1.1rem; }
.scale-note { margin: 22px 0 0; color: var(--muted); font-size: .7rem; text-align: center; }

/* Finale */
.finale-visual { position: relative; width: min(100%, 680px); min-height: 460px; }
.finale-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-content: space-between; gap: 9px; }
.finale-grid > span { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.025); font-size: .62rem; opacity: 0; animation: finale-node .36s var(--ease) forwards; }
.finale-grid > span:nth-child(2) { animation-delay: .07s; }.finale-grid > span:nth-child(3) { animation-delay: .14s; }.finale-grid > span:nth-child(4) { animation-delay: .21s; }.finale-grid > span:nth-child(5) { animation-delay: .28s; }.finale-grid > span:nth-child(6) { animation-delay: .35s; }.finale-grid > span:nth-child(7) { animation-delay: .42s; }.finale-grid > span:nth-child(8) { animation-delay: .49s; }.finale-grid > span:nth-child(9) { animation-delay: .56s; }.finale-grid > span:nth-child(10) { animation-delay: .63s; }.finale-grid > span:nth-child(11) { animation-delay: .7s; }.finale-grid > span:nth-child(12) { animation-delay: .77s; }
.finale-grid b { color: var(--blue-bright); font-size: .58rem; }
.finale-browser { position: absolute; top: 50%; left: 50%; z-index: 3; width: 62%; overflow: hidden; border: 1px solid rgba(77,224,181,.46); border-radius: 17px; background: #0c1827; box-shadow: 0 0 0 10px rgba(77,224,181,.035), 0 30px 70px rgba(0,0,0,.42); transform: translate(-50%,-50%) scale(.94); animation: finale-browser-in .7s var(--ease) 1s forwards; }
.finale-browser > div:last-child { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 178px; padding: 30px; background: radial-gradient(circle at 70% 20%, rgba(46,140,255,.16), transparent 40%); }
.finale-browser small { color: var(--teal); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.finale-browser strong { margin-top: 7px; font-size: clamp(1.6rem, 4vw, 2.7rem); line-height: 1; letter-spacing: -.05em; }
.finale-check { position: absolute; right: 24px; bottom: 24px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(77,224,181,.4); border-radius: 50%; color: var(--teal); background: var(--teal-soft); }

.insight-strip {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 24px;
  padding: 24px 28px;
  border-radius: var(--radius-md);
}
.insight-strip h2 { margin: 0 0 4px; font-size: 1rem; }
.insight-strip p { margin: 0; color: var(--muted); }

.story-controls {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr minmax(180px, 240px);
  align-items: center;
  gap: 30px;
  padding: 34px 0 20px;
}
.control-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 72px;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s, background .2s;
}
.control-button:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--line-strong); background: rgba(255,255,255,.07); }
.control-button:active:not(:disabled) { transform: translateY(0); }
.control-button:disabled { opacity: .38; cursor: not-allowed; }
.control-button span { display: flex; flex-direction: column; }
.control-button small { color: var(--muted); font-size: .72rem; }
.control-button strong { max-width: 135px; overflow: hidden; font-size: .91rem; text-overflow: ellipsis; white-space: nowrap; }
.control-next { justify-self: end; border-color: rgba(65, 158, 255, .82); background: linear-gradient(135deg, #1981ff, #075de0); box-shadow: 0 18px 45px rgba(4, 87, 210, .24); }
.control-next small { color: rgba(255,255,255,.75); }
.story-dots { display: flex; justify-content: center; gap: 8px; }
.story-dot { width: 7px; height: 7px; border-radius: 50%; background: #3b4658; }
.story-dot.is-current { background: var(--blue); box-shadow: 0 0 0 4px rgba(46,140,255,.12); }
.keyboard-hint { margin: 0 0 38px; color: #78869a; font-size: .71rem; text-align: center; }
.iw-experience kbd { padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; color: var(--muted-strong); background: rgba(255,255,255,.04); font: inherit; }

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0 42px;
  border-top: 1px solid var(--line);
  color: #8593a7;
  font-size: .63rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.noscript-message { margin: 16px; padding: 16px; color: #111; background: #fff0b3; border-radius: 8px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@keyframes orbit {
  0% { top: 21%; left: 18%; opacity: 0; }
  12% { opacity: 1; }
  50% { top: 49%; left: 50%; }
  88% { opacity: 1; }
  100% { top: 80%; left: 81%; opacity: 0; }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes resolve { 0%, 25%, 100% { border-color: var(--line); box-shadow: none; } 35%, 62% { border-color: var(--teal); box-shadow: 0 0 26px rgba(77,224,181,.16); } }
@keyframes stage-content-in { from { opacity: .72; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes stage-visual-in { from { opacity: .62; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes surface-build { to { opacity: 1; transform: none; } }
@keyframes scan-result { 0% { left: 0; opacity: 0; } 12%, 82% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes arrow-pulse { to { color: var(--teal); transform: translateX(3px); } }
@keyframes journey-arrive { to { opacity: 1; transform: none; border-color: rgba(46,140,255,.34); } }
@keyframes lead-arrive { to { opacity: 1; transform: none; } }
@keyframes owner-notice { to { opacity: 1; transform: none; } }
@keyframes resource-load { to { opacity: 1; transform: none; } }
@keyframes request-travel { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes request-block { 0% { transform: scaleX(0); } 58% { transform: scaleX(.56); } 100% { transform: scaleX(.56); opacity: .42; } }
@keyframes layer-secure { to { opacity: 1; transform: translateY(-2px); } }
@keyframes focus-travel { 0%, 100% { border-color: transparent; box-shadow: none; } 12%, 84% { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(77,224,181,.18); } }
@keyframes focus-tag { 0%, 100% { opacity: 0; } 12%, 84% { opacity: 1; } }
@keyframes packet-hop { 0% { opacity: 0; transform: translateX(-8px); } 45% { opacity: 1; } 100% { opacity: .35; transform: translateX(10px); } }
@keyframes event-in { to { opacity: 1; transform: none; } }
@keyframes draw-chart { to { stroke-dashoffset: 0; } }
@keyframes listing-sync { 0%, 58% { color: var(--warning); } 59%, 100% { color: var(--teal); } }
@keyframes health-ping { 70% { box-shadow: 0 0 0 10px rgba(77,224,181,0); } 100% { box-shadow: 0 0 0 0 rgba(77,224,181,0); } }
@keyframes check-item { to { opacity: 1; transform: scale(1); } }
@keyframes traffic-grow { from { transform: scaleY(.12); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
@keyframes pipeline-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes finale-node { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes finale-browser-in { to { transform: translate(-50%,-50%) scale(1); } }

@media (max-width: 920px) {
  .header-context { display: none; }
  .experience-intro { grid-template-columns: 1fr; align-items: start; gap: 26px; }
  .thesis-card { justify-self: start; }
  .story-stage { grid-template-columns: 1fr; grid-template-areas: "content" "visual"; }
  .visual-frame { min-height: 420px; }
  .content-card { min-height: 580px; }
}

@media (max-width: 640px) {
  body.iw-page { overflow-x: hidden; }
  .site-shell { width: min(calc(100% - 28px), var(--content-width)); }
  .site-header { min-height: 74px; }
  .brand img { width: 36px; height: 36px; }
  .brand { min-height: 44px; }
  .brand-name { font-size: 1rem; letter-spacing: .08em; }
  .experience-intro { padding: 36px 0 28px; }
  .experience-intro h1 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .dek { font-size: 1rem; }
  .thesis-card { width: 100%; min-width: 0; }
  .progress-region { padding-bottom: 20px; }
  .progress-track-shell { grid-template-columns: 1fr; gap: 8px; }
  .bookend { display: none; }
  .component-progress { margin-inline: -14px; padding-inline: 14px; }
  .progress-item { flex-basis: 72px; }
  .progress-label { display: none; }
  .progress-item::after { width: 41px; }
  .progress-button { min-height: 44px; }
  .progress-number { width: 44px; height: 44px; font-size: 1rem; }
  .content-card, .visual-card { border-radius: 20px; }
  .content-card { min-height: 0; padding: 26px 20px 20px; }
  .content-card h2 { font-size: clamp(2.25rem, 11vw, 3rem); }
  .step-summary { font-size: 1rem; }
  .visual-card { padding: 14px; }
  .visual-frame { min-height: 370px; }
  .visual-frame * { font-size: 16px !important; }
  .visual-frame .customer-page strong,
  .visual-frame .surface-hero b,
  .visual-frame .result-card h3,
  .visual-frame .finale-browser strong { font-size: 1.45rem !important; }
  .system-visual { min-height: 350px; }
  .system-browser { inset: 42px 5% 42px; }
  .system-node { width: 88px; height: 44px; }
  .resolution-flow { grid-template-columns: 1fr; margin-top: 28px; }
  .resolve-node + .resolve-node::before { top: auto; right: 50%; bottom: 100%; width: 1px; height: 15px; }
  .dns-record { grid-template-columns: 34px 1fr; }
  .dns-record em { display: none; }
  .surface-hero { grid-template-columns: 1fr; min-height: 180px; padding: 22px; }
  .surface-art { display: none; }
  .surface-card-row { grid-template-columns: 1fr; }
  .surface-card-row span { height: 54px; }
  .search-tabs { gap: 14px; overflow-x: auto; }
  .conversion-path { grid-template-columns: 1fr; }
  .conversion-path > i { justify-self: center; transform: rotate(90deg); }
  .lead-card { margin-left: 0; }
  .owner-notice { margin-right: 0; }
  .resource-pipeline { flex-wrap: wrap; }
  .resource-pipeline i { width: 100%; margin: 6px 0 0; text-align: center; }
  .metric-grid { grid-template-columns: 1fr; }
  .security-visual { display: grid; gap: 14px; min-height: 0; }
  .request-stream, .security-shield, .protected-data, .security-layers { position: static; width: 100%; transform: none; }
  .request-stream { grid-template-columns: 1fr 44px auto; }
  .security-shield { width: 126px; margin: 6px auto; }
  .security-layers { margin-top: 4px; }
  .a11y-page { padding: 18px; }
  .a11y-action, .a11y-link { width: 100%; }
  .backend-route { grid-template-columns: 1fr; gap: 9px; }
  .backend-node { min-height: 88px; }
  .packet { margin: auto; transform: rotate(90deg); }
  .backend-timing { grid-template-columns: 1fr; }
  .event-row { flex-wrap: wrap; }
  .report-card { padding: 18px 14px; }
  .report-chart { height: 145px; }
  .measurement-insight { grid-template-columns: 1fr; }
  .offsite-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; }
  .offsite-visual .network-line { display: none; }
  .site-hub, .listing-node, .nap-card { position: static; width: auto; transform: none; }
  .site-hub { grid-column: 1 / -1; width: 100%; height: auto; min-height: 110px; }
  .listing-node { min-width: 0; }
  .nap-card { grid-column: 1 / -1; grid-template-columns: 1fr; text-align: center; }
  .maintenance-row { grid-template-columns: 1fr 34px; }
  .maintenance-row small { grid-column: 1; grid-row: 2; }
  .maintenance-row b { grid-column: 2; grid-row: 1 / span 2; }
  .maintenance-footer { flex-direction: column; }
  .delivery-pipeline { grid-template-columns: 1fr; }
  .delivery-pipeline > i { justify-self: center; transform: rotate(90deg); }
  .scale-cluster { grid-template-columns: 1fr 1fr; }
  .finale-visual { display: flex; flex-direction: column; min-height: 0; }
  .finale-grid { position: static; grid-template-columns: 1fr 1fr; order: 2; margin-top: 18px; }
  .finale-browser { position: static; order: 1; width: 100%; transform: none; animation-name: finale-browser-mobile; }
  .finale-browser > div:last-child { min-height: 170px; }
  .insight-strip { align-items: start; padding: 20px; }
  .story-controls { grid-template-columns: 1fr 1fr; gap: 10px; padding: 24px 0 max(16px, env(safe-area-inset-bottom)); }
  .story-dots { display: none; }
  .control-button { min-width: 0; min-height: 62px; gap: 8px; padding: 10px 12px; background-color: #111e2d; backdrop-filter: blur(18px); }
  .control-button strong { max-width: 110px; overflow: visible; line-height: 1.15; text-overflow: clip; white-space: normal; }
  .control-button svg { width: 20px; height: 20px; flex: none; }
  .control-next { background: linear-gradient(135deg, #1981ff, #075de0); }
  .keyboard-hint { display: none; }
  .site-footer { flex-direction: column; align-items: center; text-align: center; }
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .overline, .step-kicker, .progress-meta, .thesis-card, .detail-icon, .detail-item h3, .detail-item p,
  .takeaway h3, .takeaway p, .visual-card figcaption, .insight-strip h2,
  .insight-strip p, .control-button small, .control-button strong, .site-footer { font-size: 1rem; }
}

@keyframes finale-browser-mobile { from { opacity: .3; transform: scale(.94); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .iw-experience, .iw-experience *, .iw-experience *::before, .iw-experience *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* v2 for the deployedaigroup.com publish (Claude, 2026-09-07):
   keep Back / Next in view on every screen, and shorten the intro
   so the first concept starts higher on desktop. */
@media screen and (min-width: 641px) {
  .experience-intro { padding: clamp(24px, 4vw, 40px) 0 24px; }
  .experience-intro h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
}
@media screen {
  .story-controls {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding: 14px 0 14px;
    background: linear-gradient(180deg, rgba(6, 13, 23, 0) 0%, rgba(6, 13, 23, .94) 28%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}