/* © 2026 Afonso Agostinho · AG Digital. Todos os direitos reservados. */
:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --paper: #f5f5f2;
  --paper-soft: #ecece7;
  --paper-bright: #fbfbf8;
  --ink: #11110f;
  --ink-soft: #2c2c28;
  --muted: #696963;
  --muted-light: #9a9a92;
  --line: rgba(17, 17, 15, .14);
  --line-soft: rgba(17, 17, 15, .08);
  --dark: #0c0d0c;
  --dark-soft: #151613;
  --lime: #d8ff4f;
  --blue: #b8d7ff;
  --lavender: #c7b4ff;
  --radius-xs: 12px;
  --radius-sm: 18px;
  --radius-md: 28px;
  --radius-lg: 42px;
  --radius-xl: 60px;
  --page: min(1380px, calc(100vw - 72px));
  --ease: cubic-bezier(.22, .72, 0, 1);
  --ease-soft: cubic-bezier(.2, .65, .25, 1);
  --shadow-soft: 0 30px 80px rgba(17, 17, 15, .09);
  --shadow-deep: 0 45px 110px rgba(0, 0, 0, .2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; background: var(--paper); }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; color: var(--ink); background: var(--paper); }
body.menu-open, body.is-transitioning { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img, svg { display: block; }
svg { width: 1em; height: 1em; }
::selection { color: #fff; background: var(--ink); }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  transform: translateY(-150%);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }
.page-width { width: var(--page); margin-inline: auto; }
main { min-height: 70vh; }

/* Loading, page motion and ambient pointer */
.site-loader {
  position: fixed;
  z-index: 10000;
  inset: 0;
  overflow: hidden;
  color: var(--ink);
  background: #f4f4f0;
  transition: opacity 460ms cubic-bezier(.22,1,.36,1), visibility 460ms cubic-bezier(.22,1,.36,1);
}
.site-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17,17,15,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,17,15,.035) 1px,transparent 1px);
  background-size: 64px 64px;
  opacity: .38;
}
.site-loader::after {
  content: "";
  position: absolute;
  right: -18vw;
  top: -28vw;
  width: 62vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(184,215,255,.46),rgba(216,255,79,.08) 44%,transparent 70%);
  filter: blur(12px);
}
.site-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark {
  position: absolute;
  z-index: 2;
  left: clamp(24px,5vw,76px);
  bottom: clamp(54px,9vh,104px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(28px,3vw,44px);
  line-height: 1;
  letter-spacing: -.055em;
}
.loader-mark span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: var(--ink);
  font-size: 14px;
  font-weight: 760;
  letter-spacing: -.06em;
}
.loader-mark b { font-weight: 650; }
.loader-track {
  position: absolute;
  z-index: 2;
  left: clamp(24px,5vw,76px);
  right: clamp(24px,5vw,76px);
  bottom: clamp(28px,5vh,52px);
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17,17,15,.12);
}
.loader-track span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--ink),var(--lime));
  animation: loaderEditorialLine 900ms cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes loaderEditorialLine {
  from { transform: translateX(-115%); }
  to { transform: translateX(365%); }
}
@media (max-width: 620px) {
  .loader-mark span { width: 36px; height: 36px; border-radius: 11px; font-size: 12px; }
}

.page-transition {
  position: fixed;
  z-index: 9000;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 520ms;
}
.page-transition-panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.5%;
  background: #f4f4f0;
  will-change: transform;
  transition: transform 460ms cubic-bezier(.76,0,.24,1);
}
.page-transition-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17,17,15,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,17,15,.035) 1px,transparent 1px);
  background-size: 64px 64px;
  opacity: .38;
}
.page-transition-panel-top {
  top: 0;
  transform: translateY(-102%);
  border-bottom: 1px solid rgba(17,17,15,.08);
}
.page-transition-panel-bottom {
  bottom: 0;
  transform: translateY(102%);
  background: #eceee9;
  border-top: 1px solid rgba(17,17,15,.08);
}
.page-transition-content {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(980px,calc(100% - 48px));
  color: var(--ink);
  opacity: 0;
  transform: translate(-50%,-44%) scale(.985);
  transition: opacity 180ms ease 150ms, transform 420ms cubic-bezier(.22,1,.36,1) 100ms;
}
.page-transition-meta {
  display: grid;
  grid-template-columns: 9px auto 1fr;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
  color: #76766f;
  font-size: 9px;
  font-weight: 680;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.page-transition-meta > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 6px rgba(216,255,79,.16);
}
.page-transition-meta b { color: var(--ink); font-size: inherit; }
.page-transition-meta small {
  justify-self: end;
  font-size: inherit;
  font-weight: inherit;
}
.page-transition-content > strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(54px,8vw,128px);
  line-height: .86;
  letter-spacing: -.075em;
  font-weight: 660;
}
.page-transition-rule {
  position: relative;
  height: 2px;
  margin-top: 34px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17,17,15,.12);
}
.page-transition-rule i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--ink),var(--lime));
  transform: scaleX(0);
  transform-origin: left center;
}
body.is-transitioning .page-transition {
  visibility: visible;
  transition-delay: 0s;
}
body.is-transitioning .page-transition-panel-top,
body.is-transitioning .page-transition-panel-bottom {
  transform: translateY(0);
}
body.is-transitioning .page-transition-content {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}
body.is-transitioning .page-transition-rule i {
  animation: transitionRuleFill 500ms cubic-bezier(.22,1,.36,1) 120ms both;
}
body.is-transitioning .page-transition-meta > span {
  animation: transitionDot 640ms ease 130ms both;
}
@keyframes transitionRuleFill {
  from { transform: scaleX(0); opacity: .35; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes transitionDot {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 6px rgba(216,255,79,.16); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 12px rgba(216,255,79,.07); }
}
@media (max-width: 620px) {
  .page-transition-content { width: calc(100% - 34px); }
  .page-transition-meta { grid-template-columns: 8px auto 1fr; gap: 9px; margin-bottom: 18px; }
  .page-transition-content > strong { font-size: clamp(45px,16vw,76px); }
  .page-transition-rule { margin-top: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-transition-panel,
  .page-transition-content,
  .page-transition-rule i,
  .page-transition-meta > span { transition: none; animation: none !important; }
}

.scroll-progress { position: fixed; z-index: 500; top: 0; left: 0; width: 100%; height: 2px; pointer-events: none; }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.pointer-aura {
  position: fixed;
  z-index: -1;
  left: 0;
  top: 0;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .34;
  filter: blur(12px);
  background: radial-gradient(circle, rgba(205,227,255,.8), rgba(236,255,199,.25) 38%, transparent 70%);
  transform: translate3d(calc(var(--pointer-x, 50vw) - 260px), calc(var(--pointer-y, 30vh) - 260px), 0);
  transition: opacity 300ms ease;
}

/* Header */
.site-header {
  position: fixed;
  z-index: 600;
  inset: 0 0 auto;
  padding: 18px 0;
  border-bottom: 1px solid transparent;
  transition: padding 350ms var(--ease-soft), background 350ms ease, backdrop-filter 350ms ease, border-color 350ms ease;
}
.site-header.is-scrolled {
  padding: 9px 0;
  border-color: rgba(17,17,15,.08);
  background: rgba(245,245,242,.78);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.header-inner {
  width: var(--page);
  min-height: 52px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}
.wordmark { display: inline-flex; width: fit-content; align-items: center; gap: 9px; font-weight: 680; letter-spacing: -.035em; }
.wordmark-mark { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 10px; overflow: hidden; color: #fff; background: transparent; font-size: 12px; letter-spacing: -.05em; }
.wordmark-mark img { display: block; width: 100%; height: 100%; }
.wordmark-name { font-size: 16px; }
.wordmark-light { color: #fff; }
.wordmark-light .wordmark-mark { color: var(--ink); background: transparent; }
.desktop-nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 46px); font-size: 13px; color: #55554f; }
.desktop-nav a { position: relative; padding: 9px 0; transition: color 220ms ease; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 3px; height: 1px; background: currentColor; transition: right 240ms var(--ease); }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--ink); }
.desktop-nav a:hover::after, .desktop-nav a[aria-current="page"]::after { right: 0; }
.header-cta { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 12px 17px; border-radius: 999px; color: #fff; background: var(--ink); font-size: 12px; font-weight: 650; transform: translate3d(var(--magnetic-x,0), var(--magnetic-y,0), 0); transition: background 220ms ease, transform 200ms ease; }
.header-cta:hover { background: #2b2b27; }
.header-cta svg { font-size: 16px; transition: transform 240ms var(--ease); }
.header-cta:hover svg { transform: translate(2px,-2px); }
.menu-toggle { display: none; justify-self: end; position: relative; width: 43px; height: 43px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; }
.menu-toggle span { position: absolute; left: 13px; width: 17px; height: 1.5px; background: #fff; transition: top 220ms var(--ease), transform 220ms var(--ease); }
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 24px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.mobile-navigation {
  position: fixed;
  z-index: 550;
  inset: 0;
  display: none;
  padding: 115px 28px 32px;
  color: var(--ink);
  background: rgba(245,245,242,.98);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  transition: opacity 280ms ease, visibility 280ms ease, transform 280ms var(--ease);
}
.mobile-navigation.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-navigation nav { display: flex; flex-direction: column; }
.mobile-navigation nav a { display: flex; align-items: baseline; gap: 18px; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: clamp(36px, 10vw, 58px); line-height: 1; letter-spacing: -.06em; }
.mobile-navigation nav a span { width: 24px; font-size: 9px; letter-spacing: .08em; color: var(--muted-light); }
.mobile-menu-foot { position: absolute; left: 28px; right: 28px; bottom: 28px; display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 11px; }
.mobile-menu-foot p { margin: 0; }

/* Shared typography and controls */
.eyebrow, .section-label { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: 10px; font-weight: 680; letter-spacing: .15em; text-transform: uppercase; color: #62625c; }
.eyebrow::before, .section-label::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .75; }
.section-label-light { color: rgba(255,255,255,.62); }
.display-title { margin: 0; font-size: clamp(66px, 8.4vw, 132px); line-height: .82; letter-spacing: -.075em; font-weight: 680; }
.display-title em, h1 em, h2 em { font-family: "Iowan Old Style", "Baskerville", "Times New Roman", serif; font-weight: 400; }
.large-copy { margin: 0; font-size: clamp(20px, 2.1vw, 31px); line-height: 1.38; letter-spacing: -.025em; color: var(--muted); }
.button { display: inline-flex; width: fit-content; min-height: 52px; align-items: center; justify-content: center; gap: 11px; padding: 0 20px; border: 0; border-radius: 999px; font-size: 13px; font-weight: 670; cursor: pointer; transform: translate3d(var(--magnetic-x,0), var(--magnetic-y,0), 0); transition: transform 200ms ease, background 220ms ease, color 220ms ease, opacity 220ms ease; }
.button svg { font-size: 18px; transition: transform 250ms var(--ease); }
.button:hover svg { transform: translateX(3px); }
.button-dark { color: #fff; background: var(--ink); }
.button-dark:hover { background: #2a2a27; }
.button-light { color: var(--ink); background: #fff; }
.button-light:hover { background: var(--lime); }
.text-link { display: inline-flex; width: fit-content; align-items: center; gap: 8px; padding: 7px 0 5px; border-bottom: 1px solid rgba(17,17,15,.28); font-size: 13px; font-weight: 620; transition: border-color 220ms ease; }
.text-link:hover { border-color: var(--ink); }
.text-link svg { font-size: 17px; transition: transform 240ms var(--ease); }
.text-link:hover svg { transform: translate(2px,-2px); }
.text-link-light { color: #fff; border-color: rgba(255,255,255,.35); }
.text-link-light:hover { border-color: #fff; }
.section-space { padding: clamp(115px, 12vw, 190px) 0; }
.section-space-small { padding: clamp(80px, 8vw, 125px) 0; }
.section-space-dark { position: relative; padding: clamp(120px, 13vw, 200px) 0; overflow: hidden; color: #fff; background: var(--dark); }
.section-heading { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.55fr); align-items: end; gap: 80px; margin-bottom: clamp(52px, 7vw, 94px); }
.section-heading h2 { margin: 18px 0 0; font-size: clamp(48px, 6.2vw, 95px); line-height: .92; letter-spacing: -.065em; font-weight: 660; }
.section-heading > p, .section-heading > div:last-child > p { margin: 0; max-width: 470px; font-size: 16px; line-height: 1.75; color: var(--muted); }
.section-heading > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.section-heading-dark > p, .section-heading-dark > div:last-child > p { color: rgba(255,255,255,.6); }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.tilt-card { transform-style: preserve-3d; will-change: transform; transition: transform 650ms var(--ease); }
[data-depth="1"] { transform: translateZ(18px); }
[data-depth="2"] { transform: translateZ(32px); }

/* Footer */
.site-footer { position: relative; overflow: hidden; color: #fff; background: var(--dark); }
.footer-cta { min-height: 410px; padding: 88px 0 70px; display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-cta h2 { margin: 20px 0 0; font-size: clamp(47px, 6vw, 91px); line-height: .94; letter-spacing: -.065em; font-weight: 630; }
.round-link { flex: 0 0 auto; width: clamp(96px, 10vw, 142px); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; color: #fff; transform: translate3d(var(--magnetic-x,0), var(--magnetic-y,0), 0); transition: color 300ms ease, background 300ms ease, transform 200ms ease; }
.round-link svg { font-size: 35px; transition: transform 300ms var(--ease); }
.round-link:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.round-link:hover svg { transform: translate(3px,-3px); }
.footer-main { padding: 60px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 60px; }
.footer-nav { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px 52px; font-size: 14px; }
.footer-nav a { color: rgba(255,255,255,.66); transition: color 180ms ease; }
.footer-nav a:hover { color: #fff; }
.footer-contact { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.footer-contact > span { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.footer-contact a { font-size: clamp(18px,2vw,26px); letter-spacing: -.03em; }
.footer-contact small { color: rgba(255,255,255,.45); }
.footer-bottom { padding: 18px 0 26px; display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid rgba(255,255,255,.09); font-size: 10px; color: rgba(255,255,255,.42); }
.footer-bottom p { margin: 0; }
.footer-site-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .055em; }
.footer-bottom a { margin-left: auto; color: rgba(255,255,255,.72); }

/* Home hero */
.home-hero { position: relative; min-height: 100svh; padding: 142px 0 0; overflow: hidden; }
.hero-ambient { position: absolute; border-radius: 50%; filter: blur(20px); pointer-events: none; }
.hero-ambient-a { width: 42vw; height: 42vw; right: -5vw; top: -12vw; background: radial-gradient(circle, rgba(193,219,255,.58), rgba(231,248,217,.24) 52%, transparent 72%); }
.hero-ambient-b { width: 30vw; height: 30vw; left: 32%; bottom: -18vw; background: radial-gradient(circle, rgba(255,241,201,.45), transparent 70%); }
.home-hero-grid { position: relative; z-index: 2; min-height: calc(100svh - 185px); display: grid; grid-template-columns: minmax(0,1fr) minmax(500px,1fr); align-items: center; gap: clamp(45px,5vw,82px); padding-bottom: 72px; }
.home-hero-copy { padding-bottom: 16px; }
.home-hero h1 { margin: 30px 0 30px; font-size: clamp(64px,6.3vw,102px); line-height: .84; letter-spacing: -.077em; font-weight: 690; }
.home-hero h1 em { display: inline-block; transform: translateY(-.02em); }
.hero-lead { max-width: 690px; margin: 0; font-size: clamp(18px,1.7vw,24px); line-height: 1.5; letter-spacing: -.02em; color: var(--muted); }
.hero-actions { margin-top: 39px; display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.hero-principles { margin-top: 58px; padding-top: 20px; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.hero-principles span { position: relative; padding-left: 12px; }
.hero-principles span::before { content: ""; position: absolute; left: 0; top: .45em; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.hero-showcase { position: relative; min-height: 640px; display: grid; place-items: center; }
.showcase-orbit { position: absolute; border: 1px solid rgba(17,17,15,.1); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 84%; aspect-ratio: 1; animation: slowSpin 26s linear infinite; }
.orbit-two { width: 63%; aspect-ratio: 1; animation: slowSpinReverse 34s linear infinite; }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes slowSpinReverse { to { transform: rotate(-360deg); } }
.showcase-frame { position: relative; z-index: 2; width: min(720px, 100%); padding: 10px; border: 1px solid rgba(17,17,15,.1); border-radius: 29px; background: rgba(255,255,255,.7); box-shadow: 0 42px 95px rgba(20,24,20,.16); backdrop-filter: blur(16px); }
.showcase-toolbar { height: 43px; padding: 0 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-radius: 20px 20px 6px 6px; color: #999993; background: rgba(255,255,255,.7); font-size: 8px; }
.showcase-toolbar > div { display: flex; gap: 6px; }
.showcase-toolbar i { width: 7px; height: 7px; border: 1px solid #c7c7c1; border-radius: 50%; }
.showcase-toolbar b { justify-self: end; width: 10px; height: 10px; border: 1px solid #bdbdb7; border-radius: 3px; }
.showcase-screen { position: relative; aspect-ratio: 1.26; overflow: hidden; border-radius: 7px 7px 20px 20px; background: #ddd; }
.showcase-screen.is-changing .project-art { animation: showcaseSwap 620ms var(--ease); }
@keyframes showcaseSwap { 0% { opacity: .25; transform: scale(1.035); filter: blur(8px); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }
.showcase-tabs { position: absolute; z-index: 4; left: -14px; bottom: 18px; width: 245px; padding: 8px; display: flex; flex-direction: column; gap: 3px; border: 1px solid rgba(17,17,15,.1); border-radius: 17px; background: rgba(255,255,255,.78); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); }
.showcase-tabs button { display: flex; align-items: center; gap: 10px; min-height: 39px; padding: 0 11px; border: 0; border-radius: 11px; color: #707069; background: transparent; text-align: left; font-size: 10px; cursor: pointer; transition: color 200ms ease, background 200ms ease; }
.showcase-tabs button span { width: 20px; font-size: 8px; color: #a0a099; }
.showcase-tabs button.is-active { color: #fff; background: var(--ink); }
.showcase-note { position: absolute; z-index: 4; right: -12px; top: 88px; padding: 12px 15px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(17,17,15,.08); border-radius: 14px; background: rgba(255,255,255,.8); box-shadow: 0 18px 50px rgba(17,17,15,.1); backdrop-filter: blur(16px); }
.showcase-note > i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(216,255,79,.16); }
.showcase-note strong, .showcase-note small { display: block; }
.showcase-note strong { font-size: 10px; }
.showcase-note small { margin-top: 3px; font-size: 7px; color: var(--muted); }
.hero-strip { position: relative; z-index: 4; height: 54px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero-strip > div { width: max-content; height: 100%; display: flex; align-items: center; gap: 34px; animation: marquee 34s linear infinite; font-size: 9px; font-weight: 680; letter-spacing: .14em; text-transform: uppercase; color: #6c6c66; }
.hero-strip i { font-style: normal; color: #aaa9a2; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Home statement and truthful metrics */
.statement-layout { display: grid; grid-template-columns: minmax(150px,.32fr) minmax(0,1fr); align-items: start; gap: 80px; }
.statement-kicker { margin: 0 0 35px; max-width: 640px; font-size: clamp(18px,2vw,28px); line-height: 1.42; letter-spacing: -.025em; color: var(--muted); }
.statement-layout .large-copy { max-width: 760px; margin-top: 50px; }
.truth-grid { margin-top: 105px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.truth-grid article { min-height: 255px; padding: 33px 38px 33px 0; border-right: 1px solid var(--line); }
.truth-grid article + article { padding-left: 38px; }
.truth-grid article:last-child { border-right: 0; }
.truth-grid strong { display: block; margin-bottom: 7px; font-size: clamp(42px,5vw,74px); line-height: 1; letter-spacing: -.065em; font-weight: 630; }
.truth-grid span { display: block; margin-bottom: 35px; font-size: 10px; font-weight: 680; letter-spacing: .12em; text-transform: uppercase; color: #777770; }
.truth-grid p { max-width: 310px; margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }

/* Work cards */
.home-work-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 76px 28px; }
.work-card-featured { grid-column: 1 / -1; }
.work-card-link { display: block; }
.work-card-visual { position: relative; aspect-ratio: 1.25; overflow: hidden; border-radius: var(--radius-md); background: #ddd; }
.work-card-featured .work-card-visual { aspect-ratio: 2.05; border-radius: var(--radius-lg); }
.work-card-visual .project-art { transition: transform 900ms var(--ease), filter 900ms var(--ease); }
.work-card-link:hover .project-art { transform: scale(1.025); }
.work-open { position: absolute; z-index: 15; right: 22px; top: 22px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(10,10,9,.78); backdrop-filter: blur(12px); opacity: 0; transform: scale(.78) rotate(-12deg); transition: opacity 260ms ease, transform 360ms var(--ease); }
.work-open svg { font-size: 20px; }
.work-card-link:hover .work-open { opacity: 1; transform: scale(1) rotate(0); }
.work-card-meta { padding-top: 22px; display: flex; justify-content: space-between; align-items: start; gap: 30px; }
.work-card-meta > div:first-child > span { display: block; margin-bottom: 9px; font-size: 9px; font-weight: 680; letter-spacing: .13em; text-transform: uppercase; color: #777771; }
.work-card-meta h3 { margin: 0; font-size: clamp(29px,3.2vw,48px); line-height: 1; letter-spacing: -.055em; font-weight: 640; }
.work-card-meta > div:last-child { display: flex; gap: 11px; align-items: flex-start; text-align: right; }
.work-card-meta > div:last-child span { margin-top: 3px; font-size: 8px; color: #a0a099; }
.work-card-meta > div:last-child p { max-width: 112px; margin: 0; font-size: 10px; line-height: 1.45; color: var(--muted); }
.work-card-summary { max-width: 580px; margin: 15px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.art-label { position: absolute; z-index: 20; left: 18px; bottom: 18px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff; background: rgba(10,10,9,.33); backdrop-filter: blur(10px); font-size: 7px; font-weight: 680; letter-spacing: .12em; text-transform: uppercase; }

/* Experience dark section */
.experience-glow { position: absolute; width: 780px; height: 780px; top: -420px; left: 15%; border-radius: 50%; background: radial-gradient(circle, rgba(134,166,255,.24), transparent 68%); filter: blur(20px); }
.experience-grid { position: relative; display: grid; grid-template-columns: minmax(0,.8fr) minmax(430px,1fr); gap: clamp(70px,10vw,150px); align-items: start; }
.experience-copy { position: sticky; top: 145px; }
.experience-copy h2 { margin: 26px 0 33px; font-size: clamp(51px,6.4vw,94px); line-height: .92; letter-spacing: -.065em; font-weight: 630; }
.experience-copy p { max-width: 550px; margin: 0 0 35px; font-size: 17px; line-height: 1.72; color: rgba(255,255,255,.62); }
.experience-stack { display: flex; flex-direction: column; }
.experience-card { min-height: 260px; padding: 38px 0; display: grid; grid-template-columns: 75px 1fr; gap: 25px; border-top: 1px solid rgba(255,255,255,.14); }
.experience-card:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.experience-card > span { font-size: 10px; color: rgba(255,255,255,.42); }
.experience-card h3 { margin: 0 0 18px; font-size: clamp(29px,3.2vw,45px); line-height: 1.05; letter-spacing: -.04em; font-weight: 580; }
.experience-card p { max-width: 520px; margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.55); }

/* Capabilities and process */
.capability-grid { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--line); }
.capability-card { position: relative; min-height: 330px; padding: 34px 76px 34px 0; border-bottom: 1px solid var(--line); transition: background 350ms ease, padding 350ms var(--ease); }
.capability-card:nth-child(odd) { border-right: 1px solid var(--line); }
.capability-card:nth-child(even) { padding-left: 45px; }
.capability-card:hover { background: rgba(255,255,255,.5); }
.capability-card > span { font-size: 9px; color: #92928b; }
.capability-card h3 { max-width: 520px; margin: 70px 0 17px; font-size: clamp(31px,4vw,56px); line-height: .98; letter-spacing: -.055em; font-weight: 620; }
.capability-card p { max-width: 480px; margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
.capability-card > svg { position: absolute; top: 33px; right: 31px; font-size: 23px; transition: transform 350ms var(--ease); }
.capability-card:hover > svg { transform: translate(5px,-5px); }
.process-preview { background: var(--paper-soft); }
.process-preview-grid { display: grid; grid-template-columns: minmax(350px,.75fr) minmax(500px,1fr); gap: clamp(70px,10vw,150px); }
.process-preview-heading { position: sticky; top: 145px; align-self: start; }
.process-preview-heading h2 { margin: 24px 0; font-size: clamp(49px,6vw,86px); line-height: .94; letter-spacing: -.065em; font-weight: 640; }
.process-preview-heading p { max-width: 470px; margin: 0; font-size: 16px; line-height: 1.72; color: var(--muted); }
.process-preview-list { display: flex; flex-direction: column; }
.process-line { position: relative; min-height: 175px; padding: 35px 0; display: grid; grid-template-columns: 55px 1fr; align-items: center; gap: 20px; border-top: 1px solid var(--line); }
.process-line:last-child { border-bottom: 1px solid var(--line); }
.process-line > span { font-size: 9px; color: #8b8b84; }
.process-line h3 { margin: 0 0 8px; font-size: clamp(29px,3.5vw,48px); line-height: 1; letter-spacing: -.05em; font-weight: 610; }
.process-line p { margin: 0; color: var(--muted); font-size: 13px; }
.process-line i { position: absolute; right: 0; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; }
.process-line i::before, .process-line i::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); transform: translate(-50%,-50%); }
.process-line i::before { width: 10px; height: 1px; }
.process-line i::after { width: 1px; height: 10px; }
.studio-preview-grid { display: grid; grid-template-columns: minmax(480px,1fr) minmax(340px,.75fr); gap: clamp(65px,9vw,135px); align-items: center; }
.studio-portrait { position: relative; min-height: 650px; overflow: hidden; border-radius: var(--radius-lg); color: #fff; background: #0f1114; }
.portrait-grid { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(circle at 50% 48%,#000,transparent 75%); }
.portrait-orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.orb-a { width: 56%; aspect-ratio: 1; top: 11%; right: 7%; background: radial-gradient(circle at 30% 25%, #d8ff4f, #8eb4ff 48%, #233149 75%); box-shadow: 0 35px 90px rgba(118,153,255,.26); }
.orb-b { width: 30%; aspect-ratio: 1; left: 8%; bottom: 8%; background: radial-gradient(circle at 35% 28%, #fff0bd, #b99dff 55%, #3c2d68); opacity: .7; }
.studio-portrait > strong { position: absolute; z-index: 3; left: 8%; top: 9%; font-size: clamp(70px,11vw,165px); line-height: 1; letter-spacing: -.09em; }
.studio-portrait > span { position: absolute; z-index: 3; right: 8%; bottom: 7%; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.studio-preview-copy .overline { margin: 28px 0 13px; font-size: 15px; font-weight: 650; }
.studio-preview-copy h2 { margin: 0 0 28px; font-size: clamp(50px,6vw,88px); line-height: .93; letter-spacing: -.065em; font-weight: 630; }
.studio-preview-copy > p:not(.overline) { max-width: 570px; margin: 0 0 35px; font-size: 16px; line-height: 1.75; color: var(--muted); }

/* Project art system */
.project-art { position: absolute; inset: 0; overflow: hidden; }
.serena-copy, .forge-copy, .brasa-copy, .nova-copy, .atletico-copy { position: absolute; z-index: 5; }
.serena-copy span, .forge-copy span, .brasa-copy span, .nova-copy span, .atletico-copy span { display: block; margin-bottom: 13px; font-size: clamp(7px,.65vw,10px); font-weight: 680; letter-spacing: .14em; }
.art-serena { color: #24352f; background: linear-gradient(165deg,#eceddf 0%,#bbc7bb 46%,#485d52 100%); }
.serena-copy { left: 8%; top: 14%; }
.serena-copy strong { font-family: "Iowan Old Style", Georgia, serif; font-size: clamp(35px,4.4vw,70px); line-height: .9; letter-spacing: -.06em; font-weight: 400; }
.serena-sun { position: absolute; width: 25%; aspect-ratio: 1; top: 10%; right: 9%; border-radius: 50%; background: rgba(255,245,207,.67); box-shadow: 0 0 70px rgba(255,242,197,.6); }
.serena-horizon { position: absolute; left: -12%; width: 124%; border-radius: 50% 50% 0 0; }
.horizon-a { height: 48%; bottom: 18%; background: #a9b9a7; transform: rotate(-5deg); }
.horizon-b { height: 38%; bottom: 1%; background: #738879; transform: rotate(5deg); }
.horizon-c { height: 24%; bottom: -7%; background: #385045; transform: rotate(-2deg); }
.serena-panel { position: absolute; z-index: 6; right: 6%; bottom: 7%; width: 29%; min-height: 18%; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.35); border-radius: 15px; color: #fff; background: rgba(29,49,39,.29); backdrop-filter: blur(14px); }
.serena-panel span { font-family: Georgia,serif; font-size: clamp(23px,3vw,44px); }
.serena-panel small { font-size: 7px; letter-spacing: .13em; }

.art-forge { color: #10110e; background: #d8ff4f; }
.forge-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(15,16,13,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(15,16,13,.09) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg,#000,transparent 78%); }
.forge-copy { left: 8%; top: 17%; }
.forge-copy strong { font-size: clamp(47px,7vw,105px); line-height: .78; letter-spacing: -.085em; font-weight: 760; }
.forge-ring { position: absolute; border-radius: 50%; border: clamp(13px,2vw,30px) solid rgba(14,15,12,.97); }
.ring-a { width: 50%; aspect-ratio: 1; right: -15%; top: -10%; }
.ring-b { width: 34%; aspect-ratio: 1; right: 3%; bottom: -12%; opacity: .2; }
.forge-stat { position: absolute; z-index: 5; right: 6%; bottom: 7%; width: 27%; padding: 16px; border: 1px solid rgba(13,14,11,.2); border-radius: 14px; background: rgba(239,255,175,.58); backdrop-filter: blur(10px); }
.forge-stat small,.forge-stat strong,.forge-stat span { display: block; }
.forge-stat small { font-size: 7px; letter-spacing: .12em; }
.forge-stat strong { margin: 15px 0 2px; font-size: clamp(25px,3vw,43px); letter-spacing: -.06em; }
.forge-stat span { font-size: 8px; font-weight: 650; }

.art-brasa { color: #fff4e8; background: #4b160f; }
.brasa-glow { position: absolute; width: 70%; aspect-ratio: 1; right: -20%; top: -30%; border-radius: 50%; background: radial-gradient(circle,#f4a465 0%,rgba(214,83,42,.52) 36%,transparent 70%); }
.brasa-copy { left: 8%; top: 14%; }
.brasa-copy strong { font-family: "Iowan Old Style",Georgia,serif; font-size: clamp(37px,5.1vw,79px); line-height: .87; font-weight: 400; letter-spacing: -.06em; }
.brasa-plate { position: absolute; right: 2%; bottom: -18%; width: 61%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle,#20100d 0 50%,#68433a 51% 55%,#b88972 56% 57%,#2f1b17 58% 100%); box-shadow: -25px -20px 70px rgba(255,135,76,.13); }
.plate-inner { width: 42%; aspect-ratio: 1; border-radius: 44% 56% 52% 48%; background: radial-gradient(circle at 65% 32%,#e5a970 0 5%,transparent 6%),radial-gradient(circle at 38% 65%,#57723b 0 7%,transparent 8%),linear-gradient(145deg,#843622,#d26a3e 55%,#662516); transform: rotate(-22deg); box-shadow: inset 10px 10px 20px rgba(255,196,120,.18); }
.brasa-reserve { position: absolute; z-index: 5; left: 8%; bottom: 8%; display: flex; align-items: center; gap: 7px; font-size: 8px; font-weight: 680; letter-spacing: .13em; }
.brasa-reserve svg { width: 14px; height: 14px; }

.art-nova { color: #fff; background: #0a0712; }
.nova-beam { position: absolute; width: 32%; height: 150%; top: -25%; filter: blur(4px); transform: rotate(22deg); transform-origin: top; opacity: .88; }
.beam-a { left: 11%; background: linear-gradient(180deg,rgba(155,104,255,.87),transparent 70%); }
.beam-b { left: 39%; background: linear-gradient(180deg,rgba(65,88,255,.62),transparent 75%); }
.beam-c { right: -3%; background: linear-gradient(180deg,rgba(255,88,194,.55),transparent 69%); }
.nova-copy { left: 8%; bottom: 9%; }
.nova-copy strong { font-size: clamp(47px,6.8vw,104px); line-height: .73; letter-spacing: -.09em; font-weight: 710; }
.nova-ticket { position: absolute; z-index: 4; right: 6%; top: 8%; width: 24%; min-height: 24%; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.28); border-radius: 14px; background: rgba(255,255,255,.07); backdrop-filter: blur(12px); }
.nova-ticket small { font-size: 6px; letter-spacing: .15em; }
.nova-ticket span { font-size: clamp(22px,3vw,42px); letter-spacing: -.06em; }

.art-atletico { color: #fff; background: #07192c; }
.atletico-lines { position: absolute; inset: 0; background: radial-gradient(circle at 75% 25%,rgba(96,168,255,.52),transparent 25%),repeating-radial-gradient(circle at 76% 66%,transparent 0 34px,rgba(126,190,255,.12) 35px 36px),linear-gradient(110deg,transparent 47%,rgba(120,191,255,.1) 48% 49%,transparent 50%); }
.atletico-copy { left: 7%; top: 14%; }
.atletico-copy strong { font-size: clamp(38px,5.8vw,92px); line-height: .82; letter-spacing: -.075em; font-weight: 720; }
.member-card { position: absolute; z-index: 5; right: 9%; top: 12%; width: 28%; aspect-ratio: .68 / 1; padding: 15px; border: 1px solid rgba(255,255,255,.24); border-radius: 17px; background: linear-gradient(150deg,rgba(117,184,255,.33),rgba(255,255,255,.06)); box-shadow: 0 25px 55px rgba(0,0,0,.23); backdrop-filter: blur(13px); transform: rotate(7deg); }
.member-card-top { display: flex; align-items: center; justify-content: space-between; }
.member-card-top span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #0b2944; background: #fff; font-size: 7px; font-weight: 750; }
.member-card-top small { font-size: 5px; letter-spacing: .16em; }
.member-avatar { width: 47%; aspect-ratio: 1; margin: 22% auto 8%; border-radius: 50%; background: linear-gradient(160deg,#c3ddf8,#4176ab); box-shadow: inset 0 -15px 20px rgba(4,28,51,.35); }
.member-card > strong { display: block; text-align: center; font-size: clamp(9px,1.3vw,17px); letter-spacing: .08em; }
.member-code { position: absolute; left: 15px; right: 15px; bottom: 15px; display: flex; align-items: flex-end; gap: 2px; height: 19%; }
.member-code i { flex: 1; background: rgba(255,255,255,.9); }
.member-code i:nth-child(2n) { height: 70%; }.member-code i:nth-child(3n) { height: 45%; }.member-code i:nth-child(5n) { height: 82%; }
.atletico-score { position: absolute; z-index: 4; left: 7%; bottom: 8%; padding: 14px 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(255,255,255,.06); backdrop-filter: blur(11px); }
.atletico-score small { display: block; margin-bottom: 8px; font-size: 6px; letter-spacing: .14em; color: rgba(255,255,255,.6); }
.atletico-score strong { font-size: clamp(15px,2vw,25px); letter-spacing: .04em; }
.atletico-score strong span { margin: 0 8px; color: rgba(255,255,255,.4); }

/* Generic page hero */
.page-hero { padding: 185px 0 80px; }
.page-hero-grid { min-height: 520px; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(310px,.55fr); align-items: end; gap: 85px; padding-bottom: 80px; border-bottom: 1px solid var(--line); }
.page-hero h1 { margin: 30px 0 0; font-size: clamp(69px,9vw,142px); line-height: .82; letter-spacing: -.08em; font-weight: 680; }
.page-hero-side { padding-bottom: 10px; }
.page-hero-side > p { margin: 0 0 40px; font-size: 18px; line-height: 1.7; color: var(--muted); }
.page-hero-side > span { font-size: 10px; line-height: 1.6; letter-spacing: .11em; text-transform: uppercase; color: #85857e; }

/* Work archive */
.work-toolbar { position: sticky; z-index: 20; top: 80px; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); background: rgba(245,245,242,.9); backdrop-filter: blur(18px); }
.filter-list { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: #666660; background: transparent; font-size: 10px; cursor: pointer; transition: color 200ms ease, background 200ms ease, border-color 200ms ease; }
.filter-button:hover, .filter-button.is-active { color: #fff; background: var(--ink); border-color: var(--ink); }
.work-toolbar > p { margin: 0; white-space: nowrap; font-size: 10px; color: var(--muted); }
.archive-grid { margin-top: 70px; display: grid; grid-template-columns: repeat(2,1fr); gap: 82px 28px; }
.work-card-archive.is-filtered-out { display: none; }
.work-card-archive:nth-child(3n+1) { grid-column: 1 / -1; }
.work-card-archive:nth-child(3n+1) .work-card-visual { aspect-ratio: 2.05; }
.empty-state { padding: 90px 0; text-align: center; }
.empty-state h2 { font-size: 48px; letter-spacing: -.05em; }
.empty-state button { border: 0; border-bottom: 1px solid currentColor; background: transparent; cursor: pointer; }
.concept-note { background: var(--paper-soft); }
.concept-note-grid { display: grid; grid-template-columns: .3fr 1fr .42fr; gap: 75px; align-items: center; }
.concept-note h2 { margin: 0 0 26px; font-size: clamp(48px,6vw,88px); line-height: .94; letter-spacing: -.065em; font-weight: 640; }
.concept-note p { max-width: 710px; margin: 0; font-size: 16px; line-height: 1.75; color: var(--muted); }
.concept-seal { justify-self: end; width: 215px; aspect-ratio: 1; display: grid; place-content: center; border: 1px solid var(--line); border-radius: 50%; text-align: center; }
.concept-seal strong { font-size: 49px; letter-spacing: -.06em; }
.concept-seal span { margin-top: 7px; font-size: 8px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Services selector and detailed services */
.services-hero { background: radial-gradient(circle at 80% 10%,rgba(196,219,255,.35),transparent 35%); }
.selector-shell { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.55); box-shadow: var(--shadow-soft); }
.selector-tabs { min-height: 78px; display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); }
.selector-tabs button { display: flex; justify-content: center; align-items: center; gap: 13px; border: 0; border-right: 1px solid var(--line); color: var(--muted); background: transparent; font-size: 13px; cursor: pointer; transition: color 230ms ease, background 230ms ease; }
.selector-tabs button:last-child { border-right: 0; }
.selector-tabs button span { font-size: 8px; color: #999992; }
.selector-tabs button.is-active { color: #fff; background: var(--ink); }
.selector-content { min-height: 610px; display: grid; grid-template-columns: .85fr 1.15fr; }
.selector-copy { padding: clamp(54px,7vw,95px); display: flex; flex-direction: column; justify-content: center; }
.selector-copy > span { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #7b7b74; }
.selector-copy h2 { margin: 25px 0; font-size: clamp(42px,5vw,68px); line-height: .96; letter-spacing: -.055em; font-weight: 630; }
.selector-copy p { max-width: 540px; margin: 0 0 29px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.selector-copy ul { margin: 0; padding: 0; list-style: none; }
.selector-copy li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; color: #50504b; }
.selector-copy.is-changing { animation: softSwap 420ms var(--ease); }
@keyframes softSwap { 0% { opacity: .3; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
.selector-visual { position: relative; min-height: 610px; display: grid; place-items: center; overflow: hidden; background: #dfe5d9; transition: background 450ms ease; }
.selector-visual::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid rgba(17,17,15,.1); border-radius: 50%; }
.service-browser { position: relative; z-index: 2; width: 78%; padding: 9px; border: 1px solid rgba(17,17,15,.12); border-radius: 24px; background: rgba(255,255,255,.75); box-shadow: 0 38px 80px rgba(17,17,15,.15); transform: rotate(-3deg); }
.service-browser-bar { height: 35px; display: flex; align-items: center; gap: 5px; padding: 0 12px; }
.service-browser-bar i { width: 6px; height: 6px; border: 1px solid #aaa; border-radius: 50%; }
.service-browser-page { min-height: 330px; padding: 12%; border-radius: 8px 8px 16px 16px; background: rgba(255,255,255,.62); }
.service-browser-page > span { display: block; width: 74px; height: 8px; border-radius: 99px; background: rgba(17,17,15,.22); }
.service-browser-page > strong { display: block; width: 72%; height: 58px; margin-top: 24px; border-radius: 12px; background: var(--ink); }
.service-browser-page > p { width: 52%; height: 10px; margin: 22px 0; border-radius: 99px; background: rgba(17,17,15,.15); }
.service-browser-page > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.service-browser-page > div i { aspect-ratio: .9; border-radius: 10px; background: rgba(17,17,15,.09); }
.service-detail { padding-top: 20px; }
.service-detail-row { min-height: 440px; padding: 75px 0; display: grid; grid-template-columns: .2fr .85fr .7fr; gap: 58px; border-top: 1px solid var(--line); }
.service-detail-row:last-child { border-bottom: 1px solid var(--line); }
.service-detail-number { font-size: 10px; color: #8f8f88; }
.service-detail-title > span { display: block; margin-bottom: 24px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #74746e; }
.service-detail-title h2 { margin: 0; font-size: clamp(44px,5.2vw,74px); line-height: .95; letter-spacing: -.06em; font-weight: 630; }
.service-detail-copy > p { margin: 0 0 35px; font-size: 16px; line-height: 1.72; color: var(--muted); }
.service-detail-copy ul { margin: 0; padding: 0; list-style: none; }
.service-detail-copy li { position: relative; padding: 13px 0 13px 18px; border-top: 1px solid var(--line-soft); font-size: 12px; }
.service-detail-copy li::before { content: ""; position: absolute; left: 0; top: 19px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.engagement-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.engagement-card { min-height: 570px; padding: 40px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-md); background: rgba(255,255,255,.035); }
.engagement-card-featured { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.engagement-card > span { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.48); }
.engagement-card-featured > span { color: rgba(17,17,15,.55); }
.engagement-card h3 { margin: 70px 0 22px; font-size: clamp(35px,4vw,53px); line-height: .98; letter-spacing: -.055em; font-weight: 620; }
.engagement-card p { margin: 0 0 35px; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.57); }
.engagement-card-featured p { color: rgba(17,17,15,.64); }
.engagement-card ul { margin: 0 0 40px; padding: 0; list-style: none; }
.engagement-card li { padding: 11px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; }
.engagement-card-featured li { border-color: rgba(17,17,15,.12); }
.engagement-card .text-link { margin-top: auto; }
.engagement-card-featured .text-link { color: var(--ink); border-color: rgba(17,17,15,.35); }
.full-process-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
.full-process-card { min-height: 410px; padding: 30px 30px 30px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.full-process-card + .full-process-card { padding-left: 30px; }
.full-process-card:last-child { border-right: 0; }
.full-process-card > div { display: flex; justify-content: space-between; align-items: center; }
.full-process-card > div span { font-size: 9px; color: #8e8e87; }
.full-process-card > div i { width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 50%; }
.full-process-card h3 { margin: 105px 0 20px; font-size: clamp(28px,3.4vw,46px); letter-spacing: -.05em; font-weight: 610; }
.full-process-card p { margin: 0 0 32px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.full-process-card small { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: #898982; }
.faq-section { background: var(--paper-soft); }
.faq-grid { display: grid; grid-template-columns: .6fr 1fr; gap: clamp(70px,10vw,145px); align-items: start; }
.faq-heading { position: sticky; top: 145px; }
.faq-heading h2 { margin: 24px 0; font-size: clamp(53px,6.5vw,90px); line-height: .91; letter-spacing: -.065em; font-weight: 640; }
.faq-heading p { max-width: 420px; margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { min-height: 95px; display: flex; align-items: center; justify-content: space-between; gap: 25px; list-style: none; cursor: pointer; font-size: clamp(18px,2vw,26px); letter-spacing: -.025em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { flex: 0 0 auto; width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: transform 300ms var(--ease), background 300ms ease; }
.faq-item summary svg { font-size: 17px; }
.faq-item[open] summary span { color: #fff; background: var(--ink); transform: rotate(45deg); }
.faq-item p { max-width: 700px; margin: -5px 60px 32px 0; font-size: 14px; line-height: 1.75; color: var(--muted); }

/* Studio page */
.studio-hero { position: relative; padding: 175px 0 90px; overflow: hidden; }
.studio-hero-glow { position: absolute; width: 70vw; height: 70vw; right: -24vw; top: -30vw; border-radius: 50%; background: radial-gradient(circle,rgba(190,215,255,.55),rgba(216,255,79,.12) 45%,transparent 70%); filter: blur(12px); }
.studio-hero-grid { position: relative; min-height: 690px; display: grid; grid-template-columns: 1.15fr .7fr; align-items: end; gap: clamp(65px,9vw,140px); }
.studio-hero h1 { margin: 31px 0 30px; font-size: clamp(67px,8vw,125px); line-height: .84; letter-spacing: -.078em; font-weight: 680; }
.studio-hero-copy { padding-bottom: 35px; }
.studio-identity-card { position: relative; min-height: 625px; overflow: hidden; border-radius: var(--radius-lg); color: #fff; background: #0e1114; box-shadow: var(--shadow-deep); }
.identity-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size: 55px 55px; mask-image: radial-gradient(circle at 55% 45%,#000,transparent 72%); }
.identity-orb { position: absolute; border-radius: 50%; }
.identity-a { width: 64%; aspect-ratio: 1; top: 14%; right: -8%; background: radial-gradient(circle at 32% 25%,#f2ffb5,#a7c8ff 42%,#52427d 72%); box-shadow: 0 35px 85px rgba(136,169,255,.32); }
.identity-b { width: 29%; aspect-ratio: 1; left: 8%; bottom: 11%; background: radial-gradient(circle at 32% 25%,#fff2bd,#d8ff4f 45%,#477158); opacity: .8; }
.studio-identity-card > strong { position: absolute; z-index: 3; left: 8%; top: 7%; font-size: clamp(90px,10vw,155px); line-height: 1; letter-spacing: -.09em; }
.studio-identity-card > div:last-child { position: absolute; z-index: 3; right: 8%; bottom: 7%; text-align: right; }
.studio-identity-card > div:last-child span,.studio-identity-card > div:last-child small { display: block; }
.studio-identity-card > div:last-child span { font-size: 18px; font-weight: 650; }
.studio-identity-card > div:last-child small { margin-top: 5px; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.about-story-grid { display: grid; grid-template-columns: .25fr 1fr; gap: 75px; }
.story-lead { max-width: 1050px; margin: 0; font-size: clamp(37px,4.6vw,67px); line-height: 1.08; letter-spacing: -.045em; }
.story-columns { max-width: 950px; margin-top: 70px; display: grid; grid-template-columns: repeat(2,1fr); gap: 55px; }
.story-columns p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--muted); }
.principles-grid { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid rgba(255,255,255,.13); }
.principle-card { min-height: 360px; padding: 35px 65px 35px 0; border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
.principle-card:nth-child(even) { padding-left: 45px; border-right: 0; }
.principle-card > span { font-size: 9px; color: rgba(255,255,255,.42); }
.principle-card h3 { margin: 86px 0 20px; font-size: clamp(32px,4vw,56px); line-height: 1; letter-spacing: -.05em; font-weight: 600; }
.principle-card p { max-width: 560px; margin: 0; font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.55); }
.capability-map-grid { display: grid; grid-template-columns: .65fr 1fr; gap: clamp(70px,10vw,150px); }
.capability-map-heading { position: sticky; top: 145px; align-self: start; }
.capability-map-heading h2 { margin: 24px 0; font-size: clamp(50px,6vw,88px); line-height: .93; letter-spacing: -.065em; font-weight: 630; }
.capability-map-heading p { max-width: 470px; margin: 0; font-size: 15px; line-height: 1.72; color: var(--muted); }
.capability-map-list { border-top: 1px solid var(--line); }
.map-row { min-height: 108px; display: grid; grid-template-columns: .52fr 1fr 36px; align-items: center; gap: 25px; border-bottom: 1px solid var(--line); }
.map-row > span { font-size: clamp(21px,2.4vw,32px); letter-spacing: -.035em; }
.map-row p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.map-row i { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-style: normal; font-size: 8px; }
.direct-card { min-height: 610px; padding: clamp(48px,7vw,90px); display: grid; grid-template-columns: 1fr .75fr; align-items: end; gap: 80px; overflow: hidden; border-radius: var(--radius-lg); color: #fff; background: radial-gradient(circle at 80% 12%,rgba(128,164,255,.34),transparent 28%),radial-gradient(circle at 20% 100%,rgba(216,255,79,.18),transparent 28%),var(--dark); }
.direct-card h2 { margin: 25px 0 0; font-size: clamp(59px,7vw,104px); line-height: .84; letter-spacing: -.075em; font-weight: 640; }
.direct-card > div:last-child > p { margin: 0 0 65px; font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.62); }
.direct-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.direct-metrics span { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.46); }
.direct-metrics strong { display: block; margin-bottom: 6px; font-size: 31px; letter-spacing: -.05em; color: #fff; }
.availability-grid { display: grid; grid-template-columns: .45fr .8fr .75fr; align-items: end; gap: 65px; }
.availability-grid > div:first-child { align-self: start; display: flex; align-items: center; gap: 10px; padding-top: 12px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.availability-grid > div:first-child i { width: 8px; height: 8px; border-radius: 50%; background: #55b873; box-shadow: 0 0 0 5px rgba(85,184,115,.13); }
.availability-grid h2 { margin: 0; font-size: clamp(54px,7vw,99px); line-height: .9; letter-spacing: -.07em; font-weight: 640; }
.availability-grid > div:last-child p { margin: 0 0 32px; font-size: 15px; line-height: 1.72; color: var(--muted); }

/* Contact page and briefing */
.contact-page-section { position: relative; min-height: 100svh; padding: 165px 0 115px; overflow: hidden; }
.contact-ambient { position: absolute; width: 70vw; height: 70vw; left: -28vw; bottom: -46vw; border-radius: 50%; background: radial-gradient(circle,rgba(185,215,255,.6),rgba(216,255,79,.12) 46%,transparent 70%); filter: blur(15px); }
.contact-page-grid { position: relative; display: grid; grid-template-columns: minmax(380px,.72fr) minmax(570px,1fr); gap: clamp(70px,10vw,145px); align-items: start; }
.contact-page-copy { position: sticky; top: 145px; padding-top: 30px; }
.contact-page-copy h1 { margin: 30px 0 30px; font-size: clamp(67px,7.4vw,112px); line-height: .84; letter-spacing: -.078em; font-weight: 680; }
.contact-page-copy > p:not(.eyebrow) { max-width: 570px; margin: 0; font-size: 17px; line-height: 1.72; color: var(--muted); }
.contact-details { margin-top: 65px; display: grid; gap: 24px; }
.contact-details > div { padding-top: 16px; display: grid; grid-template-columns: 110px 1fr; border-top: 1px solid var(--line); }
.contact-details > div > span { font-size: 8px; letter-spacing: .13em; text-transform: uppercase; color: #888881; }
.contact-details a,.contact-details p { margin: 0; font-size: 13px; }
.contact-details p { display: flex; align-items: center; gap: 9px; }
.contact-details p i { width: 7px; height: 7px; border-radius: 50%; background: #55b873; box-shadow: 0 0 0 4px rgba(85,184,115,.12); }
.briefing-shell { min-height: 740px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.72); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); }
.briefing-progress { min-height: 92px; padding: 22px 30px; display: flex; justify-content: space-between; align-items: center; gap: 30px; border-bottom: 1px solid var(--line); }
.briefing-progress > div:first-child span,.briefing-progress > div:first-child strong { display: block; }
.briefing-progress > div:first-child span { margin-bottom: 5px; font-size: 8px; letter-spacing: .11em; text-transform: uppercase; color: #85857e; }
.briefing-progress > div:first-child strong { font-size: 14px; }
.progress-track { width: min(260px,36%); height: 3px; overflow: hidden; border-radius: 99px; background: #deded8; }
.progress-track span { display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--ink); transition: width 500ms var(--ease); }
#project-briefing { padding: 0 30px 30px; }
.briefing-step { display: none; min-height: 535px; padding: 43px 0 25px; animation: stepIn 520ms var(--ease); }
.briefing-step.is-active { display: block; }
@keyframes stepIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
.step-heading { margin-bottom: 37px; display: grid; grid-template-columns: 42px 1fr; gap: 15px; }
.step-heading > span { padding-top: 8px; font-size: 8px; color: #8f8f88; }
.step-heading h2 { margin: 0 0 7px; font-size: clamp(32px,3.4vw,47px); letter-spacing: -.05em; font-weight: 630; }
.step-heading p { margin: 0; font-size: 12px; color: var(--muted); }
.choice-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.choice-card { cursor: pointer; }
.choice-card input,.chip-choice input,.option-row input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card > span { min-height: 145px; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.56); transition: color 250ms ease, background 250ms ease, border-color 250ms ease, transform 250ms var(--ease); }
.choice-card:hover > span { transform: translateY(-3px); border-color: rgba(17,17,15,.3); }
.choice-card input:checked + span { color: #fff; background: var(--ink); border-color: var(--ink); }
.choice-card i { margin-bottom: auto; font-style: normal; font-size: 8px; color: #92928b; }
.choice-card input:checked + span i { color: rgba(255,255,255,.5); }
.choice-card strong { display: block; margin-bottom: 5px; font-size: 18px; letter-spacing: -.025em; }
.choice-card small { font-size: 10px; line-height: 1.45; color: var(--muted); }
.choice-card input:checked + span small { color: rgba(255,255,255,.6); }
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 31px; }
.chip-choice { cursor: pointer; }
.chip-choice span { min-height: 40px; padding: 0 13px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.55); font-size: 10px; transition: color 200ms ease, background 200ms ease, border-color 200ms ease; }
.chip-choice input:checked + span { color: #fff; background: var(--ink); border-color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 9px; }
.field > span,.field-group > span { font-size: 9px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: #686862; }
.field input,.field textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; outline: 0; color: var(--ink); background: rgba(255,255,255,.7); transition: border-color 200ms ease, box-shadow 200ms ease; }
.field input { height: 55px; padding: 0 16px; }
.field textarea { min-height: 135px; padding: 15px 16px; resize: vertical; line-height: 1.55; }
.field input:focus,.field textarea:focus { border-color: rgba(17,17,15,.5); box-shadow: 0 0 0 4px rgba(17,17,15,.05); }
.field small { color: #8a8a83; font-size: 9px; }
.field-group { margin-bottom: 38px; }
.option-row { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.option-row label { cursor: pointer; }
.option-row span { min-height: 42px; padding: 0 14px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.55); font-size: 10px; transition: color 200ms ease,background 200ms ease,border-color 200ms ease; }
.option-row input:checked + span { color: #fff; background: var(--ink); border-color: var(--ink); }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 19px 12px; }
.field-full { grid-column: 1 / -1; }
.brief-review { margin-top: 24px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 13px; background: rgba(245,245,242,.65); font-size: 10px; line-height: 1.65; color: var(--muted); }
.brief-review strong { color: var(--ink); }
.consent { margin-top: 17px; display: grid; grid-template-columns: 17px 1fr; gap: 10px; cursor: pointer; }
.consent input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--ink); }
.consent span { font-size: 9px; line-height: 1.5; color: var(--muted); }
.field-error { min-height: 14px; margin: 6px 0 0; color: #a44236; font-size: 9px; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.briefing-actions { min-height: 65px; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid var(--line); }
.briefing-back { border: 0; border-bottom: 1px solid currentColor; color: var(--muted); background: transparent; font-size: 11px; cursor: pointer; }
.briefing-back:disabled { opacity: 0; pointer-events: none; }
.briefing-actions .button { min-height: 44px; padding-inline: 16px; }
.form-status { min-height: 20px; margin: 4px 0 0; color: var(--muted); font-size: 10px; text-align: right; }
.briefing-success { min-height: 575px; padding: 70px 10%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.success-mark { width: 55px; height: 55px; display: grid; place-items: center; margin-bottom: 31px; border-radius: 50%; color: var(--ink); background: var(--lime); font-size: 22px; }
.briefing-success > span { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #777770; }
.briefing-success h2 { max-width: 550px; margin: 18px 0 20px; font-size: clamp(39px,5vw,65px); line-height: .98; letter-spacing: -.055em; }
.briefing-success p { max-width: 520px; margin: 0 0 31px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.contact-assurance { padding: 0 0 120px; }
.assurance-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.assurance-grid article { min-height: 235px; padding: 30px 40px 30px 0; border-right: 1px solid var(--line); }
.assurance-grid article + article { padding-left: 40px; }
.assurance-grid article:last-child { border-right: 0; }
.assurance-grid span { font-size: 8px; color: #91918a; }
.assurance-grid h3 { margin: 65px 0 12px; font-size: 25px; letter-spacing: -.035em; }
.assurance-grid p { margin: 0; font-size: 12px; line-height: 1.65; color: var(--muted); }

/* Case studies */
.case-hero { padding: 150px 0 0; }
.case-hero-top { min-height: 60px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #7e7e77; }
.case-back { transition: color 180ms ease; }
.case-back:hover { color: var(--ink); }
.case-title-grid { min-height: 430px; display: grid; grid-template-columns: 1fr .55fr; align-items: end; gap: 80px; padding: 65px 0 70px; }
.case-title-grid h1 { margin: 27px 0 0; font-size: clamp(78px,11vw,176px); line-height: .75; letter-spacing: -.085em; font-weight: 690; }
.case-tagline { max-width: 520px; margin: 0 0 12px; font-size: clamp(25px,3.1vw,43px); line-height: 1.16; letter-spacing: -.04em; }
.case-hero-art { position: relative; aspect-ratio: 2 / .96; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.case-hero-art .serena-copy strong,.case-hero-art .forge-copy strong,.case-hero-art .brasa-copy strong,.case-hero-art .nova-copy strong,.case-hero-art .atletico-copy strong { font-size: clamp(60px,8vw,130px); }
.case-overview-grid { display: grid; grid-template-columns: .78fr 1.2fr; gap: clamp(70px,10vw,150px); align-items: start; }
.case-meta { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--line); }
.case-meta > div { min-height: 110px; padding: 22px 20px 20px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-meta > div:nth-child(even) { padding-left: 25px; border-right: 0; }
.case-meta span,.case-meta strong { display: block; }
.case-meta span { margin-bottom: 25px; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: #8b8b84; }
.case-meta strong { font-size: 14px; font-weight: 550; }
.case-intro h2 { margin: 25px 0 25px; font-size: clamp(43px,5vw,70px); line-height: 1.02; letter-spacing: -.055em; font-weight: 620; }
.case-intro > p { max-width: 760px; margin: 0; font-size: 16px; line-height: 1.75; color: var(--muted); }
.case-thinking { padding-top: 20px; }
.case-thinking-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 70px; }
.case-thinking article { min-height: 420px; padding: 42px 48px 42px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case-thinking article + article { padding-left: 48px; border-left: 1px solid var(--line); }
.case-thinking span { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: #7f7f78; }
.case-thinking h2 { margin: 105px 0 24px; font-size: clamp(38px,4.5vw,64px); line-height: .97; letter-spacing: -.055em; font-weight: 620; }
.case-thinking p { max-width: 610px; margin: 0; font-size: 15px; line-height: 1.75; color: var(--muted); }
.case-ui-stage { min-height: 850px; display: grid; grid-template-columns: minmax(0,1fr) 270px; align-items: center; gap: 50px; }
.ui-browser { position: relative; overflow: hidden; padding-top: 45px; border: 1px solid rgba(255,255,255,.14); border-radius: 25px; background: #fff; box-shadow: 0 45px 100px rgba(0,0,0,.35); }
.ui-browser-top { position: absolute; inset: 0 0 auto; height: 45px; padding: 0 15px; display: flex; align-items: center; gap: 6px; color: #999; background: #f3f3ef; font-size: 7px; }
.ui-browser-top i { width: 6px; height: 6px; border: 1px solid #c0c0ba; border-radius: 50%; }
.ui-browser-top span { position: absolute; left: 50%; transform: translateX(-50%); }
.ui-phone { position: relative; justify-self: center; width: 255px; min-height: 535px; padding: 19px 15px 16px; overflow: hidden; border: 7px solid #272724; border-radius: 43px; color: var(--ink); background: #f7f7f3; box-shadow: 0 38px 80px rgba(0,0,0,.38); }
.phone-island { position: absolute; z-index: 8; top: 10px; left: 50%; width: 72px; height: 19px; border-radius: 99px; background: #161614; transform: translateX(-50%); }
/* Serena mockup */
.serena-ui-hero { position: relative; min-height: 590px; padding: 30px 36px; overflow: hidden; color: #23352f; background: linear-gradient(165deg,#eff0e5,#b9c6ba 46%,#52665b); }
.serena-ui-hero::before,.serena-ui-hero::after { content: ""; position: absolute; left: -10%; width: 120%; border-radius: 50% 50% 0 0; }
.serena-ui-hero::before { height: 41%; bottom: 0; background: #718779; transform: rotate(4deg); }
.serena-ui-hero::after { height: 24%; bottom: -5%; background: #344d42; transform: rotate(-2deg); }
.serena-ui-hero nav { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 8px; }
.serena-ui-hero nav b { font-family: Georgia,serif; font-size: 18px; }
.serena-ui-hero nav button { justify-self: end; padding: 9px 12px; border: 0; border-radius: 99px; color: #fff; background: #23352f; font-size: 7px; }
.serena-ui-hero > div { position: relative; z-index: 3; margin-top: 125px; }
.serena-ui-hero small { font-size: 7px; letter-spacing: .13em; }
.serena-ui-hero h3 { margin: 16px 0 12px; font-family: Georgia,serif; font-size: clamp(55px,7vw,100px); line-height: .84; font-weight: 400; letter-spacing: -.06em; }
.serena-ui-hero p { width: 265px; font-size: 11px; line-height: 1.6; }
.serena-ui-hero aside { position: absolute; z-index: 4; right: 4%; bottom: 5%; width: 180px; padding: 18px; border: 1px solid rgba(255,255,255,.35); border-radius: 16px; color: #fff; background: rgba(35,53,47,.25); backdrop-filter: blur(12px); }
.serena-ui-hero aside span,.serena-ui-hero aside strong { display: block; }
.serena-ui-hero aside span { font-size: 7px; }
.serena-ui-hero aside strong { margin-top: 38px; font-family: Georgia,serif; font-size: 22px; }
.ui-serena-phone { background: #e9e9df; }
.serena-phone-head { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; }
.serena-phone-head b { font-family: Georgia,serif; font-size: 20px; }
.serena-phone-head i { width: 19px; height: 1px; background: #333; box-shadow: 0 5px 0 #333; }
.serena-phone-image { height: 260px; margin: 20px -2px 18px; border-radius: 18px; background: radial-gradient(circle at 72% 20%,#fff3c9 0 11%,transparent 12%),linear-gradient(165deg,#d9ddcf 0 40%,#9caf9e 41% 64%,#4b6458 65%); }
.ui-serena-phone > small { font-size: 7px; letter-spacing: .12em; }
.ui-serena-phone h4 { margin: 9px 0 18px; font-family: Georgia,serif; font-size: 31px; line-height: .95; font-weight: 400; }
.ui-serena-phone button,.ui-forge-phone button,.ui-brasa-phone button,.ui-nova-phone > button,.ui-atletico-phone > button { width: 100%; height: 42px; border: 0; border-radius: 99px; color: #fff; background: #1f312a; font-size: 9px; }
/* Forge mockup */
.forge-ui { min-height: 590px; padding: 28px 35px; color: #11120f; background: #d8ff4f; background-image: linear-gradient(rgba(15,16,13,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(15,16,13,.08) 1px,transparent 1px); background-size: 50px 50px; }
.forge-ui header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 8px; }
.forge-ui header b { font-size: 20px; letter-spacing: -.05em; }
.forge-ui header button { justify-self: end; padding: 9px 14px; border: 1px solid #111; border-radius: 99px; background: transparent; font-size: 7px; }
.forge-ui-title { margin-top: 92px; }
.forge-ui-title small { font-size: 7px; letter-spacing: .13em; }
.forge-ui-title h3 { margin: 12px 0 0; font-size: clamp(73px,9vw,135px); line-height: .74; letter-spacing: -.09em; }
.forge-schedule { position: absolute; right: 4%; bottom: 6%; width: 35%; padding: 18px; border: 1px solid rgba(17,18,15,.2); border-radius: 16px; background: rgba(247,255,214,.7); backdrop-filter: blur(10px); }
.forge-schedule > span { display: block; margin-bottom: 12px; font-size: 7px; letter-spacing: .12em; }
.forge-schedule article { padding: 11px 0; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; border-top: 1px solid rgba(17,18,15,.14); }
.forge-schedule b { font-size: 11px; }.forge-schedule p { margin: 0; font-size: 9px; font-weight: 700; }.forge-schedule i { font-style: normal; font-size: 6px; color: #666; }
.ui-forge-phone { color: #111; background: #d8ff4f; }
.forge-phone-head { margin-top: 22px; display: flex; justify-content: space-between; align-items: center; }
.forge-phone-head b { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #d8ff4f; background: #111; }
.forge-phone-head span { font-size: 9px; font-weight: 650; }
.ui-forge-phone article { margin-top: 82px; padding: 22px; border: 1px solid rgba(17,18,15,.2); border-radius: 20px; background: rgba(255,255,255,.45); }
.ui-forge-phone article small,.ui-forge-phone article strong,.ui-forge-phone article span { display: block; }
.ui-forge-phone article small { font-size: 9px; }.ui-forge-phone article strong { margin-top: 35px; font-size: 31px; letter-spacing: -.05em; }.ui-forge-phone article span { margin: 5px 0 22px; font-size: 8px; color: #555; }
.ui-forge-phone button { color: #d8ff4f; background: #111; }
.ui-forge-phone nav { position: absolute; left: 15px; right: 15px; bottom: 16px; height: 48px; display: flex; justify-content: space-around; align-items: center; border-radius: 16px; background: #111; }
.ui-forge-phone nav i { width: 12px; height: 12px; border: 1px solid #d8ff4f; border-radius: 4px; }
/* Brasa mockup */
.brasa-ui { position: relative; min-height: 590px; padding: 30px 36px; overflow: hidden; color: #fff4e8; background: #4b160f; }
.brasa-ui::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -25%; top: -35%; border-radius: 50%; background: radial-gradient(circle,#f4a465,rgba(214,83,42,.5) 38%,transparent 70%); }
.brasa-ui nav { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 8px; }
.brasa-ui nav b { font-size: 17px; }.brasa-ui nav button { justify-self: end; padding: 9px 13px; border: 1px solid rgba(255,255,255,.45); border-radius: 99px; color: #fff; background: transparent; font-size: 7px; }
.brasa-ui-copy { position: relative; z-index: 3; margin-top: 95px; }.brasa-ui-copy small { font-size: 7px; letter-spacing: .13em; }.brasa-ui-copy h3 { margin: 16px 0 0; font-family: Georgia,serif; font-size: clamp(66px,8vw,115px); line-height: .82; letter-spacing: -.06em; font-weight: 400; }
.brasa-ui-plate { position: absolute; right: -4%; bottom: -25%; width: 58%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle,#23110e 0 49%,#70483f 50% 55%,#bd8d75 56% 57%,#321c18 58%); }
.brasa-ui-plate i { width: 42%; aspect-ratio: 1; border-radius: 45% 55% 48% 52%; background: linear-gradient(145deg,#81321f,#d66e3f 55%,#5c2117); transform: rotate(-18deg); }
.brasa-ui footer { position: absolute; z-index: 4; left: 36px; bottom: 28px; display: flex; gap: 30px; font-size: 7px; letter-spacing: .1em; }
.ui-brasa-phone { color: #fff4e8; background: #4b160f; }
.ui-brasa-phone header { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; }.ui-brasa-phone header b { font-size: 18px; }.ui-brasa-phone header i { width: 18px; height: 1px; background: #fff; box-shadow: 0 5px 0 #fff; }
.ui-brasa-phone > small { display: block; margin-top: 34px; font-size: 7px; letter-spacing: .13em; }.ui-brasa-phone h4 { margin: 10px 0; font-family: Georgia,serif; font-size: 30px; font-weight: 400; }.dish-art { height: 185px; margin: 15px 0; border-radius: 18px; background: radial-gradient(circle at 50% 50%,#9b432b 0 18%,transparent 19%),radial-gradient(circle at 42% 56%,#49683d 0 6%,transparent 7%),radial-gradient(circle,#2c1713 0 48%,#8b5a4c 49% 54%,#261510 55%); }.dish-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 8px; }.dish-meta p { margin: 0; color: rgba(255,255,255,.6); }.ui-brasa-phone button { margin-top: 18px; color: #4b160f; background: #fff4e8; }
/* Nova mockup */
.nova-ui { position: relative; min-height: 590px; padding: 30px 36px; overflow: hidden; color: #fff; background: #0a0712; }
.nova-ui nav { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 8px; }.nova-ui nav b { font-size: 19px; }.nova-ui nav button { justify-self: end; padding: 9px 13px; border: 1px solid rgba(255,255,255,.38); border-radius: 99px; color: #fff; background: transparent; font-size: 7px; }
.nova-ui-beams i { position: absolute; width: 28%; height: 150%; top: -20%; transform: rotate(20deg); filter: blur(3px); }.nova-ui-beams i:nth-child(1) { left: 11%; background: linear-gradient(#9b68ff,transparent 72%); }.nova-ui-beams i:nth-child(2) { left: 40%; background: linear-gradient(#4158ff,transparent 75%); }.nova-ui-beams i:nth-child(3) { right: -3%; background: linear-gradient(#ff58c2,transparent 72%); }
.nova-ui-copy { position: absolute; z-index: 4; left: 5%; bottom: 7%; }.nova-ui-copy small { font-size: 7px; letter-spacing: .14em; }.nova-ui-copy h3 { margin: 12px 0 8px; font-size: clamp(74px,9vw,130px); line-height: .72; letter-spacing: -.09em; }.nova-ui-copy p { margin: 0; font-size: 8px; letter-spacing: .11em; }
.nova-ui aside { position: absolute; z-index: 4; right: 5%; top: 18%; width: 170px; padding: 17px; border: 1px solid rgba(255,255,255,.25); border-radius: 16px; background: rgba(255,255,255,.06); backdrop-filter: blur(12px); }.nova-ui aside span,.nova-ui aside strong { display: block; }.nova-ui aside span { font-size: 7px; }.nova-ui aside strong { margin: 40px 0 17px; font-size: 35px; letter-spacing: -.06em; }.nova-ui aside button { width: 100%; height: 31px; border: 0; border-radius: 99px; color: #0a0712; background: #fff; font-size: 7px; }
.ui-nova-phone { color: #fff; background: #0a0712; }.ui-nova-phone header { margin-top: 20px; display: flex; justify-content: space-between; }.ui-nova-phone header b { font-size: 19px; }.ui-nova-phone header i { width: 18px; height: 1px; margin-top: 8px; background: #fff; box-shadow: 0 5px 0 #fff; }.ticket-mobile { position: relative; min-height: 320px; margin-top: 43px; padding: 25px 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 22px; background: radial-gradient(circle at 80% 5%,rgba(255,88,194,.4),transparent 38%),linear-gradient(145deg,rgba(155,104,255,.28),rgba(255,255,255,.03)); }.ticket-mobile small,.ticket-mobile h4,.ticket-mobile span { position: relative; z-index: 2; display: block; }.ticket-mobile small { font-size: 7px; letter-spacing: .13em; }.ticket-mobile h4 { margin: 85px 0 8px; font-size: 36px; line-height: .95; letter-spacing: -.06em; }.ticket-mobile span { font-size: 8px; color: rgba(255,255,255,.55); }.ticket-code { position: absolute; left: 20px; right: 20px; bottom: 22px; height: 35px; background: repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 5px); }.ui-nova-phone > button { margin-top: 18px; color: #0a0712; background: #fff; }
/* Atletico mockup */
.atletico-ui { position: relative; min-height: 590px; padding: 30px 36px; overflow: hidden; color: #fff; background: radial-gradient(circle at 75% 22%,rgba(96,168,255,.52),transparent 26%),#07192c; }.atletico-ui::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 75% 65%,transparent 0 38px,rgba(126,190,255,.11) 39px 40px); }.atletico-ui nav { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 8px; }.atletico-ui nav b { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #07192c; background: #fff; }.atletico-ui nav button { justify-self: end; padding: 9px 13px; border: 1px solid rgba(255,255,255,.35); border-radius: 99px; color: #fff; background: transparent; font-size: 7px; }.atletico-ui-copy { position: relative; z-index: 3; margin-top: 95px; }.atletico-ui-copy small { font-size: 7px; letter-spacing: .13em; }.atletico-ui-copy h3 { margin: 14px 0 0; font-size: clamp(69px,8.5vw,125px); line-height: .77; letter-spacing: -.08em; }.match-card { position: absolute; z-index: 4; right: 5%; bottom: 7%; width: 31%; padding: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.06); backdrop-filter: blur(12px); }.match-card > small { font-size: 7px; letter-spacing: .13em; }.match-card > div { margin: 28px 0 12px; display: flex; justify-content: space-between; align-items: center; }.match-card > div b { font-size: 22px; }.match-card > div span { font-size: 10px; color: rgba(255,255,255,.55); }.match-card p { margin: 0; font-size: 7px; color: rgba(255,255,255,.5); }
.ui-atletico-phone { color: #fff; background: #07192c; }.ui-atletico-phone header { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; }.ui-atletico-phone header b { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #07192c; background: #fff; }.ui-atletico-phone header span { font-size: 9px; }.digital-member { min-height: 350px; margin-top: 35px; padding: 21px; border: 1px solid rgba(255,255,255,.22); border-radius: 23px; background: linear-gradient(150deg,rgba(117,184,255,.35),rgba(255,255,255,.05)); }.digital-member > small,.digital-member > strong,.digital-member > span { display: block; text-align: center; }.digital-member > small { font-size: 6px; letter-spacing: .12em; }.member-mobile-avatar { width: 78px; aspect-ratio: 1; margin: 37px auto 12px; border-radius: 50%; background: linear-gradient(160deg,#c3ddf8,#4176ab); }.digital-member > strong { font-size: 17px; letter-spacing: .07em; }.digital-member > span { margin-top: 7px; font-size: 7px; color: rgba(255,255,255,.58); }.qr-grid { width: 90px; aspect-ratio: 1; margin: 24px auto 0; padding: 5px; display: grid; grid-template-columns: repeat(5,1fr); gap: 2px; background: #fff; }.qr-grid i { background: #07192c; }.qr-grid i:nth-child(3n) { opacity: 0; }.ui-atletico-phone > button { margin-top: 16px; color: #07192c; background: #fff; }
.case-feature-grid { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--line); }
.case-feature { min-height: 310px; padding: 35px 60px 35px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.case-feature:nth-child(even) { padding-left: 42px; border-right: 0; }.case-feature > span { font-size: 8px; color: #8f8f88; }.case-feature h3 { margin: 75px 0 18px; font-size: clamp(30px,3.7vw,50px); line-height: 1; letter-spacing: -.05em; font-weight: 610; }.case-feature p { max-width: 560px; margin: 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.case-system { background: var(--paper-soft); }.case-system-grid { display: grid; grid-template-columns: .72fr 1fr; gap: clamp(70px,10vw,150px); align-items: center; }.case-system-copy h2 { margin: 25px 0; font-size: clamp(50px,6vw,86px); line-height: .92; letter-spacing: -.065em; font-weight: 630; }.case-system-copy > p { max-width: 570px; margin: 0 0 38px; font-size: 15px; line-height: 1.72; color: var(--muted); }.case-system-copy ul { margin: 0; padding: 0; list-style: none; }.case-system-copy li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 11px; }.case-system-panel { min-height: 670px; padding: 28px; display: grid; grid-template-columns: .45fr 1fr; grid-template-rows: auto 1fr; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.62); }.palette-row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }.palette-row i { position: relative; aspect-ratio: 1.6; border-radius: 14px; background: var(--swatch); }.palette-row i span { position: absolute; left: 10px; bottom: 8px; padding: 4px 6px; border-radius: 6px; color: #fff; background: rgba(0,0,0,.28); font-style: normal; font-size: 6px; backdrop-filter: blur(5px); }.type-specimen,.component-specimen { border: 1px solid var(--line-soft); border-radius: 18px; background: rgba(255,255,255,.65); }.type-specimen { padding: 20px; display: flex; flex-direction: column; }.type-specimen > span,.component-specimen > span { font-size: 7px; letter-spacing: .12em; text-transform: uppercase; color: #8b8b84; }.type-specimen strong { margin-top: auto; font-family: Georgia,serif; font-size: 82px; line-height: .8; font-weight: 400; }.type-specimen p { margin: 30px 0 0; font-size: 25px; line-height: .95; letter-spacing: -.05em; }.type-specimen p em { font-family: Georgia,serif; }.component-specimen { padding: 20px; display: flex; flex-direction: column; gap: 20px; }.component-specimen button { min-height: 48px; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: 99px; color: #fff; background: var(--ink); font-size: 9px; }.component-specimen button svg { width: 16px; }.component-specimen > span { width: fit-content; padding: 8px 10px; border: 1px solid var(--line); border-radius: 99px; }.component-specimen > div { margin-top: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.component-specimen > div i { aspect-ratio: 1; border-radius: 11px; background: var(--paper-soft); }.case-disclaimer { padding: 40px 0; color: #fff; background: var(--dark); }.case-disclaimer .page-width { display: grid; grid-template-columns: .35fr 1fr; gap: 60px; }.case-disclaimer span { font-size: 8px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.45); }.case-disclaimer p { max-width: 890px; margin: 0; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.58); }.next-case-link { display: grid; grid-template-columns: .68fr 1fr; align-items: center; gap: 80px; }.next-case-link > div:first-child > span { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #85857e; }.next-case-link h2 { margin: 24px 0 18px; font-size: clamp(53px,7vw,105px); line-height: .88; letter-spacing: -.07em; font-weight: 650; }.next-case-link p { max-width: 520px; margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }.next-case-art { position: relative; aspect-ratio: 1.7; overflow: hidden; border-radius: var(--radius-md); }.next-case-art > i { position: absolute; z-index: 10; right: 25px; top: 25px; width: 55px; height: 55px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(10,10,9,.72); font-style: normal; backdrop-filter: blur(10px); transition: transform 300ms var(--ease); }.next-case-link:hover .next-case-art > i { transform: translate(4px,-4px); }

/* 404 */
.not-found { width: min(1250px,calc(100vw - 60px)); min-height: 100svh; margin-inline: auto; padding: 28px 0 80px; display: flex; flex-direction: column; justify-content: space-between; }.not-found > div { padding-top: 90px; }.not-found > div > span { font-size: 11px; letter-spacing: .15em; color: var(--muted); }.not-found h1 { margin: 24px 0; font-size: clamp(74px,11vw,170px); line-height: .78; letter-spacing: -.08em; }.not-found p { margin: 0 0 32px; color: var(--muted); }

/* Responsive */
@media (max-width: 1180px) {
  :root { --page: min(100% - 48px, 1180px); }
  .home-hero-grid { grid-template-columns: 1fr 1fr; gap: 45px; }
  .home-hero h1 { font-size: clamp(63px,8.2vw,98px); }
  .hero-showcase { min-height: 550px; }
  .showcase-tabs { left: 0; }
  .showcase-note { right: 0; }
  .section-heading { gap: 50px; }
  .case-ui-stage { grid-template-columns: minmax(0,1fr) 235px; }
  .ui-phone { width: 225px; min-height: 480px; }
  .contact-page-grid { grid-template-columns: .65fr 1fr; gap: 55px; }
  .briefing-shell { min-width: 0; }
}

@media (max-width: 980px) {
  :root { --page: min(100% - 40px, 920px); }
  .desktop-nav, .header-cta { display: none; }
  .header-inner { grid-template-columns: 1fr auto; }
  .menu-toggle, .mobile-navigation { display: block; }
  .home-hero { padding-top: 130px; }
  .home-hero-grid { min-height: auto; grid-template-columns: 1fr; padding-top: 60px; padding-bottom: 80px; }
  .home-hero-copy { max-width: 820px; }
  .home-hero h1 { font-size: clamp(69px,13vw,116px); }
  .hero-showcase { min-height: 660px; }
  .showcase-frame { width: min(760px, 92%); }
  .showcase-tabs { left: 0; bottom: 35px; }
  .showcase-note { right: 0; top: 105px; }
  .statement-layout { grid-template-columns: 1fr; gap: 35px; }
  .truth-grid { grid-template-columns: 1fr; }
  .truth-grid article, .truth-grid article + article { min-height: auto; padding: 32px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .truth-grid article:last-child { border-bottom: 0; }
  .truth-grid span { margin-bottom: 15px; }
  .section-heading { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  .section-heading > p, .section-heading > div:last-child > p { max-width: 690px; }
  .experience-grid, .process-preview-grid, .faq-grid, .capability-map-grid { grid-template-columns: 1fr; }
  .experience-copy, .process-preview-heading, .faq-heading, .capability-map-heading, .contact-page-copy { position: relative; top: auto; }
  .experience-copy { margin-bottom: 35px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card, .capability-card:nth-child(even) { min-height: 285px; padding: 32px 65px 32px 0; border-right: 0; }
  .capability-card h3 { margin-top: 65px; }
  .studio-preview-grid { grid-template-columns: 1fr; }
  .studio-portrait { min-height: 600px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-contact { grid-column: 2; grid-row: 1 / span 2; }
  .footer-nav { grid-column: 1; }
  .page-hero-grid { grid-template-columns: 1fr; min-height: auto; gap: 50px; }
  .page-hero-side { max-width: 650px; }
  .concept-note-grid { grid-template-columns: 1fr; gap: 40px; }
  .concept-seal { justify-self: start; }
  .selector-content { grid-template-columns: 1fr; }
  .selector-visual { min-height: 500px; }
  .service-detail-row { grid-template-columns: 60px 1fr; }
  .service-detail-copy { grid-column: 2; }
  .engagement-grid { grid-template-columns: 1fr; }
  .engagement-card { min-height: 480px; }
  .full-process-grid { grid-template-columns: repeat(2,1fr); }
  .full-process-card:nth-child(2) { border-right: 0; }
  .studio-hero-grid { grid-template-columns: 1fr; }
  .studio-identity-card { min-height: 620px; max-width: 720px; width: 100%; justify-self: end; }
  .about-story-grid { grid-template-columns: 1fr; gap: 35px; }
  .direct-card { grid-template-columns: 1fr; }
  .availability-grid { grid-template-columns: 1fr; gap: 35px; }
  .contact-page-grid { grid-template-columns: 1fr; }
  .contact-page-copy { max-width: 800px; }
  .briefing-shell { width: 100%; }
  .case-title-grid { grid-template-columns: 1fr; min-height: auto; gap: 55px; }
  .case-tagline { max-width: 700px; }
  .case-overview-grid { grid-template-columns: 1fr; }
  .case-ui-stage { grid-template-columns: 1fr; gap: 55px; }
  .ui-phone { width: 255px; min-height: 535px; }
  .case-system-grid { grid-template-columns: 1fr; }
  .next-case-link { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --page: calc(100vw - 32px); --radius-lg: 30px; --radius-md: 22px; }
  html { scroll-padding-top: 85px; }
  .site-header { padding: 10px 0; }
  .wordmark-name { font-size: 14px; }
  .pointer-aura { display: none; }
  .section-space { padding: 95px 0; }
  .section-space-small { padding: 68px 0; }
  .section-space-dark { padding: 100px 0; }
  .home-hero { padding-top: 100px; }
  .home-hero-grid { padding-top: 46px; padding-bottom: 60px; }
  .home-hero h1 { margin: 23px 0 25px; font-size: clamp(55px,17.5vw,88px); line-height: .84; }
  .hero-lead { font-size: 17px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .hero-principles { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
  .hero-showcase { min-height: 480px; }
  .showcase-frame { width: 100%; padding: 7px; border-radius: 21px; }
  .showcase-toolbar { height: 36px; }
  .showcase-screen { aspect-ratio: 1.05; }
  .showcase-tabs { left: 10px; right: 10px; bottom: 2px; width: auto; flex-direction: row; overflow-x: auto; }
  .showcase-tabs button { flex: 0 0 auto; padding-inline: 10px; }
  .showcase-note { display: none; }
  .serena-copy strong { font-size: 38px; }
  .forge-copy strong { font-size: 52px; }
  .brasa-copy strong { font-size: 39px; }
  .nova-copy strong { font-size: 48px; }
  .atletico-copy strong { font-size: 40px; }
  .hero-strip { height: 48px; }
  .display-title { font-size: clamp(55px,17vw,83px); }
  .statement-layout .large-copy { margin-top: 35px; }
  .truth-grid { margin-top: 65px; }
  .section-heading { margin-bottom: 50px; }
  .section-heading h2 { font-size: clamp(43px,13vw,68px); }
  .home-work-grid, .archive-grid { grid-template-columns: 1fr; gap: 60px; }
  .work-card-featured, .work-card-archive:nth-child(3n+1) { grid-column: auto; }
  .work-card-featured .work-card-visual, .work-card-archive:nth-child(3n+1) .work-card-visual, .work-card-visual { aspect-ratio: 1.05; border-radius: var(--radius-md); }
  .work-card-meta h3 { font-size: 31px; }
  .work-open { opacity: 1; width: 42px; height: 42px; right: 14px; top: 14px; transform: none; }
  .experience-grid { gap: 50px; }
  .experience-copy h2 { font-size: 52px; }
  .experience-card { min-height: 230px; grid-template-columns: 42px 1fr; }
  .capability-card, .capability-card:nth-child(even) { padding-right: 45px; }
  .capability-card h3 { font-size: 38px; }
  .process-preview-grid { gap: 60px; }
  .process-preview-heading h2 { font-size: 52px; }
  .process-line { grid-template-columns: 37px 1fr; padding-right: 45px; }
  .studio-portrait { min-height: 480px; }
  .footer-cta { min-height: 370px; flex-direction: column; align-items: flex-start; }
  .footer-cta h2 { font-size: 50px; }
  .round-link { width: 88px; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-contact { grid-column: 1; grid-row: auto; justify-self: start; align-items: flex-start; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .footer-bottom a { margin-left: 0; }
  .page-hero { padding-top: 130px; }
  .page-hero-grid { padding-bottom: 55px; }
  .page-hero h1 { font-size: clamp(61px,18vw,94px); }
  .work-toolbar { top: 62px; align-items: flex-start; flex-direction: column; }
  .filter-list { flex-wrap: nowrap; width: 100%; padding-bottom: 4px; overflow-x: auto; }
  .filter-button { flex: 0 0 auto; }
  .archive-grid { margin-top: 48px; }
  .concept-seal { width: 180px; }
  .selector-tabs { min-height: auto; grid-template-columns: 1fr; }
  .selector-tabs button { min-height: 52px; border-right: 0; border-bottom: 1px solid var(--line); }
  .selector-copy { padding: 40px 24px; }
  .selector-visual { min-height: 400px; }
  .service-browser { width: 88%; }
  .service-browser-page { min-height: 255px; }
  .service-detail-row { grid-template-columns: 35px 1fr; gap: 22px; padding: 55px 0; }
  .service-detail-title h2 { font-size: 44px; }
  .service-detail-copy { grid-column: 1 / -1; padding-left: 57px; }
  .engagement-card { min-height: 500px; padding: 30px; }
  .full-process-grid { grid-template-columns: 1fr; }
  .full-process-card, .full-process-card + .full-process-card { min-height: 330px; padding: 28px 0; border-right: 0; }
  .full-process-card h3 { margin-top: 75px; }
  .faq-item summary { min-height: 84px; font-size: 18px; }
  .faq-item p { margin-right: 15px; }
  .studio-hero { padding-top: 130px; }
  .studio-hero h1 { font-size: clamp(58px,16vw,87px); }
  .studio-identity-card { min-height: 500px; }
  .story-lead { font-size: 37px; }
  .story-columns { grid-template-columns: 1fr; gap: 25px; margin-top: 45px; }
  .principles-grid { grid-template-columns: 1fr; }
  .principle-card, .principle-card:nth-child(even) { min-height: 320px; padding: 30px 0; border-right: 0; }
  .principle-card h3 { margin-top: 65px; }
  .map-row { grid-template-columns: 1fr 35px; padding: 22px 0; }
  .map-row p { grid-column: 1; grid-row: 2; }
  .map-row i { grid-column: 2; grid-row: 1 / span 2; }
  .direct-card { min-height: auto; padding: 46px 25px; gap: 55px; }
  .direct-card h2 { font-size: 57px; }
  .direct-metrics { grid-template-columns: 1fr; }
  .contact-page-section { padding-top: 125px; }
  .contact-page-copy h1 { font-size: clamp(58px,16vw,87px); }
  .contact-details > div { grid-template-columns: 90px 1fr; }
  .briefing-shell { border-radius: 25px; }
  .briefing-progress { padding: 20px; }
  .progress-track { width: 32%; }
  #project-briefing { padding: 0 20px 20px; }
  .briefing-step { min-height: 570px; padding-top: 34px; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice-card > span { min-height: 118px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .assurance-grid { grid-template-columns: 1fr; }
  .assurance-grid article, .assurance-grid article + article { min-height: 190px; padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .assurance-grid h3 { margin-top: 48px; }
  .case-hero { padding-top: 105px; }
  .case-hero-top { font-size: 7px; }
  .case-title-grid { padding: 55px 0; }
  .case-title-grid h1 { font-size: clamp(68px,21vw,110px); }
  .case-tagline { font-size: 27px; }
  .case-hero-art { aspect-ratio: 1.06; border-radius: var(--radius-md); }
  .case-hero-art .serena-copy strong,.case-hero-art .forge-copy strong,.case-hero-art .brasa-copy strong,.case-hero-art .nova-copy strong,.case-hero-art .atletico-copy strong { font-size: 45px; }
  .case-meta { grid-template-columns: 1fr 1fr; }
  .case-thinking-grid { grid-template-columns: 1fr; gap: 0; }
  .case-thinking article, .case-thinking article + article { min-height: 350px; padding: 35px 0; border-left: 0; }
  .case-thinking h2 { margin-top: 75px; }
  .case-ui-stage { min-height: auto; }
  .ui-browser { padding-top: 37px; border-radius: 18px; }
  .ui-browser-top { height: 37px; }
  .serena-ui-hero,.forge-ui,.brasa-ui,.nova-ui,.atletico-ui { min-height: 410px; padding: 20px; }
  .serena-ui-hero nav span,.forge-ui header span,.brasa-ui nav span,.nova-ui nav span,.atletico-ui nav span { display: none; }
  .serena-ui-hero nav,.forge-ui header,.brasa-ui nav,.nova-ui nav,.atletico-ui nav { grid-template-columns: 1fr 1fr; }
  .serena-ui-hero > div,.forge-ui-title,.brasa-ui-copy,.atletico-ui-copy { margin-top: 75px; }
  .serena-ui-hero h3 { font-size: 50px; }.forge-ui-title h3 { font-size: 62px; }.brasa-ui-copy h3 { font-size: 51px; }.nova-ui-copy h3 { font-size: 61px; }.atletico-ui-copy h3 { font-size: 56px; }
  .serena-ui-hero aside,.forge-schedule,.brasa-ui footer,.nova-ui aside,.match-card { display: none; }
  .ui-phone { width: 245px; }
  .case-feature-grid { grid-template-columns: 1fr; }
  .case-feature, .case-feature:nth-child(even) { min-height: 275px; padding: 30px 0; border-right: 0; }
  .case-feature h3 { margin-top: 60px; }
  .case-system-panel { min-height: auto; grid-template-columns: 1fr; }
  .palette-row { grid-column: 1; grid-template-columns: repeat(2,1fr); }
  .type-specimen { min-height: 340px; }
  .component-specimen { min-height: 300px; }
  .case-disclaimer .page-width { grid-template-columns: 1fr; gap: 15px; }
  .next-case-art { aspect-ratio: 1.05; }
}

@media (max-width: 430px) {
  :root { --page: calc(100vw - 24px); }
  .mobile-navigation { padding-inline: 18px; }
  .mobile-menu-foot { left: 18px; right: 18px; flex-direction: column; }
  .home-hero h1, .studio-hero h1, .contact-page-copy h1 { font-size: 54px; }
  .hero-showcase { min-height: 425px; }
  .showcase-tabs button { font-size: 9px; }
  .work-card-meta { gap: 15px; }
  .work-card-meta > div:last-child { display: none; }
  .art-label { left: 12px; bottom: 12px; }
  .member-card { width: 34%; right: 6%; }
  .case-hero-top > span { text-align: right; }
  .briefing-progress { align-items: flex-start; flex-direction: column; gap: 13px; }
  .progress-track { width: 100%; }
  .briefing-actions { align-items: stretch; flex-direction: column-reverse; padding-top: 16px; }
  .briefing-actions .button { width: 100%; }
  .briefing-back { width: fit-content; margin: 4px auto; }
  .form-status { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .pointer-aura { display: none; }
  .reveal { opacity: 1; transform: none; }
  .tilt-card { transform: none !important; }
}

/* --------------------------------------------------------------------------
   AG Digital · footer legal, brand mark and legal documents
   Copyright © 2026 Afonso Agostinho. All rights reserved.
   See propriedade-intelectual.html and LICENSE.txt.
   -------------------------------------------------------------------------- */

/* Footer — expanded identity and legal area */
.footer-main {
  padding: 64px 0;
  grid-template-columns: minmax(250px, 1.25fr) minmax(120px, .55fr) minmax(190px, .9fr) minmax(245px, 1.1fr);
  align-items: start;
  gap: clamp(36px, 5vw, 78px);
}
.footer-brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 17px;
}
.footer-logo {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.24));
  transition: transform 500ms var(--ease), filter 500ms ease;
}
.footer-brand:hover .footer-logo { transform: rotate(-3deg) translateY(-2px); filter: drop-shadow(0 18px 34px rgba(0,0,0,.34)); }
.footer-brand > span { display: flex; flex-direction: column; gap: 5px; }
.footer-brand strong { font-size: 23px; line-height: 1; letter-spacing: -.045em; }
.footer-brand small { color: rgba(255,255,255,.43); font-size: 10px; letter-spacing: .04em; }
.footer-link-group { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-group-title,
.footer-contact > span {
  margin-bottom: 7px;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
.footer-link-group a { color: rgba(255,255,255,.63); font-size: 13px; line-height: 1.35; transition: color 180ms ease, transform 220ms var(--ease); }
.footer-link-group a:hover { color: #fff; transform: translateX(3px); }
.footer-contact { justify-self: end; align-items: flex-end; gap: 8px; }
.footer-contact a { font-size: clamp(18px, 1.8vw, 25px); }
.footer-contact small { color: rgba(255,255,255,.43); }
.footer-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; }
.footer-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(216,255,79,.08); }
.footer-protection {
  min-height: 124px;
  padding: 27px 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-protection-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 17px;
  color: var(--lime);
  background: rgba(255,255,255,.035);
}
.footer-protection-icon svg { font-size: 27px; }
.footer-protection > div:nth-child(2) { max-width: 850px; }
.footer-protection strong { display: block; margin-bottom: 7px; font-size: 13px; letter-spacing: -.015em; }
.footer-protection p { margin: 0; max-width: 940px; color: rgba(255,255,255,.46); font-size: 10px; line-height: 1.65; }
.footer-protection > a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 0;
  color: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.25);
  font-size: 11px;
  white-space: nowrap;
  transition: color 180ms ease, border-color 180ms ease;
}
.footer-protection > a:hover { color: #fff; border-color: #fff; }
.footer-protection > a svg { font-size: 16px; transition: transform 240ms var(--ease); }
.footer-protection > a:hover svg { transform: translate(2px,-2px); }
.footer-bottom { padding-top: 21px; }
.footer-bottom p:nth-child(2) { color: rgba(255,255,255,.3); }

/* Privacy acknowledgement inside the project briefing */
.consent a,
.inline-legal-link { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.consent a:hover,
.inline-legal-link:hover { text-decoration-color: transparent; }

/* Legal pages */
.legal-page { background: var(--paper-bright); }
.legal-hero {
  position: relative;
  min-height: 690px;
  padding: 165px 0 95px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(155deg, #f7f7f3 0%, #efefe9 52%, #f8f8f4 100%);
}
.legal-ambient { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(18px); }
.legal-ambient-a { width: 52vw; height: 52vw; right: -16vw; top: -24vw; background: radial-gradient(circle, rgba(184,215,255,.46), rgba(216,255,79,.12) 43%, transparent 70%); }
.legal-ambient-b { width: 28vw; height: 28vw; left: 27%; bottom: -19vw; background: radial-gradient(circle, rgba(255,230,191,.4), transparent 70%); }
.legal-hero-grid {
  position: relative;
  z-index: 1;
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, .48fr);
  align-items: end;
  gap: clamp(60px, 9vw, 145px);
}
.legal-hero-copy h1 {
  margin: 28px 0 31px;
  font-size: clamp(75px, 9vw, 142px);
  line-height: .82;
  letter-spacing: -.078em;
  font-weight: 680;
}
.legal-hero-copy > p:last-child { max-width: 700px; margin: 0; color: var(--muted); font-size: clamp(18px, 1.7vw, 25px); line-height: 1.52; letter-spacing: -.024em; }
.legal-status-card {
  position: relative;
  min-height: 315px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(17,17,15,.11);
  border-radius: 31px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 28px 80px rgba(17,17,15,.09);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}
.legal-status-card::before { content: ""; position: absolute; top: 25px; right: 25px; width: 42px; height: 42px; border: 1px solid rgba(17,17,15,.1); border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--lime) 0 4px, transparent 5px); }
.legal-status-card > span { margin-bottom: 11px; color: var(--muted); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.legal-status-card > strong { font-size: 28px; line-height: 1.08; letter-spacing: -.045em; }
.legal-status-card > p { margin: 18px 0 30px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.legal-status-card > div { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.legal-status-card > div i { width: 7px; height: 7px; border-radius: 50%; background: #73a62b; box-shadow: 0 0 0 5px rgba(115,166,43,.09); }
.legal-document { padding: clamp(90px, 10vw, 155px) 0 clamp(120px, 13vw, 210px); background: var(--paper-bright); }
.legal-layout { display: grid; grid-template-columns: 230px minmax(0, 900px); justify-content: space-between; gap: clamp(65px, 10vw, 150px); }
.legal-toc { position: sticky; top: 112px; align-self: start; display: flex; flex-direction: column; }
.legal-toc > span { margin-bottom: 19px; color: var(--muted-light); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.legal-toc > a:not(.legal-toc-contact) { display: grid; grid-template-columns: 31px 1fr; align-items: center; min-height: 35px; color: var(--muted); border-bottom: 1px solid var(--line-soft); font-size: 11px; transition: color 180ms ease, padding-left 220ms var(--ease); }
.legal-toc > a:not(.legal-toc-contact) span { color: var(--muted-light); font-size: 8px; }
.legal-toc > a:not(.legal-toc-contact):hover { padding-left: 4px; color: var(--ink); }
.legal-toc-contact { margin-top: 24px; display: inline-flex; width: fit-content; align-items: center; gap: 8px; font-size: 11px; font-weight: 650; }
.legal-toc-contact svg { font-size: 16px; }
.legal-content { min-width: 0; }
.legal-section {
  scroll-margin-top: 115px;
  padding: 0 0 78px;
  margin-bottom: 78px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 30px;
  border-bottom: 1px solid var(--line);
}
.legal-section-index { padding-top: 9px; color: var(--muted-light); font-size: 9px; letter-spacing: .1em; }
.legal-section h2 { margin: 0 0 29px; font-size: clamp(36px, 4vw, 58px); line-height: .98; letter-spacing: -.055em; font-weight: 650; }
.legal-section h3 { margin: 34px 0 14px; font-size: 20px; letter-spacing: -.025em; }
.legal-section p { margin: 0 0 18px; color: #555550; font-size: 15px; line-height: 1.83; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a:not(.inline-legal-link) { color: var(--ink); }
.legal-section code { padding: 3px 7px; border-radius: 7px; background: var(--paper-soft); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; }
.legal-facts { margin: 34px 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.legal-facts > div { min-height: 108px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.legal-facts span { color: var(--muted-light); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.legal-facts strong, .legal-facts a { font-size: 14px; line-height: 1.35; }
.legal-notice { margin-top: 32px; padding: 25px 27px; border: 1px solid rgba(155,120,40,.2); border-radius: 20px; background: #f3ecdc; }
.legal-notice > span { display: block; margin-bottom: 9px; color: #785b1a; font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.legal-notice p { margin: 0; color: #665838; font-size: 12px; line-height: 1.7; }
.legal-notice-dark { color: #fff; border-color: rgba(255,255,255,.1); background: var(--dark); }
.legal-notice-dark > span { color: var(--lime); }
.legal-notice-dark p { color: rgba(255,255,255,.62); }
.legal-table { margin: 34px 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.legal-table > div { min-height: 75px; padding: 18px 21px; display: grid; grid-template-columns: minmax(0,1fr) minmax(230px,.85fr); align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
.legal-table > div:last-child { border-bottom: 0; }
.legal-table .legal-table-head { min-height: 47px; color: var(--muted-light); background: var(--paper-soft); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
.legal-table > div:not(.legal-table-head) span { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.legal-table > div:not(.legal-table-head) strong { color: var(--muted); font-size: 11px; line-height: 1.55; font-weight: 520; }
.legal-table-storage > div { grid-template-columns: minmax(190px,.5fr) minmax(0,1fr); }
.legal-bullets { margin: 28px 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.legal-bullets li { position: relative; padding: 21px 0 21px 25px; color: #555550; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.67; }
.legal-bullets li::before { content: ""; position: absolute; left: 0; top: 29px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.legal-source-list { margin-top: 36px; padding-top: 25px; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; border-top: 1px solid var(--line); }
.legal-source-list > span { margin-bottom: 3px; color: var(--muted-light); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.legal-source-list a { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
.legal-source-list a svg { font-size: 15px; }
.ip-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ip-grid article { min-height: 210px; padding: 25px; display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ip-grid article > span { color: var(--muted-light); font-size: 9px; }
.ip-grid article > strong { margin-top: auto; font-size: 22px; letter-spacing: -.035em; }
.ip-grid article p { margin: 12px 0 0; font-size: 12px; line-height: 1.6; }
.legal-update { padding: 38px; border-radius: 27px; color: #fff; background: var(--dark); }
.legal-update > span { display: block; margin-bottom: 12px; color: rgba(255,255,255,.4); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.legal-update > strong { display: block; font-size: 30px; letter-spacing: -.04em; }
.legal-update p { margin: 18px 0 0; color: rgba(255,255,255,.53); font-size: 12px; line-height: 1.6; }
.legal-update a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.28); }

@media (max-width: 1120px) {
  .footer-main { grid-template-columns: 1.1fr .7fr 1fr; }
  .footer-contact { grid-column: 1 / -1; justify-self: stretch; padding-top: 30px; align-items: flex-start; border-top: 1px solid rgba(255,255,255,.08); }
  .legal-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 70px; }
}

@media (max-width: 880px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-protection { grid-template-columns: 54px 1fr; }
  .footer-protection > a { grid-column: 2; justify-self: start; }
  .legal-hero { min-height: auto; padding-top: 145px; }
  .legal-hero-grid { min-height: auto; grid-template-columns: 1fr; gap: 60px; }
  .legal-status-card { min-height: 260px; max-width: 600px; }
  .legal-layout { grid-template-columns: 1fr; gap: 65px; }
  .legal-toc { position: relative; top: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 30px; }
  .legal-toc > span, .legal-toc-contact { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .footer-main { padding: 48px 0; grid-template-columns: 1fr; gap: 38px; }
  .footer-brand, .footer-contact { grid-column: 1; }
  .footer-link-group { padding-top: 4px; }
  .footer-contact { padding-top: 30px; }
  .footer-protection { padding: 29px 0; grid-template-columns: 44px 1fr; gap: 18px; }
  .footer-protection-icon { width: 44px; height: 44px; border-radius: 14px; }
  .footer-protection > a { grid-column: 1 / -1; }
  .footer-bottom { gap: 8px; }
  .legal-hero { padding: 125px 0 75px; }
  .legal-hero-copy h1 { font-size: clamp(58px, 18vw, 88px); }
  .legal-hero-copy > p:last-child { font-size: 17px; }
  .legal-status-card { min-height: 240px; padding: 28px; border-radius: 24px; }
  .legal-document { padding-top: 75px; }
  .legal-toc { grid-template-columns: 1fr; }
  .legal-toc > span, .legal-toc-contact { grid-column: 1; }
  .legal-section { grid-template-columns: 28px minmax(0,1fr); gap: 15px; padding-bottom: 58px; margin-bottom: 58px; }
  .legal-section h2 { font-size: 36px; }
  .legal-section p { font-size: 14px; line-height: 1.75; }
  .legal-facts, .ip-grid { grid-template-columns: 1fr; }
  .legal-table > div, .legal-table-storage > div { grid-template-columns: 1fr; gap: 9px; }
  .legal-table .legal-table-head { display: none; }
  .legal-update { padding: 28px; }
}

@media (max-width: 430px) {
  .footer-logo { width: 58px; height: 58px; }
  .footer-brand strong { font-size: 21px; }
  .footer-protection { grid-template-columns: 1fr; }
  .footer-protection-icon { margin-bottom: 2px; }
  .legal-section { grid-template-columns: 1fr; }
  .legal-section-index { padding-top: 0; }
  .legal-notice { padding: 22px; }
}

/* --------------------------------------------------------------------------
   AG Digital · interaction refinement v3
   Manual interactions, calmer hover states and smoother rendering.
   -------------------------------------------------------------------------- */

/* Stable controls: colour and contrast may change, geometry does not. */
.header-cta,
.button,
.round-link {
  transform: none !important;
  transition-property: color, background-color, border-color, box-shadow, opacity;
  transition-duration: 220ms;
  transition-timing-function: ease;
}
.header-cta,
.button { gap: 0; }
.header-cta:hover,
.button:hover,
.round-link:hover { transform: none !important; }
.header-cta svg,
.button svg,
.round-link svg,
.text-link svg { display: none !important; }
.text-link { gap: 0; transition: color 180ms ease, border-color 180ms ease; }
.footer-brand:hover .footer-logo,
.footer-link-group a:hover,
.footer-protection > a:hover svg,
.choice-card:hover > span,
.next-case-link:hover .next-case-art > i { transform: none !important; }
.footer-link-group a:hover { transform: none !important; }
.legal-toc > a:not(.legal-toc-contact):hover { padding-left: 0; }

.header-cta:focus-visible,
.button:focus-visible,
.text-link:focus-visible,
.round-link:focus-visible,
.filter-button:focus-visible,
.showcase-tabs button:focus-visible,
.chapter-nav a:focus-visible,
.compare-range:focus-visible,
.work-card-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.round-link:focus-visible,
.button-light:focus-visible { outline-color: #fff; }

/* No perpetual project animation. The showcase changes only after a click. */
.orbit-one,
.orbit-two,
.hero-strip > div { animation: none !important; }
.showcase-orbit { opacity: .58; }
.orbit-one { transform: rotate(18deg); }
.orbit-two { transform: rotate(-12deg); }
.showcase-screen.is-changing .project-art { animation: showcaseManual 300ms var(--ease-soft) both; }
@keyframes showcaseManual {
  from { opacity: .18; transform: scale(1.008); }
  to { opacity: 1; transform: scale(1); }
}
.hero-strip > div {
  width: 100%;
  justify-content: center;
  gap: clamp(20px, 3vw, 46px);
  padding-inline: 24px;
  white-space: nowrap;
}

/* Rendering and motion budget. */
.tilt-card { transform: none !important; transition: none !important; will-change: auto; }
[data-depth="1"], [data-depth="2"] { transform: none; }
.project-art,
.showcase-screen,
.work-card-visual,
.case-hero-art,
.next-case-art { contain: paint; isolation: isolate; }
.work-card { content-visibility: auto; contain-intrinsic-size: 620px; }
.reveal { transform: translateY(18px); transition-duration: 780ms; }
.pointer-aura { opacity: .25; transition: opacity 280ms ease; will-change: transform; }

/* Calm project-card feedback: a light response, never a moving card. */
.work-card-visual .project-art { transition: filter 360ms ease, opacity 360ms ease; }
.work-card-link:hover .project-art { transform: none; filter: saturate(1.035) contrast(1.015); }
.work-open {
  width: auto;
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  opacity: 0;
  transform: none;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: opacity 220ms ease, background-color 220ms ease;
}
.work-card-link:hover .work-open,
.work-card-link:focus-visible .work-open { opacity: 1; transform: none; }
.work-card-link:focus-visible { border-radius: var(--radius-md); }

/* Footer call to action now uses a word instead of an arrow. */
.round-link-text {
  text-align: center;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: .02em;
}
.round-link-text span { max-width: 70%; line-height: 1.15; }
.footer-logo { transition: filter 250ms ease; }
.footer-brand:hover .footer-logo { filter: drop-shadow(0 18px 34px rgba(0,0,0,.34)); }
.footer-protection > a { gap: 0; }

/* Next-case links keep a clear textual action without directional icons. */
.next-case-action {
  position: absolute;
  z-index: 10;
  right: 24px;
  top: 24px;
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(10,10,9,.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 8px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* Cursor-aware light, rendered only while the user is actually interacting. */
.ui-spotlight { position: relative; isolation: isolate; }
.ui-spotlight::after {
  content: "";
  position: absolute;
  z-index: 60;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--surface-x, 50%) var(--surface-y, 50%), rgba(255,255,255,.2), transparent 72%);
  mix-blend-mode: soft-light;
  transition: opacity 220ms ease;
}
.ui-spotlight.has-pointer::after { opacity: 1; }
.capability-card.ui-spotlight::after,
.comparison-demo.ui-spotlight::after,
.service-selector.ui-spotlight::after,
.briefing-shell.ui-spotlight::after,
.legal-status-card.ui-spotlight::after {
  background: radial-gradient(280px circle at var(--surface-x, 50%) var(--surface-y, 50%), rgba(184,215,255,.24), rgba(216,255,79,.08) 38%, transparent 72%);
  mix-blend-mode: normal;
}

/* Quiet chapter navigator: useful, optional and out of the way. */
.chapter-nav {
  position: fixed;
  z-index: 470;
  top: 50%;
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  transform: translateY(-50%);
}
.chapter-nav a {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  color: var(--muted);
}
.chapter-nav a span {
  order: 2;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(17,17,15,.35);
  border-radius: 50%;
  background: rgba(245,245,242,.7);
  transition: width 180ms ease, height 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.chapter-nav a b {
  opacity: 0;
  padding: 5px 8px;
  border: 1px solid rgba(17,17,15,.08);
  border-radius: 999px;
  background: rgba(245,245,242,.74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 8px;
  font-weight: 650;
  white-space: nowrap;
  transition: opacity 160ms ease;
}
.chapter-nav a:hover b,
.chapter-nav a:focus-visible b,
.chapter-nav a.is-active b { opacity: 1; }
.chapter-nav a.is-active { color: var(--ink); }
.chapter-nav a.is-active span {
  width: 8px;
  height: 8px;
  border-color: var(--ink);
  background: var(--ink);
}

/* Before/after interactive comparison. */
.comparison-section {
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 82% 8%, rgba(184,215,255,.28), transparent 33%),
    linear-gradient(180deg, var(--paper-bright), var(--paper-soft));
}
.comparison-grid {
  display: grid;
  grid-template-columns: minmax(310px,.58fr) minmax(0,1.25fr);
  align-items: center;
  gap: clamp(55px, 8vw, 130px);
}
.comparison-copy h2 {
  margin: 23px 0 28px;
  font-size: clamp(52px, 6.2vw, 94px);
  line-height: .91;
  letter-spacing: -.067em;
  font-weight: 650;
}
.comparison-copy > p {
  max-width: 500px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
}
.comparison-points {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.comparison-points span {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.comparison-demo {
  padding: 10px;
  border: 1px solid rgba(17,17,15,.1);
  border-radius: 30px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 35px 90px rgba(17,17,15,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.compare-stage {
  position: relative;
  aspect-ratio: 1.42;
  min-height: 410px;
  overflow: hidden;
  border-radius: 21px;
  background: #d7d7d2;
  isolation: isolate;
}
.compare-layer { position: absolute; inset: 0; overflow: hidden; }
.compare-before { z-index: 1; padding: clamp(18px, 3vw, 38px); color: #293544; background: linear-gradient(145deg,#d9e4ec,#f5f5f2); }
.compare-after {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--compare)) 0 0);
  will-change: clip-path;
}
.compare-after .project-art { inset: 0; }
.legacy-browser {
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(31,50,68,.18);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(31,50,68,.12);
}
.legacy-top {
  height: 28px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8a96a0;
  background: #edf1f4;
  font-size: 6px;
}
.legacy-top i { width: 5px; height: 5px; border-radius: 50%; background: #b7c0c7; }
.legacy-top span { margin-left: auto; margin-right: auto; }
.legacy-nav {
  height: 48px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e4e8eb;
  font-size: 7px;
}
.legacy-nav strong { color: #1f5c88; }
.legacy-nav span { color: #76818a; }
.legacy-hero {
  min-height: 54%;
  padding: clamp(30px, 6vw, 72px) clamp(22px, 4vw, 54px);
  text-align: center;
  background: linear-gradient(rgba(31,92,136,.73),rgba(31,92,136,.73)), linear-gradient(135deg,#a6bdcc,#506d82);
  color: #fff;
}
.legacy-hero b { display: block; font-family: Georgia,serif; font-size: clamp(24px, 3.2vw, 48px); font-weight: 400; }
.legacy-hero p { margin: 12px auto 20px; max-width: 340px; font-size: clamp(8px, 1vw, 12px); line-height: 1.5; opacity: .84; }
.legacy-hero button { min-height: 30px; padding: 0 15px; border: 1px solid rgba(255,255,255,.7); border-radius: 3px; color: #fff; background: transparent; font-size: 7px; }
.legacy-cards { padding: 16px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.legacy-cards i { height: 55px; border-radius: 4px; background: linear-gradient(#dbe1e5 60%,#eef1f3 60%); }
.compare-divider {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: var(--compare);
  width: 1px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 1px rgba(17,17,15,.12);
  transform: translateX(-50%);
  pointer-events: none;
}
.compare-divider > span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  color: #fff;
  background: rgba(17,17,15,.74);
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translate(-50%,-50%);
}
.compare-divider i { width: 1px; height: 10px; border-radius: 1px; background: currentColor; opacity: .72; }
.compare-label {
  position: absolute;
  z-index: 6;
  top: 16px;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}
.compare-label-before { left: 16px; color: #31485b; background: rgba(255,255,255,.82); }
.compare-label-after { right: 16px; color: #fff; background: rgba(17,17,15,.54); }
.compare-range {
  position: absolute;
  z-index: 10;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: .001;
  cursor: ew-resize;
}
.comparison-demo:focus-within .compare-divider > span { box-shadow: 0 0 0 4px rgba(216,255,79,.45), 0 12px 30px rgba(0,0,0,.24); }
.comparison-caption {
  min-height: 48px;
  padding: 0 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.comparison-caption strong { color: var(--ink); font-size: 8px; }
.comparison-caption span:last-child { text-align: right; }

/* UI-rich capability cards. */
.capability-card,
.capability-card:nth-child(even) {
  min-height: 370px;
  padding-right: 255px;
  overflow: hidden;
  transition: background-color 260ms ease, border-color 260ms ease;
}
.capability-card:hover { background: rgba(255,255,255,.52); }
.capability-card h3 { margin-top: 64px; }
.capability-widget {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 31px;
  width: 190px;
  height: 132px;
  overflow: hidden;
  border: 1px solid rgba(17,17,15,.1);
  border-radius: 20px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 18px 45px rgba(17,17,15,.08);
}
.widget-browser { padding: 31px 14px 13px; }
.widget-top { position: absolute; inset: 0 0 auto; height: 22px; padding-left: 10px; display: flex; align-items: center; gap: 4px; background: #efefe9; }
.widget-top i { width: 4px; height: 4px; border-radius: 50%; background: #b9b9b2; }
.widget-browser > strong { display: block; width: 54%; height: 12px; border-radius: 4px; background: var(--ink); }
.widget-browser > span { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: #d7d7d0; }
.widget-browser > span:nth-of-type(1) { width: 82%; }
.widget-browser > span:nth-of-type(2) { width: 62%; }
.widget-browser > div:last-child { margin-top: 15px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 7px; }
.widget-browser > div:last-child i { height: 35px; border-radius: 7px; background: linear-gradient(145deg,#d9e7f8,#eef3e2); }
.widget-browser > div:last-child i:last-child { background: var(--lime); }
.widget-redesign { display: grid; grid-template-columns: 1fr 1fr; }
.widget-half { padding: 15px; }
.widget-old { display: flex; flex-direction: column; gap: 8px; background: #e4e7e9; }
.widget-old i { height: 11px; border-radius: 2px; background: #aeb8bf; }
.widget-old i:first-child { width: 74%; height: 28px; margin-top: 14px; }
.widget-new { color: #fff; background: radial-gradient(circle at 85% 15%,#d8ff4f 0 10%,transparent 11%),#171815; }
.widget-new strong { display: block; width: 68%; height: 30px; margin-top: 17px; border-radius: 5px; background: #fff; }
.widget-new span { display: block; width: 78%; height: 5px; margin-top: 9px; border-radius: 3px; background: rgba(255,255,255,.35); }
.widget-redesign > b,
.widget-redesign > em { position: absolute; bottom: 8px; font-size: 6px; font-style: normal; text-transform: uppercase; letter-spacing: .1em; }
.widget-redesign > b { left: 12px; color: #6f777d; }
.widget-redesign > em { right: 12px; color: rgba(255,255,255,.65); }
.widget-system { background: radial-gradient(circle at center,rgba(184,215,255,.45),transparent 52%),#f8f8f5; }
.system-node { position: absolute; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(17,17,15,.12); border-radius: 50%; color: #5e5e58; background: #fff; font-size: 7px; font-weight: 700; }
.node-main { left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px; color: #fff; background: var(--ink); }
.node-a,.node-b,.node-c { width: 34px; height: 34px; }
.node-a { left: 15px; top: 17px; }.node-b { right: 15px; top: 17px; }.node-c { left: 50%; bottom: 11px; margin-left: -17px; }
.system-line { position: absolute; z-index: 1; height: 1px; background: rgba(17,17,15,.19); transform-origin: left center; }
.line-a { width: 53px; left: 43px; top: 43px; transform: rotate(25deg); }
.line-b { width: 53px; right: 42px; top: 43px; transform: rotate(155deg); }
.line-c { width: 38px; left: 50%; bottom: 38px; transform: rotate(90deg); }
.widget-support { padding: 17px; color: #fff; background: #11120f; }
.support-head { display: flex; align-items: flex-start; justify-content: space-between; }
.support-head span { display: flex; align-items: center; gap: 5px; font-size: 6px; color: rgba(255,255,255,.56); text-transform: uppercase; letter-spacing: .1em; }
.support-head span i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(216,255,79,.08); }
.support-head b { font-size: 21px; letter-spacing: -.05em; }
.support-chart { height: 45px; margin-top: 20px; display: flex; align-items: flex-end; gap: 5px; }
.support-chart i { flex: 1; height: var(--bar,40%); border-radius: 4px 4px 1px 1px; background: linear-gradient(#d8ff4f,rgba(216,255,79,.24)); }
.support-chart i:nth-child(1) { --bar:37%; }.support-chart i:nth-child(2) { --bar:54%; }.support-chart i:nth-child(3) { --bar:48%; }.support-chart i:nth-child(4) { --bar:72%; }.support-chart i:nth-child(5) { --bar:65%; }.support-chart i:nth-child(6) { --bar:87%; }.support-chart i:nth-child(7) { --bar:74%; }.support-chart i:nth-child(8) { --bar:94%; }
.widget-support small { display: block; margin-top: 8px; color: rgba(255,255,255,.42); font-size: 6px; }

/* Experience principles gain compact interface cues rather than more paragraphs. */
.experience-card { position: relative; padding-right: 175px; transition: background-color 240ms ease; }
.experience-card:hover { background: rgba(255,255,255,.025); }
.experience-micro {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 128px;
  height: 82px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 17px;
  background: rgba(255,255,255,.035);
  transform: translateY(-50%);
}
.micro-clarity { padding: 17px; }
.micro-clarity i { display: block; width: 58%; height: 10px; margin-bottom: 13px; border-radius: 4px; background: #fff; }
.micro-clarity span { display: block; height: 4px; margin-top: 6px; border-radius: 3px; background: rgba(255,255,255,.26); }
.micro-clarity span:nth-of-type(1) { width: 90%; }.micro-clarity span:nth-of-type(2) { width: 69%; }.micro-clarity span:nth-of-type(3) { width: 80%; }
.micro-motion { display: grid; place-items: center; }
.micro-motion i { position: absolute; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.micro-motion i:nth-child(1) { width: 54px; height: 54px; }.micro-motion i:nth-child(2) { width: 34px; height: 34px; }.micro-motion i:nth-child(3) { width: 9px; height: 9px; border: 0; background: var(--lime); }
.micro-system { padding: 14px; display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.micro-system i { border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(255,255,255,.08); }
.micro-system i:first-child { grid-column: 1 / -1; background: rgba(216,255,79,.14); }

/* The process reacts to scrolling, but nothing runs in the background. */
.process-line { transition: background-color 260ms ease, border-color 260ms ease; }
.process-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 2px;
  border-radius: 2px;
  background: var(--ink);
  opacity: 0;
  transition: opacity 220ms ease;
}
.process-line.is-active { background: linear-gradient(90deg,rgba(184,215,255,.16),transparent 74%); }
.process-line.is-active::after { opacity: 1; }
.process-line i { transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease; }
.process-line i::before { width: 7px; height: 7px; border-radius: 50%; }
.process-line i::after { display: none; }
.process-line.is-active i { border-color: var(--ink); background: var(--ink); }
.process-line.is-active i::before { background: var(--lime); }

/* Keep filter controls tactile without moving them. */
.filter-button,
.showcase-tabs button,
.choice-card > span { transition-property: color, background-color, border-color, box-shadow, opacity; }
.choice-card:hover > span { border-color: rgba(17,17,15,.3); }

@media (max-width: 1240px) {
  .chapter-nav { display: none; }
  .capability-card,
  .capability-card:nth-child(even) { padding-right: 220px; }
  .capability-widget { width: 160px; }
}

@media (max-width: 980px) {
  .comparison-grid { grid-template-columns: 1fr; }
  .comparison-copy { max-width: 720px; }
  .compare-stage { min-height: 460px; }
  .capability-card,
  .capability-card:nth-child(even) { padding-right: 190px; }
  .capability-widget { width: 145px; right: 20px; }
  .experience-card { padding-right: 150px; }
  .experience-micro { width: 110px; }
}

@media (max-width: 760px) {
  .hero-strip { overflow-x: auto; scrollbar-width: none; }
  .hero-strip::-webkit-scrollbar { display: none; }
  .hero-strip > div { width: max-content; justify-content: flex-start; }
  .showcase-orbit { opacity: .3; }
  .work-open { opacity: 1; right: 13px; top: 13px; height: 32px; padding-inline: 11px; }
  .comparison-grid { gap: 46px; }
  .comparison-copy h2 { font-size: clamp(49px, 14vw, 72px); }
  .comparison-copy > p { font-size: 14px; }
  .comparison-demo { padding: 7px; border-radius: 23px; }
  .compare-stage { min-height: 0; aspect-ratio: 1.02; border-radius: 17px; }
  .legacy-nav span { display: none; }
  .legacy-hero { padding: 55px 20px; }
  .legacy-hero b { font-size: 27px; }
  .legacy-cards i { height: 38px; }
  .compare-divider > span { width: 38px; height: 38px; }
  .comparison-caption { grid-template-columns: 1fr 1fr; }
  .comparison-caption strong { display: none; }
  .capability-card,
  .capability-card:nth-child(even) {
    min-height: 420px;
    padding-right: 0;
  }
  .capability-widget {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 340px;
    height: 126px;
    margin-top: 30px;
  }
  .experience-card { padding-right: 0; padding-bottom: 145px; }
  .experience-micro { left: 42px; right: auto; top: auto; bottom: 28px; width: min(220px,calc(100% - 42px)); height: 92px; transform: none; }
  .next-case-action { right: 14px; top: 14px; min-height: 32px; padding-inline: 11px; }
}

@media (pointer: coarse) {
  .ui-spotlight::after { display: none; }
  .work-open { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .compare-after { will-change: auto; }
  .pointer-aura { display: none; }
}

/* Avoid intrinsic inline sizing on narrow viewports. */
.work-card { content-visibility: visible; contain-intrinsic-size: none; }


/* --- v3 refinements: timeline alignment and richer concept artwork --- */
.process-line {
  grid-template-columns: 72px 1fr;
  column-gap: 24px;
}
.process-line::after {
  left: 28px;
  top: 22px;
  bottom: 22px;
  width: 1.5px;
  border-radius: 999px;
}
.process-line > span {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  border: 1px solid rgba(17,17,15,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 24px rgba(17,17,15,.06);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #6b6b64;
}
.process-line.is-active > span {
  color: var(--ink);
  border-color: rgba(17,17,15,.14);
  box-shadow: 0 16px 30px rgba(17,17,15,.09);
}
.process-line i { right: 2px; }

.project-art::before,
.project-art::after { pointer-events: none; }
.project-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 26%, transparent 74%, rgba(0,0,0,.08));
  z-index: 1;
}

.art-serena::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 7%;
  height: 34%;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  opacity: .38;
  z-index: 1;
}
.serena-panel::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.serena-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.12), transparent 42%);
}

.art-forge::before {
  content: "";
  position: absolute;
  inset: -8% 28% 22% -10%;
  border-radius: 44px;
  background: linear-gradient(135deg, rgba(17,17,15,.08), rgba(17,17,15,.24));
  transform: rotate(-10deg);
  z-index: 1;
}
.forge-grid { opacity: .76; }
.ring-a { box-shadow: 0 0 0 1px rgba(14,15,12,.08); }
.ring-b { opacity: .28; }
.forge-stat::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(16,17,14,.9) 0 66%, rgba(16,17,14,.16) 66%);
  opacity: .18;
}

.art-brasa::before {
  content: "";
  position: absolute;
  left: 18%;
  right: -10%;
  bottom: -18%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, rgba(255,190,130,.22), transparent 62%);
  z-index: 1;
}
.brasa-plate::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(255,244,232,.12);
}
.brasa-reserve { gap: 10px; }
.brasa-reserve::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,244,232,.42);
  background: radial-gradient(circle, rgba(255,244,232,.88) 0 2px, transparent 2.5px);
}

.art-nova::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 88%, rgba(92,120,255,.24), transparent 34%),
    radial-gradient(circle at 80% 18%, rgba(255,112,194,.2), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 28%);
  z-index: 1;
}
.art-nova::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -28%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 58%);
  filter: blur(8px);
  z-index: 1;
}
.nova-ticket::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  height: 18px;
  border-radius: 5px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.86) 0 2px, transparent 2px 5px);
  opacity: .28;
}

.art-atletico::before {
  content: "";
  position: absolute;
  right: 7%;
  top: 7%;
  width: 49%;
  height: 62%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  z-index: 1;
}
.art-atletico::after {
  content: "";
  position: absolute;
  left: -14%;
  bottom: -30%;
  width: 78%;
  height: 52%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(84,153,255,.2), transparent 68%);
  z-index: 1;
}
.member-card::before {
  content: "MEMBER";
  position: absolute;
  top: 54%;
  right: -18px;
  font-size: 7px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.4);
  transform: rotate(90deg);
  transform-origin: top right;
}
.member-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
}
.atletico-score::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(216,255,79,.1);
}

@media (max-width: 900px) {
  .process-line {
    grid-template-columns: 56px 1fr;
    padding-right: 16px;
    min-height: 160px;
  }
  .process-line::after {
    left: 20px;
    top: 22px;
    bottom: 22px;
  }
  .process-line > span {
    width: 30px;
    height: 30px;
    font-size: 8px;
  }
}

/* ========================================================================== 
   AG Digital Experience v3 — interactive storytelling without heavy scroll JS
   ========================================================================== */

/* Shared interaction language */
.value-tabs button,
.process-tabs button,
.principle-tabs button,
.case-device-controls button {
  -webkit-tap-highlight-color: transparent;
}
.value-tabs button:focus-visible,
.process-tabs button:focus-visible,
.principle-tabs button:focus-visible,
.story-step:focus-visible,
.case-device-controls button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.button:active,
.header-cta:active,
.round-link:active { transform: scale(.985); }

/* A one-shot, soft material reveal for visual components. */
.reveal.is-visible .value-stage,
.reveal.is-visible.story-visual-wrap .story-visual,
.reveal.is-visible.process-lab,
.reveal.is-visible .principle-stage {
  animation: materialReveal 900ms var(--ease) both;
}
@keyframes materialReveal {
  0% { opacity: .25; filter: blur(8px); }
  100% { opacity: 1; filter: blur(0); }
}

/* 01 — Value lab */
.value-lab { position: relative; overflow: hidden; }
.value-lab::before {
  content: "";
  position: absolute;
  width: 58vw;
  height: 58vw;
  right: -28vw;
  top: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,215,255,.34), rgba(216,255,79,.08) 42%, transparent 70%);
  pointer-events: none;
}
.value-lab-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(340px,.62fr) minmax(520px,1fr);
  gap: clamp(60px,8vw,130px);
  align-items: center;
}
.value-lab-copy h2 {
  margin: 26px 0 22px;
  font-size: clamp(54px,6.8vw,105px);
  line-height: .9;
  letter-spacing: -.07em;
  font-weight: 650;
}
.value-lab-copy > p {
  max-width: 500px;
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
}
.value-tabs {
  margin-top: 48px;
  display: grid;
  border-top: 1px solid var(--line);
}
.value-tabs button {
  min-height: 68px;
  padding: 0;
  display: grid;
  grid-template-columns: 42px 1fr 10px;
  align-items: center;
  gap: 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: #777770;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
  font-weight: 620;
  transition: color 240ms ease, background-color 240ms ease;
}
.value-tabs button::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.value-tabs button span { font-size: 9px; letter-spacing: .12em; color: #a0a099; }
.value-tabs button:hover { color: var(--ink); }
.value-tabs button.is-active { color: var(--ink); background: linear-gradient(90deg, rgba(184,215,255,.14), transparent 78%); }
.value-tabs button.is-active::after { border-color: var(--ink); background: var(--lime); box-shadow: 0 0 0 5px rgba(216,255,79,.15); }
.value-panels { position: relative; min-height: 175px; margin-top: 34px; }
.value-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease-soft), transform 420ms var(--ease-soft), visibility 420ms;
}
.value-panel.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.value-panel > span { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #85857e; }
.value-panel h3 { max-width: 510px; margin: 13px 0 11px; font-size: clamp(28px,3.2vw,46px); line-height: 1.05; letter-spacing: -.045em; font-weight: 620; }
.value-panel p { max-width: 520px; margin: 0; font-size: 14px; line-height: 1.68; color: var(--muted); }

.value-stage {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border: 1px solid rgba(17,17,15,.1);
  border-radius: 38px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 42px 110px rgba(17,17,15,.13);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  contain: paint;
  isolation: isolate;
}
.value-stage::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -230px;
  top: -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,215,255,.62), transparent 68%);
  pointer-events: none;
}
.value-stage-chrome {
  position: relative;
  z-index: 20;
  height: 54px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3,7px) 1fr auto;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(17,17,15,.08);
  color: #999993;
  background: rgba(255,255,255,.58);
  font-size: 8px;
}
.value-stage-chrome i { width: 7px; height: 7px; border: 1px solid #c5c5bf; border-radius: 50%; }
.value-stage-chrome span { justify-self: center; margin-left: -42px; }
.value-stage-chrome b { padding: 6px 9px; border-radius: 999px; color: #3b4829; background: rgba(216,255,79,.45); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.value-scene {
  position: absolute;
  z-index: 3;
  inset: 54px 0 46px;
  opacity: 0;
  visibility: hidden;
  transform: scale(.985);
  transition: opacity 520ms var(--ease), transform 620ms var(--ease), visibility 520ms;
}
.value-scene.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.value-stage-foot {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(17,17,15,.08);
  color: #777770;
  background: rgba(255,255,255,.66);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.value-stage-foot > div { display: flex; gap: 6px; }
.value-stage-foot i { width: 5px; height: 5px; border-radius: 50%; background: #d0d0ca; transition: width 300ms var(--ease), background-color 300ms ease; }
.value-stage-foot i:first-child { width: 20px; background: var(--ink); }

/* Presence scene */
.value-scene-presence { overflow: hidden; color: #fff; background: #101514; }
.presence-canvas { position: absolute; z-index: 4; left: 8%; top: 12%; }
.presence-kicker { display: block; margin-bottom: 17px; font-size: 8px; font-weight: 700; letter-spacing: .18em; color: rgba(255,255,255,.6); }
.presence-canvas strong { display: block; font-family: "Iowan Old Style", Georgia, serif; font-size: clamp(52px,6.1vw,94px); line-height: .84; letter-spacing: -.065em; font-weight: 400; }
.presence-line { width: 94px; height: 1px; margin: 33px 0 14px; background: rgba(255,255,255,.45); transform-origin: left; }
.presence-canvas small { font-size: 8px; letter-spacing: .12em; color: rgba(255,255,255,.54); }
.presence-orb { position: absolute; right: -9%; top: 4%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 33% 34%, #eff7d4 0 3%, #b9dfbf 22%, #5c7d74 58%, #243d39 72%); box-shadow: -70px 75px 120px rgba(98,150,136,.24); }
.presence-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, transparent, #000 45%); }
.presence-card {
  position: absolute;
  z-index: 7;
  right: 7%;
  bottom: 9%;
  width: 31%;
  min-height: 142px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.presence-card > span { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.presence-card > div { display: flex; gap: 8px; }
.presence-card i { width: 26px; height: 26px; border-radius: 50%; background: #d8ff4f; }
.presence-card i:nth-child(2) { background: #b8d7ff; }
.presence-card i:nth-child(3) { background: #fbf4df; }
.presence-card strong { font-family: Georgia, serif; font-size: 26px; font-weight: 400; }
.value-scene-presence.is-active .presence-line { animation: lineGrow 850ms var(--ease) 150ms both; }
.value-scene-presence.is-active .presence-card { animation: softRise 720ms var(--ease) 100ms both; }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes softRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* Conversion scene */
.value-scene-conversion { display: grid; place-items: center; background: linear-gradient(145deg,#f3efe6,#e7ecea); }
.conversion-shell {
  position: relative;
  z-index: 4;
  width: min(480px,78%);
  padding: 28px;
  border: 1px solid rgba(17,17,15,.08);
  border-radius: 27px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 36px 70px rgba(17,17,15,.13);
}
.conversion-head { display: flex; justify-content: space-between; align-items: center; }
.conversion-head span { font-size: 16px; font-weight: 680; letter-spacing: -.025em; }
.conversion-head small { font-size: 8px; color: #85857e; }
.conversion-progress { margin: 19px 0 25px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.conversion-progress i { height: 3px; border-radius: 999px; background: #deded8; }
.conversion-progress i:nth-child(-n+2) { background: var(--ink); }
.conversion-fields { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.conversion-fields > div { padding: 15px; border: 1px solid rgba(17,17,15,.09); border-radius: 15px; }
.conversion-fields span, .conversion-choice small { display: block; margin-bottom: 6px; font-size: 8px; color: #898982; }
.conversion-fields strong { font-size: 13px; }
.conversion-choice { margin: 12px 0; padding: 13px; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 12px; border-radius: 15px; background: #f0f3e8; }
.conversion-choice > i { width: 45px; aspect-ratio: 1; border-radius: 11px; background: linear-gradient(145deg,#c7d7c1,#6e887a); }
.conversion-choice span { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 680; }
.conversion-choice strong { font-size: 13px; }
.conversion-shell button { width: 100%; min-height: 48px; border: 0; border-radius: 14px; color: #fff; background: var(--ink); font-size: 11px; font-weight: 680; }
.conversion-toast { position: absolute; z-index: 8; right: 4%; top: 12%; padding: 14px 16px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(17,17,15,.08); border-radius: 16px; background: rgba(255,255,255,.86); box-shadow: 0 18px 44px rgba(17,17,15,.1); backdrop-filter: blur(14px); }
.conversion-toast > i { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 6px rgba(216,255,79,.16); }
.conversion-toast strong, .conversion-toast span { display: block; }
.conversion-toast strong { font-size: 9px; }
.conversion-toast span { margin-top: 4px; font-size: 7px; color: #85857e; }
.value-scene-conversion.is-active .conversion-shell { animation: softRise 720ms var(--ease) both; }
.value-scene-conversion.is-active .conversion-toast { animation: toastIn 700ms var(--ease) 220ms both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* System scene */
.value-scene-system { padding: 6%; background: linear-gradient(145deg,#111513,#242b25); }
.system-dashboard { height: 100%; display: grid; grid-template-columns: 58px 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; color: #fff; background: #111512; box-shadow: 0 32px 80px rgba(0,0,0,.28); }
.system-dashboard aside { padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 18px; border-right: 1px solid rgba(255,255,255,.08); background: #0c0f0d; }
.system-dashboard aside strong { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--ink); background: var(--lime); font-size: 10px; }
.system-dashboard aside i { width: 16px; height: 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; }
.system-dashboard aside i:nth-of-type(1) { background: rgba(255,255,255,.12); }
.system-dashboard .system-main { padding: 24px; }
.system-head { display: flex; justify-content: space-between; align-items: center; }
.system-head span, .system-head small { display: block; }
.system-head span { font-size: 16px; font-weight: 680; }
.system-head small { margin-top: 5px; font-size: 7px; color: rgba(255,255,255,.42); }
.system-head b { padding: 7px 10px; border-radius: 999px; color: #d8ff4f; background: rgba(216,255,79,.08); font-size: 7px; letter-spacing: .11em; text-transform: uppercase; }
.system-stats { margin-top: 22px; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.system-stats article { min-height: 92px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.04); }
.system-stats span, .system-stats strong, .system-stats i { display: block; }
.system-stats span { font-size: 7px; color: rgba(255,255,255,.45); }
.system-stats strong { margin: 13px 0 4px; font-size: 25px; letter-spacing: -.05em; }
.system-stats i { font-size: 7px; font-style: normal; color: #d8ff4f; }
.system-chart { height: 150px; margin-top: 10px; padding: 16px 15px 12px; display: flex; align-items: flex-end; gap: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.025); }
.system-chart span { flex: 1; height: var(--bar,40%); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg,#d8ff4f,#8ba43b); transform-origin: bottom; }
.system-chart span:nth-child(1) { --bar: 34%; }.system-chart span:nth-child(2) { --bar: 58%; }.system-chart span:nth-child(3) { --bar: 45%; }.system-chart span:nth-child(4) { --bar: 76%; }.system-chart span:nth-child(5) { --bar: 64%; }.system-chart span:nth-child(6) { --bar: 91%; }.system-chart span:nth-child(7) { --bar: 78%; }
.system-activity { margin-top: 10px; padding: 12px; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 10px; border-radius: 12px; background: rgba(255,255,255,.05); }
.system-activity > i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.system-activity strong, .system-activity small { display: block; }
.system-activity strong { font-size: 8px; }.system-activity small, .system-activity > span { margin-top: 3px; font-size: 6px; color: rgba(255,255,255,.42); }
.value-scene-system.is-active .system-chart span { animation: chartGrow 820ms var(--ease) both; }
.value-scene-system.is-active .system-chart span:nth-child(2) { animation-delay: 60ms; }.value-scene-system.is-active .system-chart span:nth-child(3) { animation-delay: 120ms; }.value-scene-system.is-active .system-chart span:nth-child(4) { animation-delay: 180ms; }.value-scene-system.is-active .system-chart span:nth-child(5) { animation-delay: 240ms; }.value-scene-system.is-active .system-chart span:nth-child(6) { animation-delay: 300ms; }.value-scene-system.is-active .system-chart span:nth-child(7) { animation-delay: 360ms; }
@keyframes chartGrow { from { transform: scaleY(.04); opacity: .25; } to { transform: scaleY(1); opacity: 1; } }

/* 04 — Apple-like scroll story. IntersectionObserver only changes the state. */
.story-section { background: #090a09; }
.story-glow { position: absolute; left: -18%; top: 8%; width: 70vw; height: 70vw; border-radius: 50%; background: radial-gradient(circle, rgba(88,121,255,.24), rgba(216,255,79,.04) 37%, transparent 70%); filter: blur(10px); pointer-events: none; }
.story-grid { position: relative; display: grid; grid-template-columns: minmax(490px,1fr) minmax(350px,.62fr); gap: clamp(70px,9vw,145px); align-items: start; }
.story-visual-wrap { position: sticky; top: 128px; }
.story-visual { position: relative; min-height: 670px; padding: 10px; border: 1px solid rgba(255,255,255,.11); border-radius: 36px; background: rgba(255,255,255,.055); box-shadow: 0 50px 120px rgba(0,0,0,.42); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); contain: paint; }
.story-device { position: absolute; inset: 10px 10px 58px; overflow: hidden; border-radius: 27px; background: #f4f4f0; }
.story-device-top { position: relative; z-index: 20; height: 43px; padding: 0 14px; display: grid; grid-template-columns: repeat(3,6px) 1fr; align-items: center; gap: 6px; color: #8d8d86; background: rgba(255,255,255,.76); font-size: 7px; }
.story-device-top i { width: 6px; height: 6px; border: 1px solid #c0c0ba; border-radius: 50%; }
.story-device-top span { justify-self: center; margin-left: -30px; }
.story-scene { position: absolute; inset: 43px 0 0; opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity 580ms var(--ease), transform 680ms var(--ease), visibility 580ms; }
.story-scene.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.story-visual-foot { position: absolute; left: 26px; right: 26px; bottom: 22px; display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.58); font-size: 8px; letter-spacing: .11em; text-transform: uppercase; }
.story-dots { display: flex; align-items: center; gap: 7px; }
.story-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); transition: width 300ms var(--ease), background-color 300ms ease; }
.story-dots i.is-active { width: 24px; border-radius: 999px; background: var(--lime); }
.story-steps { padding-top: 80px; }
.story-step { position: relative; min-height: 330px; padding: 38px 0 70px 42px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.36); cursor: pointer; transition: color 360ms ease, opacity 360ms ease; }
.story-step:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.story-step::before { content: ""; position: absolute; left: 0; top: 38px; bottom: 70px; width: 1px; background: rgba(255,255,255,.14); }
.story-step::after { content: ""; position: absolute; left: -2px; top: 38px; width: 5px; height: 0; border-radius: 999px; background: var(--lime); transition: height 520ms var(--ease); }
.story-step.is-active { color: #fff; }
.story-step.is-active::after { height: calc(100% - 108px); }
.story-step > span { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: currentColor; }
.story-step h3 { max-width: 470px; margin: 24px 0 16px; font-size: clamp(42px,5vw,74px); line-height: .93; letter-spacing: -.06em; font-weight: 620; }
.story-step p { max-width: 430px; margin: 0; font-size: 15px; line-height: 1.7; color: currentColor; opacity: .66; }

/* Story: clarity */
.story-scene-clarity { color: #17211e; background: linear-gradient(145deg,#eff0e7,#c9d5c9); }
.clarity-nav { height: 62px; padding: 0 6%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(23,33,30,.09); font-size: 8px; }
.clarity-nav strong { font-size: 12px; }.clarity-nav span { color: rgba(23,33,30,.56); }.clarity-nav b { width: 58px; height: 23px; border-radius: 999px; background: #17211e; }
.clarity-copy { position: absolute; left: 8%; top: 25%; }
.clarity-copy small { font-size: 7px; font-weight: 700; letter-spacing: .15em; color: rgba(23,33,30,.55); }
.clarity-copy strong { display: block; margin: 17px 0 30px; font-family: "Iowan Old Style", Georgia, serif; font-size: clamp(49px,6vw,88px); line-height: .86; letter-spacing: -.06em; font-weight: 400; }
.clarity-copy i { display: block; width: 210px; height: 5px; margin-top: 9px; border-radius: 999px; background: rgba(23,33,30,.16); }
.clarity-copy i:last-child { width: 148px; }
.clarity-card { position: absolute; right: 7%; bottom: 8%; width: 31%; padding: 17px; border: 1px solid rgba(23,33,30,.12); border-radius: 18px; background: rgba(255,255,255,.44); backdrop-filter: blur(12px); }
.clarity-card span, .clarity-card strong { display: block; }.clarity-card span { font-size: 7px; color: rgba(23,33,30,.53); }.clarity-card strong { margin: 12px 0 18px; font-size: 13px; }.clarity-card i { display: block; width: 100%; height: 4px; border-radius: 999px; background: linear-gradient(90deg,#17211e 0 72%,rgba(23,33,30,.12) 72%); }
.story-scene-clarity.is-active .clarity-card { animation: softRise 720ms var(--ease) 100ms both; }

/* Story: motion */
.story-scene-motion { color: #fff; background: #121411; }
.motion-panel { position: absolute; left: 9%; top: 16%; width: 62%; }
.motion-panel > span { font-size: 8px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.48); }
.motion-panel > strong { display: block; margin: 18px 0 34px; font-size: clamp(43px,5.6vw,82px); line-height: .86; letter-spacing: -.065em; }
.motion-panel > div { display: grid; gap: 8px; }
.motion-panel > div i { display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); }
.motion-panel > div i:nth-child(1) { width: 78%; }.motion-panel > div i:nth-child(2) { width: 60%; }.motion-panel > div i:nth-child(3) { width: 70%; }
.motion-focus { position: absolute; z-index: 3; right: 7%; top: 18%; width: 29%; aspect-ratio: 1; display: grid; place-items: center; }
.motion-focus i { position: absolute; border: 1px solid rgba(216,255,79,.24); border-radius: 50%; opacity: 0; transform: scale(.7); }
.motion-focus i:nth-child(1) { width: 100%; height: 100%; }.motion-focus i:nth-child(2) { width: 70%; height: 70%; }.motion-focus i:nth-child(3) { width: 40%; height: 40%; }
.motion-focus strong { position: relative; z-index: 2; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--lime); font-size: 20px; }
.motion-note { position: absolute; left: 9%; bottom: 8%; padding: 13px 16px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.06); }
.motion-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }.motion-note span { font-size: 8px; color: rgba(255,255,255,.68); }
.story-scene-motion.is-active .motion-focus i { animation: focusRing 760ms var(--ease) both; }
.story-scene-motion.is-active .motion-focus i:nth-child(2) { animation-delay: 90ms; }.story-scene-motion.is-active .motion-focus i:nth-child(3) { animation-delay: 180ms; }
@keyframes focusRing { to { opacity: 1; transform: scale(1); } }

/* Story: growth */
.story-scene-growth { overflow: hidden; color: #fff; background: radial-gradient(circle at 50% 50%,#1d2b31,#091014 66%); }
.growth-core { position: absolute; z-index: 5; left: 50%; top: 50%; width: 88px; height: 88px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 27px; color: var(--ink); background: var(--lime); box-shadow: 0 0 0 18px rgba(216,255,79,.05),0 25px 60px rgba(0,0,0,.32); transform: translate(-50%,-50%); font-size: 25px; font-weight: 730; }
.growth-node { position: absolute; z-index: 4; width: 126px; padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.055); backdrop-filter: blur(12px); }
.growth-node span, .growth-node strong { display: block; }.growth-node span { font-size: 7px; color: rgba(255,255,255,.5); }.growth-node strong { margin-top: 9px; font-size: 18px; }
.node-site { left: 8%; top: 17%; }.node-data { right: 8%; top: 17%; }.node-api { left: 8%; bottom: 14%; }.node-admin { right: 8%; bottom: 14%; }
.growth-line { position: absolute; z-index: 2; left: 50%; top: 50%; width: 31%; height: 1px; background: linear-gradient(90deg,rgba(216,255,79,.15),rgba(216,255,79,.7)); transform-origin: left center; opacity: .25; }
.line-site { transform: rotate(-145deg); }.line-data { transform: rotate(-35deg); }.line-api { transform: rotate(145deg); }.line-admin { transform: rotate(35deg); }
.story-scene-growth.is-active .growth-node { animation: nodeIn 720ms var(--ease) both; }.story-scene-growth.is-active .growth-node:nth-of-type(3) { animation-delay: 70ms; }.story-scene-growth.is-active .growth-node:nth-of-type(4) { animation-delay: 140ms; }.story-scene-growth.is-active .growth-node:nth-of-type(5) { animation-delay: 210ms; }
.story-scene-growth.is-active .growth-line { animation: lineGrow 850ms var(--ease) both; }
@keyframes nodeIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

/* Capability widgets animate internally; the cards themselves stay still. */
.capability-card:hover .widget-browser strong { width: 72%; }
.capability-card:hover .widget-browser > span:nth-of-type(1) { width: 56%; }
.capability-card:hover .widget-browser > span:nth-of-type(2) { width: 43%; }
.capability-card:hover .widget-redesign .widget-new strong { width: 82%; }
.capability-card:hover .widget-system .system-node { border-color: rgba(17,17,15,.28); }
.capability-card:hover .widget-support .support-chart i { opacity: 1; }
.capability-widget * { transition: width 420ms var(--ease), opacity 300ms ease, border-color 300ms ease, background-color 300ms ease; }

/* 06 — Interactive process lab */
.process-preview { background: linear-gradient(180deg,var(--paper-soft),var(--paper)); }
.process-lab-grid { display: grid; grid-template-columns: minmax(340px,.56fr) minmax(620px,1fr); gap: clamp(70px,8vw,130px); align-items: start; }
.process-lab { overflow: hidden; border: 1px solid rgba(17,17,15,.1); border-radius: 32px; background: rgba(255,255,255,.72); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.process-tabs { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid rgba(17,17,15,.09); }
.process-tabs button { position: relative; min-height: 112px; padding: 20px 17px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; border: 0; border-right: 1px solid rgba(17,17,15,.09); color: #777770; background: rgba(255,255,255,.22); text-align: left; cursor: pointer; transition: color 260ms ease, background-color 260ms ease; }
.process-tabs button:last-child { border-right: 0; }
.process-tabs button::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; border-radius: 999px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--ease); }
.process-tabs button span { font-size: 8px; letter-spacing: .13em; color: #9c9c95; }.process-tabs button strong { font-size: 13px; }.process-tabs button small { font-size: 7px; color: #999992; }
.process-tabs button:hover { color: var(--ink); background: rgba(255,255,255,.5); }.process-tabs button.is-active { color: var(--ink); background: #fff; }.process-tabs button.is-active::after { transform: scaleX(1); }
.process-canvas { position: relative; min-height: 470px; overflow: hidden; background: linear-gradient(145deg,#f7f7f3,#e7ebe7); }
.process-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 480ms var(--ease), transform 560ms var(--ease), visibility 480ms; }
.process-scene.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.process-caption { min-height: 58px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(17,17,15,.09); color: #777770; background: rgba(255,255,255,.62); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.process-caption .text-link { font-size: 10px; letter-spacing: 0; text-transform: none; }

/* Discovery */
.process-scene-discovery { background: radial-gradient(circle at 50% 50%,rgba(184,215,255,.34),transparent 58%); }
.discovery-note { position: absolute; width: 210px; min-height: 105px; padding: 17px; border: 1px solid rgba(17,17,15,.1); border-radius: 17px; background: rgba(255,255,255,.75); box-shadow: 0 22px 48px rgba(17,17,15,.08); }
.discovery-note span, .discovery-note strong { display: block; }.discovery-note span { font-size: 7px; letter-spacing: .13em; text-transform: uppercase; color: #8c8c85; }.discovery-note strong { margin-top: 15px; font-size: 16px; line-height: 1.25; letter-spacing: -.025em; }
.note-a { left: 8%; top: 12%; transform: rotate(-3deg); }.note-b { right: 8%; top: 20%; transform: rotate(3deg); }.note-c { left: 22%; bottom: 10%; transform: rotate(1deg); }
.discovery-orbit { position: absolute; right: 28%; bottom: 16%; width: 104px; height: 104px; display: grid; place-items: center; border: 1px solid rgba(17,17,15,.12); border-radius: 50%; }
.discovery-orbit::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(17,17,15,.1); border-radius: 50%; }.discovery-orbit i { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 8px rgba(216,255,79,.16); }.discovery-orbit b { position: absolute; bottom: -26px; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.process-scene-discovery.is-active .discovery-note { animation: noteIn 650ms var(--ease) both; }.process-scene-discovery.is-active .note-b { animation-delay: 90ms; }.process-scene-discovery.is-active .note-c { animation-delay: 180ms; }
@keyframes noteIn { from { opacity: 0; margin-top: 12px; } to { opacity: 1; margin-top: 0; } }

/* Direction */
.process-scene-direction { background: linear-gradient(145deg,#f4f2ec,#e8eee6); }
.direction-map { position: absolute; inset: 12% 10% 20%; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; align-items: center; }
.direction-map article { position: relative; z-index: 4; min-height: 120px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(17,17,15,.1); border-radius: 17px; background: rgba(255,255,255,.74); box-shadow: 0 18px 38px rgba(17,17,15,.06); }
.direction-map article span { font-size: 8px; color: #9a9a93; }.direction-map article strong { font-size: 14px; }
.map-line { position: absolute; z-index: 2; top: 50%; width: calc(25% - 4px); height: 1px; background: rgba(17,17,15,.18); transform-origin: left; }.line-one { left: 12.5%; }.line-two { left: 37.5%; }.line-three { left: 62.5%; }
.direction-palette { position: absolute; left: 10%; bottom: 8%; display: flex; gap: 8px; }.direction-palette i { width: 38px; height: 38px; border-radius: 12px; background: #11110f; }.direction-palette i:nth-child(2) { background: #b8d7ff; }.direction-palette i:nth-child(3) { background: #d8ff4f; }.direction-palette i:nth-child(4) { background: #f2e8d8; }
.process-scene-direction.is-active .map-line { animation: lineGrow 700ms var(--ease) both; }.process-scene-direction.is-active .direction-map article { animation: softRise 600ms var(--ease) both; }.process-scene-direction.is-active .direction-map article:nth-child(2) { animation-delay: 80ms; }.process-scene-direction.is-active .direction-map article:nth-child(3) { animation-delay: 160ms; }.process-scene-direction.is-active .direction-map article:nth-child(4) { animation-delay: 240ms; }

/* Build */
.process-scene-build { padding: 8%; display: grid; grid-template-columns: 1.2fr .65fr; gap: 18px; align-items: center; background: #111411; }
.build-window { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; color: rgba(255,255,255,.78); background: #0b0d0b; box-shadow: 0 26px 60px rgba(0,0,0,.25); }
.build-window > div { height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.34); font-size: 7px; }.build-window > div i { width: 6px; height: 6px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }.build-window > div span { margin-left: auto; margin-right: auto; }
.build-window pre { margin: 0; padding: 28px; font: 12px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; }.build-window pre b { color: #b8d7ff; }.build-window pre i { color: #d8ff4f; font-style: normal; }
.build-progress { padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; color: #fff; background: rgba(255,255,255,.045); }.build-progress > span { display: block; margin: 15px 0 8px; font-size: 7px; color: rgba(255,255,255,.5); }.build-progress > span:first-child { margin-top: 0; }.build-progress > i { display: block; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.1); }.build-progress b { display: block; width: var(--progress); height: 100%; border-radius: inherit; background: var(--lime); transform-origin: left; }
.process-scene-build.is-active .build-progress b { animation: lineGrow 850ms var(--ease) both; }

/* Launch */
.process-scene-launch { display: grid; place-items: center; background: linear-gradient(145deg,#edf0e7,#dce7df); }
.launch-ring { position: absolute; left: 18%; top: 50%; width: 190px; height: 190px; display: grid; place-items: center; border: 1px solid rgba(17,17,15,.12); border-radius: 50%; transform: translateY(-50%); }.launch-ring::before,.launch-ring::after { content: ""; position: absolute; border: 1px solid rgba(17,17,15,.09); border-radius: 50%; }.launch-ring::before { inset: 19px; }.launch-ring::after { inset: 41px; }.launch-ring i { position: absolute; inset: -1px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--ink); border-right-color: var(--ink); transform: rotate(18deg); }.launch-ring strong { position: relative; z-index: 2; font-size: 47px; letter-spacing: -.06em; }.launch-ring span { position: absolute; bottom: 48px; font-size: 7px; letter-spacing: .13em; text-transform: uppercase; color: #73736c; }
.launch-checks { position: absolute; right: 14%; top: 22%; display: grid; gap: 13px; }.launch-checks span { min-width: 180px; padding: 12px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(17,17,15,.08); border-radius: 13px; background: rgba(255,255,255,.62); font-size: 9px; }.launch-checks i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(216,255,79,.14); }
.launch-live { position: absolute; right: 14%; bottom: 17%; padding: 12px 15px; display: flex; align-items: center; gap: 10px; border-radius: 999px; color: #fff; background: var(--ink); font-size: 8px; }.launch-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.process-scene-launch.is-active .launch-checks span { animation: softRise 620ms var(--ease) both; }.process-scene-launch.is-active .launch-checks span:nth-child(2) { animation-delay: 70ms; }.process-scene-launch.is-active .launch-checks span:nth-child(3) { animation-delay: 140ms; }.process-scene-launch.is-active .launch-checks span:nth-child(4) { animation-delay: 210ms; }

/* Studio principle explorer */
.principle-lab { display: grid; grid-template-columns: minmax(300px,.48fr) minmax(520px,1fr); gap: clamp(50px,7vw,110px); align-items: stretch; }
.principle-tabs { display: grid; align-content: start; border-top: 1px solid rgba(255,255,255,.14); }
.principle-tabs button { min-height: 84px; padding: 0; display: grid; grid-template-columns: 44px 1fr 10px; align-items: center; gap: 15px; border: 0; border-bottom: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.42); background: transparent; text-align: left; cursor: pointer; transition: color 260ms ease, background-color 260ms ease; }
.principle-tabs button span { font-size: 8px; letter-spacing: .13em; }.principle-tabs button strong { font-size: 15px; }.principle-tabs button::after { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.principle-tabs button:hover,.principle-tabs button.is-active { color: #fff; }.principle-tabs button.is-active { background: linear-gradient(90deg,rgba(184,215,255,.1),transparent); }.principle-tabs button.is-active::after { border-color: var(--lime); background: var(--lime); box-shadow: 0 0 0 5px rgba(216,255,79,.1); }
.principle-stage { position: relative; min-height: 560px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 30px; background: rgba(255,255,255,.05); box-shadow: 0 42px 95px rgba(0,0,0,.25); }
.principle-panel { position: absolute; inset: 0; padding: 44px; opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity 480ms var(--ease), transform 560ms var(--ease), visibility 480ms; }
.principle-panel.is-active { opacity: 1; visibility: visible; transform: scale(1); }
.principle-panel > span { font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }.principle-panel h3 { max-width: 620px; margin: 24px 0 18px; font-size: clamp(46px,5.6vw,82px); line-height: .9; letter-spacing: -.06em; }.principle-panel p { max-width: 520px; margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.58); }
.principle-visual { position: absolute; left: 44px; right: 44px; bottom: 40px; height: 190px; }
.principle-problem { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.principle-problem i { border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(255,255,255,.05); }.principle-problem i:nth-child(2) { background: rgba(216,255,79,.12); border-color: rgba(216,255,79,.3); }
.principle-space { display: flex; align-items: center; justify-content: center; }.principle-space i { position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }.principle-space i:nth-child(1) { width: 180px; height: 180px; }.principle-space i:nth-child(2) { width: 118px; height: 118px; }.principle-space i:nth-child(3) { width: 44px; height: 44px; border: 0; background: var(--lime); }
.principle-grow { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; align-items: end; }.principle-grow i { height: var(--h); border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg,#b8d7ff,#586c80); }.principle-grow i:nth-child(1) { --h:40%; }.principle-grow i:nth-child(2) { --h:58%; }.principle-grow i:nth-child(3) { --h:76%; }.principle-grow i:nth-child(4) { --h:100%; background: linear-gradient(180deg,var(--lime),#7d9436); }
.principle-clear { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.principle-clear i { border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.055); }.principle-clear i::before { content: ""; display: block; width: 56%; height: 6px; margin: 26px 22px 12px; border-radius: 999px; background: rgba(255,255,255,.65); }.principle-clear i::after { content: ""; display: block; width: 72%; height: 4px; margin-left: 22px; border-radius: 999px; background: rgba(255,255,255,.18); }

/* Case-study device focus controls */
.case-device-controls { width: var(--page); margin: 0 auto 22px; display: flex; justify-content: flex-end; gap: 7px; }
.case-device-controls button { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: rgba(255,255,255,.52); background: rgba(255,255,255,.04); cursor: pointer; font-size: 8px; font-weight: 680; letter-spacing: .1em; text-transform: uppercase; transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease; }
.case-device-controls button:hover { color: #fff; border-color: rgba(255,255,255,.32); }.case-device-controls button.is-active { color: var(--ink); border-color: var(--lime); background: var(--lime); }
.case-ui-stage .ui-browser,.case-ui-stage .ui-phone { transition: opacity 480ms var(--ease), filter 480ms ease, transform 520ms var(--ease); }
.case-ui-stage[data-device-focus="desktop"] .ui-browser { opacity: 1; filter: none; transform: translate3d(0,0,0) scale(1.015); }.case-ui-stage[data-device-focus="desktop"] .ui-phone { opacity: .26; filter: saturate(.2); transform: translate3d(18px,8px,0) scale(.92); }
.case-ui-stage[data-device-focus="mobile"] .ui-browser { opacity: .25; filter: saturate(.2); transform: translate3d(-14px,7px,0) scale(.96); }.case-ui-stage[data-device-focus="mobile"] .ui-phone { opacity: 1; filter: none; transform: translate3d(0,0,0) scale(1.04); }

/* More tactile, still motion-stable project cards. */
.work-card-visual::before { content: ""; position: absolute; z-index: 14; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,0); pointer-events: none; transition: border-color 300ms ease, box-shadow 300ms ease; }
.work-card-link:hover .work-card-visual::before,.work-card-link:focus-visible .work-card-visual::before { border-color: rgba(255,255,255,.24); box-shadow: inset 0 0 0 1px rgba(17,17,15,.03); }
.work-card-link:hover .art-label { background: rgba(10,10,9,.52); }
.art-label { transition: background-color 260ms ease, border-color 260ms ease; }

@media (max-width: 1180px) {
  .value-lab-grid,.process-lab-grid,.principle-lab { grid-template-columns: 1fr; }
  .value-lab-copy { max-width: 760px; }
  .value-stage { min-height: 620px; }
  .process-preview-heading { position: relative; top: auto; }
  .story-grid { grid-template-columns: minmax(430px,1fr) minmax(310px,.65fr); gap: 55px; }
  .story-visual { min-height: 610px; }
}

@media (max-width: 900px) {
  .value-lab-grid { gap: 50px; }
  .value-panels { min-height: 190px; }
  .value-stage { min-height: 570px; border-radius: 27px; }
  .value-stage-chrome span { display: none; }
  .value-stage-chrome { grid-template-columns: repeat(3,7px) 1fr; }
  .presence-card { width: 38%; }
  .story-grid { grid-template-columns: 1fr; }
  .story-visual-wrap { position: relative; top: auto; }
  .story-visual { min-height: 590px; }
  .story-steps { padding-top: 50px; }
  .story-step { min-height: 230px; }
  .process-tabs { grid-template-columns: repeat(2,1fr); }
  .process-tabs button:nth-child(2) { border-right: 0; }
  .process-tabs button:nth-child(-n+2) { border-bottom: 1px solid rgba(17,17,15,.09); }
  .process-canvas { min-height: 460px; }
  .principle-stage { min-height: 530px; }
  .case-device-controls { justify-content: flex-start; overflow-x: auto; }
}

@media (max-width: 640px) {
  .value-lab-copy h2 { font-size: clamp(48px,15vw,72px); }
  .value-tabs button { min-height: 61px; }
  .value-panel h3 { font-size: 30px; }
  .value-stage { min-height: 520px; }
  .presence-canvas { left: 7%; top: 11%; }
  .presence-canvas strong { font-size: 49px; }
  .presence-orb { width: 78%; right: -28%; }
  .presence-card { left: 7%; right: 7%; bottom: 7%; width: auto; min-height: 118px; }
  .conversion-shell { width: 88%; padding: 21px; }
  .conversion-toast { display: none; }
  .system-dashboard { grid-template-columns: 43px 1fr; }
  .system-dashboard .system-main { padding: 15px; }
  .system-stats { gap: 6px; }
  .system-stats article { min-height: 76px; padding: 9px; }
  .system-stats strong { font-size: 20px; }
  .system-chart { height: 126px; }
  .story-visual { min-height: 520px; border-radius: 27px; }
  .story-device { inset: 8px 8px 54px; border-radius: 21px; }
  .clarity-nav span { display: none; }
  .clarity-copy strong { font-size: 52px; }
  .clarity-card { width: 43%; }
  .motion-panel { width: 82%; }
  .motion-panel > strong { font-size: 49px; }
  .motion-focus { right: -5%; top: 50%; opacity: .45; }
  .growth-node { width: 98px; padding: 10px; }
  .growth-core { width: 68px; height: 68px; border-radius: 21px; }
  .story-step { padding-left: 28px; }
  .story-step h3 { font-size: 46px; }
  .process-tabs { grid-template-columns: 1fr; }
  .process-tabs button { min-height: 78px; display: grid; grid-template-columns: 34px 1fr; align-content: center; }
  .process-tabs button span { grid-row: 1 / 3; }.process-tabs button small { display: block; }
  .process-tabs button { border-right: 0; border-bottom: 1px solid rgba(17,17,15,.09); }
  .process-canvas { min-height: 430px; }
  .discovery-note { width: 170px; }.note-a { left: 5%; }.note-b { right: 5%; }.note-c { left: 12%; }
  .discovery-orbit { right: 12%; }
  .direction-map { inset: 8% 7% 22%; grid-template-columns: repeat(2,1fr); }
  .map-line { display: none; }
  .direction-palette { left: 7%; }
  .process-scene-build { padding: 6%; grid-template-columns: 1fr; }
  .build-progress { display: none; }
  .launch-ring { left: 8%; width: 150px; height: 150px; }.launch-checks { right: 6%; }.launch-checks span { min-width: 150px; }.launch-live { right: 6%; }
  .process-caption { align-items: flex-start; flex-direction: column; justify-content: center; gap: 6px; min-height: 76px; }
  .principle-tabs button { min-height: 70px; }
  .principle-stage { min-height: 500px; }
  .principle-panel { padding: 28px; }
  .principle-panel h3 { font-size: 48px; }
  .principle-visual { left: 28px; right: 28px; bottom: 28px; height: 160px; }
  .case-device-controls { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .value-scene,.value-panel,.story-scene,.story-step,.process-scene,.principle-panel,
  .case-ui-stage .ui-browser,.case-ui-stage .ui-phone { transition: none !important; animation: none !important; }
  .value-scene-presence.is-active .presence-line,
  .value-scene-system.is-active .system-chart span,
  .story-scene-motion.is-active .motion-focus i,
  .story-scene-growth.is-active .growth-node,
  .story-scene-growth.is-active .growth-line,
  .process-scene * { animation: none !important; }
}

/* Service selector gets a short visual response when the visitor changes mode. */
.selector-visual[data-service-mode="website"]::after,
.selector-visual[data-service-mode="redesign"]::after,
.selector-visual[data-service-mode="system"]::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 180px;
  height: 180px;
  right: 8%;
  bottom: 8%;
  border-radius: 50%;
  border: 1px solid rgba(17,17,15,.1);
  opacity: .6;
}
.selector-visual[data-service-mode="redesign"]::after { border-radius: 42px; transform: rotate(17deg); }
.selector-visual[data-service-mode="system"]::after { border-radius: 24px; background-image: linear-gradient(rgba(17,17,15,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,15,.07) 1px,transparent 1px); background-size: 18px 18px; }
.selector-visual.is-changing .service-browser { animation: serviceRefresh 560ms var(--ease) both; }
.selector-visual.is-changing .service-browser-page > span,
.selector-visual.is-changing .service-browser-page > strong,
.selector-visual.is-changing .service-browser-page > p,
.selector-visual.is-changing .service-browser-page > div { animation: serviceContent 520ms var(--ease) both; }
.selector-visual.is-changing .service-browser-page > strong { animation-delay: 60ms; }
.selector-visual.is-changing .service-browser-page > p { animation-delay: 110ms; }
.selector-visual.is-changing .service-browser-page > div { animation-delay: 160ms; }
@keyframes serviceRefresh { from { opacity: .48; filter: blur(5px); } to { opacity: 1; filter: blur(0); } }
@keyframes serviceContent { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .selector-visual.is-changing .service-browser,
  .selector-visual.is-changing .service-browser-page > * { animation: none !important; }
}


/* --- v3.1 refinements requested by user --- */
/* Value tabs: center the numbers better relative to the left band and label */
.value-tabs button {
  grid-template-columns: 54px 1fr 14px;
  gap: 0;
}
.value-tabs button > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  border-right: 1px solid rgba(17,17,15,.06);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #999991;
}
.value-tabs button::after { justify-self: end; }

/* Story section: make the visual stay in place longer while scrolling through all chapters */
@media (min-width: 901px) {
  .story-section {
    position: relative;
  }
  .story-steps {
    padding-top: 0;
  }
  .story-step {
    min-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 32px;
    padding-bottom: 44px;
  }
  .story-step::before {
    top: 32px;
    bottom: 44px;
  }
  .story-step::after {
    top: 32px;
  }
  .story-step.is-active::after {
    height: calc(100% - 76px);
  }
  .story-visual-wrap {
    top: 116px;
  }
}

/* Capabilities: refresh the last two widgets and give them subtle internal animation */
.widget-system {
  background: radial-gradient(circle at 50% 32%, rgba(216,255,79,.14), transparent 38%), linear-gradient(145deg,#fbfbf7,#f0f3ef);
}
.widget-system::before {
  content: "";
  position: absolute;
  inset: 18px 24px 18px 24px;
  border-radius: 18px;
  border: 1px dashed rgba(17,17,15,.08);
}
.system-node {
  transition: transform 420ms var(--ease), border-color 300ms ease, box-shadow 300ms ease, background-color 300ms ease, color 300ms ease;
}
.node-main {
  box-shadow: 0 16px 30px rgba(17,17,15,.12);
}
.node-a, .node-b, .node-c {
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 22px rgba(17,17,15,.06);
}
.system-line {
  opacity: .45;
  transition: transform 420ms var(--ease), opacity 300ms ease, background-color 300ms ease;
}
.capability-card.reveal.is-visible .widget-system .node-a,
.capability-card:hover .widget-system .node-a { transform: translate(-3px,-4px); }
.capability-card.reveal.is-visible .widget-system .node-b,
.capability-card:hover .widget-system .node-b { transform: translate(3px,-4px); }
.capability-card.reveal.is-visible .widget-system .node-c,
.capability-card:hover .widget-system .node-c { transform: translateY(4px); }
.capability-card.reveal.is-visible .widget-system .node-main,
.capability-card:hover .widget-system .node-main {
  box-shadow: 0 20px 36px rgba(17,17,15,.16), 0 0 0 10px rgba(216,255,79,.12);
}
.capability-card.reveal.is-visible .widget-system .system-line,
.capability-card:hover .widget-system .system-line {
  opacity: .8;
  background: linear-gradient(90deg, rgba(17,17,15,.16), rgba(216,255,79,.8));
}

.widget-support {
  background: radial-gradient(circle at 78% 18%, rgba(216,255,79,.08), transparent 28%), linear-gradient(145deg,#121310,#0a0b09);
}
.widget-support::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.06);
}
.support-chart {
  height: 52px;
  margin-top: 18px;
}
.support-chart i {
  transform-origin: bottom;
  opacity: .92;
}
.capability-card.reveal.is-visible .widget-support .support-chart i,
.capability-card:hover .widget-support .support-chart i {
  animation: chartGrow 760ms var(--ease) both;
}
.capability-card.reveal.is-visible .widget-support .support-chart i:nth-child(2),
.capability-card:hover .widget-support .support-chart i:nth-child(2) { animation-delay: 60ms; }
.capability-card.reveal.is-visible .widget-support .support-chart i:nth-child(3),
.capability-card:hover .widget-support .support-chart i:nth-child(3) { animation-delay: 120ms; }
.capability-card.reveal.is-visible .widget-support .support-chart i:nth-child(4),
.capability-card:hover .widget-support .support-chart i:nth-child(4) { animation-delay: 180ms; }
.capability-card.reveal.is-visible .widget-support .support-chart i:nth-child(5),
.capability-card:hover .widget-support .support-chart i:nth-child(5) { animation-delay: 240ms; }
.capability-card.reveal.is-visible .widget-support .support-chart i:nth-child(6),
.capability-card:hover .widget-support .support-chart i:nth-child(6) { animation-delay: 300ms; }
.capability-card.reveal.is-visible .widget-support .support-chart i:nth-child(7),
.capability-card:hover .widget-support .support-chart i:nth-child(7) { animation-delay: 360ms; }
.capability-card.reveal.is-visible .widget-support .support-chart i:nth-child(8),
.capability-card:hover .widget-support .support-chart i:nth-child(8) { animation-delay: 420ms; }
.capability-card.reveal.is-visible .widget-support .support-head span i,
.capability-card:hover .widget-support .support-head span i {
  animation: pulseDot 1.9s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 0 rgba(216,255,79,.18); }
  50% { box-shadow: 0 0 0 6px rgba(216,255,79,.02); }
}

/* Process lab: enrich every scene with an internal minimal animation */
.process-scene-discovery.is-active .discovery-orbit { animation: orbitDrift 7s linear infinite; }
.process-scene-discovery.is-active .discovery-orbit::before { animation: pulseHalo 2.8s ease-in-out infinite; }
@keyframes orbitDrift { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulseHalo { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: .9; transform: scale(1.05); } }

.process-scene-direction.is-active .direction-palette i { animation: paletteLift 680ms var(--ease) both; }
.process-scene-direction.is-active .direction-palette i:nth-child(2) { animation-delay: 70ms; }
.process-scene-direction.is-active .direction-palette i:nth-child(3) { animation-delay: 140ms; }
.process-scene-direction.is-active .direction-palette i:nth-child(4) { animation-delay: 210ms; }
@keyframes paletteLift { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.process-scene-build.is-active .build-window pre { animation: codeFade 620ms var(--ease) both; }
@keyframes codeFade { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.process-scene-launch.is-active .launch-ring { animation: ringIn 760ms var(--ease) both; }
.process-scene-launch.is-active .launch-ring i { animation: ringSweep 1.3s var(--ease) both; }
.process-scene-launch.is-active .launch-live { animation: softRise 640ms var(--ease) 240ms both; }
@keyframes ringIn { from { opacity: .15; transform: translateY(-50%) scale(.94); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes ringSweep { from { opacity: .2; transform: rotate(-80deg); } to { opacity: 1; transform: rotate(18deg); } }

@media (max-width: 900px) {
  .value-tabs button {
    grid-template-columns: 48px 1fr 12px;
  }
  .value-tabs button > span {
    font-size: 9px;
  }
}

/* v3.1 orbit refinement */
.process-scene-discovery.is-active .discovery-orbit { animation: none; }
.process-scene-discovery.is-active .discovery-orbit i { animation: pulseCore 1.8s ease-in-out infinite; }
@keyframes pulseCore { 0%,100% { transform: scale(1); box-shadow: 0 0 0 8px rgba(216,255,79,.16); } 50% { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(216,255,79,.06); } }


/* --- v3.1.1 story pin + value tab cleanup --- */
/* Remove the vertical divider from the value tabs and keep the numbers visually centered. */
.value-tabs button {
  grid-template-columns: 54px 1fr 14px;
  gap: 10px;
}
.value-tabs button > span {
  align-self: center;
  width: auto;
  min-width: 26px;
  height: auto;
  border-right: 0;
  background: transparent;
}
.value-tabs button.is-active > span {
  background: transparent;
}

/* Desktop story section behaves like a pinned scroll story: the section stays in place,
   the chapter on the right swaps, and the left visual updates accordingly. */
@media (min-width: 901px) {
  .story-section {
    min-height: 320vh;
    position: relative;
  }
  .story-grid {
    position: sticky;
    top: 0;
    min-height: 100vh;
    padding-top: 110px;
    padding-bottom: 70px;
    align-items: center;
  }
  .story-visual-wrap {
    position: relative;
    top: auto;
    align-self: center;
  }
  .story-steps {
    position: relative;
    min-height: 420px;
    padding-top: 0;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .story-step {
    position: absolute;
    inset: 0;
    min-height: auto;
    padding: 52px 0 52px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 0;
    border-bottom: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 420ms var(--ease), transform 520ms var(--ease), visibility 420ms, color 300ms ease;
  }
  .story-step::before {
    top: 52px;
    bottom: 52px;
  }
  .story-step::after {
    top: 52px;
  }
  .story-step.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .story-step.is-active::after {
    height: calc(100% - 104px);
  }
  .story-step h3 {
    max-width: 420px;
  }
}

@media (max-width: 900px) {
  .value-tabs button {
    gap: 8px;
  }
  .value-tabs button > span {
    min-width: 24px;
    border-right: 0;
  }
}

/* --- v3.1.2 — pinned three-step story, all options visible --- */
@media (min-width: 901px) {
  .story-section {
    height: 260vh;
    min-height: 0;
    padding: 0;
    overflow: clip;
  }

  .story-grid {
    position: sticky;
    top: 0;
    min-height: 100vh;
    height: 100vh;
    padding-top: clamp(76px, 8vh, 108px);
    padding-bottom: clamp(42px, 5vh, 68px);
    box-sizing: border-box;
    align-items: center;
  }

  .story-visual-wrap {
    position: relative;
    top: auto;
    align-self: center;
  }

  .story-visual {
    min-height: min(670px, calc(100vh - 150px));
  }

  .story-steps {
    position: relative;
    min-height: 0;
    height: auto;
    padding: 0;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .story-step {
    position: relative;
    inset: auto;
    min-height: 0;
    padding: clamp(24px, 3vh, 36px) 0 clamp(24px, 3vh, 36px) 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    opacity: .34;
    visibility: visible;
    transform: none;
    color: #fff;
    cursor: pointer;
    transition: opacity 360ms ease, color 360ms ease, background-color 360ms ease;
  }

  .story-step:last-child {
    border-bottom: 0;
  }

  .story-step::before {
    top: 24px;
    bottom: 24px;
  }

  .story-step::after {
    top: 24px;
    height: 0;
  }

  .story-step.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    background: linear-gradient(90deg, rgba(216,255,79,.025), transparent 72%);
  }

  .story-step.is-active::after {
    height: calc(100% - 48px);
  }

  .story-step > span {
    font-size: 8px;
  }

  .story-step h3 {
    max-width: 470px;
    margin: 15px 0 10px;
    font-size: clamp(31px, 3.3vw, 52px);
    line-height: .94;
  }

  .story-step p {
    max-width: 440px;
    font-size: 13px;
    line-height: 1.55;
  }
}

@media (min-width: 901px) and (max-height: 780px) {
  .story-grid {
    padding-top: 60px;
    padding-bottom: 34px;
  }

  .story-visual {
    min-height: calc(100vh - 110px);
  }

  .story-step {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .story-step::before,
  .story-step::after {
    top: 18px;
  }

  .story-step::before {
    bottom: 18px;
  }

  .story-step.is-active::after {
    height: calc(100% - 36px);
  }

  .story-step h3 {
    margin: 10px 0 8px;
    font-size: clamp(28px, 3vw, 44px);
  }

  .story-step p {
    font-size: 12px;
  }
}


/* --- v3.1.2 pinned three-chapter story --- */
@media (min-width: 901px) {
  .story-section {
    position: relative;
    height: 300vh;
    min-height: 0;
    padding: 0;
    overflow: clip;
  }

  .story-grid {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    padding-top: clamp(72px, 9vh, 104px);
    padding-bottom: clamp(46px, 7vh, 76px);
    align-items: center;
    box-sizing: border-box;
  }

  .story-visual-wrap {
    position: relative;
    top: auto;
    align-self: center;
  }

  .story-visual {
    height: clamp(480px, 72vh, 670px);
    min-height: 0;
  }

  .story-steps {
    position: relative;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    height: clamp(480px, 72vh, 670px);
    min-height: 0;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .story-step {
    position: relative;
    inset: auto;
    min-height: 0;
    padding: 24px 0 24px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.34);
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: color 380ms ease, background-color 380ms ease, opacity 380ms ease;
  }

  .story-step:last-child {
    border-bottom: 0;
  }

  .story-step::before {
    top: 24px;
    bottom: 24px;
  }

  .story-step::after {
    top: 24px;
  }

  .story-step.is-active {
    color: #fff;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: linear-gradient(90deg, rgba(216,255,79,.035), transparent 74%);
  }

  .story-step.is-active::after {
    height: calc(100% - 48px);
  }

  .story-step h3 {
    max-width: 460px;
    margin: 13px 0 9px;
    font-size: clamp(30px, 3.25vw, 56px);
    line-height: .94;
  }

  .story-step p {
    max-width: 430px;
    font-size: 13px;
    line-height: 1.58;
  }
}

@media (min-width: 901px) and (max-height: 700px) {
  .story-grid {
    padding-top: 62px;
    padding-bottom: 34px;
  }
  .story-visual,
  .story-steps {
    height: clamp(430px, 70vh, 520px);
  }
  .story-step {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .story-step::before,
  .story-step::after {
    top: 18px;
  }
  .story-step::before {
    bottom: 18px;
  }
  .story-step.is-active::after {
    height: calc(100% - 36px);
  }
  .story-step h3 {
    font-size: clamp(28px, 3vw, 46px);
  }
  .story-step p {
    font-size: 12px;
  }
}

/* --- v3.1.2 final: pinned viewport, three visible chapters --- */
@media (min-width: 901px) {
  .story-section.section-space-dark {
    position: relative;
    height: 320svh;
    min-height: 320svh;
    padding: 0 !important;
    overflow: visible !important;
  }

  .story-section > .story-grid {
    position: sticky !important;
    top: 0;
    z-index: 2;
    height: 100svh;
    min-height: 100svh;
    padding-top: clamp(82px, 9svh, 112px);
    padding-bottom: clamp(40px, 5svh, 62px);
    box-sizing: border-box;
    align-items: center;
  }

  .story-section .story-visual-wrap {
    position: relative !important;
    top: auto !important;
    align-self: center;
  }

  .story-section .story-visual,
  .story-section .story-steps {
    height: min(72svh, 670px);
    min-height: 500px;
  }

  .story-section .story-steps {
    position: relative;
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    padding: 0;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .story-section .story-step {
    position: relative !important;
    inset: auto !important;
    min-height: 0 !important;
    padding: 22px 0 22px 40px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.32);
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: color 360ms ease, background-color 360ms ease;
  }

  .story-section .story-step:last-child {
    border-bottom: 0 !important;
  }

  .story-section .story-step::before {
    top: 22px;
    bottom: 22px;
  }

  .story-section .story-step::after {
    top: 22px;
    height: 0;
  }

  .story-section .story-step.is-active {
    color: #fff;
    background: linear-gradient(90deg, rgba(216,255,79,.035), transparent 74%);
  }

  .story-section .story-step.is-active::after {
    height: calc(100% - 44px);
  }

  .story-section .story-step h3 {
    max-width: 440px;
    margin: 13px 0 9px;
    font-size: clamp(31px, 3.25vw, 54px);
    line-height: .94;
  }

  .story-section .story-step p {
    max-width: 420px;
    font-size: 13px;
    line-height: 1.55;
  }
}

@media (min-width: 901px) and (max-height: 720px) {
  .story-section > .story-grid {
    padding-top: 66px;
    padding-bottom: 30px;
  }
  .story-section .story-visual,
  .story-section .story-steps {
    height: 69svh;
    min-height: 430px;
  }
  .story-section .story-step {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .story-section .story-step::before,
  .story-section .story-step::after {
    top: 16px;
  }
  .story-section .story-step::before {
    bottom: 16px;
  }
  .story-section .story-step.is-active::after {
    height: calc(100% - 32px);
  }
  .story-section .story-step h3 {
    margin: 9px 0 7px;
    font-size: clamp(27px, 3vw, 44px);
  }
  .story-section .story-step p {
    font-size: 12px;
  }
}

/* --- v3.1.3 — fast, fluid pinned story --- */
@media (min-width: 901px) {
  /* Only one viewport of extra scroll is used for the three chapters. */
  .story-section.section-space-dark {
    height: 200svh;
    min-height: 200svh;
  }

  .story-section > .story-grid {
    padding-top: clamp(70px, 7.5svh, 94px);
    padding-bottom: clamp(26px, 3.5svh, 46px);
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .story-section .story-visual,
  .story-section .story-steps {
    height: min(74svh, 650px);
  }

  /* Expensive live blur is unnecessary while the viewport is pinned. */
  .story-section .story-visual {
    background: rgba(255,255,255,.065);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 38px 92px rgba(0,0,0,.34);
    transform: translateZ(0);
  }

  .story-section .story-glow {
    filter: none;
    opacity: .72;
  }

  .story-section .story-step {
    transition: color 160ms ease, background-color 160ms ease;
  }

  .story-section .story-step::after {
    transition: height 220ms cubic-bezier(.22,.61,.36,1);
  }

  /* Immediate crossfade that can be interrupted naturally by fast scrolling. */
  .story-section .story-scene {
    will-change: opacity, transform;
    backface-visibility: hidden;
    transform: translateZ(0) scale(.994);
    transition:
      opacity 180ms cubic-bezier(.22,.61,.36,1),
      transform 240ms cubic-bezier(.22,.61,.36,1),
      visibility 180ms;
  }

  .story-section .story-scene.is-active {
    transform: translateZ(0) scale(1);
  }

  /* The internal details finish quickly and never create an animation queue. */
  .story-section .story-scene-clarity.is-active .clarity-card,
  .story-section .story-scene-clarity.is-active .clarity-copy,
  .story-section .story-scene-clarity.is-active .clarity-nav,
  .story-section .story-scene-motion.is-active .motion-panel,
  .story-section .story-scene-motion.is-active .motion-note,
  .story-section .story-scene-motion.is-active .motion-focus,
  .story-section .story-scene-motion.is-active .motion-focus i,
  .story-section .story-scene-growth.is-active .growth-core,
  .story-section .story-scene-growth.is-active .growth-node,
  .story-section .story-scene-growth.is-active .growth-line {
    animation-duration: 280ms !important;
    animation-delay: 0ms !important;
  }
}

@media (min-width: 901px) and (max-height: 720px) {
  .story-section.section-space-dark {
    height: 190svh;
    min-height: 190svh;
  }
}

/* --- v3.2.0 — simple, smooth experience flow --- */
.motion-showcase.section-space-dark {
  position: relative;
  isolation: isolate;
  padding: clamp(112px,10vw,166px) 0;
  color: #fff;
  background:
    radial-gradient(circle at 12% 82%, rgba(66,91,255,.13), transparent 34%),
    radial-gradient(circle at 86% 8%, rgba(216,255,79,.055), transparent 27%),
    #090a09;
}
.motion-showcase-glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 58%;
  width: min(1120px,82vw);
  aspect-ratio: 1.4;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 48%, rgba(184,215,255,.14), transparent 31%),
    radial-gradient(circle at 68% 43%, rgba(216,255,79,.06), transparent 27%);
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.motion-showcase-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(330px,.48fr);
  align-items: end;
  gap: clamp(58px,8vw,126px);
  margin-bottom: clamp(56px,7vw,88px);
}
.motion-showcase-heading h2 {
  max-width: 980px;
  margin: 25px 0 0;
  font-size: clamp(58px,7.4vw,112px);
  line-height: .88;
  letter-spacing: -.072em;
  font-weight: 650;
}
.motion-showcase-heading h2 em {
  font-family: "Iowan Old Style", Georgia, serif;
  font-weight: 400;
}
.motion-showcase-intro { padding-bottom: 8px; }
.motion-showcase-intro > p {
  max-width: 560px;
  margin: 0;
  font-size: 16px;
  line-height: 1.72;
  color: rgba(255,255,255,.58);
}
.motion-replay {
  min-height: 42px;
  margin-top: 28px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.045);
  cursor: pointer;
  font-size: 10px;
  font-weight: 660;
  transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
.motion-replay:hover,
.motion-replay:focus-visible {
  color: #fff;
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.08);
}
.motion-replay:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
.motion-replay > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(216,255,79,.1);
}
.motion-flow {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 36px;
  color: var(--ink);
  background: rgba(248,248,244,.97);
  box-shadow: 0 54px 130px rgba(0,0,0,.34);
  contain: paint;
  isolation: isolate;
}
.motion-flow-header {
  min-height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid rgba(17,17,15,.09);
  color: #7e7e77;
  font-size: 8px;
  font-weight: 680;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.motion-flow-header > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #60605a;
}
.motion-flow-header > div i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(216,255,79,.14);
}
.motion-flow-header strong { font-size: 8px; font-weight: 680; }
.motion-flow-canvas {
  position: relative;
  min-height: 500px;
  padding: 76px 54px 112px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  align-items: center;
  background:
    radial-gradient(circle at 18% 35%, rgba(184,215,255,.22), transparent 25%),
    radial-gradient(circle at 84% 66%, rgba(216,255,79,.11), transparent 23%),
    linear-gradient(145deg,#fbfbf8,#eff1ed);
}
.motion-flow-canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17,17,15,.033) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,17,15,.033) 1px,transparent 1px);
  background-size: 54px 54px;
  pointer-events: none;
}
.motion-path {
  position: absolute;
  z-index: 1;
  left: 13%;
  right: 13%;
  top: 48%;
  height: 2px;
  transform: translateY(-50%);
}
.motion-path i,
.motion-path b {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 999px;
}
.motion-path i { background: rgba(17,17,15,.12); }
.motion-path b {
  background: linear-gradient(90deg,var(--blue),var(--lime));
  transform: scaleX(0);
  transform-origin: left center;
}
.motion-flow-node {
  position: relative;
  z-index: 3;
  min-height: 300px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(17,17,15,.09);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 24px 58px rgba(17,17,15,.075);
  opacity: .42;
  transform: translateY(10px) scale(.99);
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
.motion-flow-node:hover {
  border-color: rgba(17,17,15,.18);
  background: rgba(255,255,255,.94);
  box-shadow: 0 30px 68px rgba(17,17,15,.1);
}
.motion-flow-node > span {
  font-size: 8px;
  font-weight: 720;
  letter-spacing: .13em;
  color: #96968f;
}
.motion-flow-node h3 {
  margin: auto 0 13px;
  font-size: clamp(31px,3.2vw,48px);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 630;
}
.motion-flow-node p {
  max-width: 310px;
  margin: 0;
  font-size: 12px;
  line-height: 1.62;
  color: var(--muted);
}
.motion-node-icon {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 38px auto 34px;
  flex: 0 0 auto;
}
.motion-icon-focus { display: grid; place-items: center; }
.motion-icon-focus i {
  position: absolute;
  border: 1px solid rgba(17,17,15,.14);
  border-radius: 50%;
  opacity: .35;
}
.motion-icon-focus i:first-child { width: 96px; height: 96px; }
.motion-icon-focus i:nth-child(2) { width: 60px; height: 60px; }
.motion-icon-focus b {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 9px rgba(216,255,79,.14);
}
.motion-icon-feedback {
  padding: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(17,17,15,.1);
  border-radius: 25px;
  background: linear-gradient(145deg,#fff,#eef1ed);
}
.motion-icon-feedback i {
  width: 12px;
  height: var(--bar);
  border-radius: 999px;
  background: #20211e;
  transform: scaleY(.08);
  transform-origin: bottom;
}
.motion-icon-feedback i:nth-child(1) { --bar: 32px; opacity: .4; }
.motion-icon-feedback i:nth-child(2) { --bar: 48px; opacity: .65; }
.motion-icon-feedback i:nth-child(3) { --bar: 64px; }
.motion-icon-feedback b {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 23px;
  height: 23px;
  border: 5px solid #f7f8f4;
  border-radius: 50%;
  background: var(--lime);
  opacity: 0;
  transform: scale(.5);
}
.motion-icon-action {
  display: grid;
  place-items: center;
  border: 1px solid rgba(17,17,15,.11);
  border-radius: 31px;
  background: #171815;
  box-shadow: 0 18px 36px rgba(17,17,15,.15);
}
.motion-icon-action i {
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
}
.motion-icon-action b {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--lime);
  opacity: 0;
  transform: scale(.55);
}
.motion-icon-action b::before,
.motion-icon-action b::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background: #171815;
  transform-origin: left center;
}
.motion-icon-action b::before { width: 8px; transform: translate(-6px,2px) rotate(43deg); }
.motion-icon-action b::after { width: 14px; transform: translate(-1px,4px) rotate(-48deg); }
.motion-confirmation {
  position: absolute;
  z-index: 8;
  right: 42px;
  bottom: 28px;
  min-width: 260px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(17,17,15,.1);
  border-radius: 17px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 22px 55px rgba(17,17,15,.12);
  opacity: 0;
  transform: translateY(12px) scale(.97);
}
.motion-confirmation > i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 6px rgba(216,255,79,.16);
}
.motion-confirmation span,
.motion-confirmation strong { display: block; }
.motion-confirmation span { font-size: 7px; color: #8a8a83; }
.motion-confirmation strong { margin-top: 3px; font-size: 10px; }
.motion-confirmation small { font-size: 7px; color: #8a8a83; }
.motion-flow-footer {
  min-height: 60px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-items: center;
  border-top: 1px solid rgba(17,17,15,.08);
  color: #85857e;
  background: rgba(255,255,255,.7);
  font-size: 8px;
  font-weight: 680;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.motion-flow-footer span:nth-child(2) { text-align: center; }
.motion-flow-footer span:last-child { text-align: right; }

/* One quick sequence. It never blocks or controls the scroll. */
.motion-flow.is-active .motion-path b { animation: motionLine 920ms var(--ease) 90ms both; }
.motion-flow.is-active .motion-flow-node { animation: motionNodeIn 480ms var(--ease) both; }
.motion-flow.is-active .motion-node-clarity { animation-delay: 40ms; }
.motion-flow.is-active .motion-node-feedback { animation-delay: 210ms; }
.motion-flow.is-active .motion-node-action { animation-delay: 380ms; }
.motion-flow.is-active .motion-icon-focus i:first-child { animation: motionRing 500ms var(--ease) 120ms both; }
.motion-flow.is-active .motion-icon-focus i:nth-child(2) { animation: motionRing 500ms var(--ease) 190ms both; }
.motion-flow.is-active .motion-icon-focus b { animation: motionPulse 420ms var(--ease) 260ms both; }
.motion-flow.is-active .motion-icon-feedback i { animation: motionBar 420ms var(--ease) both; }
.motion-flow.is-active .motion-icon-feedback i:nth-child(1) { animation-delay: 300ms; }
.motion-flow.is-active .motion-icon-feedback i:nth-child(2) { animation-delay: 350ms; }
.motion-flow.is-active .motion-icon-feedback i:nth-child(3) { animation-delay: 400ms; }
.motion-flow.is-active .motion-icon-feedback b { animation: motionBadge 360ms var(--ease) 470ms both; }
.motion-flow.is-active .motion-icon-action b { animation: motionBadge 400ms var(--ease) 570ms both; }
.motion-flow.is-active .motion-confirmation { animation: motionConfirm 460ms var(--ease) 800ms both; }
.motion-flow.is-active .motion-flow-header > div i { animation: motionStatus 760ms ease 720ms both; }
@keyframes motionLine { from { transform: scaleX(0); opacity: .45; } to { transform: scaleX(1); opacity: 1; } }
@keyframes motionNodeIn { from { opacity: .28; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes motionRing { from { opacity: .08; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes motionPulse { from { opacity: .15; transform: scale(.55); } 70% { transform: scale(1.1); } to { opacity: 1; transform: scale(1); } }
@keyframes motionBar { from { opacity: .2; transform: scaleY(.08); } to { opacity: 1; transform: scaleY(1); } }
@keyframes motionBadge { from { opacity: 0; transform: scale(.5); } 72% { transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes motionConfirm { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes motionStatus { 0% { box-shadow: 0 0 0 0 rgba(216,255,79,.18); } 55% { box-shadow: 0 0 0 8px rgba(216,255,79,.03); } 100% { box-shadow: 0 0 0 5px rgba(216,255,79,.14); } }

@media (max-width: 1050px) {
  .motion-showcase-heading { grid-template-columns: 1fr; gap: 32px; }
  .motion-showcase-intro > p { max-width: 720px; }
  .motion-flow-canvas { padding-inline: 32px; gap: 16px; }
  .motion-flow-node { padding: 20px; }
}
@media (max-width: 780px) {
  .motion-showcase.section-space-dark { padding: 94px 0; }
  .motion-showcase-heading { margin-bottom: 48px; }
  .motion-showcase-heading h2 { font-size: clamp(52px,15vw,82px); }
  .motion-flow { border-radius: 27px; }
  .motion-flow-header { padding-inline: 16px; }
  .motion-flow-header > span { display: none; }
  .motion-flow-canvas { min-height: auto; padding: 28px 18px 88px; grid-template-columns: 1fr; }
  .motion-path { display: none; }
  .motion-flow-node {
    min-height: 190px;
    display: grid;
    grid-template-columns: 38px 92px 1fr;
    grid-template-rows: auto 1fr;
    align-items: center;
    column-gap: 18px;
  }
  .motion-flow-node > span { grid-column: 1; grid-row: 1 / -1; align-self: start; margin-top: 4px; }
  .motion-node-icon { grid-column: 2; grid-row: 1 / -1; width: 82px; height: 82px; margin: 0; }
  .motion-icon-focus i:first-child { width: 82px; height: 82px; }
  .motion-icon-focus i:nth-child(2) { width: 50px; height: 50px; }
  .motion-flow-node h3 { grid-column: 3; grid-row: 1; margin: 0 0 8px; font-size: 34px; }
  .motion-flow-node p { grid-column: 3; grid-row: 2; }
  .motion-confirmation { right: 18px; bottom: 20px; min-width: min(250px,calc(100% - 36px)); }
  .motion-flow-footer { min-height: 68px; padding: 13px 16px; gap: 9px; grid-template-columns: 1fr; }
  .motion-flow-footer span,
  .motion-flow-footer span:nth-child(2),
  .motion-flow-footer span:last-child { text-align: left; }
}
@media (max-width: 520px) {
  .motion-showcase-intro > p { font-size: 15px; }
  .motion-flow-canvas { padding-inline: 12px; }
  .motion-flow-node { min-height: 210px; padding: 18px; grid-template-columns: 28px 74px 1fr; column-gap: 13px; border-radius: 20px; }
  .motion-node-icon { width: 68px; height: 68px; }
  .motion-icon-focus i:first-child { width: 68px; height: 68px; }
  .motion-icon-focus i:nth-child(2) { width: 42px; height: 42px; }
  .motion-flow-node h3 { font-size: 29px; }
  .motion-flow-node p { font-size: 11px; }
  .motion-confirmation { grid-template-columns: auto 1fr; }
  .motion-confirmation small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-replay { display: none; }
  .motion-flow *,
  .motion-flow::before,
  .motion-flow::after { animation: none !important; }
  .motion-path b { transform: scaleX(1); }
  .motion-flow-node { opacity: 1; transform: none; }
  .motion-icon-feedback i { transform: scaleY(1); }
  .motion-icon-feedback b,
  .motion-icon-action b { opacity: 1; transform: scale(1); }
  .motion-confirmation { opacity: 1; transform: none; }
}

/* --- v3.2.1 · corrected action illustration and calm ambient motion --- */
.motion-path-orb {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: -6px;
  height: 14px;
  display: block;
  border-radius: 999px;
  background: radial-gradient(circle, var(--lime) 0 4px, rgba(216,255,79,.28) 4.5px 7px, transparent 7.5px) no-repeat;
  background-position: 0 50%;
  background-size: 14px 14px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(216,255,79,.34));
}

/* Replace the fragile CSS-drawn tick with a real vector mark. */
.motion-icon-action {
  overflow: hidden;
  isolation: isolate;
}
.motion-icon-action::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 210deg, transparent 0 48%, rgba(216,255,79,.12) 54%, transparent 62% 100%);
  opacity: .78;
  transform: rotate(-34deg) scale(.8);
}
.motion-icon-action i {
  z-index: 1;
}
.motion-icon-action em {
  position: absolute;
  z-index: 1;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(216,255,79,.22);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.72);
}
.motion-action-badge {
  position: relative;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17,17,15,.09);
  border-radius: 50%;
  color: #171815;
  background: var(--lime);
  box-shadow: 0 0 0 7px rgba(216,255,79,.08), 0 14px 28px rgba(0,0,0,.18);
  opacity: .22;
  transform: scale(.72);
}
.motion-action-badge svg {
  width: 20px;
  height: 20px;
  overflow: visible;
}
.motion-action-badge path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

/* A quick opening sequence followed by tiny, GPU-friendly ambient movement. */
.motion-flow.is-active .motion-path-orb {
  animation: motionOrbTravel 5.6s cubic-bezier(.45,0,.25,1) 1.15s infinite;
}
.motion-flow.is-active .motion-icon-focus b {
  animation:
    motionPulse 420ms var(--ease) 260ms both,
    motionFocusBreathe 4.8s ease-in-out 1.35s infinite;
}
.motion-flow.is-active .motion-icon-feedback i:nth-child(1) {
  animation:
    motionBar 420ms var(--ease) 300ms both,
    motionBarBreathe 4.2s ease-in-out 1.25s infinite;
}
.motion-flow.is-active .motion-icon-feedback i:nth-child(2) {
  animation:
    motionBar 420ms var(--ease) 350ms both,
    motionBarBreathe 4.2s ease-in-out 1.48s infinite;
}
.motion-flow.is-active .motion-icon-feedback i:nth-child(3) {
  animation:
    motionBar 420ms var(--ease) 400ms both,
    motionBarBreathe 4.2s ease-in-out 1.71s infinite;
}
.motion-flow.is-active .motion-action-badge {
  animation:
    motionActionIn 480ms var(--ease) 570ms both,
    motionActionFloat 4.8s ease-in-out 1.4s infinite;
}
.motion-flow.is-active .motion-action-badge path {
  animation: motionCheckDraw 430ms var(--ease-soft) 720ms both;
}
.motion-flow.is-active .motion-icon-action em {
  animation:
    motionActionRing 560ms var(--ease) 610ms both,
    motionRingBreathe 4.8s ease-in-out 1.45s infinite;
}
.motion-flow.is-active .motion-icon-action::before {
  animation: motionActionSheen 4.8s ease-in-out 1.3s infinite;
}
.motion-flow.is-active .motion-confirmation {
  animation:
    motionConfirm 460ms var(--ease) 800ms both,
    motionToastFloat 5.2s ease-in-out 1.55s infinite;
}

@keyframes motionOrbTravel {
  0%, 5% { opacity: 0; background-position: 0 50%; }
  12% { opacity: 1; }
  76% { opacity: 1; background-position: 100% 50%; }
  84%, 100% { opacity: 0; background-position: 100% 50%; }
}
@keyframes motionFocusBreathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 9px rgba(216,255,79,.14); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 13px rgba(216,255,79,.055); }
}
@keyframes motionBarBreathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.28); }
}
@keyframes motionActionIn {
  from { opacity: 0; transform: scale(.62) rotate(-7deg); }
  72% { opacity: 1; transform: scale(1.08) rotate(1deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes motionCheckDraw {
  from { stroke-dashoffset: 20; opacity: .25; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes motionActionRing {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes motionActionFloat {
  0%, 100% { translate: 0 0; box-shadow: 0 0 0 7px rgba(216,255,79,.08), 0 14px 28px rgba(0,0,0,.18); }
  50% { translate: 0 -3px; box-shadow: 0 0 0 10px rgba(216,255,79,.035), 0 18px 34px rgba(0,0,0,.22); }
}
@keyframes motionRingBreathe {
  0%, 100% { opacity: .65; transform: scale(1); }
  50% { opacity: .18; transform: scale(1.16); }
}
@keyframes motionActionSheen {
  0%, 100% { opacity: .38; transform: rotate(-34deg) scale(.8); }
  50% { opacity: .86; transform: rotate(18deg) scale(1); }
}
@keyframes motionToastFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

@media (max-width: 780px) {
  .motion-action-badge { width: 30px; height: 30px; }
  .motion-action-badge svg { width: 18px; height: 18px; }
  .motion-icon-action em { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-path-orb { display: none; }
  .motion-action-badge { opacity: 1; transform: none; translate: none; }
  .motion-action-badge path { stroke-dashoffset: 0; }
  .motion-icon-action em { opacity: .55; transform: none; }
}


/* --- v3.2.1 · fixed action visual + smooth section motion --- */
/* The third visual is now a single, stable SVG instead of layered HTML shapes. */
.motion-icon-action {
  position: relative;
  overflow: visible;
  isolation: isolate;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17,17,15,.1);
  border-radius: 29px;
  background: linear-gradient(145deg,#1b1d19,#0d0f0c);
  box-shadow: 0 18px 38px rgba(17,17,15,.17), inset 0 1px 0 rgba(255,255,255,.055);
}
.motion-icon-action::before {
  content: "";
  position: absolute;
  inset: -12px;
  width: auto;
  aspect-ratio: auto;
  border-radius: 38px;
  background: radial-gradient(circle,rgba(216,255,79,.17),rgba(216,255,79,.045) 38%,transparent 68%);
  opacity: 0;
  transform: scale(.78);
  pointer-events: none;
}
.motion-icon-action svg {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  overflow: visible;
}
.motion-action-frame {
  fill: rgba(255,255,255,.018);
  stroke: rgba(255,255,255,.15);
  stroke-width: 1;
}
.motion-action-ring {
  fill: none;
  stroke: rgba(216,255,79,.32);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 139;
  stroke-dashoffset: 139;
  transform: rotate(-90deg);
  transform-origin: 32px 32px;
}
.motion-action-disc {
  fill: var(--lime);
  opacity: 0;
  transform: scale(.64);
  transform-origin: 32px 32px;
}
.motion-action-check {
  fill: none;
  stroke: #171815;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 31;
  stroke-dashoffset: 31;
}

/* A calm, one-time reveal followed by very subtle ambient feedback. */
.motion-flow.is-active .motion-icon-action {
  animation: motionActionTileIn 720ms var(--ease) 520ms both;
}
.motion-flow.is-active .motion-action-frame {
  animation: motionActionFrameIn 620ms var(--ease) 610ms both;
}
.motion-flow.is-active .motion-action-ring {
  animation: motionActionRingDraw 760ms var(--ease) 690ms both;
}
.motion-flow.is-active .motion-action-disc {
  animation: motionActionDiscIn 520ms var(--ease) 860ms both;
}
.motion-flow.is-active .motion-action-check {
  animation: motionActionCheckDraw 440ms var(--ease-soft) 1.02s both;
}
.motion-flow.is-active .motion-icon-action::before {
  animation: motionActionHaloSoft 6.4s ease-in-out 1.45s infinite;
}

/* Add a restrained light pass through each card when the sequence starts. */
.motion-flow-node::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg,transparent 0 36%,rgba(255,255,255,.48) 48%,transparent 60%);
  opacity: 0;
  transform: translateX(-86%);
  pointer-events: none;
}
.motion-flow-node > * { position: relative; z-index: 1; }
.motion-flow.is-active .motion-node-clarity::after { animation: motionCardLight 940ms var(--ease) 180ms both; }
.motion-flow.is-active .motion-node-feedback::after { animation: motionCardLight 940ms var(--ease) 390ms both; }
.motion-flow.is-active .motion-node-action::after { animation: motionCardLight 940ms var(--ease) 600ms both; }

@keyframes motionActionTileIn {
  from { opacity: .32; transform: translateY(9px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes motionActionFrameIn {
  from { opacity: .15; }
  to { opacity: 1; }
}
@keyframes motionActionRingDraw {
  from { stroke-dashoffset: 139; opacity: .15; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes motionActionDiscIn {
  from { opacity: 0; transform: scale(.64); }
  72% { transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes motionActionCheckDraw {
  from { stroke-dashoffset: 31; opacity: .18; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes motionActionHaloSoft {
  0%,40%,100% { opacity: 0; transform: scale(.78); }
  31% { opacity: .72; transform: scale(1); }
}
@keyframes motionCardLight {
  0% { opacity: 0; transform: translateX(-86%); }
  22% { opacity: .5; }
  100% { opacity: 0; transform: translateX(86%); }
}

@media (max-width: 780px) {
  .motion-icon-action svg { width: 62px; height: 62px; }
}
@media (max-width: 520px) {
  .motion-icon-action svg { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-action-ring,
  .motion-action-check { stroke-dashoffset: 0; opacity: 1; }
  .motion-action-disc { opacity: 1; transform: scale(1); }
  .motion-icon-action::before,
  .motion-flow-node::after { display: none; }
}

/* Pause the ambient micro-motion while this section is outside the viewport. */
.motion-flow.is-active .motion-path-orb,
.motion-flow.is-active .motion-icon-focus b,
.motion-flow.is-active .motion-icon-feedback i,
.motion-flow.is-active .motion-action-badge,
.motion-flow.is-active .motion-action-badge path,
.motion-flow.is-active .motion-icon-action em,
.motion-flow.is-active .motion-icon-action::before,
.motion-flow.is-active .motion-confirmation {
  animation-play-state: paused;
}
.motion-flow.is-active.is-in-view .motion-path-orb,
.motion-flow.is-active.is-in-view .motion-icon-focus b,
.motion-flow.is-active.is-in-view .motion-icon-feedback i,
.motion-flow.is-active.is-in-view .motion-action-badge,
.motion-flow.is-active.is-in-view .motion-action-badge path,
.motion-flow.is-active.is-in-view .motion-icon-action em,
.motion-flow.is-active.is-in-view .motion-icon-action::before,
.motion-flow.is-active.is-in-view .motion-confirmation {
  animation-play-state: running;
}


/* --- v3.2.4 · Apple-like motion refresh for the microinteraction section --- */
.motion-path-orb { display: none; }
.motion-flow-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(64% 90% at 14% 50%, rgba(184,215,255,.22), transparent 52%),
              radial-gradient(48% 76% at 86% 56%, rgba(216,255,79,.12), transparent 56%),
              linear-gradient(90deg, transparent 0%, rgba(255,255,255,.34) 48%, transparent 62%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 32% 100%;
  background-position: center, center, -40% 0;
  opacity: 0;
  pointer-events: none;
}
.motion-flow-node {
  opacity: .24;
  transform: translateY(18px) scale(.985);
  backdrop-filter: blur(8px);
}
.motion-flow-node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 0 34%, rgba(255,255,255,.42) 49%, transparent 63%);
  opacity: 0;
  transform: translateX(-90%);
  pointer-events: none;
}
.motion-flow-node > * { position: relative; z-index: 1; }
.motion-icon-focus i,
.motion-icon-feedback i,
.motion-action-frame,
.motion-action-ring,
.motion-action-disc,
.motion-action-check,
.motion-confirmation,
.motion-flow-header > div i {
  animation: none;
}
.motion-icon-focus i:first-child,
.motion-icon-focus i:nth-child(2) {
  opacity: .18;
  transform: scale(.84);
}
.motion-icon-focus b {
  transform: scale(.72);
}
.motion-icon-feedback i { transform: scaleY(.18); }
.motion-icon-feedback b {
  opacity: 0;
  transform: scale(.6);
}
.motion-action-frame { opacity: .35; }
.motion-action-ring { opacity: .18; stroke-dashoffset: 139; }
.motion-action-disc { opacity: 0; transform: scale(.7); }
.motion-action-check { opacity: 0; stroke-dashoffset: 31; }
.motion-confirmation { opacity: 0; transform: translateY(18px) scale(.98); }

.motion-flow.is-active .motion-flow-canvas::after {
  animation: appleCanvasSweep 1.45s cubic-bezier(.22,1,.36,1) both;
}
.motion-flow.is-active .motion-path b {
  animation: applePathFill 1.1s cubic-bezier(.22,1,.36,1) 90ms both;
}
.motion-flow.is-active .motion-flow-node {
  animation: appleNodeReveal 720ms cubic-bezier(.22,1,.36,1) both;
}
.motion-flow.is-active .motion-node-clarity { animation-delay: 0ms; }
.motion-flow.is-active .motion-node-feedback { animation-delay: 120ms; }
.motion-flow.is-active .motion-node-action { animation-delay: 240ms; }
.motion-flow.is-active .motion-node-clarity::after { animation: appleCardSheen 1s cubic-bezier(.22,1,.36,1) 140ms both; }
.motion-flow.is-active .motion-node-feedback::after { animation: appleCardSheen 1s cubic-bezier(.22,1,.36,1) 260ms both; }
.motion-flow.is-active .motion-node-action::after { animation: appleCardSheen 1s cubic-bezier(.22,1,.36,1) 380ms both; }
.motion-flow.is-active .motion-flow-header > div i { animation: appleDot 1s ease 820ms both; }

.motion-flow.is-active .motion-icon-focus i:first-child { animation: appleRingIn 900ms cubic-bezier(.22,1,.36,1) 160ms both; }
.motion-flow.is-active .motion-icon-focus i:nth-child(2) { animation: appleRingIn 900ms cubic-bezier(.22,1,.36,1) 240ms both; }
.motion-flow.is-active .motion-icon-focus b { animation: appleCenterIn 620ms cubic-bezier(.22,1,.36,1) 320ms both; }

.motion-flow.is-active .motion-icon-feedback i:nth-child(1) { animation: appleBarIn 560ms cubic-bezier(.22,1,.36,1) 300ms both; }
.motion-flow.is-active .motion-icon-feedback i:nth-child(2) { animation: appleBarIn 560ms cubic-bezier(.22,1,.36,1) 380ms both; }
.motion-flow.is-active .motion-icon-feedback i:nth-child(3) { animation: appleBarIn 560ms cubic-bezier(.22,1,.36,1) 460ms both; }
.motion-flow.is-active .motion-icon-feedback b { animation: appleBadgeIn 520ms cubic-bezier(.22,1,.36,1) 560ms both; }

.motion-flow.is-active .motion-icon-action { animation: appleTileIn 700ms cubic-bezier(.22,1,.36,1) 360ms both; }
.motion-flow.is-active .motion-action-frame { animation: appleFrameIn 520ms ease 470ms both; }
.motion-flow.is-active .motion-action-ring { animation: appleRingDraw 780ms cubic-bezier(.22,1,.36,1) 560ms both; }
.motion-flow.is-active .motion-action-disc { animation: appleDiscIn 520ms cubic-bezier(.22,1,.36,1) 760ms both; }
.motion-flow.is-active .motion-action-check { animation: appleCheckIn 420ms cubic-bezier(.22,1,.36,1) 900ms both; }
.motion-flow.is-active .motion-confirmation { animation: appleToastIn 680ms cubic-bezier(.22,1,.36,1) 980ms both; }

@keyframes appleCanvasSweep {
  0% { opacity: 0; background-position: center, center, -40% 0; }
  18% { opacity: 1; }
  100% { opacity: 1; background-position: center, center, 140% 0; }
}
@keyframes applePathFill {
  0% { transform: scaleX(.08); opacity: .08; }
  100% { transform: scaleX(1); opacity: 1; }
}
@keyframes appleNodeReveal {
  0% { opacity: 0; transform: translateY(18px) scale(.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes appleCardSheen {
  0% { opacity: 0; transform: translateX(-90%); }
  22% { opacity: .55; }
  100% { opacity: 0; transform: translateX(90%); }
}
@keyframes appleDot {
  0% { box-shadow: 0 0 0 0 rgba(216,255,79,.02); }
  45% { box-shadow: 0 0 0 8px rgba(216,255,79,.04); }
  100% { box-shadow: 0 0 0 5px rgba(216,255,79,.14); }
}
@keyframes appleRingIn {
  0% { opacity: 0; transform: scale(.72); }
  100% { opacity: .35; transform: scale(1); }
}
@keyframes appleCenterIn {
  0% { transform: scale(.6); opacity: .2; box-shadow: 0 0 0 0 rgba(216,255,79,.01); }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 9px rgba(216,255,79,.14); }
}
@keyframes appleBarIn {
  0% { opacity: .18; transform: scaleY(.18); }
  100% { opacity: 1; transform: scaleY(1); }
}
@keyframes appleBadgeIn {
  0% { opacity: 0; transform: scale(.55); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes appleTileIn {
  0% { opacity: .24; transform: translateY(10px) scale(.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes appleFrameIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes appleRingDraw {
  0% { stroke-dashoffset: 139; opacity: .18; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes appleDiscIn {
  0% { opacity: 0; transform: scale(.7); }
  72% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes appleCheckIn {
  0% { opacity: 0; stroke-dashoffset: 31; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes appleToastIn {
  0% { opacity: 0; transform: translateY(18px) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-flow-canvas::after,
  .motion-flow-node::after { display: none; }
  .motion-flow-node { opacity: 1; transform: none; }
  .motion-icon-focus i,
  .motion-icon-feedback i,
  .motion-action-frame,
  .motion-action-ring,
  .motion-action-disc,
  .motion-action-check,
  .motion-confirmation,
  .motion-flow-header > div i {
    animation: none !important;
  }
}

/* --- v3.2.5 · new launch-control widget and discovery visual --- */
/* Capability 04: a compact deployment control instead of the network diagram. */
.widget-launch-control {
  padding: 13px 14px 12px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 20%, rgba(216,255,79,.12), transparent 27%),
    linear-gradient(145deg,#171915,#0c0e0b);
  box-shadow: 0 20px 48px rgba(17,17,15,.16);
}
.widget-launch-control::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  pointer-events: none;
}
.launch-mini-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 6px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
}
.launch-mini-head span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.launch-mini-head span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(216,255,79,.08);
}
.launch-mini-head b {
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: rgba(255,255,255,.74);
  font-size: 6px;
  font-weight: 700;
}
.launch-mini-body {
  position: relative;
  z-index: 3;
  margin-top: 8px;
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 12px;
}
.launch-mini-ring {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
}
.launch-mini-ring > .launch-mini-ring-svg {
  position: absolute;
  inset: 0;
  width: 58px;
  height: 58px;
  overflow: visible;
  transform: rotate(-90deg);
}
.launch-mini-track,
.launch-mini-progress {
  fill: none;
  stroke-width: 2.6;
}
.launch-mini-track { stroke: rgba(255,255,255,.09); }
.launch-mini-progress {
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
}
.launch-mini-check {
  fill: none;
  stroke: var(--lime);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transform-origin: 28px 28px;
  transform: rotate(90deg);
}
.launch-mini-ring strong {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  font-size: 16px;
  font-weight: 680;
  letter-spacing: -.05em;
}
.launch-mini-stages {
  display: grid;
  gap: 7px;
}
.launch-mini-stages span {
  position: relative;
  min-height: 19px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  color: rgba(255,255,255,.58);
  background: rgba(255,255,255,.035);
  font-size: 6px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .28;
  transform: translateX(8px);
}
.launch-mini-stages span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
}
.launch-mini-stages span:last-child i {
  border-color: var(--lime);
  background: var(--lime);
}
.launch-mini-wave {
  position: absolute;
  z-index: 1;
  left: 13px;
  right: 13px;
  bottom: 8px;
  height: 12px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  opacity: .22;
}
.launch-mini-wave i {
  flex: 1;
  height: var(--h,40%);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg,var(--lime),rgba(216,255,79,.06));
  transform-origin: bottom;
}
.launch-mini-wave i:nth-child(1) { --h:35%; }
.launch-mini-wave i:nth-child(2) { --h:68%; }
.launch-mini-wave i:nth-child(3) { --h:52%; }
.capability-card.reveal.is-visible .widget-launch-control,
.capability-card:hover .widget-launch-control {
  animation: launchWidgetIn 620ms cubic-bezier(.22,1,.36,1) both;
}
.capability-card.reveal.is-visible .launch-mini-progress,
.capability-card:hover .launch-mini-progress {
  animation: launchRingDraw 860ms cubic-bezier(.22,1,.36,1) 120ms both;
}
.capability-card.reveal.is-visible .launch-mini-check,
.capability-card:hover .launch-mini-check {
  animation: launchCheckDraw 420ms cubic-bezier(.22,1,.36,1) 660ms both;
}
.capability-card.reveal.is-visible .launch-mini-stages span,
.capability-card:hover .launch-mini-stages span {
  animation: launchStageIn 440ms cubic-bezier(.22,1,.36,1) both;
}
.capability-card.reveal.is-visible .launch-mini-stages span:nth-child(1),
.capability-card:hover .launch-mini-stages span:nth-child(1) { animation-delay: 220ms; }
.capability-card.reveal.is-visible .launch-mini-stages span:nth-child(2),
.capability-card:hover .launch-mini-stages span:nth-child(2) { animation-delay: 350ms; }
.capability-card.reveal.is-visible .launch-mini-stages span:nth-child(3),
.capability-card:hover .launch-mini-stages span:nth-child(3) { animation-delay: 480ms; }
.capability-card.reveal.is-visible .launch-mini-wave i,
.capability-card:hover .launch-mini-wave i {
  animation: launchWaveIn 620ms cubic-bezier(.22,1,.36,1) 480ms both;
}
.capability-card.reveal.is-visible .launch-mini-head span i,
.capability-card:hover .launch-mini-head span i {
  animation: launchLivePulse 2.4s ease-in-out 1s infinite;
}
@keyframes launchWidgetIn {
  from { opacity: .4; transform: translateY(9px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes launchRingDraw {
  from { stroke-dashoffset: 132; opacity: .2; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes launchCheckDraw {
  from { stroke-dashoffset: 26; opacity: .15; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes launchStageIn {
  from { opacity: .15; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes launchWaveIn {
  from { opacity: .08; transform: scaleY(.15); }
  to { opacity: .22; transform: scaleY(1); }
}
@keyframes launchLivePulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(216,255,79,.08); }
  50% { box-shadow: 0 0 0 8px rgba(216,255,79,.015); }
}

/* Process 01: a discovery console with a one-pass radar and insight reveal. */
.process-scene-discovery {
  padding: 6%;
  background:
    radial-gradient(circle at 26% 42%,rgba(184,215,255,.28),transparent 34%),
    linear-gradient(145deg,#f7f7f2,#e6ece7);
}
.discovery-console {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(17,17,15,.1);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 28px 70px rgba(17,17,15,.09);
  backdrop-filter: blur(14px);
}
.discovery-console::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17,17,15,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,17,15,.028) 1px,transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
}
.discovery-console-head,
.discovery-console-foot {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #85857e;
  font-size: 7px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.discovery-console-head {
  height: 46px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(17,17,15,.08);
}
.discovery-console-head b {
  color: #707069;
  font-size: 7px;
}
.discovery-console-body {
  position: relative;
  z-index: 3;
  min-height: calc(100% - 86px);
  padding: 22px 25px 24px;
  display: grid;
  grid-template-columns: minmax(230px,.95fr) minmax(220px,.82fr);
  align-items: center;
  gap: 28px;
}
.discovery-radar-v2 {
  position: relative;
  width: min(245px,100%);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(255,255,255,.82),rgba(255,255,255,.2) 61%,transparent 62%);
}
.radar-ring-v2 {
  position: absolute;
  border: 1px solid rgba(17,17,15,.1);
  border-radius: 50%;
  opacity: .28;
  transform: scale(.78);
}
.radar-ring-v2.ring-one { inset: 8%; }
.radar-ring-v2.ring-two { inset: 25%; }
.radar-ring-v2.ring-three { inset: 41%; }
.radar-axis-v2 {
  position: absolute;
  z-index: 1;
  background: rgba(17,17,15,.08);
}
.radar-axis-v2.axis-x { left: 8%; right: 8%; top: 50%; height: 1px; }
.radar-axis-v2.axis-y { top: 8%; bottom: 8%; left: 50%; width: 1px; }
.radar-sweep-v2 {
  position: absolute;
  z-index: 2;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from -36deg,rgba(216,255,79,.48),rgba(216,255,79,.08) 16%,transparent 33% 100%);
  opacity: 0;
  transform: rotate(-80deg);
  -webkit-mask: radial-gradient(circle,transparent 0 19%,#000 20% 100%);
  mask: radial-gradient(circle,transparent 0 19%,#000 20% 100%);
}
.radar-core-v2 {
  position: relative;
  z-index: 5;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 18px 38px rgba(17,17,15,.18),0 0 0 13px rgba(216,255,79,.11);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .15;
  transform: scale(.82);
}
.radar-signal-v2 {
  position: absolute;
  z-index: 6;
  min-width: 72px;
  padding: 8px 10px;
  border: 1px solid rgba(17,17,15,.09);
  border-radius: 999px;
  color: #6f6f68;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 26px rgba(17,17,15,.07);
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px) scale(.95);
}
.radar-signal-v2.signal-a { left: -2%; top: 18%; }
.radar-signal-v2.signal-b { right: -4%; top: 25%; }
.radar-signal-v2.signal-c { right: 5%; bottom: 8%; }
.discovery-insight-v2 {
  position: relative;
  min-height: 238px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(17,17,15,.09);
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 22px 52px rgba(17,17,15,.07);
  opacity: 0;
  transform: translateX(14px);
}
.discovery-insight-v2 > span {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #85857e;
}
.discovery-insight-v2 > strong {
  max-width: 280px;
  margin: 15px 0 12px;
  font-size: clamp(26px,3vw,40px);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 650;
}
.discovery-insight-v2 > p {
  max-width: 285px;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
}
.discovery-insight-meter {
  margin-top: 24px;
  display: grid;
  gap: 7px;
}
.discovery-insight-meter i {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17,17,15,.08);
}
.discovery-insight-meter i::after {
  content: "";
  display: block;
  width: var(--meter);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--ink),var(--lime));
  transform: scaleX(0);
  transform-origin: left;
}
.discovery-console-foot {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 40px;
  border-top: 1px solid rgba(17,17,15,.08);
}
.discovery-console-foot span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.discovery-console-foot span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(216,255,79,.12);
}
.discovery-console-foot small {
  font-size: 7px;
  color: #96968f;
}
.process-scene-discovery.is-active .discovery-console {
  animation: discoveryConsoleIn 620ms cubic-bezier(.22,1,.36,1) both;
}
.process-scene-discovery.is-active .radar-ring-v2 {
  animation: discoveryRingIn 720ms cubic-bezier(.22,1,.36,1) both;
}
.process-scene-discovery.is-active .radar-ring-v2.ring-two { animation-delay: 80ms; }
.process-scene-discovery.is-active .radar-ring-v2.ring-three { animation-delay: 160ms; }
.process-scene-discovery.is-active .radar-sweep-v2 {
  animation: discoverySweepOnce 1.25s cubic-bezier(.22,1,.36,1) 180ms both;
}
.process-scene-discovery.is-active .radar-core-v2 {
  animation: discoveryCoreIn 620ms cubic-bezier(.22,1,.36,1) 300ms both;
}
.process-scene-discovery.is-active .radar-signal-v2 {
  animation: discoverySignalIn 480ms cubic-bezier(.22,1,.36,1) both;
}
.process-scene-discovery.is-active .radar-signal-v2.signal-a { animation-delay: 470ms; }
.process-scene-discovery.is-active .radar-signal-v2.signal-b { animation-delay: 610ms; }
.process-scene-discovery.is-active .radar-signal-v2.signal-c { animation-delay: 750ms; }
.process-scene-discovery.is-active .discovery-insight-v2 {
  animation: discoveryInsightIn 680ms cubic-bezier(.22,1,.36,1) 430ms both;
}
.process-scene-discovery.is-active .discovery-insight-meter i::after {
  animation: discoveryMeterIn 760ms cubic-bezier(.22,1,.36,1) both;
}
.process-scene-discovery.is-active .discovery-insight-meter i:nth-child(1)::after { animation-delay: 740ms; }
.process-scene-discovery.is-active .discovery-insight-meter i:nth-child(2)::after { animation-delay: 850ms; }
.process-scene-discovery.is-active .discovery-insight-meter i:nth-child(3)::after { animation-delay: 960ms; }
@keyframes discoveryConsoleIn {
  from { opacity: .35; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes discoveryRingIn {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: .42; transform: scale(1); }
}
@keyframes discoverySweepOnce {
  0% { opacity: 0; transform: rotate(-80deg); }
  18% { opacity: 1; }
  78% { opacity: .85; }
  100% { opacity: .12; transform: rotate(280deg); }
}
@keyframes discoveryCoreIn {
  from { opacity: .15; transform: scale(.82); }
  70% { opacity: 1; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes discoverySignalIn {
  from { opacity: 0; transform: translateY(8px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes discoveryInsightIn {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes discoveryMeterIn {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 760px) {
  .process-scene-discovery { padding: 4%; }
  .discovery-console-body {
    min-height: calc(100% - 86px);
    padding: 16px 15px 54px;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .discovery-radar-v2 { width: 168px; }
  .radar-core-v2 { width: 52px; height: 52px; border-radius: 17px; font-size: 8px; }
  .radar-signal-v2 { min-width: 60px; padding: 6px 8px; font-size: 6px; }
  .discovery-insight-v2 {
    min-height: 125px;
    padding: 16px;
  }
  .discovery-insight-v2 > strong { margin: 9px 0 7px; font-size: 25px; }
  .discovery-insight-v2 > p { display: none; }
  .discovery-insight-meter { margin-top: 12px; }
  .discovery-console-foot { left: 14px; right: 14px; }
}
@media (max-width: 520px) {
  .discovery-console-head { height: 40px; padding: 0 13px; }
  .discovery-console-body { padding-top: 10px; }
  .discovery-radar-v2 { width: 142px; }
  .radar-signal-v2.signal-a { left: -12%; }
  .radar-signal-v2.signal-b { right: -14%; }
  .discovery-insight-v2 > strong { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .widget-launch-control,
  .launch-mini-progress,
  .launch-mini-check,
  .launch-mini-stages span,
  .launch-mini-wave i,
  .launch-mini-head span i,
  .discovery-console,
  .radar-ring-v2,
  .radar-sweep-v2,
  .radar-core-v2,
  .radar-signal-v2,
  .discovery-insight-v2,
  .discovery-insight-meter i::after {
    animation: none !important;
  }
  .launch-mini-progress { stroke-dashoffset: 0; }
  .launch-mini-check { stroke-dashoffset: 0; }
  .launch-mini-stages span { opacity: 1; transform: none; }
  .radar-ring-v2 { opacity: .42; transform: scale(1); }
  .radar-sweep-v2 { opacity: .12; transform: rotate(280deg); }
  .radar-core-v2 { opacity: 1; transform: scale(1); }
  .radar-signal-v2 { opacity: 1; transform: none; }
  .discovery-insight-v2 { opacity: 1; transform: none; }
  .discovery-insight-meter i::after { transform: scaleX(1); }
}


/* --- v3.2.6 · deployment ring alignment fix --- */
.launch-mini-ring > .launch-mini-ring-svg {
  pointer-events: none;
}
.launch-mini-ring strong {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  min-width: 38px;
  margin: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  opacity: 0;
  transform: translateY(3px) scale(.94);
}
.launch-mini-ring strong small {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: .62;
}
.launch-mini-success {
  position: absolute;
  z-index: 5;
  right: -1px;
  bottom: -1px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 3px solid #10120e;
  border-radius: 50%;
  color: #10120e;
  background: var(--lime);
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
  opacity: 0;
  transform: scale(.56);
}
.launch-mini-success svg {
  position: static;
  inset: auto;
  width: 11px;
  height: 11px;
  overflow: visible;
  transform: none;
}
.launch-mini-success path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
}
.capability-card.reveal.is-visible .launch-mini-ring strong,
.capability-card:hover .launch-mini-ring strong {
  animation: launchNumberIn 430ms cubic-bezier(.22,1,.36,1) 560ms both;
}
.capability-card.reveal.is-visible .launch-mini-success,
.capability-card:hover .launch-mini-success {
  animation: launchSuccessIn 440ms cubic-bezier(.22,1,.36,1) 790ms both;
}
.capability-card.reveal.is-visible .launch-mini-success path,
.capability-card:hover .launch-mini-success path {
  animation: launchSuccessDraw 340ms cubic-bezier(.22,1,.36,1) 900ms both;
}
@keyframes launchNumberIn {
  from { opacity: 0; transform: translateY(3px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes launchSuccessIn {
  0% { opacity: 0; transform: scale(.56); }
  72% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes launchSuccessDraw {
  from { stroke-dashoffset: 17; opacity: .25; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .launch-mini-ring strong,
  .launch-mini-success {
    opacity: 1;
    transform: none;
  }
  .launch-mini-success path { stroke-dashoffset: 0; }
}

/* --- v3.2.7 · new animated interface-direction visual --- */
.process-scene-direction.direction-v3 {
  padding: 3.8%;
  background:
    radial-gradient(circle at 20% 24%,rgba(184,215,255,.34),transparent 35%),
    radial-gradient(circle at 86% 76%,rgba(216,255,79,.12),transparent 29%),
    linear-gradient(145deg,#f6f5ef,#e8ede8);
}
.direction-workbench-v3 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(17,17,15,.1);
  border-radius: 24px;
  background: rgba(255,255,255,.73);
  box-shadow: 0 28px 70px rgba(17,17,15,.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  opacity: .25;
  transform: translateY(10px) scale(.992);
}
.direction-workbench-v3::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17,17,15,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(17,17,15,.025) 1px,transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
}
.direction-workbench-v3::after {
  content: "";
  position: absolute;
  z-index: 12;
  inset: 0;
  background: linear-gradient(112deg,transparent 0 36%,rgba(255,255,255,.6) 49%,transparent 62%);
  opacity: 0;
  transform: translateX(-95%);
  pointer-events: none;
}
.direction-workbench-head,
.direction-workbench-foot {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #83837c;
  background: rgba(255,255,255,.59);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.direction-workbench-head {
  top: 0;
  height: 42px;
  border-bottom: 1px solid rgba(17,17,15,.08);
}
.direction-workbench-head b { color: #686862; font-size: 7px; }
.direction-workbench-foot {
  bottom: 0;
  height: 40px;
  border-top: 1px solid rgba(17,17,15,.08);
}
.direction-workbench-foot > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5e5e58;
}
.direction-workbench-foot > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(216,255,79,.12);
}
.direction-workbench-foot small { font-size: 7px; color: #92928b; }
.direction-workbench-body {
  position: absolute;
  z-index: 3;
  inset: 42px 0 40px;
  min-height: 0;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 170px;
  gap: 16px;
  overflow: hidden;
}
.direction-preview-v3,
.direction-system-v3 {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(17,17,15,.09);
  background: rgba(255,255,255,.83);
  box-shadow: 0 18px 42px rgba(17,17,15,.07);
}
.direction-preview-v3 {
  min-width: 0;
  border-radius: 18px;
  opacity: .25;
  transform: translateY(10px) scale(.99);
}
.direction-preview-top {
  position: relative;
  z-index: 8;
  height: 34px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(17,17,15,.08);
  color: #999992;
  background: rgba(255,255,255,.75);
  font-size: 6px;
}
.direction-preview-top > div { display: flex; gap: 5px; }
.direction-preview-top > div i {
  width: 5px;
  height: 5px;
  border: 1px solid #c4c4be;
  border-radius: 50%;
}
.direction-preview-top > span { justify-self: center; }
.direction-preview-top > b {
  justify-self: end;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  font-size: 5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.direction-preview-page {
  position: absolute;
  inset: 34px 0 0;
  overflow: hidden;
  color: #1b2925;
  background:
    radial-gradient(circle at 88% 18%,rgba(184,215,255,.5),transparent 31%),
    radial-gradient(circle at 76% 84%,rgba(216,255,79,.12),transparent 30%),
    linear-gradient(145deg,#f2f4ed,#dbe5db);
}
.direction-preview-page::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 0;
  background: linear-gradient(112deg,transparent 0 40%,rgba(255,255,255,.5) 50%,transparent 60%);
  opacity: 0;
  transform: translateX(-90%);
  pointer-events: none;
}
.direction-preview-nav {
  position: relative;
  z-index: 5;
  height: 45px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  border-bottom: 1px solid rgba(27,41,37,.08);
}
.direction-preview-nav strong {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background: var(--ink);
  font-size: 8px;
}
.direction-preview-nav > div {
  justify-self: center;
  display: flex;
  gap: 11px;
}
.direction-preview-nav > div i {
  width: 30px;
  height: 4px;
  border-radius: 999px;
  background: rgba(27,41,37,.12);
  transform: scaleX(.08);
  transform-origin: center;
}
.direction-preview-nav button {
  min-width: 64px;
  min-height: 25px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  font: inherit;
  font-size: 6px;
  font-weight: 700;
  opacity: .2;
  transform: scale(.9);
  pointer-events: none;
}
.direction-preview-hero {
  position: absolute;
  z-index: 4;
  left: 7%;
  top: 23%;
}
.direction-preview-hero small {
  display: block;
  margin-bottom: 10px;
  font-size: 5px;
  font-weight: 750;
  letter-spacing: .15em;
  color: rgba(27,41,37,.52);
  opacity: 0;
  transform: translateY(7px);
}
.direction-preview-hero h4 {
  margin: 0;
  font-family: "Iowan Old Style",Georgia,serif;
  font-size: clamp(34px,3.7vw,50px);
  line-height: .84;
  letter-spacing: -.06em;
  font-weight: 400;
  opacity: 0;
  transform: translateY(10px);
}
.direction-preview-hero h4 em { color: #466055; font-weight: 400; }
.direction-copy-v3 {
  margin-top: 14px;
  display: grid;
  gap: 6px;
}
.direction-copy-v3 i {
  display: block;
  width: 150px;
  height: 4px;
  border-radius: 999px;
  background: rgba(27,41,37,.14);
  transform: scaleX(.08);
  transform-origin: left;
}
.direction-copy-v3 i:last-child { width: 104px; }
.direction-preview-cards {
  position: absolute;
  z-index: 4;
  right: 6%;
  bottom: 7%;
  width: 45%;
  height: 62px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
}
.direction-preview-cards article {
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(27,41,37,.09);
  border-radius: 11px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 12px 28px rgba(27,41,37,.06);
  opacity: 0;
  transform: translateY(12px);
}
.direction-preview-cards article span {
  display: block;
  height: 22px;
  margin-bottom: 7px;
  border-radius: 7px;
  background: rgba(27,41,37,.09);
}
.direction-preview-cards article:nth-child(2) span { background: rgba(184,215,255,.58); }
.direction-preview-cards article:nth-child(3) span { background: rgba(216,255,79,.45); }
.direction-preview-cards article i {
  display: block;
  width: 58%;
  height: 3px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(27,41,37,.13);
}
.direction-preview-cards article i:last-child { width: 38%; }
.direction-system-v3 {
  min-height: 0;
  height: 100%;
  padding: 14px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  opacity: .2;
  transform: translateX(12px) scale(.99);
}
.direction-system-title span,
.direction-system-title strong,
.direction-type-v3 small,
.direction-type-v3 strong,
.direction-type-v3 p,
.direction-tokens-v3 small { display: block; }
.direction-system-title span,
.direction-type-v3 small,
.direction-tokens-v3 small {
  font-size: 6px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #91918a;
}
.direction-system-title strong {
  margin-top: 7px;
  font-size: 11px;
  letter-spacing: -.02em;
}
.direction-type-v3 {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(17,17,15,.08);
  border-radius: 13px;
  background: rgba(247,248,243,.92);
  opacity: 0;
  transform: translateY(8px);
}
.direction-type-v3 strong {
  margin: 8px 0 3px;
  font-family: "Iowan Old Style",Georgia,serif;
  font-size: 32px;
  line-height: .82;
  font-weight: 400;
  letter-spacing: -.06em;
}
.direction-type-v3 p { margin: 0; font-size: 7px; color: #777770; }
.direction-tokens-v3 { margin-top: 11px; }
.direction-tokens-v3 > div {
  margin-top: 7px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 5px;
}
.direction-tokens-v3 i {
  aspect-ratio: 1;
  border-radius: 8px;
  background: #151714;
  opacity: 0;
  transform: translateY(6px) scale(.86);
}
.direction-tokens-v3 i:nth-child(2) { background: #a9ceff; }
.direction-tokens-v3 i:nth-child(3) { background: #d8ff4f; }
.direction-tokens-v3 i:nth-child(4) { background: #eee2d1; }
.direction-component-v3 {
  min-height: 31px;
  margin-top: 11px;
  padding: 0 9px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  opacity: 0;
  transform: translateY(8px);
}
.direction-component-v3 > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(216,255,79,.11);
}
.direction-component-v3 span,
.direction-component-v3 b { font-size: 6px; }
.direction-component-v3 b {
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--lime);
  text-transform: uppercase;
}

.process-scene-direction.is-active .direction-workbench-v3 { animation: dirBoardIn 620ms cubic-bezier(.22,1,.36,1) both; }
.process-scene-direction.is-active .direction-workbench-v3::after { animation: dirSheen 1.1s cubic-bezier(.22,1,.36,1) 150ms both; }
.process-scene-direction.is-active .direction-preview-v3 { animation: dirPanelIn 640ms cubic-bezier(.22,1,.36,1) 80ms both; }
.process-scene-direction.is-active .direction-system-v3 { animation: dirSideIn 650ms cubic-bezier(.22,1,.36,1) 190ms both; }
.process-scene-direction.is-active .direction-preview-nav > div i { animation: dirLineIn 520ms cubic-bezier(.22,1,.36,1) both; }
.process-scene-direction.is-active .direction-preview-nav > div i:nth-child(1) { animation-delay: 250ms; }
.process-scene-direction.is-active .direction-preview-nav > div i:nth-child(2) { animation-delay: 310ms; }
.process-scene-direction.is-active .direction-preview-nav > div i:nth-child(3) { animation-delay: 370ms; }
.process-scene-direction.is-active .direction-preview-nav button { animation: dirButtonIn 500ms cubic-bezier(.22,1,.36,1) 400ms both; }
.process-scene-direction.is-active .direction-preview-hero small { animation: dirTextIn 480ms cubic-bezier(.22,1,.36,1) 300ms both; }
.process-scene-direction.is-active .direction-preview-hero h4 { animation: dirTextIn 620ms cubic-bezier(.22,1,.36,1) 360ms both; }
.process-scene-direction.is-active .direction-copy-v3 i { animation: dirLineIn 600ms cubic-bezier(.22,1,.36,1) both; }
.process-scene-direction.is-active .direction-copy-v3 i:first-child { animation-delay: 500ms; }
.process-scene-direction.is-active .direction-copy-v3 i:last-child { animation-delay: 570ms; }
.process-scene-direction.is-active .direction-preview-cards article { animation: dirCardIn 560ms cubic-bezier(.22,1,.36,1) both; }
.process-scene-direction.is-active .direction-preview-cards article:nth-child(1) { animation-delay: 540ms; }
.process-scene-direction.is-active .direction-preview-cards article:nth-child(2) { animation-delay: 620ms; }
.process-scene-direction.is-active .direction-preview-cards article:nth-child(3) { animation-delay: 700ms; }
.process-scene-direction.is-active .direction-preview-page::after { animation: dirPageSheen 1.05s cubic-bezier(.22,1,.36,1) 620ms both; }
.process-scene-direction.is-active .direction-type-v3 { animation: dirElementIn 540ms cubic-bezier(.22,1,.36,1) 400ms both; }
.process-scene-direction.is-active .direction-tokens-v3 i { animation: dirTokenIn 450ms cubic-bezier(.22,1,.36,1) both; }
.process-scene-direction.is-active .direction-tokens-v3 i:nth-child(1) { animation-delay: 520ms; }
.process-scene-direction.is-active .direction-tokens-v3 i:nth-child(2) { animation-delay: 580ms; }
.process-scene-direction.is-active .direction-tokens-v3 i:nth-child(3) { animation-delay: 640ms; }
.process-scene-direction.is-active .direction-tokens-v3 i:nth-child(4) { animation-delay: 700ms; }
.process-scene-direction.is-active .direction-component-v3 { animation: dirElementIn 540ms cubic-bezier(.22,1,.36,1) 780ms both; }
.process-scene-direction.is-active .direction-component-v3 > i { animation: dirStatusPulse 720ms ease 980ms both; }
@keyframes dirBoardIn { from { opacity:.25; transform:translateY(10px) scale(.992); } to { opacity:1; transform:none; } }
@keyframes dirSheen { 0% { opacity:0; transform:translateX(-95%); } 22% { opacity:.5; } 100% { opacity:0; transform:translateX(95%); } }
@keyframes dirPanelIn { from { opacity:.25; transform:translateY(10px) scale(.99); } to { opacity:1; transform:none; } }
@keyframes dirSideIn { from { opacity:.2; transform:translateX(12px) scale(.99); } to { opacity:1; transform:none; } }
@keyframes dirLineIn { from { opacity:.2; transform:scaleX(.08); } to { opacity:1; transform:scaleX(1); } }
@keyframes dirButtonIn { from { opacity:.2; transform:scale(.9); } 72% { opacity:1; transform:scale(1.05); } to { opacity:1; transform:scale(1); } }
@keyframes dirTextIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes dirCardIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes dirPageSheen { 0% { opacity:0; transform:translateX(-90%); } 24% { opacity:.52; } 100% { opacity:0; transform:translateX(90%); } }
@keyframes dirElementIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes dirTokenIn { from { opacity:0; transform:translateY(6px) scale(.86); } 72% { opacity:1; transform:translateY(-2px) scale(1.05); } to { opacity:1; transform:none; } }
@keyframes dirStatusPulse { 0% { box-shadow:0 0 0 0 rgba(216,255,79,.02); } 55% { box-shadow:0 0 0 8px rgba(216,255,79,.04); } 100% { box-shadow:0 0 0 4px rgba(216,255,79,.11); } }

@media (max-width: 760px) {
  .process-scene-direction.direction-v3 { padding: 3%; }
  .direction-workbench-v3 { border-radius: 20px; }
  .direction-workbench-body { padding: 11px; grid-template-columns: 1fr; }
  .direction-system-v3 {
    position: absolute;
    z-index: 7;
    right: 22px;
    bottom: 53px;
    width: 142px;
    height: auto;
    min-height: 145px;
    padding: 11px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(15px);
  }
  .direction-type-v3 { margin-top: 9px; padding: 9px; }
  .direction-type-v3 strong { font-size: 28px; }
  .direction-type-v3 p { display:none; }
  .direction-tokens-v3 { margin-top: 9px; }
  .direction-component-v3 { min-height: 28px; margin-top: 8px; }
  .direction-preview-cards { width: 52%; right: 5%; }
  .direction-preview-hero h4 { font-size: 39px; }
}
@media (max-width: 520px) {
  .direction-workbench-head { height:38px; padding-inline:13px; }
  .direction-workbench-foot { height:36px; padding-inline:13px; }
  .direction-workbench-body { inset:38px 0 36px; padding:9px; }
  .direction-preview-nav { padding-inline:12px; }
  .direction-preview-nav > div { display:none; }
  .direction-preview-nav button { min-width:58px; }
  .direction-preview-hero { left:6%; top:25%; }
  .direction-preview-hero h4 { font-size:34px; }
  .direction-copy-v3 i { width:125px; }
  .direction-copy-v3 i:last-child { width:82px; }
  .direction-preview-cards { width:58%; gap:5px; }
  .direction-preview-cards article:last-child { display:none; }
  .direction-system-v3 { right:14px; bottom:46px; width:126px; min-height:132px; }
  .direction-type-v3 { display:none; }
  .direction-tokens-v3 > div { gap:4px; }
  .direction-workbench-foot small { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .direction-workbench-v3,
  .direction-preview-v3,
  .direction-system-v3,
  .direction-preview-nav > div i,
  .direction-preview-nav button,
  .direction-preview-hero small,
  .direction-preview-hero h4,
  .direction-copy-v3 i,
  .direction-preview-cards article,
  .direction-type-v3,
  .direction-tokens-v3 i,
  .direction-component-v3 { opacity:1; transform:none; animation:none !important; }
  .direction-workbench-v3::after,
  .direction-preview-page::after { display:none; }
}

/* v3.2.7 mobile spacing refinement */
@media (max-width: 760px) {
  .process-scene-direction.direction-v3 .direction-preview-cards {
    left: 6%;
    right: auto;
    width: 46%;
  }
}


/* --- v3.2.8 · Studio principles visuals refresh --- */
.principle-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(56% 72% at 18% 24%, rgba(184,215,255,.08), transparent 54%), radial-gradient(48% 70% at 82% 78%, rgba(216,255,79,.06), transparent 58%);
  pointer-events: none;
}
.principle-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.principle-panel > * { position: relative; z-index: 1; }
.principle-visual {
  display: block;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
}

/* 01 Problem */
.principle-problem { background: linear-gradient(180deg, rgba(184,215,255,.06), rgba(255,255,255,.02)); }
.problem-focus {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  width: 112px;
  height: 112px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.problem-focus i,
.problem-focus::before,
.problem-focus::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
}
.problem-focus::before { inset: 0; }
.problem-focus::after { inset: 18px; }
.problem-focus i { inset: 36px; background: var(--lime); border: 0; box-shadow: 0 0 0 10px rgba(216,255,79,.12); }
.problem-focus b {
  position: absolute;
  bottom: -22px;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.problem-card {
  position: absolute;
  width: 210px;
  min-height: 102px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
  box-shadow: 0 28px 55px rgba(0,0,0,.16);
}
.problem-card span { display: block; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: 16px; }
.problem-card strong { display: block; font-size: 16px; line-height: 1.18; font-weight: 600; color: #fff; }
.problem-card::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, rgba(216,255,79,.34), transparent);
  left: 50%;
  transform: translateX(-50%);
  bottom: -46px;
}
.card-a { top: 20px; left: 20px; transform: rotate(-2.6deg); }
.card-b { top: 42px; right: 18px; transform: rotate(2.2deg); }
.card-c { left: 120px; bottom: 34px; transform: rotate(.6deg); }
.card-c::after { display: none; }

/* 02 Space */
.principle-space {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(184,215,255,.045), rgba(255,255,255,.02));
}
.space-frame {
  position: absolute;
  inset: 22px 110px 26px 22px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
  box-shadow: 0 24px 60px rgba(0,0,0,.14);
}
.space-top {
  display: flex;
  gap: 8px;
  padding: 18px 18px 12px;
}
.space-top i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); }
.space-nav {
  width: 34%;
  height: 8px;
  border-radius: 999px;
  margin-left: 24px;
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
}
.space-hero {
  width: calc(100% - 48px);
  height: 52px;
  margin: 22px 24px 0;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(216,255,79,.14));
}
.space-copy { display: grid; gap: 12px; padding: 18px 24px 0; }
.space-copy i { display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,.14); }
.space-copy i:nth-child(1) { width: 74%; }
.space-copy i:nth-child(2) { width: 56%; }
.space-copy i:nth-child(3) { width: 66%; }
.space-card {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 188px;
  min-height: 92px;
  border-radius: 18px;
  border: 1px solid rgba(216,255,79,.24);
  background: linear-gradient(180deg, rgba(216,255,79,.14), rgba(216,255,79,.05));
  padding: 16px 18px;
}
.space-card span { display: block; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 14px; }
.space-card b { font-size: 17px; line-height: 1.1; }
.space-note {
  position: absolute;
  right: 22px;
  top: 28px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(16,18,19,.8);
  color: rgba(255,255,255,.82);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* 03 Growth */
.principle-grow {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(184,215,255,.03));
}
.grow-track {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 42px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(216,255,79,.28));
}
.grow-track::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 6px rgba(216,255,79,.08);
}
.grow-module {
  position: absolute;
  bottom: 56px;
  width: 126px;
  border-radius: 18px 18px 14px 14px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 22px 50px rgba(0,0,0,.14);
  padding: 14px 14px 16px;
}
.grow-module::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -14px;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.18);
}
.grow-module small { display: block; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.36); margin-bottom: 10px; }
.grow-module strong { font-size: 15px; line-height: 1.18; }
.m1 { left: 34px; height: 88px; }
.m2 { left: 188px; height: 112px; }
.m3 { left: 342px; height: 136px; }
.m4 { right: 34px; height: 164px; background: linear-gradient(180deg, rgba(216,255,79,.18), rgba(216,255,79,.06)); border-color: rgba(216,255,79,.28); }

/* 04 Clear */
.principle-clear { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(216,255,79,.03)); }
.clear-card {
  position: absolute;
  top: 28px;
  width: calc(50% - 34px);
  bottom: 28px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.05);
  padding: 18px 18px 14px;
}
.clear-scope { left: 22px; }
.clear-terms { right: 22px; }
.clear-card span { display: block; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 16px; }
.clear-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.clear-card li {
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.84);
  position: relative;
}
.clear-card li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 10px;
  background: radial-gradient(circle at 50% 50%, var(--lime) 0 4px, rgba(216,255,79,.16) 4px 100%);
}
.clear-status {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 208px;
  height: 70px;
  border-radius: 18px;
  border: 1px solid rgba(216,255,79,.24);
  background: rgba(18,20,16,.88);
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 12px;
  align-content: center;
  padding: 0 18px;
}
.clear-status i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  align-self: center;
  background: radial-gradient(circle, var(--lime) 0 4px, rgba(216,255,79,.18) 4px 100%);
}
.clear-status b { font-size: 15px; }
.clear-status small { grid-column: 2; color: rgba(255,255,255,.46); margin-top: 2px; }

/* Animations for each principle tab */
.principle-panel.is-active .problem-focus { animation: principlePop 700ms var(--ease) both; }
.principle-panel.is-active .problem-card { animation: principleFloatUp 720ms var(--ease) both; }
.principle-panel.is-active .problem-card.card-a { animation-delay: 40ms; }
.principle-panel.is-active .problem-card.card-b { animation-delay: 110ms; }
.principle-panel.is-active .problem-card.card-c { animation-delay: 180ms; }
.principle-panel.is-active .problem-focus i { animation: principlePulse 1.2s ease 320ms both; }

.principle-panel.is-active .space-frame { animation: principleFloatUp 720ms var(--ease) both; }
.principle-panel.is-active .space-top i,
.principle-panel.is-active .space-copy i,
.principle-panel.is-active .space-nav,
.principle-panel.is-active .space-hero,
.principle-panel.is-active .space-card,
.principle-panel.is-active .space-note { animation: principleFadeLine 700ms var(--ease) both; }
.principle-panel.is-active .space-top i:nth-child(1) { animation-delay: 50ms; }
.principle-panel.is-active .space-top i:nth-child(2) { animation-delay: 90ms; }
.principle-panel.is-active .space-top i:nth-child(3) { animation-delay: 130ms; }
.principle-panel.is-active .space-nav { animation-delay: 160ms; }
.principle-panel.is-active .space-hero { animation-delay: 230ms; }
.principle-panel.is-active .space-copy i:nth-child(1) { animation-delay: 320ms; }
.principle-panel.is-active .space-copy i:nth-child(2) { animation-delay: 380ms; }
.principle-panel.is-active .space-copy i:nth-child(3) { animation-delay: 440ms; }
.principle-panel.is-active .space-card { animation-delay: 520ms; }
.principle-panel.is-active .space-note { animation-delay: 620ms; }

.principle-panel.is-active .grow-track { animation: principleGrowLine 720ms var(--ease) both; }
.principle-panel.is-active .grow-module { animation: principleRise 720ms var(--ease) both; }
.principle-panel.is-active .m1 { animation-delay: 40ms; }
.principle-panel.is-active .m2 { animation-delay: 120ms; }
.principle-panel.is-active .m3 { animation-delay: 200ms; }
.principle-panel.is-active .m4 { animation-delay: 280ms; }

.principle-panel.is-active .clear-card { animation: principleFloatUp 720ms var(--ease) both; }
.principle-panel.is-active .clear-scope { animation-delay: 60ms; }
.principle-panel.is-active .clear-terms { animation-delay: 150ms; }
.principle-panel.is-active .clear-card li { animation: principleFadeLine 600ms var(--ease) both; }
.principle-panel.is-active .clear-card li:nth-child(1) { animation-delay: 200ms; }
.principle-panel.is-active .clear-card li:nth-child(2) { animation-delay: 260ms; }
.principle-panel.is-active .clear-card li:nth-child(3) { animation-delay: 320ms; }
.principle-panel.is-active .clear-status { animation: principleToast 680ms var(--ease) 380ms both; }

@keyframes principleFloatUp {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes principlePop {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.92); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes principlePulse {
  0% { box-shadow: 0 0 0 0 rgba(216,255,79,.01); transform: scale(.76); }
  70% { box-shadow: 0 0 0 18px rgba(216,255,79,.06); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 10px rgba(216,255,79,.12); transform: scale(1); }
}
@keyframes principleFadeLine {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes principleGrowLine {
  from { opacity: .1; transform: scaleX(.08); transform-origin: left center; }
  to { opacity: 1; transform: scaleX(1); transform-origin: left center; }
}
@keyframes principleRise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes principleToast {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (max-width: 1100px) {
  .principle-panel h3 { max-width: 520px; }
  .problem-card { width: 180px; }
  .card-c { left: 86px; }
  .space-frame { right: 86px; }
  .grow-module { width: 110px; }
  .m1 { left: 22px; }
  .m2 { left: 156px; }
  .m3 { left: 290px; }
  .m4 { right: 22px; }
}
@media (max-width: 780px) {
  .principle-visual { border-radius: 20px; }
  .problem-card { width: 150px; min-height: 88px; padding: 14px; }
  .problem-card strong { font-size: 13px; }
  .card-a { top: 16px; left: 16px; }
  .card-b { top: 34px; right: 14px; }
  .card-c { left: 58px; bottom: 24px; }
  .problem-focus { width: 88px; height: 88px; bottom: 20px; }
  .problem-focus b { bottom: -18px; }

  .space-frame { inset: 16px 16px 16px 16px; }
  .space-card { width: 142px; right: 16px; bottom: 16px; }
  .space-note { top: auto; right: 16px; bottom: 118px; }

  .grow-track { left: 18px; right: 18px; bottom: 28px; }
  .grow-module { width: 64px; bottom: 40px; padding: 10px 8px; }
  .grow-module strong { font-size: 11px; }
  .m1 { left: 10px; height: 72px; }
  .m2 { left: 84px; height: 92px; }
  .m3 { left: 158px; height: 112px; }
  .m4 { right: 10px; height: 136px; }

  .clear-card { width: calc(50% - 20px); top: 16px; bottom: 76px; padding: 12px; }
  .clear-card li { height: 36px; font-size: 12px; padding: 0 10px; }
  .clear-status { width: 170px; bottom: 14px; height: 58px; padding: 0 14px; }
  .clear-status b { font-size: 13px; }
}


/* --- v3.2.9 · hover micro-interactions for key objects --- */
@media (hover: hover) and (pointer: fine) {
  .showcase-frame,
  .showcase-note,
  .showcase-tabs,
  .showcase-tabs button,
  .showcase-tabs button span,
  .showcase-screen .project-art,
  .value-scene-presence .presence-orb,
  .value-scene-presence .presence-card,
  .value-scene-presence .presence-card i,
  .motion-flow-node,
  .motion-node-icon,
  .motion-icon-focus i,
  .motion-icon-focus b,
  .motion-icon-feedback i,
  .motion-icon-feedback b,
  .motion-icon-action,
  .motion-icon-action svg,
  .motion-action-disc,
  .motion-action-ring,
  .motion-action-check,
  .widget-support,
  .widget-support::before,
  .support-head b,
  .widget-launch-control,
  .widget-launch-control::before,
  .launch-mini-head b,
  .launch-mini-ring,
  .launch-mini-success {
    transition: transform 320ms cubic-bezier(.22,1,.36,1), box-shadow 320ms cubic-bezier(.22,1,.36,1), border-color 320ms ease, background-color 320ms ease, opacity 240ms ease, filter 320ms ease, color 240ms ease;
    will-change: transform;
  }

  .hero-showcase:hover .showcase-frame {
    transform: translateY(-4px) scale(1.003);
    box-shadow: 0 52px 110px rgba(20,24,20,.2);
  }
  .hero-showcase:hover .showcase-screen .project-art {
    transform: scale(1.014);
    filter: saturate(1.03);
  }
  .hero-showcase:hover .showcase-note {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(17,17,15,.13);
  }
  .hero-showcase:hover .showcase-note > i {
    animation: hoverDotPulse 1.15s ease-in-out infinite;
  }
  .showcase-tabs button:hover {
    background: rgba(17,17,15,.045);
    color: #23231f;
  }
  .showcase-tabs button:hover span {
    transform: translateX(2px);
    color: #7f7f78;
  }
  .showcase-tabs button.is-active:hover {
    background: var(--ink);
    color: #fff;
  }

  .value-scene-presence:hover .presence-orb {
    transform: translate3d(-10px,-4px,0) scale(1.025);
    filter: saturate(1.04);
  }
  .value-scene-presence:hover .presence-card {
    transform: translateY(-5px);
    box-shadow: 0 26px 55px rgba(0,0,0,.18);
    border-color: rgba(255,255,255,.28);
  }
  .value-scene-presence:hover .presence-card i:nth-child(1) { animation: palettePulse 760ms cubic-bezier(.22,1,.36,1) both; }
  .value-scene-presence:hover .presence-card i:nth-child(2) { animation: palettePulse 760ms cubic-bezier(.22,1,.36,1) 80ms both; }
  .value-scene-presence:hover .presence-card i:nth-child(3) { animation: palettePulse 760ms cubic-bezier(.22,1,.36,1) 160ms both; }

  .motion-flow-node:hover {
    transform: translateY(-4px) scale(1.004);
  }
  .motion-node-clarity:hover .motion-icon-focus i:first-child {
    transform: scale(1.05);
    border-color: rgba(17,17,15,.12);
  }
  .motion-node-clarity:hover .motion-icon-focus i:nth-child(2) {
    transform: scale(1.08);
    border-color: rgba(17,17,15,.16);
  }
  .motion-node-clarity:hover .motion-icon-focus b {
    animation: hoverCenterPulse 780ms cubic-bezier(.22,1,.36,1) both;
  }
  .motion-node-feedback:hover .motion-icon-feedback i:nth-child(1) { animation: hoverBarPop 620ms cubic-bezier(.22,1,.36,1) both; }
  .motion-node-feedback:hover .motion-icon-feedback i:nth-child(2) { animation: hoverBarPop 620ms cubic-bezier(.22,1,.36,1) 70ms both; }
  .motion-node-feedback:hover .motion-icon-feedback i:nth-child(3) { animation: hoverBarPop 620ms cubic-bezier(.22,1,.36,1) 140ms both; }
  .motion-node-feedback:hover .motion-icon-feedback b {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 10px 24px rgba(216,255,79,.26);
  }
  .motion-node-action:hover .motion-icon-action {
    transform: translateY(-2px) scale(1.04);
  }
  .motion-node-action:hover .motion-icon-action::before {
    opacity: .72;
    transform: scale(1.08);
  }
  .motion-node-action:hover .motion-icon-action svg {
    transform: scale(1.05);
  }
  .motion-node-action:hover .motion-action-disc {
    filter: drop-shadow(0 0 12px rgba(216,255,79,.22));
  }
  .motion-node-action:hover .motion-action-check {
    animation: hoverCheckPop 540ms cubic-bezier(.22,1,.36,1) both;
  }

  .capability-card:hover .widget-support {
    transform: translateY(-4px);
    box-shadow: 0 26px 58px rgba(0,0,0,.2);
  }
  .capability-card:hover .widget-support::before {
    border-color: rgba(216,255,79,.18);
  }
  .capability-card:hover .support-head b {
    transform: translateY(-2px);
    color: rgba(255,255,255,.92);
  }

  .capability-card:hover .widget-launch-control {
    transform: translateY(-4px);
    box-shadow: 0 26px 58px rgba(0,0,0,.2);
  }
  .capability-card:hover .widget-launch-control::before {
    border-color: rgba(216,255,79,.18);
  }
  .capability-card:hover .launch-mini-head b {
    transform: translateY(-2px);
    color: rgba(255,255,255,.92);
  }
  .capability-card:hover .launch-mini-ring {
    transform: rotate(5deg) scale(1.02);
  }
  .capability-card:hover .launch-mini-success {
    box-shadow: 0 12px 24px rgba(0,0,0,.28), 0 0 0 8px rgba(216,255,79,.08);
  }
}

@keyframes hoverDotPulse {
  0%,100% { box-shadow: 0 0 0 5px rgba(216,255,79,.16); transform: scale(1); }
  50% { box-shadow: 0 0 0 10px rgba(216,255,79,.1); transform: scale(1.08); }
}
@keyframes palettePulse {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes hoverCenterPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 10px rgba(216,255,79,.14); }
  50% { transform: scale(1.16); box-shadow: 0 0 0 16px rgba(216,255,79,.09); }
  100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(216,255,79,.14); }
}
@keyframes hoverBarPop {
  0% { transform: scaleY(1); }
  45% { transform: scaleY(1.14); }
  100% { transform: scaleY(1); }
}
@keyframes hoverCheckPop {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-showcase:hover .showcase-frame,
  .hero-showcase:hover .showcase-screen .project-art,
  .hero-showcase:hover .showcase-note,
  .value-scene-presence:hover .presence-orb,
  .value-scene-presence:hover .presence-card,
  .motion-flow-node:hover,
  .motion-node-clarity:hover .motion-icon-focus i:first-child,
  .motion-node-clarity:hover .motion-icon-focus i:nth-child(2),
  .motion-node-feedback:hover .motion-icon-feedback b,
  .motion-node-action:hover .motion-icon-action,
  .motion-node-action:hover .motion-icon-action svg,
  .capability-card:hover .widget-support,
  .capability-card:hover .widget-launch-control,
  .capability-card:hover .launch-mini-ring,
  .capability-card:hover .launch-mini-head b,
  .capability-card:hover .support-head b {
    transform: none;
  }
  .hero-showcase:hover .showcase-note > i,
  .value-scene-presence:hover .presence-card i,
  .motion-node-clarity:hover .motion-icon-focus b,
  .motion-node-feedback:hover .motion-icon-feedback i,
  .motion-node-action:hover .motion-action-check {
    animation: none;
  }
}


/* --- v3.3.0 · alternate hover language for selected objects --- */
.widget-support,
.widget-launch-control {
  overflow: hidden;
}
.widget-support::after,
.widget-launch-control::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.06) 42%, rgba(216,255,79,.1) 52%, rgba(255,255,255,.05) 58%, transparent 82%);
  opacity: 0;
  transform: translateX(-118%);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  /* 99.9% widget: more like a soft status sweep than a lift */
  .capability-card:hover .widget-support {
    transform: none;
    box-shadow: 0 22px 46px rgba(0,0,0,.18), inset 0 0 0 1px rgba(216,255,79,.04);
    filter: saturate(1.02);
  }
  .capability-card:hover .widget-support::before {
    border-color: rgba(255,255,255,.1);
  }
  .capability-card:hover .widget-support::after {
    animation: hoverSheenPass 980ms cubic-bezier(.22,1,.36,1) both;
  }
  .capability-card:hover .widget-support .support-chart i {
    animation: hoverChartWave 760ms cubic-bezier(.22,1,.36,1) both;
  }
  .capability-card:hover .widget-support .support-chart i:nth-child(2) { animation-delay: 40ms; }
  .capability-card:hover .widget-support .support-chart i:nth-child(3) { animation-delay: 80ms; }
  .capability-card:hover .widget-support .support-chart i:nth-child(4) { animation-delay: 120ms; }
  .capability-card:hover .widget-support .support-chart i:nth-child(5) { animation-delay: 160ms; }
  .capability-card:hover .widget-support .support-chart i:nth-child(6) { animation-delay: 200ms; }
  .capability-card:hover .widget-support .support-chart i:nth-child(7) { animation-delay: 240ms; }
  .capability-card:hover .widget-support .support-chart i:nth-child(8) { animation-delay: 280ms; }
  .capability-card:hover .widget-support .support-head b {
    transform: none;
    animation: metricSettle 620ms cubic-bezier(.22,1,.36,1) both;
  }
  .capability-card:hover .widget-support .support-head span i {
    animation: statusDotCalm 1.2s ease-in-out both;
  }

  /* Deployment widget: calm confirmation / sweep instead of tilt */
  .capability-card:hover .widget-launch-control {
    transform: none;
    box-shadow: 0 22px 46px rgba(0,0,0,.18), inset 0 0 0 1px rgba(216,255,79,.04);
  }
  .capability-card:hover .widget-launch-control::before {
    border-color: rgba(255,255,255,.1);
  }
  .capability-card:hover .widget-launch-control::after {
    animation: hoverSheenPass 1s cubic-bezier(.22,1,.36,1) both;
  }
  .capability-card:hover .launch-mini-head b {
    transform: none;
    animation: metricSettle 620ms cubic-bezier(.22,1,.36,1) both;
  }
  .capability-card:hover .launch-mini-ring {
    transform: none;
    animation: deployRingSettle 900ms cubic-bezier(.22,1,.36,1) both;
  }
  .capability-card:hover .launch-mini-progress {
    animation: deployProgressSweep 980ms cubic-bezier(.22,1,.36,1) both;
  }
  .capability-card:hover .launch-mini-success {
    box-shadow: 0 10px 22px rgba(0,0,0,.24), 0 0 0 8px rgba(216,255,79,.06);
    animation: deploySuccessSettle 720ms cubic-bezier(.22,1,.36,1) both;
  }
  .capability-card:hover .launch-mini-stages span:last-child {
    animation: stageHighlight 720ms cubic-bezier(.22,1,.36,1) both;
    border-color: rgba(216,255,79,.22);
  }

  /* Perceber: focus rings breathe inward instead of popping */
  .motion-node-clarity:hover {
    transform: translateY(-2px);
  }
  .motion-node-clarity:hover .motion-icon-focus i:first-child {
    transform: none;
    border-color: rgba(17,17,15,.12);
    animation: focusOuterBreathe 1100ms cubic-bezier(.22,1,.36,1) both;
  }
  .motion-node-clarity:hover .motion-icon-focus i:nth-child(2) {
    transform: none;
    border-color: rgba(17,17,15,.14);
    animation: focusInnerBreathe 1100ms cubic-bezier(.22,1,.36,1) 70ms both;
  }
  .motion-node-clarity:hover .motion-icon-focus b {
    animation: focusCoreSettle 1100ms cubic-bezier(.22,1,.36,1) both;
  }

  /* Avançar: soft confirmation sweep instead of a pop */
  .motion-node-action:hover {
    transform: translateY(-2px);
  }
  .motion-node-action:hover .motion-icon-action {
    transform: none;
  }
  .motion-node-action:hover .motion-icon-action::before {
    opacity: .52;
    transform: scale(.96);
    animation: confirmHaloSettle 1000ms cubic-bezier(.22,1,.36,1) both;
  }
  .motion-node-action:hover .motion-icon-action svg {
    transform: none;
  }
  .motion-node-action:hover .motion-action-ring {
    animation: confirmRingSweep 900ms cubic-bezier(.22,1,.36,1) both;
  }
  .motion-node-action:hover .motion-action-disc {
    filter: none;
    animation: confirmDiscSettle 900ms cubic-bezier(.22,1,.36,1) both;
  }
  .motion-node-action:hover .motion-action-check {
    animation: confirmCheckSettle 620ms cubic-bezier(.22,1,.36,1) both;
  }
}

@keyframes hoverSheenPass {
  0% { opacity: 0; transform: translateX(-118%); }
  16% { opacity: 1; }
  100% { opacity: .05; transform: translateX(118%); }
}
@keyframes hoverChartWave {
  0% { transform: scaleY(1); filter: brightness(1); }
  35% { transform: scaleY(1.12); filter: brightness(1.06); }
  65% { transform: scaleY(.94); filter: brightness(.98); }
  100% { transform: scaleY(1); filter: brightness(1); }
}
@keyframes metricSettle {
  0% { opacity: .72; letter-spacing: -.02em; }
  50% { opacity: 1; letter-spacing: 0; }
  100% { opacity: 1; letter-spacing: -.01em; }
}
@keyframes statusDotCalm {
  0%,100% { box-shadow: 0 0 0 4px rgba(216,255,79,.08); transform: scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(216,255,79,.05); transform: scale(1.04); }
}
@keyframes deployRingSettle {
  0% { transform: scale(.96); }
  45% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes deployProgressSweep {
  0% { stroke-dashoffset: 18; opacity: .45; }
  55% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes deploySuccessSettle {
  0% { opacity: .85; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes stageHighlight {
  0% { background: rgba(216,255,79,.02); }
  45% { background: rgba(216,255,79,.12); }
  100% { background: rgba(216,255,79,.07); }
}
@keyframes focusOuterBreathe {
  0% { opacity: .3; transform: scale(1); }
  45% { opacity: .56; transform: scale(1.06); }
  100% { opacity: .38; transform: scale(1.02); }
}
@keyframes focusInnerBreathe {
  0% { opacity: .34; transform: scale(1); }
  45% { opacity: .64; transform: scale(1.08); }
  100% { opacity: .42; transform: scale(1.03); }
}
@keyframes focusCoreSettle {
  0% { transform: scale(1); box-shadow: 0 0 0 9px rgba(216,255,79,.14); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 15px rgba(216,255,79,.07); }
  100% { transform: scale(1.02); box-shadow: 0 0 0 11px rgba(216,255,79,.1); }
}
@keyframes confirmHaloSettle {
  0% { opacity: .2; transform: scale(.78); }
  45% { opacity: .62; transform: scale(1.04); }
  100% { opacity: .42; transform: scale(.96); }
}
@keyframes confirmRingSweep {
  0% { opacity: .18; stroke-dashoffset: 28; }
  55% { opacity: .74; stroke-dashoffset: 0; }
  100% { opacity: .52; stroke-dashoffset: 0; }
}
@keyframes confirmDiscSettle {
  0% { opacity: .72; transform: scale(.88); }
  45% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes confirmCheckSettle {
  0% { opacity: .72; stroke-dashoffset: 12; }
  55% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .capability-card:hover .widget-support,
  .capability-card:hover .widget-launch-control,
  .motion-node-clarity:hover,
  .motion-node-action:hover {
    transform: none;
  }
  .capability-card:hover .widget-support::after,
  .capability-card:hover .widget-launch-control::after,
  .capability-card:hover .widget-support .support-chart i,
  .capability-card:hover .widget-support .support-head b,
  .capability-card:hover .widget-support .support-head span i,
  .capability-card:hover .launch-mini-head b,
  .capability-card:hover .launch-mini-ring,
  .capability-card:hover .launch-mini-progress,
  .capability-card:hover .launch-mini-success,
  .capability-card:hover .launch-mini-stages span:last-child,
  .motion-node-clarity:hover .motion-icon-focus i:first-child,
  .motion-node-clarity:hover .motion-icon-focus i:nth-child(2),
  .motion-node-clarity:hover .motion-icon-focus b,
  .motion-node-action:hover .motion-icon-action::before,
  .motion-node-action:hover .motion-action-ring,
  .motion-node-action:hover .motion-action-disc,
  .motion-node-action:hover .motion-action-check {
    animation: none;
  }
}


/* --- v3.3.1 · hover pattern update for support + deployment widgets --- */
@media (hover: hover) and (pointer: fine) {
  /* Support widget: bars fill from left to right. */
  .capability-card:hover .widget-support .support-chart i {
    transform-origin: bottom;
    animation: supportBarFillLTR 620ms cubic-bezier(.22,1,.36,1) both;
  }
  .capability-card:hover .widget-support .support-chart i:nth-child(1) { animation-delay: 0ms; }
  .capability-card:hover .widget-support .support-chart i:nth-child(2) { animation-delay: 55ms; }
  .capability-card:hover .widget-support .support-chart i:nth-child(3) { animation-delay: 110ms; }
  .capability-card:hover .widget-support .support-chart i:nth-child(4) { animation-delay: 165ms; }
  .capability-card:hover .widget-support .support-chart i:nth-child(5) { animation-delay: 220ms; }
  .capability-card:hover .widget-support .support-chart i:nth-child(6) { animation-delay: 275ms; }
  .capability-card:hover .widget-support .support-chart i:nth-child(7) { animation-delay: 330ms; }
  .capability-card:hover .widget-support .support-chart i:nth-child(8) { animation-delay: 385ms; }

  /* Deployment widget: ring fills first, then 100% appears. */
  .capability-card:hover .launch-mini-progress {
    stroke-dashoffset: 132;
    animation: deploymentRingFill 980ms cubic-bezier(.22,1,.36,1) both;
  }
  .capability-card:hover .launch-mini-ring strong {
    animation: deploymentNumberReveal 420ms cubic-bezier(.22,1,.36,1) 860ms both;
  }
  .capability-card:hover .launch-mini-success {
    animation: launchSuccessIn 360ms cubic-bezier(.22,1,.36,1) 1.02s both;
  }
  .capability-card:hover .launch-mini-success path {
    animation: launchSuccessDraw 300ms cubic-bezier(.22,1,.36,1) 1.1s both;
  }
}

@keyframes supportBarFillLTR {
  0% {
    transform: scaleY(.12);
    opacity: .42;
    filter: brightness(.94);
  }
  60% {
    transform: scaleY(1.05);
    opacity: 1;
    filter: brightness(1.05);
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes deploymentRingFill {
  0% {
    stroke-dashoffset: 132;
    opacity: .45;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes deploymentNumberReveal {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .capability-card:hover .widget-support .support-chart i,
  .capability-card:hover .launch-mini-progress,
  .capability-card:hover .launch-mini-ring strong,
  .capability-card:hover .launch-mini-success,
  .capability-card:hover .launch-mini-success path {
    animation: none;
  }
}


/* --- v3.3.2 · complete principles section stability fix --- */
.principle-lab {
  align-items: start;
}
.principle-tabs {
  position: sticky;
  top: 118px;
}
.principle-tabs button {
  position: relative;
  min-height: 84px;
  padding: 0 14px;
  grid-template-columns: 42px minmax(0,1fr) 12px;
  gap: 16px;
  overflow: hidden;
}
.principle-tabs button span,
.principle-tabs button strong,
.principle-tabs button::after {
  position: relative;
  z-index: 1;
}
.principle-tabs button span {
  justify-self: start;
  font-variant-numeric: tabular-nums;
}
.principle-tabs button strong {
  min-width: 0;
  line-height: 1.25;
}
.principle-tabs button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(184,215,255,.11), rgba(216,255,79,.035) 64%, transparent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 260ms ease, transform 360ms var(--ease);
}
.principle-tabs button.is-active::before {
  opacity: 1;
  transform: translateX(0);
}
.principle-tabs button.is-active::after {
  animation: principleTabDotIn 420ms cubic-bezier(.22,1,.36,1) both;
}

.principle-stage {
  min-height: 700px;
  isolation: isolate;
}
.principle-panel {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(285px,1fr);
  gap: 30px;
  padding: clamp(30px,3.2vw,46px);
  transform: translateY(10px);
  transition: opacity 320ms ease, transform 440ms cubic-bezier(.22,1,.36,1), visibility 320ms;
}
.principle-panel.is-active {
  transform: translateY(0);
}
.principle-panel-copy {
  position: relative;
  z-index: 3;
  max-width: 680px;
}
.principle-panel-copy > span {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.principle-panel h3 {
  max-width: 630px;
  margin: 18px 0 14px;
  font-size: clamp(46px,4.8vw,70px);
  line-height: .91;
  letter-spacing: -.058em;
}
.principle-panel p {
  max-width: 590px;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}
.principle-visual {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 285px;
  box-sizing: border-box;
  align-self: stretch;
}

/* Reset the previous absolute layout so every principle has its own stable grid. */
.problem-card,
.problem-focus,
.space-frame,
.space-note,
.grow-track,
.grow-module,
.clear-card,
.clear-status {
  box-sizing: border-box;
}

/* 01 · Problem */
.principle-problem {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  grid-template-rows: repeat(6,minmax(0,1fr));
  gap: 12px;
  padding: 18px;
}
.problem-card {
  position: relative;
  inset: auto;
  width: auto;
  min-height: 0;
  padding: 16px 17px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: none;
}
.problem-card::after { display: none; }
.problem-card span { margin-bottom: 12px; }
.problem-card strong { font-size: clamp(13px,1.15vw,17px); }
.problem-card.card-a {
  grid-column: 1 / 5;
  grid-row: 1 / 4;
}
.problem-card.card-b {
  grid-column: 9 / 13;
  grid-row: 1 / 4;
}
.problem-card.card-c {
  grid-column: 9 / 13;
  grid-row: 4 / 7;
}
.problem-focus {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(118px,100%);
  height: auto;
  aspect-ratio: 1;
  grid-column: 5 / 9;
  grid-row: 2 / 6;
  justify-self: center;
  align-self: center;
  transform: none;
}
.problem-focus b { bottom: -20px; }

/* 02 · Space */
.principle-space {
  display: block;
  padding: 18px;
}
.space-frame {
  position: absolute;
  inset: 18px 122px 18px 18px;
}
.space-note {
  position: absolute;
  right: 20px;
  top: 22px;
  bottom: auto;
}
.space-card {
  right: 18px;
  bottom: 18px;
  width: min(188px,44%);
}

/* 03 · Growth */
.principle-grow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: end;
  gap: 13px;
  padding: 24px 22px 44px;
}
.grow-track {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 25px;
}
.grow-module {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  min-width: 0;
  padding: 14px;
  align-self: end;
}
.grow-module::after { bottom: -19px; height: 19px; }
.grow-module.m1 { height: 92px; }
.grow-module.m2 { height: 126px; }
.grow-module.m3 { height: 164px; }
.grow-module.m4 { height: 202px; }
.grow-module strong {
  display: block;
  overflow-wrap: anywhere;
}

/* 04 · Clear */
.principle-clear {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
  padding: 18px 18px 88px;
}
.clear-card {
  position: relative;
  inset: auto;
  width: auto;
  min-width: 0;
  padding: 16px;
}
.clear-card ul { gap: 9px; }
.clear-card li {
  min-width: 0;
  height: 38px;
  font-size: 12px;
  white-space: nowrap;
}
.clear-status {
  bottom: 16px;
  width: min(220px,calc(100% - 36px));
  height: 62px;
}

/* Restartable, restrained animations. The JS adds is-animating on every selection. */
.principle-panel.is-active .problem-focus,
.principle-panel.is-active .problem-card,
.principle-panel.is-active .space-frame,
.principle-panel.is-active .space-top i,
.principle-panel.is-active .space-copy i,
.principle-panel.is-active .space-nav,
.principle-panel.is-active .space-hero,
.principle-panel.is-active .space-card,
.principle-panel.is-active .space-note,
.principle-panel.is-active .grow-track,
.principle-panel.is-active .grow-module,
.principle-panel.is-active .clear-card,
.principle-panel.is-active .clear-card li,
.principle-panel.is-active .clear-status,
.principle-panel.is-active .problem-focus i {
  animation: none;
}
.principle-panel.is-active.is-animating .principle-panel-copy > span {
  animation: principleCopyIn 460ms cubic-bezier(.22,1,.36,1) both;
}
.principle-panel.is-active.is-animating .principle-panel-copy h3 {
  animation: principleCopyIn 560ms cubic-bezier(.22,1,.36,1) 45ms both;
}
.principle-panel.is-active.is-animating .principle-panel-copy p {
  animation: principleCopyIn 540ms cubic-bezier(.22,1,.36,1) 105ms both;
}
.principle-panel.is-active.is-animating .problem-card {
  animation: principleCardIn 560ms cubic-bezier(.22,1,.36,1) both;
}
.principle-panel.is-active.is-animating .problem-card.card-a { animation-delay: 100ms; }
.principle-panel.is-active.is-animating .problem-card.card-b { animation-delay: 165ms; }
.principle-panel.is-active.is-animating .problem-card.card-c { animation-delay: 230ms; }
.principle-panel.is-active.is-animating .problem-focus {
  animation: principleFocusIn 680ms cubic-bezier(.22,1,.36,1) 130ms both;
}
.principle-panel.is-active.is-animating .problem-focus i {
  animation: principleCorePulse 850ms cubic-bezier(.22,1,.36,1) 360ms both;
}
.principle-panel.is-active.is-animating .space-frame {
  animation: principleCanvasIn 620ms cubic-bezier(.22,1,.36,1) 80ms both;
}
.principle-panel.is-active.is-animating .space-top i,
.principle-panel.is-active.is-animating .space-nav,
.principle-panel.is-active.is-animating .space-hero,
.principle-panel.is-active.is-animating .space-copy i,
.principle-panel.is-active.is-animating .space-card,
.principle-panel.is-active.is-animating .space-note {
  animation: principleDetailIn 520ms cubic-bezier(.22,1,.36,1) both;
}
.principle-panel.is-active.is-animating .space-top i:nth-child(1) { animation-delay: 150ms; }
.principle-panel.is-active.is-animating .space-top i:nth-child(2) { animation-delay: 185ms; }
.principle-panel.is-active.is-animating .space-top i:nth-child(3) { animation-delay: 220ms; }
.principle-panel.is-active.is-animating .space-nav { animation-delay: 250ms; }
.principle-panel.is-active.is-animating .space-hero { animation-delay: 300ms; }
.principle-panel.is-active.is-animating .space-copy i:nth-child(1) { animation-delay: 350ms; }
.principle-panel.is-active.is-animating .space-copy i:nth-child(2) { animation-delay: 395ms; }
.principle-panel.is-active.is-animating .space-copy i:nth-child(3) { animation-delay: 440ms; }
.principle-panel.is-active.is-animating .space-card { animation-delay: 480ms; }
.principle-panel.is-active.is-animating .space-note { animation-delay: 540ms; }
.principle-panel.is-active.is-animating .grow-track {
  animation: principleTrackIn 720ms cubic-bezier(.22,1,.36,1) 100ms both;
}
.principle-panel.is-active.is-animating .grow-module {
  animation: principleModuleIn 650ms cubic-bezier(.22,1,.36,1) both;
}
.principle-panel.is-active.is-animating .grow-module.m1 { animation-delay: 120ms; }
.principle-panel.is-active.is-animating .grow-module.m2 { animation-delay: 190ms; }
.principle-panel.is-active.is-animating .grow-module.m3 { animation-delay: 260ms; }
.principle-panel.is-active.is-animating .grow-module.m4 { animation-delay: 330ms; }
.principle-panel.is-active.is-animating .clear-card {
  animation: principleCardIn 600ms cubic-bezier(.22,1,.36,1) both;
}
.principle-panel.is-active.is-animating .clear-scope { animation-delay: 110ms; }
.principle-panel.is-active.is-animating .clear-terms { animation-delay: 185ms; }
.principle-panel.is-active.is-animating .clear-card li {
  animation: principleDetailIn 470ms cubic-bezier(.22,1,.36,1) both;
}
.principle-panel.is-active.is-animating .clear-card li:nth-child(1) { animation-delay: 270ms; }
.principle-panel.is-active.is-animating .clear-card li:nth-child(2) { animation-delay: 320ms; }
.principle-panel.is-active.is-animating .clear-card li:nth-child(3) { animation-delay: 370ms; }
.principle-panel.is-active.is-animating .clear-status {
  animation: principleStatusIn 620ms cubic-bezier(.22,1,.36,1) 430ms both;
}

@keyframes principleTabDotIn {
  0% { transform: scale(.45); opacity: .2; }
  70% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes principleCopyIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes principleCardIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes principleFocusIn {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes principleCorePulse {
  0% { transform: scale(.7); box-shadow: 0 0 0 0 rgba(216,255,79,.02); }
  65% { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(216,255,79,.07); }
  100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(216,255,79,.12); }
}
@keyframes principleCanvasIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes principleDetailIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes principleTrackIn {
  from { opacity: .1; transform: scaleX(.05); transform-origin: left; }
  to { opacity: 1; transform: scaleX(1); transform-origin: left; }
}
@keyframes principleModuleIn {
  from { opacity: 0; transform: translateY(18px) scaleY(.72); transform-origin: bottom; }
  to { opacity: 1; transform: translateY(0) scaleY(1); transform-origin: bottom; }
}
@keyframes principleStatusIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (max-width: 1180px) {
  .principle-tabs {
    position: relative;
    top: auto;
  }
  .principle-stage { min-height: 720px; }
}
@media (max-width: 760px) {
  .principle-tabs button {
    min-height: 70px;
    padding-inline: 10px;
    grid-template-columns: 34px minmax(0,1fr) 10px;
    gap: 10px;
  }
  .principle-tabs button strong { font-size: 13px; }
  .principle-stage { min-height: 720px; }
  .principle-panel {
    grid-template-rows: auto minmax(300px,1fr);
    gap: 24px;
    padding: 26px;
  }
  .principle-panel h3 {
    font-size: clamp(40px,11.5vw,54px);
  }
  .principle-visual { min-height: 300px; }
  .principle-problem {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: repeat(3,minmax(0,1fr));
    padding: 14px;
  }
  .problem-card.card-a { grid-column: 1; grid-row: 1; }
  .problem-card.card-b { grid-column: 2; grid-row: 1; }
  .problem-card.card-c { grid-column: 1; grid-row: 2; }
  .problem-focus {
    grid-column: 2;
    grid-row: 2 / 4;
    width: min(94px,100%);
  }
  .problem-card { padding: 12px; }
  .problem-card span { font-size: 7px; margin-bottom: 8px; }
  .problem-card strong { font-size: 12px; }
  .space-frame { inset: 14px; }
  .space-note { right: 14px; top: 18px; }
  .space-card { right: 14px; bottom: 14px; width: 47%; }
  .principle-grow {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: repeat(2,minmax(0,1fr));
    align-items: stretch;
    padding: 16px;
  }
  .grow-track { display: none; }
  .grow-module,
  .grow-module.m1,
  .grow-module.m2,
  .grow-module.m3,
  .grow-module.m4 {
    height: auto;
    min-height: 100px;
  }
  .grow-module::after { display: none; }
  .principle-clear { padding: 14px 14px 82px; }
  .clear-card { padding: 12px; }
  .clear-card span { margin-bottom: 10px; }
  .clear-card li { height: 34px; padding-inline: 9px; font-size: 10px; }
  .clear-card li::before { width: 13px; height: 13px; margin-right: 7px; }
}
@media (max-width: 430px) {
  .principle-stage { min-height: 750px; }
  .principle-panel { padding: 22px; }
  .principle-panel p { font-size: 13px; }
  .clear-status { height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .principle-panel.is-active.is-animating *,
  .principle-tabs button.is-active::after {
    animation: none !important;
  }
}

/* --- v3.3.2 · principles section repair --- */
.principles-section .principle-lab {
  display: grid;
  grid-template-columns: minmax(280px, 370px) minmax(0, 1fr);
  gap: clamp(44px, 6vw, 96px);
  align-items: start;
}

.principles-section .principle-tabs {
  display: grid;
  align-content: start;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.14);
}

.principles-section .principle-tabs button {
  position: relative;
  box-sizing: border-box;
  min-height: 84px;
  width: 100%;
  padding: 0 10px 0 0;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 14px;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.42);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color 240ms ease, background-color 240ms ease;
}

.principles-section .principle-tabs button > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 8px;
  font-weight: 720;
  letter-spacing: .12em;
  color: rgba(255,255,255,.42);
  transition: color 240ms ease, background-color 240ms ease;
}

.principles-section .principle-tabs button > strong {
  min-width: 0;
  color: inherit;
  font-size: 15px;
  font-weight: 620;
  line-height: 1.25;
}

.principles-section .principle-tabs button::after {
  content: "";
  justify-self: center;
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

.principles-section .principle-tabs button:hover:not(.is-active) {
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.025);
}

.principles-section .principle-tabs button.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(184,215,255,.1), rgba(255,255,255,.025) 70%, transparent);
}

.principles-section .principle-tabs button.is-active > span {
  color: #fff;
}

.principles-section .principle-tabs button.is-active::after {
  border-color: var(--lime);
  background: var(--lime);
  box-shadow: 0 0 0 5px rgba(216,255,79,.1);
  transform: scale(1.02);
}

.principles-section .principle-stage {
  position: relative;
  min-height: clamp(660px, 47vw, 720px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.035));
  box-shadow: 0 42px 95px rgba(0,0,0,.25);
  isolation: isolate;
}

.principles-section .principle-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 74% at 14% 18%, rgba(184,215,255,.075), transparent 58%),
    radial-gradient(46% 64% at 88% 84%, rgba(216,255,79,.055), transparent 64%);
  pointer-events: none;
}

.principles-section .principle-panel {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: clamp(30px, 3.2vw, 46px);
  display: grid;
  grid-template-rows: auto minmax(265px, 1fr);
  gap: clamp(24px, 3vw, 34px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 360ms ease, transform 440ms cubic-bezier(.22,1,.36,1), visibility 360ms;
  background: transparent;
}

.principles-section .principle-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.principles-section .principle-panel-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.principles-section .principle-panel-copy > span {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.44);
}

.principles-section .principle-panel-copy h3 {
  max-width: 660px;
  margin: 24px 0 16px;
  font-size: clamp(46px, 4.8vw, 78px);
  line-height: .92;
  letter-spacing: -.06em;
  font-weight: 620;
}

.principles-section .principle-panel-copy p {
  max-width: 620px;
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.58);
}

.principles-section .principle-visual {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: auto;
  min-height: 270px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
}

/* Reset the older principle animations before the new sequence runs. */
.principles-section .principle-panel.is-active .problem-focus,
.principles-section .principle-panel.is-active .problem-focus i,
.principles-section .principle-panel.is-active .problem-card,
.principles-section .principle-panel.is-active .space-frame,
.principles-section .principle-panel.is-active .space-top i,
.principles-section .principle-panel.is-active .space-nav,
.principles-section .principle-panel.is-active .space-hero,
.principles-section .principle-panel.is-active .space-copy i,
.principles-section .principle-panel.is-active .space-card,
.principles-section .principle-panel.is-active .space-note,
.principles-section .principle-panel.is-active .grow-track,
.principles-section .principle-panel.is-active .grow-module,
.principles-section .principle-panel.is-active .clear-card,
.principles-section .principle-panel.is-active .clear-card li,
.principles-section .principle-panel.is-active .clear-status {
  animation: none;
}

/* 01 · Problem */
.principles-section .principle-problem {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-template-rows: minmax(112px,1fr) 100px;
  gap: 14px;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(184,215,255,.055), rgba(255,255,255,.015));
}

.principles-section .problem-card {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 17px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  box-shadow: 0 22px 48px rgba(0,0,0,.13);
  transform: none;
}

.principles-section .problem-card::after {
  display: none;
}

.principles-section .problem-card > span {
  display: block;
  margin: 0 0 14px;
  font-size: 8px;
  font-weight: 680;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

.principles-section .problem-card > strong {
  display: block;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.2;
  font-weight: 600;
  color: #fff;
}

.principles-section .problem-card.card-a { grid-column: 1; grid-row: 1; }
.principles-section .problem-card.card-c { grid-column: 2; grid-row: 1; }
.principles-section .problem-card.card-b { grid-column: 3; grid-row: 1; }

.principles-section .problem-focus {
  position: relative;
  left: auto;
  bottom: auto;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  transform: none;
}

.principles-section .problem-focus::before,
.principles-section .problem-focus::after,
.principles-section .problem-focus > i {
  content: "";
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
}

.principles-section .problem-focus::before {
  inset: 0;
  border: 1px solid rgba(255,255,255,.14);
}

.principles-section .problem-focus::after {
  inset: 15px;
  border: 1px solid rgba(255,255,255,.13);
}

.principles-section .problem-focus > i {
  inset: 29px;
  border: 0;
  background: var(--lime);
  box-shadow: 0 0 0 9px rgba(216,255,79,.11);
}

.principles-section .problem-focus > b {
  position: absolute;
  bottom: -19px;
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* 02 · Space */
.principles-section .principle-space {
  padding: 18px;
  display: block;
  background: linear-gradient(180deg, rgba(184,215,255,.04), rgba(255,255,255,.015));
}

.principles-section .space-frame {
  position: relative;
  inset: auto;
  width: calc(100% - 110px);
  height: 100%;
  min-height: 232px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  background: rgba(255,255,255,.04);
  box-shadow: 0 24px 52px rgba(0,0,0,.13);
}

.principles-section .space-top {
  display: flex;
  gap: 7px;
  padding: 16px 17px 10px;
}

.principles-section .space-top > i {
  position: relative;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
}

.principles-section .space-nav {
  width: 34%;
  height: 7px;
  margin-left: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.principles-section .space-hero {
  width: calc(100% - 40px);
  height: 54px;
  margin: 20px 20px 0;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,255,255,.045), rgba(216,255,79,.13));
}

.principles-section .space-copy {
  display: grid;
  gap: 9px;
  padding: 16px 20px 0;
}

.principles-section .space-copy > i {
  position: relative;
  display: block;
  width: auto;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
}

.principles-section .space-copy > i:nth-child(1) { width: 74%; }
.principles-section .space-copy > i:nth-child(2) { width: 56%; }
.principles-section .space-copy > i:nth-child(3) { width: 66%; }

.principles-section .space-card {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 178px;
  min-height: 82px;
  padding: 14px 16px;
  box-sizing: border-box;
  border: 1px solid rgba(216,255,79,.22);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(216,255,79,.13), rgba(216,255,79,.045));
}

.principles-section .space-card > span {
  display: block;
  margin-bottom: 12px;
  font-size: 7px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

.principles-section .space-card > b {
  font-size: 15px;
  line-height: 1.12;
}

.principles-section .space-note {
  position: absolute;
  top: 24px;
  right: 18px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(16,18,19,.82);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.principles-section .space-note > i {
  position: relative;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(216,255,79,.09);
}

/* 03 · Growth */
.principles-section .principle-grow {
  padding: 24px 24px 34px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  align-items: end;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(184,215,255,.035));
}

.principles-section .grow-track {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 21px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(216,255,79,.3));
}

.principles-section .grow-track::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 6px rgba(216,255,79,.08);
}

.principles-section .grow-module {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  min-width: 0;
  height: var(--module-h);
  padding: 13px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px 17px 12px 12px;
  background: rgba(255,255,255,.05);
  box-shadow: 0 22px 46px rgba(0,0,0,.13);
}

.principles-section .grow-module::after {
  display: none;
}

.principles-section .grow-module > small {
  font-size: 8px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.36);
}

.principles-section .grow-module > strong {
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.15;
}

.principles-section .grow-module > i {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}

.principles-section .grow-module > i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--fill);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--lime));
}

.principles-section .grow-module.m1 { --module-h: 88px; --fill: 34%; }
.principles-section .grow-module.m2 { --module-h: 118px; --fill: 52%; }
.principles-section .grow-module.m3 { --module-h: 148px; --fill: 72%; }
.principles-section .grow-module.m4 {
  --module-h: 180px;
  --fill: 100%;
  border-color: rgba(216,255,79,.25);
  background: linear-gradient(180deg, rgba(216,255,79,.17), rgba(216,255,79,.045));
}

/* 04 · Clear */
.principles-section .principle-clear {
  padding: 18px 18px 82px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(216,255,79,.028));
}

.principles-section .clear-card {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  min-width: 0;
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}

.principles-section .clear-card > span {
  display: block;
  margin-bottom: 14px;
  font-size: 8px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

.principles-section .clear-card > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.principles-section .clear-card li {
  min-height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 11px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.04);
  font-size: 12px;
}

.principles-section .clear-card li::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-right: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lime) 0 4px, rgba(216,255,79,.14) 4px 100%);
}

.principles-section .clear-status {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: min(210px, calc(100% - 36px));
  min-height: 58px;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(216,255,79,.22);
  border-radius: 17px;
  color: #fff;
  background: rgba(18,20,16,.9);
  transform: translateX(-50%);
}

.principles-section .clear-status > i {
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lime) 0 4px, rgba(216,255,79,.16) 4px 100%);
}

.principles-section .clear-status > i::before,
.principles-section .clear-status > i::after {
  display: none;
}

.principles-section .clear-status b,
.principles-section .clear-status small {
  display: block;
}

.principles-section .clear-status b {
  font-size: 13px;
}

.principles-section .clear-status small {
  margin-top: 2px;
  font-size: 9px;
  color: rgba(255,255,255,.45);
}

/* Reliable, replayable sequences. */
.principles-section .principle-panel.is-active.is-animating .principle-panel-copy {
  animation: principleCopyIn 560ms cubic-bezier(.22,1,.36,1) both;
}

.principles-section .principle-panel.is-active.is-animating .problem-card {
  animation: principleItemIn 580ms cubic-bezier(.22,1,.36,1) both;
}
.principles-section .principle-panel.is-active.is-animating .problem-card.card-a { animation-delay: 70ms; }
.principles-section .principle-panel.is-active.is-animating .problem-card.card-c { animation-delay: 130ms; }
.principles-section .principle-panel.is-active.is-animating .problem-card.card-b { animation-delay: 190ms; }
.principles-section .principle-panel.is-active.is-animating .problem-focus {
  animation: principleFocusIn 620ms cubic-bezier(.22,1,.36,1) 250ms both;
}
.principles-section .principle-panel.is-active.is-animating .problem-focus > i {
  animation: principleCoreIn 520ms cubic-bezier(.22,1,.36,1) 420ms both;
}

.principles-section .principle-panel.is-active.is-animating .space-frame {
  animation: principleItemIn 620ms cubic-bezier(.22,1,.36,1) 60ms both;
}
.principles-section .principle-panel.is-active.is-animating .space-top > i,
.principles-section .principle-panel.is-active.is-animating .space-nav,
.principles-section .principle-panel.is-active.is-animating .space-hero,
.principles-section .principle-panel.is-active.is-animating .space-copy > i,
.principles-section .principle-panel.is-active.is-animating .space-card,
.principles-section .principle-panel.is-active.is-animating .space-note {
  animation: principleLineIn 520ms cubic-bezier(.22,1,.36,1) both;
}
.principles-section .principle-panel.is-active.is-animating .space-nav { animation-delay: 170ms; }
.principles-section .principle-panel.is-active.is-animating .space-hero { animation-delay: 230ms; }
.principles-section .principle-panel.is-active.is-animating .space-copy > i:nth-child(1) { animation-delay: 300ms; }
.principles-section .principle-panel.is-active.is-animating .space-copy > i:nth-child(2) { animation-delay: 350ms; }
.principles-section .principle-panel.is-active.is-animating .space-copy > i:nth-child(3) { animation-delay: 400ms; }
.principles-section .principle-panel.is-active.is-animating .space-card { animation-delay: 470ms; }
.principles-section .principle-panel.is-active.is-animating .space-note { animation-delay: 540ms; }

.principles-section .principle-panel.is-active.is-animating .grow-track {
  animation: principleTrackIn 720ms cubic-bezier(.22,1,.36,1) 90ms both;
}
.principles-section .principle-panel.is-active.is-animating .grow-module {
  animation: principleModuleIn 620ms cubic-bezier(.22,1,.36,1) both;
}
.principles-section .principle-panel.is-active.is-animating .grow-module.m1 { animation-delay: 90ms; }
.principles-section .principle-panel.is-active.is-animating .grow-module.m2 { animation-delay: 160ms; }
.principles-section .principle-panel.is-active.is-animating .grow-module.m3 { animation-delay: 230ms; }
.principles-section .principle-panel.is-active.is-animating .grow-module.m4 { animation-delay: 300ms; }

.principles-section .principle-panel.is-active.is-animating .clear-card {
  animation: principleItemIn 620ms cubic-bezier(.22,1,.36,1) both;
}
.principles-section .principle-panel.is-active.is-animating .clear-scope { animation-delay: 80ms; }
.principles-section .principle-panel.is-active.is-animating .clear-terms { animation-delay: 150ms; }
.principles-section .principle-panel.is-active.is-animating .clear-card li {
  animation: principleLineIn 480ms cubic-bezier(.22,1,.36,1) both;
}
.principles-section .principle-panel.is-active.is-animating .clear-card li:nth-child(1) { animation-delay: 250ms; }
.principles-section .principle-panel.is-active.is-animating .clear-card li:nth-child(2) { animation-delay: 310ms; }
.principles-section .principle-panel.is-active.is-animating .clear-card li:nth-child(3) { animation-delay: 370ms; }
.principles-section .principle-panel.is-active.is-animating .clear-status {
  animation: principleStatusIn 580ms cubic-bezier(.22,1,.36,1) 430ms both;
}

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

@keyframes principleItemIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes principleFocusIn {
  from { opacity: 0; transform: scale(.84); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes principleCoreIn {
  from { opacity: .2; transform: scale(.62); box-shadow: 0 0 0 0 rgba(216,255,79,.02); }
  to { opacity: 1; transform: scale(1); box-shadow: 0 0 0 9px rgba(216,255,79,.11); }
}

@keyframes principleLineIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes principleTrackIn {
  from { opacity: .2; transform: scaleX(.08); transform-origin: left center; }
  to { opacity: 1; transform: scaleX(1); transform-origin: left center; }
}

@keyframes principleModuleIn {
  from { opacity: 0; transform: translateY(18px) scaleY(.86); transform-origin: bottom; }
  to { opacity: 1; transform: translateY(0) scaleY(1); transform-origin: bottom; }
}

@keyframes principleStatusIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (max-width: 1180px) {
  .principles-section .principle-lab {
    grid-template-columns: minmax(250px, 320px) minmax(0,1fr);
    gap: 44px;
  }

  .principles-section .principle-stage {
    min-height: 650px;
  }

  .principles-section .principle-panel-copy h3 {
    font-size: clamp(44px, 5vw, 68px);
  }
}

@media (max-width: 900px) {
  .principles-section .principle-lab {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .principles-section .principle-tabs {
    grid-template-columns: repeat(2, minmax(0,1fr));
    border-left: 1px solid rgba(255,255,255,.14);
  }

  .principles-section .principle-tabs button {
    border-right: 1px solid rgba(255,255,255,.14);
  }

  .principles-section .principle-stage {
    min-height: 680px;
  }
}

@media (max-width: 620px) {
  .principles-section .principle-tabs {
    grid-template-columns: 1fr;
  }

  .principles-section .principle-stage {
    min-height: 700px;
    border-radius: 24px;
  }

  .principles-section .principle-panel {
    padding: 24px;
    grid-template-rows: auto minmax(300px,1fr);
    gap: 24px;
  }

  .principles-section .principle-panel-copy h3 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .principles-section .principle-problem {
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-rows: repeat(2, minmax(100px,1fr));
    padding: 14px;
  }

  .principles-section .problem-card.card-a { grid-column: 1; grid-row: 1; }
  .principles-section .problem-card.card-c { grid-column: 2; grid-row: 1; }
  .principles-section .problem-card.card-b { grid-column: 1; grid-row: 2; }
  .principles-section .problem-focus { grid-column: 2; grid-row: 2; }

  .principles-section .space-frame {
    width: 100%;
  }

  .principles-section .space-note {
    top: 20px;
    right: 20px;
  }

  .principles-section .principle-grow {
    padding: 18px 14px 30px;
    gap: 8px;
  }

  .principles-section .grow-module {
    padding: 10px 8px;
  }

  .principles-section .grow-module > strong {
    font-size: 10px;
    word-break: break-word;
  }

  .principles-section .grow-module.m1 { --module-h: 82px; }
  .principles-section .grow-module.m2 { --module-h: 108px; }
  .principles-section .grow-module.m3 { --module-h: 134px; }
  .principles-section .grow-module.m4 { --module-h: 160px; }

  .principles-section .principle-clear {
    padding: 14px 14px 76px;
    gap: 10px;
  }

  .principles-section .clear-card {
    padding: 12px;
  }

  .principles-section .clear-card li {
    min-height: 36px;
    padding: 0 8px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .principles-section .principle-panel,
  .principles-section .principle-panel-copy,
  .principles-section .principle-visual *,
  .principles-section .principle-tabs button,
  .principles-section .principle-tabs button::after {
    animation: none !important;
    transition: none !important;
  }
}


/* --- v3.3.3 · final principles layout and animation correction --- */
.principles-section .principle-lab {
  align-items: start;
}
.principles-section .principle-tabs {
  position: sticky;
  top: 118px;
}
.principles-section .principle-tabs button {
  padding: 0 12px;
  grid-template-columns: 38px minmax(0,1fr) 12px;
  gap: 14px;
}
.principles-section .principle-tabs button > span {
  width: 30px;
  height: 30px;
  justify-self: start;
  font-variant-numeric: tabular-nums;
}
.principles-section .principle-tabs button > strong {
  overflow-wrap: anywhere;
}

.principles-section .principle-stage {
  min-height: 720px;
}
.principles-section .principle-panel {
  padding: clamp(30px,3vw,44px);
  grid-template-rows: auto minmax(310px,1fr);
  gap: 30px;
}
.principles-section .principle-panel-copy h3 {
  max-width: 620px;
  margin: 18px 0 14px;
  font-size: clamp(44px,4.5vw,68px);
  line-height: .92;
}
.principles-section .principle-panel-copy p {
  max-width: 600px;
}
.principles-section .principle-visual {
  min-height: 310px;
}

/* 01 · Problem: three stable cards above a centered focus state. */
.principles-section .principle-problem {
  padding: 18px;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-template-rows: minmax(145px,1fr) 118px;
  gap: 14px;
}
.principles-section .problem-card {
  grid-row: 1 !important;
  min-height: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.principles-section .problem-card.card-a { grid-column: 1 !important; }
.principles-section .problem-card.card-c { grid-column: 2 !important; }
.principles-section .problem-card.card-b { grid-column: 3 !important; }
.principles-section .problem-focus {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 92px;
  height: 92px;
  align-self: start;
  margin-top: 4px;
}
.principles-section .problem-focus > b {
  bottom: 5px;
  transform: translateY(100%);
}

/* 02 · Space: a full mock-up with a compact note, no overlap. */
.principles-section .principle-space {
  padding: 18px;
}
.principles-section .space-frame {
  width: calc(100% - 118px);
  min-height: 270px;
}
.principles-section .space-note {
  top: 24px;
  right: 18px;
}
.principles-section .space-card {
  right: 18px;
  bottom: 18px;
  width: 174px;
}

/* 03 · Growth: modules remain inside the canvas at every width. */
.principles-section .principle-grow {
  grid-template-columns: repeat(4,minmax(0,1fr));
  grid-template-rows: 1fr;
  align-items: end;
  gap: 13px;
  padding: 24px 22px 42px;
}
.principles-section .grow-track {
  left: 22px;
  right: 22px;
  bottom: 23px;
}
.principles-section .grow-module {
  position: relative;
  inset: auto;
  width: auto;
  min-width: 0;
  align-self: end;
}
.principles-section .grow-module.m1 { height: 94px; }
.principles-section .grow-module.m2 { height: 128px; }
.principles-section .grow-module.m3 { height: 164px; }
.principles-section .grow-module.m4 { height: 204px; }

/* 04 · Clear: two columns and a centered confirmation within the panel. */
.principles-section .principle-clear {
  padding: 18px 18px 84px;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.principles-section .clear-card {
  position: relative;
  inset: auto;
  width: auto;
  min-width: 0;
}
.principles-section .clear-status {
  bottom: 14px;
}

/* Remove all legacy animation assignments, then use one clean replayable sequence. */
.principles-section .principle-panel.is-active .principle-panel-copy,
.principles-section .principle-panel.is-active .problem-card,
.principles-section .principle-panel.is-active .problem-focus,
.principles-section .principle-panel.is-active .problem-focus > i,
.principles-section .principle-panel.is-active .space-frame,
.principles-section .principle-panel.is-active .space-top > i,
.principles-section .principle-panel.is-active .space-nav,
.principles-section .principle-panel.is-active .space-hero,
.principles-section .principle-panel.is-active .space-copy > i,
.principles-section .principle-panel.is-active .space-card,
.principles-section .principle-panel.is-active .space-note,
.principles-section .principle-panel.is-active .grow-track,
.principles-section .principle-panel.is-active .grow-module,
.principles-section .principle-panel.is-active .clear-card,
.principles-section .principle-panel.is-active .clear-card li,
.principles-section .principle-panel.is-active .clear-status {
  animation: none;
}
.principles-section .principle-panel.is-active.is-animating .principle-panel-copy {
  animation: plCopy 520ms cubic-bezier(.22,1,.36,1) both;
}
.principles-section .principle-panel.is-active.is-animating .problem-card {
  animation: plItem 560ms cubic-bezier(.22,1,.36,1) both;
}
.principles-section .principle-panel.is-active.is-animating .problem-card.card-a { animation-delay: 70ms; }
.principles-section .principle-panel.is-active.is-animating .problem-card.card-c { animation-delay: 130ms; }
.principles-section .principle-panel.is-active.is-animating .problem-card.card-b { animation-delay: 190ms; }
.principles-section .principle-panel.is-active.is-animating .problem-focus {
  animation: plFocus 650ms cubic-bezier(.22,1,.36,1) 240ms both;
}
.principles-section .principle-panel.is-active.is-animating .problem-focus > i {
  animation: plCore 660ms cubic-bezier(.22,1,.36,1) 390ms both;
}
.principles-section .principle-panel.is-active.is-animating .space-frame {
  animation: plCanvas 600ms cubic-bezier(.22,1,.36,1) 70ms both;
}
.principles-section .principle-panel.is-active.is-animating .space-top > i,
.principles-section .principle-panel.is-active.is-animating .space-nav,
.principles-section .principle-panel.is-active.is-animating .space-hero,
.principles-section .principle-panel.is-active.is-animating .space-copy > i,
.principles-section .principle-panel.is-active.is-animating .space-card,
.principles-section .principle-panel.is-active.is-animating .space-note {
  animation: plDetail 500ms cubic-bezier(.22,1,.36,1) both;
}
.principles-section .principle-panel.is-active.is-animating .space-nav { animation-delay: 180ms; }
.principles-section .principle-panel.is-active.is-animating .space-hero { animation-delay: 240ms; }
.principles-section .principle-panel.is-active.is-animating .space-copy > i:nth-child(1) { animation-delay: 310ms; }
.principles-section .principle-panel.is-active.is-animating .space-copy > i:nth-child(2) { animation-delay: 360ms; }
.principles-section .principle-panel.is-active.is-animating .space-copy > i:nth-child(3) { animation-delay: 410ms; }
.principles-section .principle-panel.is-active.is-animating .space-card { animation-delay: 470ms; }
.principles-section .principle-panel.is-active.is-animating .space-note { animation-delay: 530ms; }
.principles-section .principle-panel.is-active.is-animating .grow-track {
  animation: plTrack 700ms cubic-bezier(.22,1,.36,1) 80ms both;
}
.principles-section .principle-panel.is-active.is-animating .grow-module {
  animation: plModule 620ms cubic-bezier(.22,1,.36,1) both;
}
.principles-section .principle-panel.is-active.is-animating .grow-module.m1 { animation-delay: 90ms; }
.principles-section .principle-panel.is-active.is-animating .grow-module.m2 { animation-delay: 160ms; }
.principles-section .principle-panel.is-active.is-animating .grow-module.m3 { animation-delay: 230ms; }
.principles-section .principle-panel.is-active.is-animating .grow-module.m4 { animation-delay: 300ms; }
.principles-section .principle-panel.is-active.is-animating .clear-card {
  animation: plItem 580ms cubic-bezier(.22,1,.36,1) both;
}
.principles-section .principle-panel.is-active.is-animating .clear-scope { animation-delay: 90ms; }
.principles-section .principle-panel.is-active.is-animating .clear-terms { animation-delay: 160ms; }
.principles-section .principle-panel.is-active.is-animating .clear-card li {
  animation: plDetail 450ms cubic-bezier(.22,1,.36,1) both;
}
.principles-section .principle-panel.is-active.is-animating .clear-card li:nth-child(1) { animation-delay: 250ms; }
.principles-section .principle-panel.is-active.is-animating .clear-card li:nth-child(2) { animation-delay: 300ms; }
.principles-section .principle-panel.is-active.is-animating .clear-card li:nth-child(3) { animation-delay: 350ms; }
.principles-section .principle-panel.is-active.is-animating .clear-status {
  animation: plStatus 580ms cubic-bezier(.22,1,.36,1) 410ms both;
}

@keyframes plCopy {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes plItem {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes plFocus {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes plCore {
  0% { transform: scale(.68); box-shadow: 0 0 0 0 rgba(216,255,79,.02); }
  68% { transform: scale(1.08); box-shadow: 0 0 0 15px rgba(216,255,79,.065); }
  100% { transform: scale(1); box-shadow: 0 0 0 9px rgba(216,255,79,.11); }
}
@keyframes plCanvas {
  from { opacity: 0; transform: translateY(9px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes plDetail {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes plTrack {
  from { opacity: .1; transform: scaleX(.05); transform-origin: left; }
  to { opacity: 1; transform: scaleX(1); transform-origin: left; }
}
@keyframes plModule {
  from { opacity: 0; transform: translateY(16px) scaleY(.72); transform-origin: bottom; }
  to { opacity: 1; transform: translateY(0) scaleY(1); transform-origin: bottom; }
}
@keyframes plStatus {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (max-width: 1180px) {
  .principles-section .principle-tabs {
    position: relative;
    top: auto;
  }
  .principles-section .principle-stage { min-height: 730px; }
}
@media (max-width: 760px) {
  .principles-section .principle-tabs button {
    min-height: 70px;
    grid-template-columns: 34px minmax(0,1fr) 10px;
    gap: 10px;
    padding-inline: 9px;
  }
  .principles-section .principle-tabs button > strong { font-size: 13px; }
  .principles-section .principle-stage { min-height: 760px; }
  .principles-section .principle-panel {
    grid-template-rows: auto minmax(330px,1fr);
    gap: 24px;
    padding: 24px;
  }
  .principles-section .principle-panel-copy h3 {
    font-size: clamp(40px,11.5vw,54px);
  }
  .principles-section .principle-visual { min-height: 330px; }
  .principles-section .principle-problem {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: repeat(2,minmax(0,1fr));
    padding: 14px;
  }
  .principles-section .problem-card.card-a { grid-column: 1 !important; grid-row: 1 !important; }
  .principles-section .problem-card.card-b { grid-column: 2 !important; grid-row: 1 !important; }
  .principles-section .problem-card.card-c { grid-column: 1 !important; grid-row: 2 !important; }
  .principles-section .problem-focus {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center;
    width: 88px;
    height: 88px;
  }
  .principles-section .problem-card { padding: 12px; }
  .principles-section .problem-card > span { margin-bottom: 8px; font-size: 7px; }
  .principles-section .problem-card > strong { font-size: 12px; }
  .principles-section .space-frame { width: 100%; min-height: 294px; }
  .principles-section .space-note { right: 14px; top: 18px; }
  .principles-section .space-card { right: 14px; bottom: 14px; width: 48%; }
  .principles-section .principle-grow {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: repeat(2,minmax(0,1fr));
    align-items: stretch;
    padding: 16px;
  }
  .principles-section .grow-track { display: none; }
  .principles-section .grow-module,
  .principles-section .grow-module.m1,
  .principles-section .grow-module.m2,
  .principles-section .grow-module.m3,
  .principles-section .grow-module.m4 {
    height: auto;
    min-height: 112px;
  }
  .principles-section .principle-clear { padding: 14px 14px 80px; }
  .principles-section .clear-card { padding: 12px; }
  .principles-section .clear-card li { min-height: 34px; height: auto; padding: 7px 9px; font-size: 10px; white-space: normal; }
}
@media (max-width: 430px) {
  .principles-section .principle-stage { min-height: 790px; }
  .principles-section .principle-panel { padding: 20px; }
  .principles-section .principle-panel-copy p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .principles-section .principle-panel.is-active.is-animating *,
  .principles-section .principle-tabs button.is-active::after {
    animation: none !important;
  }
}

/* --- v4.0.0 · full conceptual websites --- */
.case-hero-links { display: flex; align-items: center; gap: 18px; }
.case-demo-link,
.project-demo-hub {
  min-height: 38px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17,17,15,.15);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 300ms cubic-bezier(.22,1,.36,1);
}
.case-demo-link:hover,
.project-demo-hub:hover { color: #fff; border-color: var(--ink); background: var(--ink); box-shadow: 0 16px 36px rgba(17,17,15,.14); }
.project-demo-hub { margin-top: 28px; }
.case-page .case-demo-link { background: rgba(255,255,255,.45); }
.work-card-summary::after {
  content: "Demo interativa disponível";
  width: max-content;
  margin-top: 12px;
  padding: 7px 10px;
  display: block;
  border: 1px solid rgba(17,17,15,.11);
  border-radius: 999px;
  color: #686861;
  font-size: 7px;
  font-weight: 720;
  letter-spacing: .12em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .case-hero-top { align-items: flex-start; }
  .case-hero-links { flex-direction: column; align-items: flex-end; gap: 9px; }
  .case-demo-link { min-height: 34px; padding-inline: 12px; font-size: 7px; }
}


/* =========================================================
   Projetos completos integrados — v1.0
   ========================================================= */
.project-cover{position:absolute;inset:0;overflow:hidden;background:#111}
.project-cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 800ms var(--ease),filter 500ms ease;filter:saturate(.86) contrast(1.04)}
.work-card-link:hover .project-cover img,.hero-showcase:hover .project-cover img{transform:scale(1.035);filter:saturate(1) contrast(1.05)}
.project-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,8,.02) 20%,rgba(6,8,8,.22) 55%,rgba(6,8,8,.88) 100%)}
.project-cover-copy{position:absolute;z-index:2;left:clamp(18px,3vw,34px);right:clamp(18px,3vw,34px);bottom:clamp(18px,3vw,30px);display:grid;gap:5px;color:#fff}
.project-cover-copy span,.project-cover-copy small{font-size:clamp(7px,.72vw,10px);font-weight:720;letter-spacing:.13em;text-transform:uppercase;opacity:.74}
.project-cover-copy strong{max-width:14ch;font-size:clamp(28px,4vw,64px);line-height:.92;letter-spacing:-.055em;font-weight:650}
.project-cover--casa-serena img{object-position:center 48%}.project-cover--volt img{object-position:center 36%}.project-cover--orbe img{object-position:center 50%}.project-cover--pulse img{object-position:center 45%}.project-cover--atlantico img{object-position:center 43%}
.case-hero-art .project-cover{border-radius:var(--radius-lg)}
.next-case-art .project-cover{border-radius:18px}.next-case-art .project-cover-copy strong{font-size:clamp(22px,3vw,42px)}
.showcase-screen .project-cover{position:absolute;inset:0;border-radius:inherit}.showcase-screen .project-cover-copy strong{font-size:clamp(31px,4.2vw,66px)}
.live-demo-browser{height:690px;padding-top:45px;background:#fff}
.live-demo-browser iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.live-demo-browser .ui-browser-top a{position:absolute;right:15px;color:#555;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.live-demo-phone{width:270px;height:600px;min-height:600px;padding:20px 8px 9px;background:#0c0c0c}
.live-demo-phone iframe{display:block;width:100%;height:100%;border:0;border-radius:31px;background:#fff}
.live-demo-phone .phone-island{z-index:4;pointer-events:none}
.case-ui-stage[data-device-focus="desktop"] .live-demo-phone iframe,.case-ui-stage[data-device-focus="mobile"] .live-demo-browser iframe{pointer-events:none}
.case-ui-stage[data-device-focus="all"] iframe,.case-ui-stage[data-device-focus="desktop"] .live-demo-browser iframe,.case-ui-stage[data-device-focus="mobile"] .live-demo-phone iframe{pointer-events:auto}
@media(max-width:1024px){.live-demo-browser{height:610px}.live-demo-phone{width:245px;height:560px;min-height:560px}}
@media(max-width:760px){.case-ui-stage{gap:42px}.live-demo-browser{height:520px}.live-demo-phone{width:255px;height:570px;min-height:570px}.project-cover-copy strong{font-size:clamp(25px,8vw,42px)}}

/* Keep the desktop demo above the responsive breakpoints of all five projects. */
@media (min-width: 1100px) {
  .case-ui-stage {
    width: min(1500px, calc(100% - 40px));
    max-width: none;
    grid-template-columns: minmax(0, 1fr) 245px;
    gap: 28px;
  }
  .live-demo-phone {
    width: 245px;
  }
}

/* =========================================================
   Embedded mobile demo viewport fix — v1.1
   The phone mockup now renders each site at a realistic 390px
   mobile viewport and scales it into the visual device frame.
   ========================================================= */
.live-demo-phone{
  --demo-phone-viewport-width:390px;
  --demo-phone-scale:.6512820513;
  overflow:hidden;
}
.live-demo-phone iframe{
  width:var(--demo-phone-viewport-width);
  height:878px;
  max-width:none;
  border-radius:31px;
  transform:scale(var(--demo-phone-scale));
  transform-origin:top left;
}
@media(max-width:1024px){
  .live-demo-phone{
    --demo-phone-scale:.5871794872;
  }
  .live-demo-phone iframe{height:905px}
}
@media(max-width:760px){
  .live-demo-phone{
    --demo-phone-scale:.6128205128;
  }
  .live-demo-phone iframe{height:932px}
}


/* =========================================================
   Embedded mobile demo viewport correction — v1.2
   The desktop case-study grid narrows the phone shell to 245px.
   Match the iframe scale to the actual inner width (229px),
   preserving a real 390px mobile layout without horizontal clipping.
   ========================================================= */
@media (min-width: 1100px) {
  .live-demo-phone {
    --demo-phone-scale: .5871794872;
  }
  .live-demo-phone iframe {
    height: 973px;
  }
}


/* =========================================================
   Embedded mobile demo — definitive fit correction v1.3
   Width includes the 7px device border. These fallback ratios
   use the actual content box, not only the declared shell width.
   JavaScript below recalculates them whenever the shell resizes.
   ========================================================= */
.live-demo-phone{
  --demo-phone-viewport-width:390px;
  --demo-phone-scale:.6153846154;
}
.live-demo-phone iframe{
  width:var(--demo-phone-viewport-width);
  height:905px;
  max-width:none;
  margin:0;
  transform:scale(var(--demo-phone-scale));
  transform-origin:top left;
}
@media (min-width:1100px){
  .live-demo-phone{--demo-phone-scale:.5512820513}
  .live-demo-phone iframe{height:1011px}
}
@media (max-width:1024px){
  .live-demo-phone{--demo-phone-scale:.5512820513}
  .live-demo-phone iframe{height:938px}
}
@media (max-width:760px){
  .live-demo-phone{--demo-phone-scale:.5769230769}
  .live-demo-phone iframe{height:914px}
}

/* =========================================================
   Embedded mobile demo shell refinement — v1.4
   Make the live iframe fill the whole inner glass area of the
   phone shell, clipped to the iPhone-like rounded corners.
   ========================================================= */
.live-demo-phone{
  position:relative;
  padding:0 !important;
  overflow:hidden;
  background:#101010 !important;
}
.live-demo-phone iframe{
  position:absolute;
  inset:0;
  display:block;
  margin:0;
  border:0;
  border-radius:36px;
  background:#fff;
  box-shadow:none;
}
.live-demo-phone .phone-island{
  top:10px;
  left:50%;
  width:72px;
  height:19px;
  z-index:8;
  pointer-events:none;
}
@media (max-width:760px){
  .live-demo-phone iframe{
    border-radius:34px;
  }
}