/* ==========================================================================
   IndicBytes — design system modelled on melius.com
   ========================================================================== */

:root {
  /* palette */
  --black: #0e0e0e;
  --offblack: #1a1616;
  --gray-dark-1: #202020;
  --gray-dark-2: #2a2a2a;
  --gray-dark-3: #3e3e3e;
  --gray: #676767;
  --gray-light-1: #9c9996;
  --gray-light-2: #b9b9b9;
  --gray-light-2-faded: rgba(185, 185, 185, 0.4);
  --gray-light-3: #d9d9d9;
  --gray-bg: #e3e3e3;
  --white: #fafafa;
  --white-2: #ffffff;
  --orange: #f04e23;
  --yellow: #fff78b;
  --lavender: #c7adff;
  --purple: #a37aff;
  --navy: #4164b9;
  --lime: #e0e07b;
  --periwinkle: #b0e3e8;
  --amber: #ea9e1a;
  --green: #00a544;

  /* type */
  --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Jost", "Futura", "Inter", sans-serif;

  /* layout */
  --h-announcement: 40px;
  --h-header: 72px;
  --s-contain: max(3vw, 15px);
  --s-section: 80px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  --ease-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-sin: cubic-bezier(0.37, 0, 0.63, 1);
  --shadow-default: 0 10px 28px rgba(0, 0, 0, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---- type scale (mirrors melius t-* utilities) ---- */
.t-h-1 { font: 400 3.5rem/1 var(--font-serif); letter-spacing: -0.02em; text-wrap: balance; }
.t-h-2 { font: 400 2.625rem/1 var(--font-serif); letter-spacing: -0.02em; text-wrap: balance; }
.t-h-3 { font: 400 2.25rem/1 var(--font-serif); letter-spacing: -0.01em; }
.t-h-4 { font: 400 1.7rem/1 var(--font-serif); }
.t-h-1-sans { font: 400 3.5rem/1 var(--font-display); letter-spacing: -0.02em; }
.t-h-3-sans { font: 400 2rem/1 var(--font-display); letter-spacing: -0.04em; }
.t-b-1 { font: 400 1.1875rem/1.4 var(--font-sans); letter-spacing: -0.04em; }
.t-b-2 { font: 400 0.85rem/1.2 var(--font-sans); letter-spacing: -0.03em; }
.t-b-3 { font: 400 0.8rem/1.2 var(--font-sans); letter-spacing: -0.03em; }
.t-tag-1 { font: 400 0.625rem/1 var(--font-sans); }
.t-tag-display { font: 500 0.625rem/1 var(--font-display); letter-spacing: 0.02em; }
.text-white { color: var(--white); }
.text-gray { color: var(--gray); }
.text-gray-light { color: var(--gray-light-2); }
.text-center { text-align: center; }

/* ---- dot grids ---- */
.dots-light {
  background-color: var(--gray-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Crect x='6.5' y='6.5' width='2' height='2' rx='1' ry='1' fill='rgb(0,0,0)' fill-opacity='0.08'/%3E%3C/svg%3E");
  background-size: 15px 15px;
  background-position: 0 -14px;
}
.dots-dark {
  background-color: var(--offblack);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Crect x='6.5' y='6.5' width='2' height='2' rx='1' ry='1' fill='rgb(255,255,255)' fill-opacity='0.08'/%3E%3C/svg%3E");
  background-size: 15px 15px;
  background-position: 0 -14px;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 14px;
  border-radius: var(--radius-md);
  font: 400 0.8rem/1.2 var(--font-sans); letter-spacing: -0.03em;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-sin), filter 0.25s var(--ease-sin), background-color 0.25s var(--ease-sin);
  will-change: transform;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--yellow { background: var(--yellow); color: var(--black); }
.btn--orange { background: var(--orange); color: var(--white); }
.btn--dark { background: var(--offblack); color: var(--white); }
.btn--lg { height: 48px; padding: 0 24px; min-width: 290px; }

/* ---- tags / chips ---- */
.tag {
  display: inline-flex; align-items: center; width: fit-content; max-width: 100%;
  height: 18px; padding: 0 12px; border-radius: var(--radius-xs);
  font: 400 0.625rem/1 var(--font-sans); white-space: nowrap; user-select: none;
}
.tag--orange { background: var(--orange); color: #100e0d; }
.tag--yellow { background: var(--yellow); color: var(--black); }
.tag--grey { background: var(--gray-light-3); color: var(--black); }
.tag--display { font: 500 0.75rem/1 var(--font-display); height: auto; padding: 4px 8px; }

/* ==========================================================================
   Announcement + header
   ========================================================================== */
.announcement {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--h-announcement);
  padding: 0 16px;
}
.announcement__inner {
  height: 100%;
  background: var(--offblack);
  border: 1px solid var(--gray-light-2-faded); border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.announcement__link {
  display: flex; align-items: center; gap: 8px; padding: 0 16px;
  color: var(--white);
  font: 400 0.8rem/1.2 var(--font-sans); letter-spacing: -0.03em;
  white-space: nowrap;
}
.announcement__cta { color: var(--orange); transition: opacity 0.2s; }
.announcement__link:hover .announcement__cta { opacity: 0.8; }

.header {
  position: fixed; top: var(--h-announcement); left: 0; right: 0; z-index: 90;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px;
  pointer-events: none;
}
.header > * { pointer-events: auto; }

.brand { position: relative; width: 230px; }
.brand__box {
  position: relative;
  background: var(--gray-dark-1);
  border: 1px solid var(--gray-light-2-faded);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-default);
  overflow: hidden;
  transition: box-shadow 0.4s var(--ease-sin);
}
.brand__row { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.brand__logo { display: flex; align-items: center; padding: 8px 12px; height: 40px; }
.brand__logo img { height: 24px; width: auto; }
.brand__menu {
  width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--white);
}
.brand__menu span { display: block; width: 12px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 0.3s var(--ease-quart), opacity 0.3s; }
.brand__box.is-open .brand__menu span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.brand__box.is-open .brand__menu span:nth-child(2) { opacity: 0; }
.brand__box.is-open .brand__menu span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }
.brand__panel {
  display: grid; max-height: 0; overflow: hidden;
  transition: max-height 0.45s var(--ease-quart);
  border-top: 1px solid transparent;
}
.brand__box.is-open .brand__panel { max-height: 240px; border-top-color: rgba(185, 185, 185, 0.18); }
.brand__panel a {
  display: block; padding: 11px 16px;
  color: var(--gray-light-3);
  font: 400 0.85rem/1.2 var(--font-sans); letter-spacing: -0.03em;
  transition: color 0.2s, background-color 0.2s;
}
.brand__panel a:hover { color: var(--white); background: rgba(255, 255, 255, 0.04); }

.header__actions { display: flex; gap: 16px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: calc(100svh - var(--h-announcement));
  margin-top: var(--h-announcement);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 32px;
  overflow: hidden;
  background: #0e0e12;
}
.hero__bg {
  position: absolute; inset: -1px 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 28%, rgba(148, 76, 47, 0.16), transparent 42%),
    radial-gradient(ellipse at 87% 60%, rgba(98, 76, 161, 0.21), transparent 48%),
    linear-gradient(180deg, #141319 0%, #101015 72%, #0e0e0e 100%);
}
.hero__particles { display: block; width: 100%; height: 100%; }
.hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero__title { display: flex; flex-direction: column; text-align: center; color: #f5f2ed; position: relative; top: 8px; max-width: 1200px; }
.hero__title .rotator { color: #c7b6f5; }
.hero__line { display: block; text-wrap: balance; }

.rotator { position: relative; display: inline-block; text-align: left; vertical-align: top; }
.rotator__word {
  position: absolute; left: 0; top: 0;
  opacity: 0; transform: translateY(0.35em);
  transition: opacity 0.55s var(--ease-quart), transform 0.55s var(--ease-quart);
  white-space: nowrap;
}
.rotator__word.is-active { position: relative; }
.rotator.is-glitching .rotator__word { opacity: 0 !important; transition: none; }
.rotator.is-snap .rotator__word { transition: none; }
.rotator__fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; image-rendering: pixelated; }
.rotator.is-glitching .rotator__fx { opacity: 1; }
.rotator__word.is-active { opacity: 1; transform: translateY(0); }
.rotator__word.is-leaving { opacity: 0; transform: translateY(-0.35em); }

/* 3D image ring */
.ring {
  position: relative; width: 100%; height: 400px; margin: 24px 0 20px;
  perspective: 1100px; perspective-origin: 50% 50%;
  pointer-events: none;
}
.ring__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; }
.ring__flow { position: absolute; inset: 0; }
.hero__power {
  --power-progress: 0;
  --power-charge: 0;
  --power-glow: 0;
  --power-orbit: -90deg;
  position: absolute; left: 50%; bottom: 100%;
  width: 88px; height: 132px; transform: translateX(-50%);
}
.hero__power-source {
  position: relative; display: grid; place-items: center;
  height: 88px; border-radius: 50%;
  background: radial-gradient(circle, #312c43, #17151e);
  border: 1px solid #c3a6ff40;
  box-shadow: 0 0 32px #b79cff12, 0 10px 28px #0005;
}
.hero__power-source::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid #d4bfff;
  box-shadow: 0 0 18px #c3a6ff44;
  opacity: calc(0.1 + var(--power-glow) * 0.9);
  pointer-events: none;
}
.hero__power-symbol {
  position: relative; z-index: 1; display: block; width: 60px; height: 54px; overflow: hidden;
}
.hero__power-symbol img {
  position: absolute; left: 3px; top: 6px;
  display: block; height: 44px; width: auto; max-width: none;
  /* The navigation asset truncates the orange dot; replace just that region. */
  clip-path: polygon(6.3% 0, 100% 0, 100% 100%, 0 100%, 0 17%, 6.3% 17%);
}
.hero__power-symbol::after {
  content: ''; position: absolute; left: 4px; top: 4px;
  width: 8.5px; height: 8.5px; border-radius: 50%;
  background: linear-gradient(145deg, #ff9812, #f57800);
}
.hero__power-orbit {
  position: absolute; inset: -13px; border: 1px solid #c3a6ff30; border-radius: 50%;
  transform: rotate(var(--power-orbit));
}
.hero__power-orbit::before {
  content: ''; position: absolute; top: 50%; left: -3px; width: 5px; height: 5px;
  border-radius: 50%; background: #e5d6ff; box-shadow: 0 0 14px 4px #b79cff88;
}
.hero__power-orbit::after {
  content: ''; position: absolute; inset: -7px; border: 1px solid #c3a6ff12; border-radius: 50%;
}
.hero__power-link {
  position: absolute; bottom: 0; left: calc(50% - 12px); width: 24px; height: 44px;
  overflow: hidden;
}
.hero__power-link::before {
  content: ''; position: absolute; left: 11px; width: 2px; height: 100%;
  background: linear-gradient(#c3a6ff40, #c6b4f54d);
}
.hero__power-packet {
  position: absolute; top: -16px; left: 10px; width: 4px; height: 16px;
  border-radius: 4px; background: linear-gradient(transparent, #c3a6ff, #fff);
  box-shadow: 0 0 10px #c3a6ff99;
  transform: translateY(calc(var(--power-progress) * 44px));
}
.hero__power::after {
  content: ''; position: absolute; left: calc(50% - 22px); bottom: -2px;
  width: 44px; height: 4px; border-radius: 50%; background: #e8dfff;
  box-shadow: 0 0 18px 5px #c3a6ff66;
  opacity: var(--power-charge); z-index: 2;
}
.hero__strip-frame {
  position: relative; width: 300px; height: 88px; padding: 5px;
  background: var(--offblack);
  border: 1px solid var(--gray-dark-2);
  border-radius: 12px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.hero__strip-track { position: absolute; inset: 5px; overflow: hidden; }
.hero__strip-track img {
  position: absolute; left: 50%; top: 50%; height: 64px; width: 64px;
  object-fit: contain; object-position: center;
  border-radius: 14px; background: #17141e; will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .hero__power-packet, .hero__power::after { display: none; }
}
@media (max-width: 600px) {
  .hero__strip-frame { width: 220px; height: 72px; }
  .hero__strip-track img { width: 52px; height: 52px; border-radius: 11px; }
}
.ring__panel {
  position: absolute; left: 50%; top: 50%;
  width: 120px; height: 160px;
  border-radius: 3px; overflow: hidden; background: #000;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.ring__panel img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.hero__lede {
  max-width: 560px; text-align: center;
  font: 400 1rem/1.5 var(--font-sans); letter-spacing: -0.015em;
  color: #c3c0cd;
}

/* prompt pill / card */
.prompt {
  position: relative;
  background: var(--gray-dark-1);
  border: 1px solid var(--gray-light-2-faded);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-default);
  color: var(--white);
  overflow: hidden;
}
/* anchors reserve the space the travelling prompt docks into */
.prompt-anchor--hero { width: 320px; height: 57px; margin-top: 32px; }
.prompt-anchor--canvas { position: absolute; left: 3vw; top: 24vh; width: min(400px, 39vw); height: 1px; }
.prompt--travel {
  position: fixed; left: 0; top: 0; z-index: 80;
  width: 320px; visibility: hidden;
  will-change: transform, width;
  transition: opacity 0.25s var(--ease-sin);
}
.prompt--travel.is-hidden { opacity: 0; pointer-events: none; }
.prompt--travel .prompt__tabs {
  max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-color: transparent; overflow: hidden;
  transition: max-height 0.45s var(--ease-quart), padding 0.45s var(--ease-quart), border-color 0.3s;
}
.prompt--travel.is-expanded .prompt__tabs { max-height: 48px; padding-top: 10px; padding-bottom: 10px; border-bottom-color: rgba(185, 185, 185, 0.18); }
.prompt--travel .prompt__tab { opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s var(--ease-quart), color 0.2s; }
.prompt--travel.is-expanded .prompt__tab { opacity: 1; transform: none; transition-delay: 0.15s; }
.prompt--travel .prompt__tab-bg { opacity: 0; transition: opacity 0.3s 0.15s, transform 0.45s var(--ease-quart), width 0.45s var(--ease-quart); }
.prompt--travel.is-expanded .prompt__tab-bg { opacity: 1; }
.prompt__icon { display: flex; color: var(--gray-light-2); flex: none; }
.prompt__text { flex: 1; display: flex; align-items: center; min-width: 0; font: 400 0.85rem/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--white); white-space: nowrap; overflow: hidden; }
.caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; background: var(--orange); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.prompt__go {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--gray-dark-3); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.2s, transform 0.2s;
}
.prompt--pill:hover .prompt__go, .prompt__go:hover { background: var(--orange); }
.prompt__row { display: flex; align-items: center; gap: 10px; height: 57px; padding: 0 10px 0 16px; }
.prompt__tabs {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 8px;
  border-bottom: 1px solid rgba(185, 185, 185, 0.18);
  overflow-x: auto; scrollbar-width: none;
}
.prompt__tabs::-webkit-scrollbar { display: none; }
.prompt__tab {
  position: relative; z-index: 1;
  padding: 6px 13px; border-radius: var(--radius-sm);
  font: 400 0.75rem/1.35 var(--font-display); letter-spacing: -0.04em; white-space: nowrap;
  color: var(--gray-light-3);
  transition: color 0.2s;
}
.prompt__tab:hover { color: var(--white); }
.prompt__tab.is-active { color: var(--white); }
.prompt__tab-bg {
  position: absolute; top: 10px; bottom: 10px; left: 0; width: 80px;
  background: var(--orange); border-radius: var(--radius-sm);
  transition: transform 0.45s var(--ease-quart), width 0.45s var(--ease-quart);
}

/* ==========================================================================
   Canvas showcase (apps)
   ========================================================================== */
.canvas { position: relative; background: var(--black); isolation: isolate; }
.canvas__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 1; }
.canvas__list {
  position: relative; z-index: 2;
  margin-top: -100vh; margin-top: -100svh;
  padding: 216px 10px 328px 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 16px;
}

.canvas__bgs { position: absolute; inset: 0; }
.canvas__bg { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease-sin); }
.canvas__bg.is-active { opacity: 1; }
.canvas__bg--wishsy { background: linear-gradient(120deg, #151020 0%, #2b2050 45%, #4a3d7a 100%); }
.canvas__bg--gigglebooks { background: linear-gradient(120deg, #1c1018 0%, #3a1f3a 45%, #2b3a66 100%); }
.canvas__bg--aiwardrobe { background: linear-gradient(120deg, #10122a 0%, #232a58 45%, #2c4a6e 100%); }
.canvas__bg--atomicwins { background: linear-gradient(120deg, #10161c 0%, #1e2a3e 45%, #1c4a48 100%); }
.canvas__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 30% 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
}
.canvas__glow {
  position: absolute; left: 6vw; top: 8vh; width: 42vw; height: 42vw;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 70%);
  filter: blur(20px);
}
.canvas__blur {
  position: absolute; left: -6vw; top: -10vh; width: 60vw; height: 60vw;
  object-fit: cover; opacity: 0.4; filter: blur(80px) saturate(0.9);
  transform: rotate(12deg) scale(1.1);
}
.canvas__hero-img {
  position: absolute; left: 10vw; top: 17vh; height: 92vh; width: auto;
  object-fit: cover; object-position: top;
  border-radius: 34px; border: 9px solid #17131c; background: #17131c;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: rotate(-4deg) translateY(0);
  transition: transform 1s var(--ease-quart);
}
.canvas__bg:not(.is-active) .canvas__hero-img { transform: rotate(-4deg) translateY(40px); }
.canvas__hero-img--back {
  left: 27vw; top: 30vh; height: 74vh; opacity: 0.9;
  transform: rotate(6deg) translateY(0);
  filter: brightness(0.85);
}
.canvas__bg:not(.is-active) .canvas__hero-img--back { transform: rotate(6deg) translateY(60px); }
.canvas__bg--atomicwins .canvas__hero-img--back { height: 40vh; width: 40vh; left: 30vw; top: 44vh; border-radius: 22%; object-fit: cover; }

.canvas__panel {
  position: relative; flex: none; width: 54.2vw; max-width: 900px;
  min-height: 550px; border-radius: 24px; overflow: hidden;
  background: #14131a; border: 1px solid #ffffff18;
  box-shadow: 0 30px 80px #0006;
}
.product { --app-accent: #c3a1ff; --app-glow: #8751ef; }
.product--gigglebooks { --app-accent: #e6bcfb; --app-glow: #a45bbf; }
.product--aiwardrobe { --app-accent: #a7c8ff; --app-glow: #477ce7; }
.product--atomicwins { --app-accent: #7aebcd; --app-glow: #05b89d; }
.product__layout { position: relative; display: grid; grid-template-columns: 46% 54%; min-height: 550px; }
.product__copy { position: relative; z-index: 2; padding: 38px 0 34px 32px; display: flex; flex-direction: column; align-items: flex-start; }
.product__identity { display: flex; align-items: center; gap: 12px; margin-bottom: 44px; }
.product__identity img { width: 48px; height: 48px; border-radius: 13px; object-fit: contain; }
.product__identity span { display: block; color: #f5f2fa; font-size: 17px; font-weight: 500; letter-spacing: -.03em; }
.product__identity small { display: block; color: #aaa5b7; font-size: 11px; margin-top: 4px; }
.product__copy h3 { margin: 0 0 18px; font: 400 clamp(32px, 2.65vw, 44px)/1.08 var(--font-serif); letter-spacing: -.025em; color: #f5f2ed; }
.product__copy h3 em { color: var(--app-accent); font-weight: 400; }
.product__copy > p { margin: 0 0 25px; max-width: 290px; color: #bab5c6; font-size: 14px; line-height: 1.7; }
.product__link { display: inline-flex; align-items: center; justify-content: space-between; gap: 23px; padding: 13px 17px; border: 1px solid #ffffff20; border-radius: 10px; background: #ffffff08; color: #f5f2fa; font-size: 13px; transition: background .2s, border-color .2s; }
.product__link span { color: var(--app-accent); font-size: 20px; line-height: 1; }
.product__link:hover { background: #ffffff13; border-color: var(--app-accent); }
.product__link:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 5px; }
.product__features { display: flex; flex-wrap: wrap; gap: 9px 16px; list-style: none; padding: 28px 0 0; margin: auto 0 0; color: #aaa5b7; font-size: 10px; }
.product__features li::before { content: '·'; color: var(--app-accent); margin-right: 6px; }
.product__visual { position: relative; min-width: 0; min-height: 550px; isolation: isolate; }
.product__halo { position: absolute; inset: 0 -25% -10% -25%; z-index: -1; opacity: .3; background: radial-gradient(ellipse at 55% 55%, var(--app-glow), transparent 65%); }
.product__screen { position: absolute; height: auto; border-radius: 20px; border: 5px solid #292632; box-shadow: 0 24px 45px #0008; }
.product__screen--primary { width: 57%; max-height: 435px; object-fit: contain; left: 7%; top: 62px; transform: rotate(-6deg); z-index: 2; }
.product__screen--secondary { width: 40%; max-height: 350px; object-fit: contain; right: 9%; top: 132px; transform: rotate(8deg); filter: brightness(.85); }
.product__moment { position: absolute; z-index: 3; left: 1%; right: 7%; bottom: 46px; display: flex; align-items: center; gap: 11px; padding: 15px; border: 1px solid #ffffff25; border-radius: 15px; background: #23202cef; box-shadow: 0 14px 35px #0006; backdrop-filter: blur(18px); }
.product__moment-symbol { flex: none; display: grid; place-items: center; width: 34px; height: 34px; color: var(--app-accent); background: #ffffff09; border-radius: 10px; font-size: 23px; }
.product__moment strong { display: block; font-size: 12px; font-weight: 500; color: #f5f2fa; }
.product__moment div > span { display: block; margin-top: 5px; font-size: 10px; line-height: 1.5; color: #bdb6ca; }
.product__steps { position: absolute; top: 190px; right: 4%; width: 58%; padding: 17px 14px; border: 1px solid #ffffff20; border-radius: 15px; background: #183630; transform: rotate(8deg); }
.product__steps > span { font-size: 8px; letter-spacing: .1em; color: #92c9bc; }
.product__steps > div { display: flex; align-items: center; gap: 7px; margin-top: 15px; font-size: 10px; color: #e0f4ef; }
.product__steps i { font-style: normal; color: #7aebcd; }
.product__layout.is-active .product__moment { animation: product-arrival 5s ease-in-out infinite; }
@keyframes product-arrival { 0%, 100% { transform: translateY(6px); } 45%, 65% { transform: translateY(-3px); } }
@media (max-width: 768px) {
  .product__layout { grid-template-columns: 1fr; }
  .product__copy { padding: 28px 26px 0; }
  .product__identity { margin-bottom: 28px; }
  .product__copy h3 { font-size: 40px; }
  .product__copy > p { max-width: 440px; }
  .product__features { padding-top: 22px; }
  .product__visual { min-height: 450px; max-width: 440px; width: 100%; justify-self: center; }
  .product__screen--primary { width: 48%; left: 14%; top: 30px; max-height: 365px; }
  .product__screen--secondary { width: 37%; right: 12%; top: 83px; max-height: 295px; }
  .product__moment { left: 8%; right: 8%; bottom: 27px; }
  .product__steps { right: 8%; top: 130px; width: 47%; }
}

/* ==========================================================================
   Deck (approach)
   ========================================================================== */
.deck-section {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 160px 32px 96px;
  min-height: 100svh;
  background: #101015; color: #f5f2ed;
}
.deck-section__bg { position: absolute; inset: -1px 0; z-index: 0; background-color: #101015; }
.deck-section__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 48%, #7560ad1c, transparent 65%);
}
.deck-section__head { position: relative; z-index: 2; text-align: center; max-width: 720px; margin-bottom: 96px; }
.deck-section__head p { margin-top: 14px; color: #bdb9ca; }

.deck { position: relative; z-index: 2; width: 100%; max-width: 1200px; height: 560px; display: flex; justify-content: center; align-items: flex-end; }
.deck__stack { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 400px; height: 525px; pointer-events: none; }
.deck__ghost {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: #202027; border-radius: var(--radius-lg); padding: 10px 10px 0;
  box-shadow: 0 -1px 0 #ffffff24, 0 6px 20px #0003;
}
.deck__ghost--1 { top: -34px; width: 372px; height: 80px; }
.deck__ghost--2 { top: -62px; width: 344px; height: 80px; }
.deck__ghost--3 { top: -88px; width: 316px; height: 80px; }
.deck__ghost-img { height: 26px; border-radius: 6px 6px 0 0; }
.deck__ghost-img--1 { background: linear-gradient(135deg, #21192f, #39264f 50%, #231d34); }
.deck__ghost-img--2 { background: linear-gradient(135deg, #171f35, #2a3158 50%, #203c49); }
.deck__ghost-img--3 { background: linear-gradient(135deg, #1b2531, #273552 50%, #20483f); }

.deck__card {
  position: relative; z-index: 3;
  width: 400px; height: 525px;
  background: #202027; border-radius: var(--radius-lg);
  padding: 12px 12px 16px;
  display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px #ffffff1c, 0 30px 60px -30px #000b;
  perspective: 30rem;
}
.deck__media { position: relative; width: 376px; height: 376px; border-radius: var(--radius-lg); overflow: hidden; }
.deck__notch { position: absolute; left: 0; bottom: 0; z-index: 3; width: 26px; height: 104px; background: #202027; border-radius: 0 8px 0 0; }
.deck__brand { position: absolute; left: 8px; bottom: 14px; z-index: 4; transform: rotate(-90deg); transform-origin: left bottom; color: #f5f2ed; letter-spacing: 0.08em; white-space: nowrap; }
.deck__slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 0.6s var(--ease-quart), transform 0.6s var(--ease-quart); }
.deck__slide.is-active { opacity: 1; transform: none; }
.deck__art { position: relative; width: 100%; height: 100%; overflow: hidden; }
.deck__art > img:first-child { position: absolute; left: 50%; top: 32px; width: 210px; transform: translateX(-50%); border-radius: 18px; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.5); }
.deck__icon { position: absolute; right: 18px; top: 18px; width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.deck__art--gigglebooks { background: linear-gradient(135deg, #271b36, #48253f 50%, #263754); }
.deck__art--aiwardrobe { background: linear-gradient(135deg, #171f35, #2a3158 50%, #203c49); }
.deck__art--atomicwins { background: linear-gradient(135deg, #1b2531, #273552 50%, #20483f); }
.deck__art--wishsy { background: linear-gradient(135deg, #21192f, #39264f 50%, #231d34); }
.deck__body { position: relative; margin-top: 16px; padding: 0 32px 0 8px; flex: 1; }
.deck__text { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-quart), transform 0.5s var(--ease-quart); pointer-events: none; }
.deck__text.is-active { opacity: 1; transform: none; pointer-events: auto; }
.deck__text h3 { color: #f5f2ed; }
.deck__text p { color: #c3c0cd; }

.polaroid {
  position: absolute; z-index: 4;
  background: #202027; border: 1px solid #ffffff1c; border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s var(--ease-quart);
}
.polaroid:hover { transform: translateY(-4px) rotate(-1deg); }
.polaroid img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: var(--radius-md); background: #000; }
.polaroid .tag { position: absolute; bottom: 16px; right: 16px; z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); font-size: 0.625rem; padding: 4px 8px; }
.polaroid--1 { left: 5%; top: 40%; width: 160px; height: 160px; }
.polaroid--2 { right: 4%; top: -4%; width: 200px; height: 200px; }
.polaroid--3 { right: 7%; top: 50%; width: 160px; height: 160px; }
.polaroid--4 { left: 1.5%; top: 78%; width: 200px; height: 200px; }

.tabbar {
  position: relative; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px;
  background: #202027; border-radius: var(--radius-lg);
  margin-top: 40px;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar__tab {
  position: relative; z-index: 1;
  padding: 8px 16px; white-space: nowrap;
  font: 400 0.8rem/1.2 var(--font-sans); letter-spacing: -0.03em;
  color: #f5f2ed; transition: color 0.3s;
}
.tabbar__tab:hover { color: #fff; }
.tabbar__tab:focus-visible { outline: 2px solid #c7b6f5; outline-offset: -2px; border-radius: 6px; }
.tabbar__tab.is-active { color: var(--white); }
.tabbar__bg {
  position: absolute; top: 8px; bottom: 8px; left: 8px; width: 84px;
  background: var(--orange); border-radius: var(--radius-md);
  transition: transform 0.45s var(--ease-quart), width 0.45s var(--ease-quart);
}

/* ==========================================================================
   Frames carousel (foundation)
   ========================================================================== */
.frames-section { position: relative; overflow: hidden; padding: 104px 0 96px; display: flex; flex-direction: column; align-items: center; }
.frames-section__bg { position: absolute; inset: -1px 0; z-index: 0; }
.frames-section__title { position: relative; z-index: 2; padding: 0 32px; margin-bottom: 80px; }
.frames { position: relative; z-index: 2; width: 100%; perspective: 1400px; }
.frames__track {
  display: flex; gap: 20px; padding: 20px calc(50% - 130px) 40px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  transform-style: preserve-3d;
}
.frames__track::-webkit-scrollbar { display: none; }
.frame {
  position: relative; flex: none; width: 260px; scroll-snap-align: center;
  background: var(--black); border: 1px solid var(--gray-dark-2); border-radius: var(--radius-md);
  padding: 22px 10px 10px;
  transform-style: preserve-3d;
  transition: transform 0.2s linear;
  will-change: transform;
}
.frame__dot { position: absolute; left: 10px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(240, 78, 35, 0.2); }
.frame__dots { position: absolute; right: 12px; top: 0; color: var(--gray); font-size: 14px; letter-spacing: 1px; }
.frame__screen {
  position: relative; aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 18px;
}
.frame__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45)); }
.frame__num { position: absolute; top: 14px; left: 18px; z-index: 1; font: 500 0.625rem/1 var(--font-display); letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.85); }
.frame__title { position: relative; z-index: 1; font: 400 1.7rem/1 var(--font-display); letter-spacing: -0.04em; color: var(--white); }
.frame__screen img {
  position: absolute; right: -6%; top: -10%; width: 58%; height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: 22%;
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.6);
  transform: rotate(-8deg);
}
.frame__screen img.frame__img--wide { width: 70%; right: 8%; top: 22%; aspect-ratio: auto; border-radius: 0; box-shadow: none; transform: rotate(-4deg); opacity: 0.95; }
.frame__desc { padding: 14px 6px 4px; font: 400 0.8rem/1.3 var(--font-sans); letter-spacing: -0.03em; color: var(--gray-light-2); }
.frame__screen--1 { background: radial-gradient(120% 100% at 20% 20%, #ffb257, #f04e23 45%, #4a1a0a); }
.frame__screen--2 { background: radial-gradient(120% 100% at 80% 20%, #c7adff, #6b4bff 45%, #16113a); }
.frame__screen--3 { background: radial-gradient(120% 100% at 30% 80%, #b0e3e8, #4164b9 50%, #0d1a3a); }
.frame__screen--4 { background: radial-gradient(120% 100% at 70% 70%, #e0e07b, #9d9d25 50%, #1e1e0a); }
.frame__screen--5 { background: radial-gradient(120% 100% at 50% 20%, #fff78b, #ea9e1a 45%, #3a2406); }
.frame__screen::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 22px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 22px);
  mix-blend-mode: overlay;
}

.frames__nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 22px; margin-top: 36px; color: var(--white); }
.frames__arrow { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--white); transition: color 0.2s; }
.frames__arrow:hover { color: var(--orange); }
.frames__progress { position: relative; width: 140px; height: 2px; background: var(--gray); overflow: hidden; }
.frames__progress-bar { position: absolute; left: 0; top: 0; height: 100%; width: 20%; background: var(--orange); transition: transform 0.4s var(--ease-quart); }

/* ==========================================================================
   Studio principles + founder
   ========================================================================== */
.cards-section { position: relative; overflow-x: clip; padding: 120px max(32px, 7vw) 96px; color: #f5f2ed; background: #101015; }
.cards-section__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 10% 20%, #66459412, transparent 45%), radial-gradient(ellipse at 90% 75%, #59427714, transparent 45%); }
.cards-section > *:not(.cards-section__bg) { position: relative; z-index: 1; }
.studio-head { max-width: 1200px; margin: 0 auto 56px; }
.studio-eyebrow { display: block; color: #bba8e8; font: 500 10px/1.4 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; }
.studio-head h2 { font: 400 clamp(42px, 4.7vw, 68px)/1.04 var(--font-serif); letter-spacing: -.025em; margin: 20px 0; }
.studio-head h2 em, .founder__note em { color: #c7b6f5; font-weight: 400; }
.studio-head > p { max-width: 510px; font: 400 15px/1.65 var(--font-sans); color: #a9a6b5; }
.principles { max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.principle { position: relative; overflow: hidden; min-width: 0; padding: 32px; border: 1px solid #ffffff14; border-radius: 22px; display: flex; flex-direction: column; background: #18181f; transition: border-color .3s, box-shadow .3s; }
.principle:hover { border-color: #c7b6f547; box-shadow: 0 12px 44px #0003; }
.principle--ai { grid-column: span 7; background: radial-gradient(ellipse at 50% 80%, #49346644, transparent 65%), #18181f; }
.principle--design { grid-column: span 5; background: radial-gradient(ellipse at 70% 70%, #33496844, transparent 70%), #18181f; }
.principle--rating { grid-column: span 5; }
.principle--privacy { grid-column: span 7; background: radial-gradient(ellipse at 85% 50%, #48356244, transparent 65%), #18181f; }
.principle__heading { position: relative; z-index: 2; }
.principle__index { display: block; font: 500 10px/1.3 var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: #9b91b0; margin-bottom: 18px; }
.principle h3 { font: 400 34px/1.1 var(--font-serif); letter-spacing: -.02em; color: #f5f2ed; }
.principle__heading p { font: 400 13px/1.65 var(--font-sans); color: #aaa7b6; margin-top: 12px; max-width: 390px; }
.principle__tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 20px; }
.principle__tags li { font: 400 10px/1.4 var(--font-sans); color: #c1bbcd; border: 1px solid #ffffff13; border-radius: 30px; padding: 6px 10px; background: #14141c60; }
.intelligence-map { position: relative; height: 212px; margin: 10px -12px 0; }
.intelligence-map svg { position: absolute; inset: 0; height: 100%; width: 100%; }
.intelligence-map path { fill: none; stroke: #b59be86b; stroke-width: 1; }
.intelligence-map__core { position: absolute; left: 50%; top: 49%; transform: translate(-50%, -50%); width: 68px; height: 68px; border: 1px solid #c3a6ff88; border-radius: 20px; display: grid; place-items: center; color: #d3bdff; font: 40px/1 var(--font-sans); background: #292235; box-shadow: 0 0 0 8px #c3a6ff08, 0 0 55px #b192f526; }
.intelligence-map__node { position: absolute; transform: translate(-50%, -50%); padding: 7px; border: 1px solid #ffffff12; border-radius: 18px; background: #1a1923; }
.intelligence-map__node img { width: 40px; height: 40px; border-radius: 11px; }
.intelligence-map__node--1 { left: 16%; top: 23%; }
.intelligence-map__node--2 { left: 84%; top: 23%; }
.intelligence-map__node--3 { left: 16%; top: 80%; }
.intelligence-map__node--4 { left: 84%; top: 80%; }
.design-gallery { position: relative; height: 212px; margin: 12px -32px 0; overflow: hidden; mask-image: linear-gradient(#000 80%, transparent); }
.design-gallery img { position: absolute; top: 22px; width: 126px; border: 4px solid #282332; border-radius: 17px; box-shadow: 0 15px 28px #0005; }
.design-gallery img:nth-child(1) { left: calc(50% - 148px); transform: rotate(-12deg); }
.design-gallery img:nth-child(2) { left: calc(50% - 63px); top: 5px; z-index: 2; }
.design-gallery img:nth-child(3) { left: calc(50% + 22px); transform: rotate(12deg); }
.studio-rating { display: flex; align-items: center; gap: 26px; margin-top: 18px; }
.studio-rating__number { font: 400 100px/1 var(--font-serif); letter-spacing: -.06em; }
.studio-rating__stars { display: block; color: #f6ae79; letter-spacing: 3px; font-size: 17px; }
.studio-rating p { margin-top: 10px; color: #a9a6b5; font: 400 11px/1.6 var(--font-sans); }
.studio-apps { display: flex; gap: 9px; margin-top: 22px; }
.studio-apps img { width: 32px; height: 32px; border-radius: 9px; }
.principle--privacy .principle__heading { max-width: 65%; }
.principle--privacy h3 { font-size: 42px; }
.privacy-seal { position: absolute; right: 7%; top: 24%; width: 120px; height: 140px; color: #bca1f1; filter: drop-shadow(0 0 28px #b192f533); }
.privacy-seal svg { width: 100%; height: 100%; }

.founder { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.4fr); max-width: 1200px; margin: 96px auto 0; border-top: 1px solid #ffffff1a; padding-top: 64px; column-gap: 64px; }
.founder__portrait { min-width: 0; align-self: start; }
.founder__portrait img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 18px; border: 1px solid #ffffff15; }
.founder__note { margin-top: 24px; font: 400 32px/1.15 var(--font-serif); letter-spacing: -.015em; }
.founder__main { min-width: 0; }
.founder__name { font: 400 clamp(40px, 4vw, 60px)/1.05 var(--font-serif); letter-spacing: -.025em; margin: 18px 0 12px; }
.founder__role { font: 400 13px/1.5 var(--font-sans); color: #a59cb6; margin-bottom: 24px; }
.founder__bio { font: 400 14px/1.8 var(--font-sans); letter-spacing: -.01em; color: #b7b2c2; margin-bottom: 16px; max-width: 650px; }
.founder__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 26px; }
.founder__cta .btn { gap: 22px; padding: 0 20px; }
.founder__mail { font: 400 12px/1.5 var(--font-sans); color: #d5c6ef; overflow-wrap: anywhere; }
.founder__mail:hover { color: #fff; }
.founder__side { grid-column: 1 / -1; margin-top: 48px; padding: 30px 0 0; border-top: 1px solid #ffffff14; display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 40px; }
.founder__block { min-width: 0; }
.founder__label { display: block; color: #8c849b; font: 500 10px/1.4 var(--font-sans); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { display: inline-flex; padding: 7px 10px; border: 1px solid #ffffff1a; border-radius: 6px; font: 400 11px/1.2 var(--font-sans); color: #c2bbcf; }
.applist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.applist a { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; border-radius: 6px; }
.applist a:hover span { color: #d4bfff; }
.applist img { width: 28px; height: 28px; border-radius: 8px; grid-row: span 2; }
.applist span { font: 400 11px/1.2 var(--font-sans); color: #dfd9e8; }
.applist em { font: normal 9px/1 var(--font-sans); color: #948b9f; margin-top: -5px; }
.founder__loc { font: 400 12px/1.6 var(--font-sans); color: #b7b2c2; }
.founder a:focus-visible { outline: 2px solid #c7b6f5; outline-offset: 5px; }
@media (max-width: 1000px) {
  .principle { padding: 26px; }
  .principle--ai, .principle--design, .principle--rating, .principle--privacy { grid-column: span 6; }
  .principle--privacy .principle__heading { max-width: 100%; }
  .privacy-seal { width: 65px; height: 75px; top: auto; bottom: 65px; right: 26px; opacity: .7; }
  .founder { column-gap: 36px; grid-template-columns: minmax(200px, .7fr) minmax(0, 1fr); }
  .founder__side { grid-template-columns: 1fr 1.5fr; }
}
@media (max-width: 700px) {
  .studio-head { margin-bottom: 32px; }
  .principles { grid-template-columns: 1fr; gap: 16px; }
  .principle--ai, .principle--design, .principle--rating, .principle--privacy { grid-column: auto; }
  .principle { padding: 26px; }
  .principle--privacy { min-height: 295px; }
  .principle--privacy .principle__heading { max-width: 72%; }
  .privacy-seal { width: 80px; height: 92px; top: 95px; right: 20px; }
  .founder { grid-template-columns: 1fr; margin-top: 64px; padding-top: 40px; row-gap: 32px; }
  .founder__portrait { max-width: 360px; width: 100%; }
  .founder__note { font-size: 28px; }
  .founder__side { margin-top: 0; grid-template-columns: 1fr; gap: 26px; }
  .founder__bio { font-size: 14px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { position: relative; overflow: clip; padding: 220px 80px 0; }
.footer__bg { position: absolute; inset: -1px 0; z-index: 0; }
.footer__wordmark {
  position: absolute; left: 50%; top: 96px; transform: translateX(-50%); z-index: 1;
  width: 100%; display: flex; justify-content: center; pointer-events: none;
}
.footer__wordtext { font: 500 15.5vw/1 var(--font-display); letter-spacing: -0.045em; color: #202020; white-space: nowrap; }
.footer__card {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto;
  background: var(--gray-dark-2); border-radius: var(--radius-lg);
  padding: 32px 36px 28px;
  color: var(--white);
}
.footer__top { display: flex; justify-content: space-between; gap: 48px; }
.footer__lead { width: 360px; flex: none; }
.footer__sub { margin-top: 8px; }
.footer__form { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.field input, .field textarea {
  width: 100%; height: 40px; padding: 12px 16px;
  background: var(--white); color: var(--black); border: 0; border-radius: var(--radius-md);
  font: 400 0.85rem/1.2 var(--font-sans); letter-spacing: -0.03em;
  outline: none;
}
.field textarea { height: auto; min-height: 84px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #99a1af; }
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 2px var(--orange); }
.field__submit {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; padding: 0 16px;
  background: var(--white); color: var(--black); border-radius: var(--radius-md);
  font: 400 0.85rem/1.2 var(--font-sans); letter-spacing: -0.03em;
  transition: background-color 0.2s, color 0.2s;
}
.field__submit:hover { background: var(--orange); color: var(--white); }

.footer__cols { display: flex; gap: 72px; padding-top: 20px; width: 50%; }
.footer__col { display: flex; flex-direction: column; gap: 16px; min-width: 110px; }
.footer__colhead { color: var(--gray-bg); font: 400 0.85rem/1.2 var(--font-sans); letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 8px; }
.footer__col a, .footer__col span { color: var(--gray); font: 400 0.85rem/1.2 var(--font-sans); letter-spacing: -0.03em; transition: color 0.2s; }
.footer__col a:hover { color: var(--white); }

.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--gray-dark-3); }
.footer__bottom-left { display: flex; align-items: center; gap: 24px; }
.footer__bottom-right { display: flex; gap: 24px; }
.footer__bottom-right a { color: var(--gray); font: 400 0.85rem/1.2 var(--font-sans); letter-spacing: -0.03em; }
.footer__bottom-right a:hover { color: var(--white); }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 8px; vertical-align: middle; }

/* ==========================================================================
   Finale arc
   ========================================================================== */
.finale { position: relative; overflow: hidden; padding: 170px 0 16px; display: flex; flex-direction: column; align-items: center; }
.finale__bg { position: absolute; inset: -1px 0; z-index: 0; background-color: var(--black); }
.finale__title { position: relative; z-index: 3; font: 400 4rem/1 var(--font-display); letter-spacing: -0.03em; color: var(--white); text-align: center; }
.finale__sub { position: relative; z-index: 3; margin-top: 16px; max-width: 420px; }
.finale__go { position: relative; z-index: 3; margin-top: 28px; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--black); display: flex; align-items: center; justify-content: center; transition: transform 0.25s var(--ease-sin), background-color 0.25s; }
.finale__go:hover { transform: scale(1.08); background: var(--orange); color: var(--white); }
.arc { position: relative; z-index: 2; width: 100%; height: 370px; margin-top: 40px; }
.arc img {
  position: absolute; left: 50%; top: 0; width: 110px; height: 150px; margin-left: -55px;
  object-fit: cover; object-position: top; border-radius: 6px; background: #111;
  transform-origin: 50% 0;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease-quart), transform 0.8s var(--ease-quart); }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .cards-section { padding: 100px 40px 64px; }
  .footer { padding: 180px 32px 0; }
  .footer__cols { width: auto; gap: 40px; }
  .polaroid--2, .polaroid--3 { right: 0; }
  .polaroid--1, .polaroid--4 { left: 0; }
}
@media (max-width: 1024px) {
  .header__actions .btn--yellow { display: none; }
  .canvas__hero-img { left: 4vw; top: 10vh; height: 70vh; }
  .prompt-anchor--canvas { left: 5vw; top: 14vh; width: min(400px, 90vw); }
  .canvas__panel { width: 90vw; }
  .canvas__list { padding: 34vh 5vw 240px 5vw; align-items: center; }
  .canvas__meta { display: none; }
  .polaroid { display: none; }
}
@media (max-width: 768px) {
  .t-h-1 { font-size: 2.5rem; }
  .t-h-2 { font-size: 2rem; }
  .hero { padding: 64px 20px; }
  .hero__lede br { display: none; }
  .ring { height: 380px; }
  .announcement__long { display: none; }
  .brand { width: 200px; }
  .header { padding: 12px; }
  .canvas__hero-img { display: none; }
  .canvas__glow { left: 20vw; top: 4vh; width: 60vw; height: 60vw; }
  .prompt-anchor--canvas { left: 5vw; top: 128px; width: 90vw; }
  .canvas__list { padding: 300px 3vw 200px 3vw; align-items: center; }
  .canvas__meta { display: none; }
  .canvas__hero-img--back { display: none; }
  .frames__track { padding: 20px calc(50% - 130px) 40px; }
  .frame { width: 260px; }
  .canvas__panel { width: 94vw; height: auto; min-height: 0; }
  .deck-section { padding: 120px 16px 64px; }
  .deck { height: auto; }
  .deck__card { width: 100%; max-width: 400px; height: auto; }
  .deck__media { width: 100%; height: auto; aspect-ratio: 1; }
  .deck__body { min-height: 150px; }
  .deck__stack { display: none; }
  .cards-section { padding: 80px 16px 48px; }
  .footer { padding: 140px 12px 0; }
  .footer__card { padding: 24px 20px; }
  .footer__top { flex-direction: column; }
  .footer__lead { width: 100%; }
  .footer__cols { flex-wrap: wrap; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__bottom-left { flex-direction: column; align-items: flex-start; gap: 8px; }
  .finale__title { font-size: 2.5rem; }
  .arc { height: 150px; margin-top: 24px; }
  .arc img { width: 90px; height: 122px; margin-left: -45px; }
  .finale__title { font-size: 3rem; }
  .arc img { width: 80px; height: 108px; margin-left: -40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}