/* GENERATED by scripts/scope-living-landing-css.mjs — do not edit by hand.
   Source: public/site/algox-living-v50.css. Every rule scoped under .living-site
   so the homepage CSS cannot leak to other Next.js routes. */
.living-site{
  --font-geist-sans: var(--font-inter, "Hanken Grotesk", Inter, "Segoe UI", Arial, sans-serif);
  --font-geist-mono: var(--font-vt323, "JetBrains Mono", "Cascadia Code", Consolas, monospace);
  --ink: #f7f9ff;
  --soft: #b4bfd6;
  --muted: #74819c;
  --line: rgba(172, 205, 255, 0.16);
  --line-hot: rgba(108, 226, 255, 0.46);
  --violet: #7b38ff;
  --blue: #315dff;
  --cyan: #35dcff;
  --page: #01030a;
  --surface: rgba(5, 9, 23, 0.73);
  --ease: cubic-bezier(0.2, 0.76, 0.2, 1);
  --blade-glass-bg:
    radial-gradient(circle at 18% 12%, rgba(171, 147, 255, 0.23), transparent 38%),
    linear-gradient(135deg, rgba(93, 47, 213, 0.3), rgba(26, 102, 191, 0.2) 70%, rgba(21, 171, 208, 0.17)),
    rgba(5, 10, 25, 0.48);
  --blade-glass-shadow: inset 0 1px rgba(255, 255, 255, 0.14), inset 0 -13px 28px rgba(3, 7, 20, 0.18), 0 14px 35px rgba(8, 23, 72, 0.3);
}
.living-site *,.living-site{ box-sizing: border-box; }
.living-site{
  scroll-behavior: smooth;
  background: var(--page);
}
.living-site{
  margin: 0;
  overflow-x:clip;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-geist-sans), Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.living-site a{ color: inherit; text-decoration: none; }
.living-site button,.living-site a{ -webkit-tap-highlight-color: transparent; }
.living-site button:focus-visible,.living-site a:focus-visible{
  outline: 2px solid #78e8ff;
  outline-offset: 3px;
}
.living-site .site-shell{ min-width: 320px; background: var(--page); }
.living-site .hero{
  --card-w: 276px;
  --card-h: 226px;
  --moe-scene-x: 52vw;
  --moe-scene-y: 34svh;
  --seraph-scene-x: 30vw;
  --seraph-scene-y: 80svh;
  --price-scene-x: 84vw;
  --price-scene-y: 57svh;
  position: relative;
  min-height: max(720px, 100svh);
  overflow: hidden;
  isolation: isolate;
  background: #01030a;
}
.living-site .hero::after{
  position: absolute;
  z-index: 11;
  inset: 0;
  content: "";
  opacity: 0.19;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.living-site .hero-image,.living-site .hero-x-preview,.living-site .living-market-field,.living-site .hero-vignette,.living-site .hero-guides{
  position: absolute;
  inset: 0;
}
.living-site .hero-image{
  z-index: 0;
  /* Project-owned edit of electric-x-terrain.png: X and placeholder frames removed. */
  background-image: url("/deep-space-terrain-v51.webp");
  background-position: center;
  background-size: cover;
  filter: saturate(1.08) contrast(1.05) brightness(0.95);
  transform: scale(1.018);
  animation: terrain-arrive 1.7s var(--ease) both, terrain-breathe 12s ease-in-out 1.7s infinite alternate;
  will-change: transform, filter;
}
.living-site .hero-x-preview{
  z-index: 6;
  opacity: 1;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 520ms var(--ease);
}
.living-site .hero-x-preview img{
  position: absolute;
  left: 60.5%;
  top: 55%;
  width: max(100vw, 177.78svh);
  max-width: none;
  height: auto;
  filter: saturate(1.08) contrast(1.05) brightness(0.95);
  transform: translate(-69.4%, -55.2%) scale(1.018);
  transform-origin: 69.4% 55.2%;
  animation: preview-x-breathe 6.8s ease-in-out infinite alternate;
  will-change: transform;
}
.living-site .hero[data-field-state="interactive"] .hero-x-preview{ opacity: 0; }
@keyframes preview-x-breathe{
  from { transform: translate(-69.4%, -55.2%) scale(1.014); }
  to { transform: translate(-69.4%, -55.2%) scale(1.026); }
}
.living-site .hero-vignette{
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 68% 55%, rgba(46, 90, 255, 0.02) 0 14%, rgba(1, 3, 10, 0.18) 44%, transparent 65%),
    linear-gradient(90deg, rgba(1, 3, 10, 0.94) 0%, rgba(1, 3, 10, 0.62) 31%, rgba(1, 3, 10, 0.07) 57%, rgba(1, 3, 10, 0.2) 100%),
    linear-gradient(180deg, rgba(1, 3, 10, 0.36), transparent 24%, transparent 68%, rgba(1, 3, 10, 0.86) 100%);
}
.living-site .hero-guides{
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}
.living-site .hero-guides i{ border-left: 1px solid rgba(155, 186, 255, 0.04); }
.living-site .hero-guides i:last-child{ border-right: 1px solid rgba(155, 186, 255, 0.04); }
.living-site .living-market-field{ z-index: 6; pointer-events: none; }
.living-site .living-market-field canvas{
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 520ms var(--ease);
}
.living-site .hero[data-field-state="interactive"] .living-market-field canvas{ opacity: 1; }
.living-site .field-signs{
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}
.living-site .field-sign{
  --callout-label-x: 60%;
  --callout-label-y: 17%;
  --callout-leader-x: -47px;
  --callout-leader-y: 5px;
  --callout-leader-length: 38px;
  --callout-leader-angle: 0rad;
  --callout-node-x: -51px;
  --callout-node-y: 1px;
  position: absolute;
  top: var(--callout-label-y);
  left: var(--callout-label-x);
  display: grid;
  gap: 3px;
  margin: 0;
  color: rgba(191, 210, 239, 0.6);
  font-family: var(--font-geist-mono), monospace;
  font-size: 7px;
  letter-spacing: 0.13em;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(50, 151, 255, 0.5);
}
.living-site .field-sign strong{
  color: rgba(235, 243, 255, 0.86);
  font-size: 9px;
  font-weight: 560;
  letter-spacing: 0.08em;
}
.living-site .field-sign::before{
  position: absolute;
  top: var(--callout-leader-y);
  left: var(--callout-leader-x);
  width: var(--callout-leader-length);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(95, 203, 255, 0.62), rgba(95, 203, 255, 0.1));
  transform: rotate(var(--callout-leader-angle));
  transform-origin: left center;
}
.living-site .field-sign::after{
  position: absolute;
  top: var(--callout-node-y);
  left: var(--callout-node-x);
  width: 7px;
  height: 7px;
  content: "";
  border: 1px solid rgba(102, 213, 255, 0.72);
  border-radius: 50%;
  background: radial-gradient(circle, #d9fbff 0 18%, rgba(75, 207, 255, 0.72) 20% 38%, rgba(14, 34, 90, 0.44) 41% 100%);
  box-shadow: 0 0 5px rgba(141, 240, 255, 0.92), 0 0 13px rgba(53, 220, 255, 0.48);
}
.living-site .sign-oracle{
  --callout-label-x: calc(60.5vw + max(22.4vw, 39.82svh) - 132px);
  --callout-label-y: calc(55svh - max(22.89vw, 40.7svh) - 42px);
  --callout-leader-x: 93px;
  --callout-leader-y: 7px;
  --callout-leader-length: 52px;
  --callout-leader-angle: 0.732rad;
  --callout-node-x: 128px;
  --callout-node-y: 38px;
}
.living-site .sign-helix{
  --callout-label-x: calc(60.5vw + max(23.3vw, 41.42svh) - 32px);
  --callout-label-y: calc(55svh - max(5.91vw, 10.5svh) + 220px);
  --callout-leader-x: 83px;
  --callout-leader-y: 7px;
  --callout-leader-length: 233px;
  --callout-leader-angle: -1.792rad;
  --callout-node-x: 28px;
  --callout-node-y: -224px;
}
.living-site .sign-seraph{
  --callout-label-x: calc(60.5vw + max(8.55vw, 15.2svh) + 76px);
  --callout-label-y: calc(55svh + max(14.74vw, 26.2svh) - 24px);
  --callout-leader-x: -8px;
  --callout-leader-y: 7px;
  --callout-leader-length: 70px;
  --callout-leader-angle: 2.897rad;
  --callout-node-x: -80px;
  --callout-node-y: 20px;
}
.living-site .site-header{
  position: absolute;
  z-index: 20;
  top: 21px;
  left: 36px;
  right: 36px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  animation: rise-in 0.8s 0.15s var(--ease) both;
}
.living-site .site-header > *{ pointer-events: auto; }
.living-site .language-control{
  position: relative;
  margin-left: auto;
}
.living-site .language-button{
  position: relative;
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px 0 8px;
  overflow: hidden;
  border: 1px solid rgba(193, 221, 255, 0.2);
  border-radius: 14px;
  color: rgba(237, 244, 255, 0.88);
  font: 570 10px/1 var(--font-geist-sans), Arial, sans-serif;
  letter-spacing: 0.015em;
  cursor: pointer;
  background:
    radial-gradient(circle at 22% 18%, rgba(151, 128, 255, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(23, 31, 58, 0.56), rgba(4, 9, 22, 0.44));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 14px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(20px) saturate(1.25);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms var(--ease);
}
.living-site .language-button::after{
  position: absolute;
  inset: -70%;
  content: "";
  opacity: 0.36;
  pointer-events: none;
  background: conic-gradient(from 120deg, transparent 0 29%, rgba(97, 222, 255, 0.2) 37%, transparent 46% 100%);
  animation: charge-turn 9s linear infinite;
}
.living-site .language-button > *{ position: relative; z-index: 1; }
.living-site .language-button strong{ color: #90eaff; font-family: var(--font-geist-mono), monospace; font-size: 8px; letter-spacing: 0.08em; }
.living-site .language-button:hover,.living-site .language-button[data-charged="true"]{ transform: translateY(-1px); border-color: rgba(142, 230, 255, 0.48); box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), 0 16px 38px rgba(0, 0, 0, 0.34), 0 0 24px rgba(71, 193, 255, 0.14); }
.living-site .language-orb{
  position: relative;
  width: 25px;
  height: 25px;
  display: block;
  border: 1px solid rgba(139, 225, 255, 0.52);
  border-radius: 50%;
  box-shadow: inset 0 0 12px rgba(89, 84, 255, 0.28), 0 0 12px rgba(53, 220, 255, 0.14);
}
.living-site .language-orb::before,.living-site .language-orb::after,.living-site .language-orb i{ position: absolute; content: ""; border: 1px solid rgba(163, 215, 255, 0.36); border-radius: 50%; }
.living-site .language-orb::before{ inset: 3px 7px; }
.living-site .language-orb::after{ inset: 7px 3px; }
.living-site .language-orb i{ top: 11px; right: 2px; left: 2px; height: 0; border-width: 1px 0 0; border-radius: 0; }
.living-site .language-menu{
  position: absolute;
  z-index: 20;
  top: 52px;
  right: 0;
  width: min(390px, calc(100vw - 36px));
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(176, 217, 255, 0.22);
  border-radius: 17px;
  background:
    radial-gradient(circle at 88% 0%, rgba(71, 87, 255, 0.2), transparent 36%),
    linear-gradient(145deg, rgba(13, 20, 42, 0.9), rgba(3, 7, 18, 0.86));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 30px 80px rgba(0, 0, 0, 0.52), 0 0 45px rgba(52, 113, 255, 0.09);
  backdrop-filter: blur(28px) saturate(1.3);
  animation: language-menu-in 220ms var(--ease) both;
}
.living-site .language-menu-head{ display: flex; justify-content: space-between; padding: 3px 5px 10px; color: rgba(238, 244, 255, 0.9); font-size: 10px; }
.living-site .language-menu-head small{ color: rgba(130, 221, 255, 0.62); font-family: var(--font-geist-mono), monospace; font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; }
.living-site .language-grid{ max-height: 330px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; scrollbar-color: rgba(92, 178, 255, 0.35) transparent; }
.living-site .language-grid button{ min-width: 0; display: flex; justify-content: space-between; gap: 8px; padding: 8px 9px; border: 0; border-radius: 9px; color: rgba(217, 227, 245, 0.78); text-align: left; cursor: pointer; background: transparent; font: 500 9px/1.2 var(--font-geist-sans), Arial, sans-serif; transition: color 160ms ease, background 160ms ease; }
.living-site .language-grid button:hover,.living-site .language-grid button:focus-visible{ color: #fff; background: linear-gradient(110deg, rgba(103, 58, 255, 0.24), rgba(38, 188, 255, 0.13)); }
.living-site .language-grid button small{ color: rgba(125, 152, 193, 0.58); font-family: var(--font-geist-mono), monospace; font-size: 7px; text-transform: uppercase; }
.living-site .google-translate-host{ position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.living-site .goog-te-banner-frame.skiptranslate{ display: none !important; }
.living-site{ top: 0 !important; }
.living-site .site-brand{
  position: relative;
  width: 124px;
  height: 48px;
  display: flex;
  align-items: center;
  transition: filter 240ms ease, transform 240ms ease;
}
.living-site .brand-lockup{
  width: 100%;
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.living-site .brand-name{
  flex: 0 0 auto;
  color: #f6f8ff;
  font-size: 18px;
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1;
}
.living-site .brand-blade{
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}
.living-site .site-brand:hover,.living-site .site-brand[data-charged="true"]{
  filter: drop-shadow(0 0 13px rgba(67, 211, 255, 0.55));
  transform: translateY(-1px);
}
.living-site .site-brand svg{ display: block; overflow: visible; }
.living-site .dock-wrap{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.living-site .electric-dock{
  --charge-x: 50%;
  --charge-y: 50%;
  position: relative;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(192, 218, 255, 0.19);
  border-radius: 15px;
  background: rgba(4, 8, 19, 0.72);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px) saturate(1.2);
  overflow: hidden;
}
.living-site .electric-dock::before,.living-site .surface-card::before,.living-site .liquid-button::before{
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--charge-x, 50%) var(--charge-y, 50%), rgba(202, 250, 255, 0.34) 0 2%, rgba(49, 215, 255, 0.24) 8%, rgba(104, 55, 255, 0.15) 20%, transparent 38%);
  transition: opacity 240ms ease;
}
.living-site .electric-dock[data-charged="true"]::before,.living-site .surface-card[data-charged="true"]::before,.living-site .liquid-button[data-charged="true"]::before{ opacity: 1; }
.living-site .dock-item{
  --dock-near: 0;
  position: relative;
  z-index: 1;
  min-width: 68px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  color: rgba(229, 236, 251, 0.68);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, calc(var(--dock-near) * 0.055));
  transform: translateY(calc(var(--dock-near) * -2px)) scale(calc(1 + var(--dock-near) * 0.035));
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.living-site .dock-item:hover,.living-site .dock-item.is-active{
  color: #fbfdff;
  background: rgba(113, 137, 255, 0.13);
  box-shadow: inset 0 0 0 1px rgba(137, 212, 255, 0.2), 0 0 15px rgba(41, 197, 255, 0.14);
}
.living-site .dock-item[data-charged="true"]{
  color: #ffffff;
  text-shadow: 0 0 9px rgba(159, 240, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(182, 239, 255, 0.3), 0 0 19px rgba(38, 168, 255, 0.22);
}
.living-site .dock-item.is-active::after{
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 14px;
  height: 1px;
  content: "";
  transform: translateX(-50%);
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
.living-site .dock-enter{
  min-width: 82px;
  color: #ffffff;
  border: 1px solid rgba(202, 231, 255, 0.3);
  background: var(--blade-glass-bg);
  box-shadow: var(--blade-glass-shadow);
  backdrop-filter: blur(22px) saturate(1.32);
}
.living-site .dock-enter:hover{
  color: #ffffff;
  background: var(--blade-glass-bg);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.22), 0 12px 32px rgba(34, 102, 203, 0.32), 0 0 22px rgba(63, 213, 255, 0.17);
}
.living-site .dock-glyph{ width: 15px; height: 15px; display: inline-flex; }
.living-site .dock-glyph svg{ width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.living-site .hero-content{
  position: absolute;
  z-index: 8;
  left: clamp(36px, 4.1vw, 68px);
  top: clamp(130px, 17vh, 174px);
  width: min(520px, 44vw);
  animation: rise-in 0.95s 0.28s var(--ease) both;
}
.living-site .eyebrow{
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 17px;
  color: rgba(197, 215, 247, 0.72);
  font-family: var(--font-geist-mono), monospace;
  font-size: 10px;
  font-weight: 560;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.living-site .eyebrow > span{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(53, 220, 255, 0.9);
  animation: status-breathe 2.7s ease-in-out infinite;
}
.living-site .hero-content h1{
  max-width: 560px;
  margin: 0;
  font-size: clamp(48px, 5.2vw, 78px);
  font-weight: 525;
  letter-spacing: -0.063em;
  line-height: 0.92;
  text-wrap: balance;
}
.living-site .hero-content h1 span{
  display: block;
  margin-top: 8px;
  color: transparent;
  background: linear-gradient(105deg, #f5f8ff 0%, #cbd7ff 47%, #72dfff 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.living-site .hero-copy{
  max-width: 455px;
  margin: 22px 0 25px;
  color: rgba(198, 208, 229, 0.72);
  font-size: 14px;
  line-height: 1.58;
}
.living-site .liquid-button{
  --charge-x: 50%;
  --charge-y: 50%;
  position: relative;
  width: fit-content;
  height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0 17px 0 7px;
  overflow: hidden;
  border: 1px solid rgba(202, 231, 255, 0.3);
  border-radius: 15px;
  color: #fafdff;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
  background:
    linear-gradient(118deg, rgba(238, 247, 255, 0.16), rgba(111, 124, 188, 0.09) 38%, rgba(45, 188, 222, 0.11)),
    rgba(6, 11, 27, 0.48);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.24), inset 0 -15px 28px rgba(4, 8, 22, 0.22), 0 14px 35px rgba(8, 23, 72, 0.25);
  backdrop-filter: blur(26px) saturate(1.2);
  transition: transform 220ms var(--ease), box-shadow 220ms ease, border-color 220ms ease;
}
.living-site .liquid-button:hover{
  transform: translateY(-2px);
  border-color: rgba(182, 240, 255, 0.62);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 17px 42px rgba(29, 81, 203, 0.46), 0 0 32px rgba(53, 220, 255, 0.28), 0 0 8px rgba(220, 253, 255, 0.32);
}
.living-site .liquid-button[data-charged="true"]{
  border-color: rgba(220, 252, 255, 0.82);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.38), 0 18px 46px rgba(35, 82, 221, 0.5), 0 0 37px rgba(53, 220, 255, 0.34), 0 0 9px rgba(229, 254, 255, 0.42);
}
.living-site .liquid-button::after{
  position: absolute;
  inset: -55% -20%;
  z-index: 0;
  content: "";
  opacity: 0.58;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 46%, rgba(239, 247, 255, 0.2), transparent 27%),
    radial-gradient(ellipse at 72% 62%, rgba(107, 196, 255, 0.16), transparent 31%);
  filter: blur(8px);
  animation: smoke-drift 6.8s ease-in-out infinite alternate;
}
.living-site .liquid-button > *{ position: relative; z-index: 1; }
.living-site .button-icon{
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(208, 238, 255, 0.24);
  border-radius: 11px;
  background: rgba(3, 7, 22, 0.52);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 0 20px rgba(76, 219, 255, 0.2);
}
.living-site .button-icon svg,.living-site .action-blade svg{ display: block; overflow: visible; }
.living-site .surface-card{
  --charge-x: 50%;
  --charge-y: 50%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(11, 17, 38, 0.87), rgba(3, 7, 18, 0.84)),
    var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36), inset 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px) saturate(1.18);
  transition: border-color 240ms ease, transform 240ms var(--ease), box-shadow 240ms ease;
  scroll-margin-top: 90px;
}
.living-site .surface-card::after{
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 0 39%, rgba(90, 50, 255, 0.08) 44%, rgba(114, 231, 255, 0.16) 48%, rgba(236, 254, 255, 0.24) 49%, rgba(58, 201, 255, 0.11) 51%, transparent 57%),
    linear-gradient(125deg, rgba(126, 73, 255, 0.07), transparent 36%, rgba(53, 220, 255, 0.035));
  background-position: 165% 0, 0 0;
  background-size: 245% 100%, 100% 100%;
  mix-blend-mode: screen;
}
.living-site .surface-card::before,.living-site .price-action::before{
  position: absolute;
  z-index: 4;
  inset: -2px;
  content: "";
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(102deg, transparent 0 10%, #dffcff 10.35% 10.65%, transparent 11% 25%, #67dcff 25.25% 25.55%, transparent 25.9% 48%, #f4fdff 48.25% 48.5%, transparent 48.8% 72%, #7d8cff 72.25% 72.55%, transparent 72.9%),
    linear-gradient(78deg, transparent 0 17%, #83e9ff 17.25% 17.55%, transparent 17.9% 41%, #ffffff 41.2% 41.45%, transparent 41.8% 66%, #696cff 66.25% 66.55%, transparent 66.9%);
  background-size: 155% 42%, 142% 38%;
  background-position: calc(var(--charge-x, 50%) - 38%) calc(var(--charge-y, 50%) - 16%), calc(var(--charge-x, 50%) - 44%) calc(var(--charge-y, 50%) + 24%);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 7px rgba(73, 211, 255, 0.96)) drop-shadow(0 0 13px rgba(83, 76, 255, 0.7));
  mix-blend-mode: screen;
  clip-path: polygon(0 42%, 9% 46%, 16% 35%, 25% 53%, 34% 39%, 44% 57%, 53% 41%, 64% 55%, 75% 37%, 84% 50%, 100% 43%, 100% 60%, 87% 56%, 77% 68%, 65% 50%, 54% 65%, 44% 49%, 35% 63%, 24% 47%, 15% 59%, 7% 52%, 0 57%);
}
.living-site .depth-card[data-charged="true"] .surface-card::before,.living-site .price-action[data-charged="true"]::before{
  animation: electric-border-arc 0.58s steps(2, end) infinite;
}
.living-site .surface-card > *{ position: relative; z-index: 1; }
.living-site .surface-card:hover,.living-site .surface-card:target,.living-site .depth-card:hover .card-glass,.living-site .depth-card:target .card-glass{
  border-color: rgba(126, 215, 255, 0.38);
  transform: translateY(-3px);
  box-shadow: 0 28px 66px rgba(0, 0, 0, 0.42), 0 0 28px rgba(51, 126, 255, 0.09), inset 0 1px rgba(255, 255, 255, 0.055);
}
.living-site .surface-card[data-charged="true"],.living-site .depth-card[data-charged="true"] .card-glass{
  border-color: rgba(155, 232, 255, 0.58);
  box-shadow: 0 29px 68px rgba(0, 0, 0, 0.44), 0 0 34px rgba(48, 162, 255, 0.2), inset 0 0 24px rgba(74, 126, 255, 0.08), inset 0 1px rgba(255, 255, 255, 0.09);
}
.living-site .surface-card[data-charged="true"]::after,.living-site .depth-card[data-charged="true"] .card-glass::after{
  animation: electric-surface-scan 0.82s cubic-bezier(.2,.72,.22,1) both;
}
.living-site .surface-topline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(205, 216, 238, 0.55);
  font-family: var(--font-geist-mono), monospace;
  font-size: 9px;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}
.living-site .status-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: rgba(188, 225, 255, 0.75);
  letter-spacing: 0.04em;
}
.living-site .status-pill i{
  width: 5px;
  height: 5px;
  display: inline-block;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(53, 220, 255, 0.7);
}
.living-site .price-card{
  position: absolute;
  top: clamp(102px, 14vh, 130px);
  right: clamp(28px, 3.2vw, 52px);
  width: var(--card-w);
  height: var(--card-h);
}
.living-site .depth-card{
  --charge-x: 50%;
  --charge-y: 50%;
  z-index: 5;
  isolation: isolate;
  opacity: 1;
  visibility: visible;
  filter: none;
  scroll-margin-top: 90px;
  transition: opacity 620ms var(--ease), filter 620ms var(--ease);
}
.living-site .card-glass{
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(10, 16, 36, 0.975), rgba(3, 7, 19, 0.97)),
    #050916;
  box-shadow:
    0 25px 62px rgba(0, 0, 0, 0.46),
    inset 0 1px rgba(255, 255, 255, 0.05),
    inset 0 -28px 54px rgba(1, 3, 12, 0.44);
  animation: card-glass-in 0.95s var(--ease) both;
}
.living-site .card-content{
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
  animation: card-copy-in 0.8s 0.18s var(--ease) both;
}
.living-site .card-content a,.living-site .card-content button{ pointer-events: auto; }
.living-site .price-content{
  padding: 14px 15px 16px;
}
.living-site .price-foreground{
  position: absolute;
  z-index: 9;
  inset: 0;
  clip-path: none;
  pointer-events: none;
}
.living-site .price-foreground .price-action{ pointer-events: auto; }
.living-site .price-card .card-glass{
  animation-delay: 0.42s;
}
.living-site .price-card .card-content{ animation-delay: 0.58s; }
.living-site .price-line{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 15px;
}
.living-site .price-line strong{
  font-size: 38px;
  font-weight: 520;
  letter-spacing: -0.06em;
  line-height: 1;
}
.living-site .price-line span{ color: var(--soft); font-size: 11px; }
.living-site .renewal{ margin: 4px 0 10px; color: var(--muted); font-size: 9px; }
.living-site .renewal strong{ color: #bfcaff; font-weight: 620; }
.living-site .price-features{
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 12px 0 44px;
  border-top: 1px solid rgba(167, 198, 255, 0.1);
  list-style: none;
  color: rgba(211, 220, 238, 0.72);
  font-size: 9px;
  line-height: 1.35;
}
.living-site .price-features li{ display: flex; gap: 8px; }
.living-site .price-features li span{ color: var(--cyan); }
.living-site .price-action{
  position: absolute;
  z-index: 10;
  right: 17px;
  bottom: 14px;
  left: 17px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(190, 232, 255, 0.28);
  border-radius: 10px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 650;
  background: var(--blade-glass-bg);
  box-shadow: var(--blade-glass-shadow);
  backdrop-filter: blur(22px) saturate(1.32);
  transition: transform 180ms var(--ease), box-shadow 180ms ease;
  box-sizing: border-box;
}
.living-site .price-action:hover{
  transform: translateY(-1px);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 11px 28px rgba(26, 108, 255, 0.38);
}
.living-site .price-action[data-charged="true"]{
  border-color: rgba(222, 252, 255, 0.74);
  text-shadow: 0 0 10px rgba(209, 249, 255, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.36), 0 12px 31px rgba(26, 108, 255, 0.48), 0 0 25px rgba(53, 220, 255, 0.25);
}
.living-site .action-blade{
  position: absolute;
  top: 50%;
  right: 10px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 8px rgba(77, 216, 255, 0.42));
  transform: translateY(-50%);
}
.living-site .model-deck{
  position: absolute;
  z-index: auto;
  inset: 0;
  pointer-events: none;
}
.living-site .model-card{
  position: absolute;
  width: var(--card-w);
  height: var(--card-h);
  pointer-events: auto;
}
.living-site .model-content{ padding: 14px 15px 12px; }
.living-site .moe-card{
  left: clamp(36px, 4.1vw, 68px);
  bottom: 56px;
}
.living-site .seraph-card{ left: clamp(580px, 42vw, 700px); bottom: 162px; }
.living-site .moe-card .card-glass{ animation-delay: 0.5s; }
.living-site .moe-card .card-content{ animation-delay: 0.66s; }
.living-site .seraph-card .card-glass{ animation-delay: 0.62s; }
.living-site .seraph-card .card-content{ animation-delay: 0.78s; }
.living-site .model-card h2{
  margin: 12px 0 7px;
  font-size: 16.5px;
  font-weight: 540;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.living-site .model-copy{
  min-height: 42px;
  margin: 0 0 8px;
  color: rgba(215, 224, 241, 0.82);
  font-size: 9px;
  line-height: 1.42;
  text-shadow: 0 1px 8px rgba(0, 2, 10, 0.92);
}
.living-site .state-rows{ margin: 0; }
.living-site .state-rows div{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid rgba(173, 202, 255, 0.085);
  font-size: 8px;
  line-height: 1.25;
}
.living-site .state-rows dt{ color: rgba(175, 190, 219, 0.72); }
.living-site .state-rows dd{ margin: 0; color: rgba(239, 244, 255, 0.92); text-align: right; text-shadow: 0 1px 7px rgba(0, 2, 10, 0.9); }
.living-site .hero-footer{
  position: absolute;
  z-index: 8;
  right: 36px;
  bottom: 18px;
  left: 36px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  color: rgba(130, 142, 165, 0.58);
  font-size: 7.5px;
  letter-spacing: 0.035em;
}
.living-site .hero-footer p{ grid-column: 1 / -1; margin: 0; text-align: center; }
.living-site .hero-footer nav{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 12px; }
.living-site .hero-footer a{ transition: color 170ms ease; }
.living-site .hero-footer a:hover{ color: #dce7ff; }
@keyframes terrain-arrive{
  from { opacity: 0; transform: scale(1.08); filter: saturate(0.65) contrast(1.15) brightness(0.5); }
  to { opacity: 1; transform: scale(1.024); filter: saturate(1.08) contrast(1.05) brightness(0.95); }
}
@keyframes terrain-breathe{
  0% {
    transform: translate3d(calc(var(--world-x, 0) * -5px - 2px), calc(var(--world-y, 0) * 3px + 1px), 0) scale(1.018);
    filter: saturate(1.05) contrast(1.05) brightness(0.91);
  }
  52% {
    transform: translate3d(calc(var(--world-x, 0) * -7px + 4px), calc(var(--world-y, 0) * 4px - 3px), 0) scale(1.032);
    filter: saturate(1.15) contrast(1.075) brightness(1);
  }
  100% {
    transform: translate3d(calc(var(--world-x, 0) * -6px - 1px), calc(var(--world-y, 0) * 3.5px + 3px), 0) scale(1.022);
    filter: saturate(1.09) contrast(1.055) brightness(0.95);
  }
}
@keyframes smoke-drift{
  0% { transform: translate3d(-7%, -2%, 0) scale(0.96); opacity: 0.42; }
  52% { transform: translate3d(4%, 4%, 0) scale(1.08); opacity: 0.64; }
  100% { transform: translate3d(9%, -3%, 0) scale(1); opacity: 0.5; }
}
@keyframes language-menu-in{
  from { opacity: 0; transform: translateY(-7px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rise-in{
  from { opacity: 0; transform: translateY(17px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes card-in{
  from { opacity: 0; transform: translateY(20px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes card-glass-in{
  from { opacity: 0; clip-path: inset(100% 0 0 0 round 17px); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 17px); }
}
@keyframes card-copy-in{
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes charge-turn{ to { transform: rotate(1turn); } }
@keyframes electric-surface-scan{
  0% { background-position: 165% 0, 0 0; opacity: 0.36; }
  42% { opacity: 1; }
  100% { background-position: -65% 0, 0 0; opacity: 0.72; }
}
@keyframes electric-border-arc{
  0% { opacity: 0; transform: translate3d(-1.5%, -1px, 0) scaleX(0.985); }
  18% { opacity: 0.95; }
  46% { opacity: 0.36; transform: translate3d(1%, 1px, 0) scaleX(1.015); }
  67% { opacity: 1; }
  100% { opacity: 0.08; transform: translate3d(-0.4%, 0, 0) scaleX(0.995); }
}
@keyframes status-breathe{
  0%, 100% { transform: scale(0.8); opacity: 0.65; }
  50% { transform: scale(1.15); opacity: 1; }
}
@media (max-width: 1100px) and (min-width: 900px){
  .living-site .hero-content{ width: 47vw; }
  .living-site .hero-content h1{ font-size: clamp(46px, 5.6vw, 63px); }
  .living-site .model-copy{ min-height: 58px; }
}
@media (max-height: 960px) and (min-width: 900px){
  .living-site .hero{ --card-w: 260px; --card-h: 196px; min-height: 720px; }
  .living-site .hero-content{ top: 86px; }
  .living-site .hero-content h1{ font-size: clamp(43px, 4.5vw, 60px); }
  .living-site .hero-copy{ max-width: 430px; margin: 12px 0 14px; font-size: 12px; line-height: 1.48; }
  .living-site .price-card{ top: 99px; }
  .living-site .moe-card{ bottom: 42px; }
  .living-site .seraph-card{ bottom: 108px; }
  .living-site .model-content{ padding-top: 14px; padding-bottom: 11px; }
  .living-site .model-card h2{ margin-top: 10px; }
  .living-site .model-copy{ min-height: 34px; margin-bottom: 5px; font-size: 8px; }
  .living-site .state-rows div{ padding: 3px 0; font-size: 7.5px; }
  .living-site .price-line{ margin-top: 10px; }
  .living-site .price-line strong{ font-size: 34px; }
  .living-site .renewal{ margin-bottom: 7px; }
  .living-site .price-features{ gap: 4px; padding-top: 8px; font-size: 8.2px; }
  .living-site .price-action{ right: 13px; bottom: 10px; left: 13px; height: 32px; }
  .living-site .hero-footer{ bottom: 11px; }
}
@media (max-width: 899px){
  .living-site .hero{
      --card-w: min(100%, 440px);
      --card-h: 264px;
      min-height: 0;
      overflow: hidden;
      padding: 0 18px 22px;
    }
  .living-site .hero-image,.living-site .hero-vignette,.living-site .hero-guides{ height: auto; bottom: 0; }
  .living-site .living-market-field{
      height: 900px;
      bottom: auto;
      -webkit-mask-image: linear-gradient(to bottom, #000 0 84%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0 84%, transparent 100%);
    }
  .living-site .hero-image{ background-position: 70% center; }
  .living-site .hero-vignette{
      background:
        linear-gradient(180deg, rgba(1, 3, 10, 0.25) 0%, rgba(1, 3, 10, 0.16) 27%, rgba(1, 3, 10, 0.76) 63%, #01030a 96%),
        linear-gradient(90deg, rgba(1, 3, 10, 0.67), rgba(1, 3, 10, 0.05));
    }
  .living-site .site-header{ top: 18px; left: 18px; right: 18px; }
  .living-site .site-brand{ width: 102px; }
  .living-site .field-signs{ display: none; }
  .living-site .dock-wrap{ left: auto; right: 0; transform: none; }
  .living-site .dock-item:not(.dock-enter){ display: none; }
  .living-site .electric-dock{ height: 43px; }
  .living-site .dock-enter{ height: 33px; min-width: 79px; }
  .living-site .language-control{ position: absolute; top: 54px; right: 0; }
  .living-site .language-button{ height: 38px; }
  .living-site .language-button > span:not(.language-orb){ display: none; }
  .living-site .language-menu{ top: 46px; }
  .living-site .hero-content{
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      padding-top: 136px;
    }
  .living-site .hero-content h1{ max-width: 560px; font-size: clamp(46px, 13vw, 68px); }
  .living-site .hero-copy{ max-width: 510px; }
  .living-site .price-card{
      position: relative;
      top: auto;
      right: auto;
      width: var(--card-w);
      height: var(--card-h);
      padding: 0;
      margin: 235px 0 28px auto;
    }
  .living-site .model-deck{
      position: relative;
      left: auto;
      bottom: auto;
      inset: auto;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 28px;
    }
  .living-site .model-card,.living-site .seraph-card{
      position: relative;
      left: auto;
      bottom: auto;
      width: var(--card-w);
      height: var(--card-h);
      min-height: 0;
    }
  .living-site .moe-card{ align-self: flex-start; }
  .living-site .seraph-card{ align-self: flex-end; }
  .living-site .model-copy{ min-height: 62px; }
  .living-site .hero-footer{
      position: relative;
      right: auto;
      bottom: auto;
      left: auto;
      grid-template-columns: 1fr auto;
      gap: 10px;
      margin-top: 24px;
      padding-top: 15px;
      border-top: 1px solid rgba(150, 180, 231, 0.1);
    }
  .living-site .hero-footer p{ grid-column: 1 / -1; grid-row: 2; text-align: left; line-height: 1.5; }
}
@media (max-width: 650px){
  .living-site .hero-content h1{ font-size: clamp(43px, 14vw, 59px); }
  .living-site .hero-copy{ font-size: 13px; }
  .living-site .price-card{ margin-top: 215px; }
  .living-site .model-copy{ min-height: 0; }
}
@media (prefers-reduced-motion: reduce){
  .living-site{ scroll-behavior: auto; }
  .living-site *,.living-site,.living-site *::before,.living-site *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .living-site .hero-image{ transform: none; }
}
/* V24 — one responsive editorial stage, translated from the reference's spatial grammar. */
.living-site .editorial-stage{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.living-site .editorial-stage a,.living-site .editorial-stage button,.living-site .editorial-stage .depth-card{ pointer-events: auto; }
.living-site .ghost-wordmark{
  position: absolute;
  z-index: 3;
  left: 3.5%;
  bottom: -0.035em;
  color: rgba(94, 129, 219, 0.055);
  font-size: clamp(142px, 19vw, 300px);
  font-weight: 560;
  letter-spacing: -0.085em;
  line-height: 0.74;
  white-space: nowrap;
  text-shadow: 0 0 80px rgba(48, 96, 255, 0.08);
  user-select: none;
}
.living-site .card-visual{
  --tilt-x: 0;
  --tilt-y: 0;
  --media-base-x: 50%;
  --media-base-y: 50%;
  --card-visual-image: url("/electric-x-card-v51.webp");
  position: relative;
  height: 46px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid rgba(134, 202, 255, 0.14);
  border-radius: 11px;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 35%, rgba(66, 91, 255, 0.13), transparent 40%),
    linear-gradient(120deg, rgba(4, 8, 22, 0.96), rgba(9, 17, 43, 0.88));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), inset 0 -18px 35px rgba(1, 3, 13, 0.38), 0 10px 24px rgba(0, 0, 0, 0.22);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.living-site .card-visual-scene{
  position: absolute;
  z-index: 0;
  inset: -14%;
  display: block;
  border-radius: inherit;
  background-image:
    linear-gradient(120deg, rgba(2, 6, 18, 0.08), rgba(65, 85, 197, 0.1)),
    var(--card-visual-image);
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
  background-position: center, var(--media-base-x) var(--media-base-y);
  filter: saturate(1.12) contrast(1.08) brightness(0.9);
  transform:
    perspective(520px)
    translate3d(var(--world-media-x, 0px), var(--world-media-y, 0px), 0)
    rotateX(calc(var(--tilt-y, 0) * -3deg + var(--world-y, 0) * -2.2deg))
    rotateY(calc(var(--tilt-x, 0) * 5deg + var(--world-x, 0) * 3deg))
    scale(1.1);
  transform-style: preserve-3d;
  will-change: transform;
}
.living-site .depth-card[data-charged="true"] .card-visual{
  border-color: rgba(141, 229, 255, 0.4);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.13), inset 0 -18px 35px rgba(1, 3, 13, 0.24), 0 13px 29px rgba(10, 51, 144, 0.3), 0 0 20px rgba(53, 220, 255, 0.12);
}
.living-site .depth-card[data-charged="true"] .card-visual-scene{
  transform:
    perspective(520px)
    translate3d(var(--world-media-x, 0px), var(--world-media-y, 0px), 10px)
    rotateX(calc(var(--tilt-y, 0) * -5deg + var(--world-y, 0) * -2.5deg))
    rotateY(calc(var(--tilt-x, 0) * 7deg + var(--world-x, 0) * 3deg))
    scale(1.14);
}
.living-site .card-visual::before,.living-site .card-visual::after{
  position: absolute;
  z-index: 1;
  content: "";
  pointer-events: none;
}
.living-site .card-visual::before{
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 19%, rgba(123, 230, 255, 0.72) 19.5% 20%, transparent 20.5% 48%, rgba(94, 69, 255, 0.65) 48.5% 49%, transparent 49.5%),
    linear-gradient(180deg, transparent 0 62%, rgba(75, 205, 255, 0.38) 63%, transparent 64%);
  opacity: 0.42;
  mix-blend-mode: screen;
}
.living-site .card-visual::after{
  top: 50%;
  left: 50%;
  width: 58%;
  height: 72%;
  border: 1px solid rgba(132, 224, 255, 0.28);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  box-shadow: 0 0 16px rgba(70, 123, 255, 0.15), inset 0 0 12px rgba(85, 216, 255, 0.08);
}
.living-site .card-visual i{
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a7f3ff;
  box-shadow: 0 0 10px #53dcff, 0 0 19px rgba(84, 85, 255, 0.72);
  animation: visual-node-orbit 5.2s ease-in-out infinite alternate;
}
.living-site .card-visual i:nth-of-type(1){ top: 27%; left: 22%; }
.living-site .card-visual i:nth-of-type(2){ top: 61%; left: 58%; animation-delay: -1.7s; }
.living-site .card-visual i:nth-of-type(3){ top: 36%; left: 82%; animation-delay: -3.1s; }
.living-site .moe-visual{
  --card-visual-image: url("/hero-neural-card-v51.webp");
  --media-base-x: 72%;
  --media-base-y: 49%;
}
.living-site .seraph-visual{
  --card-visual-image: url("/deep-space-card-v51.webp");
  --media-base-x: 58%;
  --media-base-y: 82%;
}
.living-site .seraph-visual::before{
  opacity: 0.32;
  background:
    repeating-linear-gradient(116deg, transparent 0 13%, rgba(104, 211, 255, 0.34) 13.4% 13.7%, transparent 14.1% 27%),
    radial-gradient(circle at 63% 54%, rgba(129, 92, 255, 0.34), transparent 33%);
}
.living-site .seraph-visual::after{
  left: 64%;
  width: 34%;
  height: 118%;
  transform: translate(-50%, -50%) rotate(48deg);
}
.living-site .seraph-visual i:nth-of-type(1){ top: 68%; left: 18%; }
.living-site .seraph-visual i:nth-of-type(2){ top: 31%; left: 61%; }
.living-site .seraph-visual i:nth-of-type(3){ top: 58%; left: 88%; }
.living-site .price-visual{
  --card-visual-image: url("/electric-x-card-v51.webp");
  --media-base-x: 71%;
  --media-base-y: 51%;
  position: absolute;
  z-index: 1;
  top: 38px;
  right: 15px;
  width: 94px;
  height: 60px;
  margin: 0;
  opacity: 0.84;
}
.living-site .price-visual .card-visual-scene{ inset: -9%; }
.living-site .price-visual::before{ opacity: 0.27; }
.living-site .price-visual::after{ width: 76%; height: 56%; transform: translate(-50%, -50%) rotate(13deg); }
.living-site .price-visual i:nth-of-type(1){ top: 25%; left: 18%; }
.living-site .price-visual i:nth-of-type(2){ top: 68%; left: 52%; }
.living-site .price-visual i:nth-of-type(3){ top: 24%; left: 86%; }
.living-site .price-content > *:not(.price-visual){ position: relative; z-index: 1; }
.living-site .card-content::before{
  position: absolute;
  z-index: 0;
  top: 7px;
  right: 7px;
  bottom: 7px;
  left: 7px;
  content: "";
  border: 1px solid rgba(142, 190, 255, 0.055);
  border-radius: 13px;
  pointer-events: none;
  background:
    linear-gradient(155deg, rgba(10, 16, 36, 0.985), rgba(3, 7, 19, 0.99) 58%, rgba(2, 5, 15, 0.985));
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(10px) saturate(0.84);
  clip-path: none;
}
.living-site .price-content::before{
  clip-path: none;
}
.living-site .seraph-card .card-content::before{
  clip-path: none;
}
/* Keep the exposed faces fully opaque; only the explicit X masks create depth. */
.living-site .moe-card .card-content::before,.living-site .price-card .card-content::before{
  background:
    linear-gradient(155deg, #0a1024, #030713 58%, #02050f),
    #050916;
  backdrop-filter: none;
}
.living-site .model-content > *{ position: relative; z-index: 1; }
@keyframes visual-node-orbit{
  0% { transform: translate3d(-4px, 3px, 10px) scale(0.72); opacity: 0.45; }
  52% { transform: translate3d(8px, -4px, 18px) scale(1.22); opacity: 1; }
  100% { transform: translate3d(14px, 2px, 12px) scale(0.88); opacity: 0.68; }
}
.living-site .stage-index{
  position: absolute;
  z-index: 7;
  left: 51.5%;
  bottom: 4.6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(163, 182, 218, 0.42);
  font-family: var(--font-geist-mono), monospace;
  font-size: 7px;
  letter-spacing: 0.32em;
  writing-mode: vertical-rl;
}
.living-site .stage-index i{
  width: 1px;
  height: 44px;
  background: linear-gradient(rgba(86, 220, 255, 0.52), transparent);
  box-shadow: 0 0 11px rgba(53, 220, 255, 0.24);
}
@media (min-width: 900px){
  .living-site{ overflow: hidden; }
  .living-site .site-shell,.living-site .hero{
      width: 100%;
      height: 100svh;
      min-height: 720px;
    }
  .living-site .hero{
      --card-w: clamp(286px, 21vw, 332px);
      --card-h: clamp(246px, 30svh, 286px);
      --x-stage-x: 60.5vw;
    }
  .living-site .hero-image,.living-site .hero-vignette,.living-site .hero-guides,.living-site .living-market-field{ height: 100%; }
  .living-site .site-header{
      top: clamp(21px, 3.2svh, 36px);
      left: clamp(34px, 3.4vw, 58px);
      right: clamp(34px, 3.4vw, 58px);
    }
  .living-site .site-brand{ width: 132px; }
  .living-site .hero-content{
      top: clamp(142px, 20.5svh, 228px);
      left: clamp(38px, 4vw, 68px);
      width: min(34vw, 540px);
    }
  .living-site .hero-content h1{
      max-width: none;
      font-size: clamp(49px, 4.75vw, 76px);
      line-height: 0.94;
    }
  .living-site .hero-content h1 span{ margin-top: 9px; }
  .living-site .hero-content .liquid-button{ margin-top: clamp(22px, 3.2svh, 34px); }
  .living-site .eyebrow{
      margin-bottom: 21px;
      font-size: clamp(8px, 0.62vw, 10px);
    }
  .living-site .hero-story{
      position: absolute;
      z-index: 8;
      top: clamp(158px, 22svh, 238px);
      left: clamp(390px, 36.3vw, 586px);
      width: clamp(158px, 14.5vw, 228px);
      animation: rise-in 0.95s 0.4s var(--ease) both;
    }
  .living-site .hero-story .hero-copy{
      margin: 0 0 22px;
      color: rgba(216, 225, 241, 0.72);
      font-size: clamp(11px, 0.86vw, 13.5px);
      line-height: 1.48;
    }
  .living-site .liquid-button{
      min-width: 164px;
      height: 50px;
      border-radius: 17px;
    }
  .living-site .model-card{
      width: var(--card-w);
      height: var(--card-h);
    }
  .living-site .price-card{
      top: var(--price-scene-y);
      right: auto;
      bottom: auto;
      left: var(--price-scene-x);
      width: var(--card-w);
      height: var(--card-h);
      transform: translate3d(-50%, -50%, 0);
    }
  .living-site .seraph-card{
      left: var(--seraph-scene-x);
      bottom: 70px;
      transform: translate3d(-50%, 0, 0);
    }
  .living-site .seraph-card[data-scene-anchored="true"]{
      top: var(--seraph-scene-y);
      bottom: auto;
      transform: translate3d(-50%, -50%, 0);
    }
  .living-site .moe-card{
      top: var(--moe-scene-y);
      right: auto;
      bottom: auto;
      left: var(--moe-scene-x);
      transform: translate3d(-50%, -50%, 0);
    }
  .living-site .price-content,.living-site .model-content{ padding: clamp(15px, 1.15vw, 19px); }
  .living-site .surface-topline{ font-size: clamp(8.5px, 0.58vw, 9.5px); }
  .living-site .price-line{ margin-top: clamp(12px, 1.5svh, 18px); }
  .living-site .price-line strong{ font-size: clamp(38px, 3.1vw, 50px); }
  .living-site .price-line span{ font-size: clamp(10px, 0.72vw, 12px); }
  .living-site .renewal{ margin: 5px 0 clamp(8px, 1.2svh, 13px); font-size: clamp(8px, 0.62vw, 10px); }
  .living-site .price-features{ gap: clamp(4px, 0.6svh, 7px); padding: clamp(8px, 1.2svh, 13px) 0 47px; font-size: clamp(8px, 0.62vw, 10px); }
  .living-site .price-action{ right: 16px; bottom: 15px; left: 16px; height: 36px; }
  .living-site .model-card h2{
      margin: clamp(8px, 1svh, 11px) 0 7px;
      font-size: clamp(17px, 1.25vw, 20px);
    }
  .living-site .model-copy{
      min-height: 0;
      margin-bottom: clamp(6px, 0.8svh, 9px);
      font-size: clamp(9px, 0.65vw, 10.2px);
      line-height: 1.42;
    }
  .living-site .state-rows div{
      grid-template-columns: clamp(90px, 7vw, 112px) 1fr;
      padding: clamp(4px, 0.55svh, 6px) 0;
      font-size: clamp(8px, 0.56vw, 9.2px);
    }
  .living-site .hero-footer{
      right: clamp(34px, 3.4vw, 58px);
      bottom: clamp(10px, 1.5svh, 17px);
      left: clamp(34px, 3.4vw, 58px);
      font-size: clamp(7px, 0.48vw, 8px);
    }
}
@media (min-width: 900px) and (max-width: 1100px){
  .living-site .hero{ --card-w: 270px; --card-h: 252px; }
}
@media (min-width: 900px) and (max-height: 800px){
  .living-site .hero{ --card-w: 260px; --card-h: 210px; }
  .living-site .price-content,.living-site .model-content{ padding: 12px 13px; }
  .living-site .card-visual{ height: 40px; margin-top: 7px; }
  .living-site .model-card h2{ margin: 8px 0 5px; font-size: 15px; }
  .living-site .model-copy{ min-height: 38px; margin-bottom: 5px; font-size: 9px; line-height: 1.34; }
  .living-site .state-rows div{ padding: 3px 0; font-size: 8.5px; }
  .living-site .price-line{ margin-top: 8px; }
  .living-site .price-line strong{ font-size: 34px; }
  .living-site .renewal{ margin-bottom: 6px; }
  .living-site .price-features{ gap: 3px; padding: 7px 0 39px; font-size: 8px; }
  .living-site .price-action{ right: 13px; bottom: 10px; left: 13px; height: 32px; }
}
@media (min-width: 900px) and (max-width: 979px){
  .living-site .hero{ --card-w: 248px; }
}
@media (max-width: 899px){
  .living-site{ overflow-y: auto; }
  .living-site .price-foreground,.living-site .card-content::before{ clip-path: none; }
  .living-site .editorial-stage{
      position: relative;
      inset: auto;
      width: 100%;
    }
  .living-site .hero-story{
      position: relative;
      z-index: 8;
      width: 100%;
      max-width: 510px;
      margin-top: 21px;
      animation: rise-in 0.95s 0.4s var(--ease) both;
    }
  .living-site .hero-story .hero-copy{ margin: 0 0 20px; }
  .living-site .hero-content .liquid-button{ margin-top: 24px; }
  .living-site .card-visual{ height: 58px; }
  .living-site .price-card{ margin-top: 72px; }
  .living-site .ghost-wordmark{ top: 565px; bottom: auto; left: -1%; font-size: clamp(96px, 28vw, 164px); }
  .living-site .stage-index{ display: none; }
}