/*
 * home-system.css — the dirini.com HOME web design system, copied for the 링크비서 page.
 *
 * Source of truth: site/app/globals.css (Dirini Lab / Ops Canvas home). Rules below are
 * copied verbatim or with the minimum change needed to run without Tailwind. Each block
 * names the globals.css lines it came from. Part B translates the Tailwind classes the home
 * components use (components/ui/*.tsx, components/site/*.tsx) into plain classes.
 *
 * Changes vs. globals.css (all deliberate, listed in NOTES.md):
 *  - Fonts: same files as app/layout.tsx (next/font/local) declared with @font-face.
 *    Korean has no glyphs in Inter/Geist, so a Pretendard subset (OFL, the font the app
 *    ships) is added as the Hangul fallback, limited by unicode-range.
 *  - .hp (how-it-works piece) is renamed .hpc: on this page .hp is the form honeypot.
 *  - url("/cta-light.svg") → url("./img/cta-light.svg") so the preview runs standalone.
 *  - Korean line-heights: t-hero/t-h2/t-h3 get taller leading for Hangul (see
 *    "Korean leading" at the end of Part A). Sizes, weights and tracking are the home's.
 */

/* ===================================================================== */
/* Part A — copied from app/globals.css                                  */
/* ===================================================================== */

/* Fonts — app/layout.tsx (localFont: InterDisplay, Geist, GeistMono) */
@font-face { font-family: "Inter Display"; src: url("./fonts/InterDisplay-latin-opsz.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist"; src: url("./fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("./fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* Hangul fallback (page addition): Pretendard subset of the characters on this page. */
@font-face { font-family: "Pretendard LB"; src: url("./fonts/pretendard-400.woff") format("woff"); font-weight: 400; font-display: swap; unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+AC00-D7A3, U+FF01-FF5E; }
@font-face { font-family: "Pretendard LB"; src: url("./fonts/pretendard-500.woff") format("woff"); font-weight: 500; font-display: swap; unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+AC00-D7A3, U+FF01-FF5E; }
@font-face { font-family: "Pretendard LB"; src: url("./fonts/pretendard-600.woff") format("woff"); font-weight: 600; font-display: swap; unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+AC00-D7A3, U+FF01-FF5E; }

/* @theme inline (globals.css 7–50) + :root (57–89) */
:root {
  --font-sans: "Geist", "Pretendard LB", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Inter Display", "Geist", "Pretendard LB", -apple-system, "Apple SD Gothic Neo", ui-sans-serif, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --background: #ffffff;
  --foreground: #090b0c;
  --card: #ffffff;
  --primary: #090b0c;
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #f5f5f5;
  --destructive: #c62a2a;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #737373;
  --radius: 0.7rem;

  --brand: #2b4cff;
  --brand-soft: #e9edff;
  --link: #1f38c4;
  --hairline: rgb(0 0 0 / 0.06);
  --subtle: #fafafa;
  --panel: #16191d;
  --success: #1f9d63;
  --success-soft: #edf8f2;
  --success-foreground: #176f48;
  --warning: #8a6118;
  --warning-soft: #fff8e8;

  /* Radius scale from --radius (0.7rem = 11.2px): 5.6 / 11.2 / 16.8 / 22.4 / 33.6 */
  --radius-xs: calc(var(--radius) * 0.5);
  --radius-sm: var(--radius);
  --radius-md: calc(var(--radius) * 1.5);
  --radius-lg: calc(var(--radius) * 2);
  --radius-xl: calc(var(--radius) * 3);

  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);

  /* Form state transitions (globals.css 2052–2061) */
  --check-dur: 400ms;
  --check-rotate-from: 45deg;
  --check-y: 6px;
  --check-blur: 4px;
  --text-swap-dur: 150ms;
  --text-swap-y: 4px;
  --shake-distance: 5px;
  --shake-overshoot: 3px;
}

/* @layer base (globals.css 91–127) + Tailwind preflight essentials */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border); }
html {
  font-family: var(--font-sans);
  word-break: keep-all;
  overflow-wrap: anywhere;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
body { background: var(--background); color: var(--foreground); text-rendering: optimizeLegibility; min-height: 100dvh; }
h1, h2, h3 { font-family: var(--font-heading); font-optical-sizing: auto; text-wrap: balance; font-size: inherit; font-weight: inherit; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; background: transparent; }
button:not(:disabled), [role="button"]:not(:disabled), [role="tab"], summary { cursor: pointer; }
ol, ul { list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--brand-soft); color: #0b1a66; }

/* Type scale (globals.css 129–179) */
.t-h1 { font-family: var(--font-heading); font-weight: 400; font-size: 36px; line-height: 40px; letter-spacing: -0.36px; }
.t-h2 { font-family: var(--font-heading); font-weight: 450; font-size: 30px; line-height: 36px; letter-spacing: -0.3px; }
.t-h3 { font-family: var(--font-heading); font-weight: 450; font-size: 24px; line-height: 32px; letter-spacing: -0.2px; }
.t-lead { font-family: var(--font-heading); font-weight: 400; font-size: 18px; line-height: 27px; }
@media (width >= 48rem) {
  .t-h1 { font-size: 48px; line-height: 52px; letter-spacing: -0.48px; }
  .t-h2 { font-size: 44px; line-height: 48px; letter-spacing: -0.44px; }
  .t-h3 { font-size: 28px; line-height: 36px; }
  .t-lead { font-size: 20px; line-height: 28px; }
}
.tabular { font-variant-numeric: tabular-nums; }

/* Hairline frame column (globals.css 181–189) */
.frame-col { margin-inline: 16px; border-inline: 1px solid var(--hairline); }
@media (width >= 80rem) { .frame-col { margin-inline: auto; max-width: 1248px; } }

/* Hero window + CTA banner (globals.css 191–298) */
.t-hero { font-family: var(--font-heading); font-weight: 400; font-size: 36px; line-height: 41px; letter-spacing: -0.025em; }
@media (width >= 48rem) { .t-hero { font-size: 58px; line-height: 63px; letter-spacing: -0.028em; } }

.hero {
  --hero-overhang: 72px;
  --hero-ink: #090b0c;
  --hero-sub: #33406b;
  --hero-link: rgb(9 11 12 / 0.78);
  --hero-badge-border: rgb(11 26 102 / 0.14);
  --hero-badge-bg: rgb(255 255 255 / 0.55);
  --hero-badge-dot: var(--brand);
  color: var(--hero-ink);
}
@media (width >= 48rem) { .hero { --hero-overhang: 168px; } }
.hero-shell { bottom: var(--hero-overhang); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05); }
.hero-sub { color: var(--hero-sub); }
.hero-link { color: var(--hero-link); }
.hero-link:hover { color: var(--hero-ink); }
.hero-badge {
  height: 28px; gap: 6px; padding-inline: 10px 12px; font-size: 13px;
  border-color: var(--hero-badge-border); background: var(--hero-badge-bg); color: var(--hero-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
}
.hero-badge-dot { width: 6px; height: 6px; flex: none; border-radius: 9999px; background: var(--hero-badge-dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hero-badge-dot) 18%, transparent); }

/* Calm sky: ice at the top, a breath of cobalt toward the demo. */
.hero-bg {
  background:
    radial-gradient(70% 55% at 50% -12%, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0) 70%),
    radial-gradient(55% 45% at 50% 108%, rgb(43 76 255 / 0.55) 0%, rgb(43 76 255 / 0) 72%),
    radial-gradient(40% 40% at 6% 60%, rgb(180 200 255 / 0.55), rgb(180 200 255 / 0) 70%),
    radial-gradient(40% 40% at 96% 40%, rgb(200 214 255 / 0.6), rgb(200 214 255 / 0) 70%),
    linear-gradient(180deg, #f4f7ff 0%, #e6edff 34%, #ccd9ff 66%, #a9bcff 100%);
}
.hero-dots {
  background-image: radial-gradient(rgb(43 76 255 / 0.16) 0.8px, transparent 1.2px);
  background-size: 14px 14px;
  mask-image: radial-gradient(60% 46% at 50% 26%, black 0%, transparent 78%);
}
.hero-grain { opacity: 0.35; }

.window-banner {
  background:
    radial-gradient(70% 90% at 50% 120%, #2b4cff 0%, #4f6bff 30%, rgb(79 107 255 / 0) 68%),
    linear-gradient(180deg, #f4f6ff 0%, #e9edff 45%, #c9d3ff 100%);
}
.dot-grid { background-image: radial-gradient(rgb(255 255 255 / 0.55) 1px, transparent 1.4px); background-size: 18px 18px; }
.grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.55;
}

/* Glass product frame (64% white, no backdrop blur — the sky shows through). */
.glass-frame {
  background: rgb(255 255 255 / 0.64);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 0 0 0.5px rgb(9 11 12 / 0.12),
    0 30px 60px -20px rgb(16 28 110 / 0.35),
    0 12px 24px -12px rgb(16 28 110 / 0.2);
}
.raised { box-shadow: 0 0 0 0.5px rgb(9 11 12 / 0.12), 0 1px 3px rgb(0 0 0 / 0.08); }

/* Pastel "silk" fields for illustration cards (globals.css 299–327) */
.silk-ice {
  background:
    radial-gradient(90% 70% at 12% 0%, #ffffff 0%, rgb(255 255 255 / 0) 55%),
    radial-gradient(75% 85% at 100% 100%, #a9c8ff 0%, rgb(169 200 255 / 0) 68%),
    radial-gradient(60% 60% at 0% 100%, #d9f1ff 0%, rgb(217 241 255 / 0) 70%),
    #dde9ff;
}
.silk-mint {
  background:
    radial-gradient(90% 70% at 88% 0%, #ffffff 0%, rgb(255 255 255 / 0) 55%),
    radial-gradient(75% 85% at 0% 100%, #a5e4cc 0%, rgb(165 228 204 / 0) 68%),
    radial-gradient(60% 60% at 100% 90%, #d6f3f4 0%, rgb(214 243 244 / 0) 70%),
    #d9f3e8;
}
.silk-lavender {
  background:
    radial-gradient(90% 70% at 15% 0%, #ffffff 0%, rgb(255 255 255 / 0) 55%),
    radial-gradient(75% 85% at 100% 100%, #c6baff 0%, rgb(198 186 255 / 0) 68%),
    radial-gradient(60% 60% at 0% 95%, #e6e2ff 0%, rgb(230 226 255 / 0) 70%),
    #e7e3ff;
}
.silk-sky {
  background:
    radial-gradient(90% 70% at 85% 0%, #ffffff 0%, rgb(255 255 255 / 0) 55%),
    radial-gradient(75% 85% at 0% 100%, #9fdcef 0%, rgb(159 220 239 / 0) 68%),
    radial-gradient(60% 60% at 100% 95%, #dcf3fb 0%, rgb(220 243 251 / 0) 70%),
    #d8eef7;
}

/* Links (globals.css 339–359) */
.link-inline {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 4px;
  transition: text-decoration-color 150ms var(--ease-ui);
}
.link-inline:hover { text-decoration-style: solid; text-decoration-color: var(--link); }
.link-quiet { transition: color 150ms var(--ease-ui); text-underline-offset: 4px; }
.link-quiet:hover { color: var(--muted-foreground); text-decoration-line: underline; }

/* Motion (globals.css 361–403) */
[data-reveal] {
  transition: opacity 600ms var(--ease-reveal), translate 600ms var(--ease-reveal);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.js [data-reveal]:not([data-in]) { opacity: 0; translate: 0 24px; }
@keyframes rise { from { opacity: 0; translate: 0 24px; } }
.js .hero-in { animation: rise 600ms var(--ease-reveal) both; animation-delay: calc(120ms + var(--i, 0) * 55ms); }
.sticky-nav { opacity: 0; visibility: hidden; transition: opacity 150ms var(--ease-ui), visibility 0s linear 150ms; }
.sticky-nav[data-show] { opacity: 1; visibility: visible; transition: opacity 150ms var(--ease-ui), visibility 0s; }

/* Phone menu sheet (globals.css 405–439) */
.mobile-sheet {
  box-shadow: 0 0 0 0.5px rgb(9 11 12 / 0.12), 0 12px 32px -8px rgb(16 28 110 / 0.22), 0 2px 6px rgb(0 0 0 / 0.06);
  transform-origin: top right;
}
.mobile-menu[open] .mobile-sheet { animation: sheet-in 200ms var(--ease-reveal) both; }
@keyframes sheet-in { from { opacity: 0; translate: 0 -6px; scale: 0.98; } }
.menu-icon { transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), scale 200ms cubic-bezier(0.2, 0, 0, 1), filter 200ms cubic-bezier(0.2, 0, 0, 1); }
.menu-icon-close, .mobile-menu[open] .menu-icon-open { opacity: 0; scale: 0.25; filter: blur(4px); }
.mobile-menu[open] .menu-icon-close { opacity: 1; scale: 1; filter: blur(0); }

/* Hero demo pieces (globals.css 441–493) */
.demo-chip { transition: opacity 300ms var(--ease-reveal), translate 300ms var(--ease-reveal), border-color 150ms var(--ease-ui), background-color 150ms var(--ease-ui); }
.demo-chip[data-empty] { opacity: 0; translate: 0 6px; }
.demo-pop { transition: opacity 200ms var(--ease-ui), translate 200ms var(--ease-ui); }
.demo-pop[data-off] { opacity: 0; translate: 0 4px; pointer-events: none; }
@keyframes caret { 50% { opacity: 0; } }
.live-dot { position: relative; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: currentColor; animation: live-pulse 2.4s var(--ease-reveal) infinite; }
@keyframes live-pulse { 0% { transform: scale(1); opacity: 0.5; } 80%, 100% { transform: scale(2.6); opacity: 0; } }

/* Horizontal carousel on small screens (globals.css 505–514) */
.snap-row { position: relative; scrollbar-width: none; }
.snap-row::-webkit-scrollbar { display: none; }

/* Living UI (globals.css 516–672). Static HTML = the final frame. */
.ph-1, .ph-2, .ph-3, .ph-4, .ph-5, .ph-6, .ph-7, .ph-8 {
  transition: opacity 500ms var(--ease-reveal), translate 500ms var(--ease-reveal), scale 500ms var(--ease-reveal);
}
.live-art[data-live]:not([data-p1]) .ph-1,
.live-art[data-live]:not([data-p2]) .ph-2,
.live-art[data-live]:not([data-p3]) .ph-3,
.live-art[data-live]:not([data-p4]) .ph-4,
.live-art[data-live]:not([data-p5]) .ph-5,
.live-art[data-live]:not([data-p6]) .ph-6,
.live-art[data-live]:not([data-p7]) .ph-7,
.live-art[data-live]:not([data-p8]) .ph-8 {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 260ms var(--ease-ui), translate 260ms var(--ease-ui), scale 260ms var(--ease-ui);
}
.live-art[data-live]:not([data-p1]) .pop.ph-1,
.live-art[data-live]:not([data-p2]) .pop.ph-2,
.live-art[data-live]:not([data-p3]) .pop.ph-3,
.live-art[data-live]:not([data-p4]) .pop.ph-4,
.live-art[data-live]:not([data-p5]) .pop.ph-5,
.live-art[data-live]:not([data-p6]) .pop.ph-6,
.live-art[data-live]:not([data-p7]) .pop.ph-7,
.live-art[data-live]:not([data-p8]) .pop.ph-8 { translate: none; scale: var(--pop-from, 0.6); }
.live-art[data-live="off"] *, .live-art[data-live="off"] *::before, .live-art[data-live="off"] *::after { animation-play-state: paused !important; }

.sk-o {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 0 12px; border-radius: inherit; background: #ffffff; opacity: 0; pointer-events: none; overflow: hidden;
}
.sk-o--panel { justify-content: flex-start; gap: 10px; padding: 14px; --sk-ms: 1100ms; }
.sk-o--chip { gap: 5px; padding: 0 10px; }
.sk-o--row { flex-direction: row; align-items: center; justify-content: space-between; }
.sk-bar { position: relative; display: block; flex: none; height: 7px; border-radius: 9999px; background: #f0f0f0; overflow: hidden; }
.sk-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(247 247 247 / 0), #f7f7f7 50%, rgb(247 247 247 / 0)); translate: -100% 0; }
.sk--dark > .sk-o { background: #25292f; }
.sk--dark .sk-bar { background: rgb(255 255 255 / 0.08); }
.sk--dark .sk-bar::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.1) 50%, transparent); }
@keyframes sk-out { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sk-shimmer { to { translate: 100% 0; } }
.live-art[data-p1] .sk.ph-1 > .sk-o, .live-art[data-p2] .sk.ph-2 > .sk-o, .live-art[data-p3] .sk.ph-3 > .sk-o, .live-art[data-p4] .sk.ph-4 > .sk-o,
.live-art[data-p5] .sk.ph-5 > .sk-o, .live-art[data-p6] .sk.ph-6 > .sk-o, .live-art[data-p7] .sk.ph-7 > .sk-o, .live-art[data-p8] .sk.ph-8 > .sk-o {
  animation: sk-out var(--sk-ms, 900ms) linear both;
}
.live-art[data-p1] .sk.ph-1 > .sk-o .sk-bar::after, .live-art[data-p2] .sk.ph-2 > .sk-o .sk-bar::after, .live-art[data-p3] .sk.ph-3 > .sk-o .sk-bar::after, .live-art[data-p4] .sk.ph-4 > .sk-o .sk-bar::after,
.live-art[data-p5] .sk.ph-5 > .sk-o .sk-bar::after, .live-art[data-p6] .sk.ph-6 > .sk-o .sk-bar::after, .live-art[data-p7] .sk.ph-7 > .sk-o .sk-bar::after, .live-art[data-p8] .sk.ph-8 > .sk-o .sk-bar::after {
  animation: sk-shimmer 1.2s var(--ease-ui) both;
}
.toast {
  --sk-ms: 820ms;
  box-shadow: 0 0 0 0.5px rgb(9 11 12 / 0.1), 0 6px 16px -4px rgb(16 28 110 / 0.14), 0 1px 2px rgb(0 0 0 / 0.06);
}
.raised.sk.ph-1 { --sk-ms: 1100ms; }

/* Principles orbit + packets (globals.css 777–872) */
.orbit-slot { position: absolute; top: 0; left: 0; transform: rotate(var(--a)) translateX(var(--r, 64px)) rotate(calc(-1 * var(--a))); }
.orbit-chip { position: absolute; top: 0; left: 0; display: block; translate: -50% -50%; }
.live-art[data-live] .orbit { animation: orbit 40s linear infinite; }
.live-art[data-live] .orbit-chip { animation: orbit 40s linear infinite reverse; }
@keyframes orbit { to { rotate: 360deg; } }
@keyframes node-pulse { 0%, 42%, 58%, 100% { scale: 1; } 49% { scale: 1.08; } }

/* How it works: cards build in order; pieces show a skeleton first (globals.css 889–949).
   .hp → .hpc (see header). */
.how-step[data-state="wait"] .hpc { opacity: 0; translate: 0 8px; }
.how-step[data-state="build"] .hpc { animation: hp-in 450ms var(--ease-reveal) both; animation-delay: var(--in, 0ms); }
@keyframes hp-in { from { opacity: 0; translate: 0 8px; } }
.how-step[data-state="build"] .hpc > .sk-o { animation: sk-out var(--hold, 650ms) linear both; animation-delay: var(--in, 0ms); }
.how-step[data-state="build"] .hpc > .sk-o .sk-bar::after { animation: sk-shimmer 1.2s var(--ease-ui) both; animation-delay: var(--in, 0ms); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes tag-in { from { opacity: 0; translate: 10px 8px; } }
.how-line-fill { transition: transform 700ms var(--ease-reveal); }
.how-node-fill { opacity: 0; scale: 0.4; transition: opacity 300ms var(--ease-ui) 250ms, scale 300ms var(--ease-reveal) 250ms; }
.how-node.is-on .how-node-fill { opacity: 1; scale: 1; }

/* Inputs: focus ring while "typing", caret, send press (globals.css 951–1003) */
.composer { position: relative; }
.composer::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 1px rgb(43 76 255 / 0.32), 0 0 0 4px rgb(43 76 255 / 0.09);
  opacity: 0; pointer-events: none; transition: opacity 150ms var(--ease-ui);
}
.composer.is-focused::after { opacity: 1; }
.caret { animation: caret 1.06s steps(1) infinite; }
.caret--solid { animation: none; }
.spinner { animation: spin 0.8s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.js .status-in { animation: status-in 200ms var(--ease-ui) both; }
@keyframes status-in { from { opacity: 0; translate: 0 3px; } }
.icon-swap { transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1), scale 200ms cubic-bezier(0.2, 0, 0, 1), filter 200ms cubic-bezier(0.2, 0, 0, 1); }
.icon-swap.is-out { opacity: 0; scale: 0.25; filter: blur(4px); }

/* Final CTA banner art (globals.css 1035–1070) */
.cta-rays { background: url("./img/cta-light.svg") center bottom / 100% 100% no-repeat; }
.cta-dots {
  background-image: radial-gradient(rgb(255 255 255 / 0.75) 1px, transparent 1.5px);
  background-size: 18px 18px;
  mask-image: radial-gradient(62% 78% at 50% 100%, black 12%, transparent 70%);
  opacity: 0.85;
}
.cta-shimmer { opacity: 0; background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 0.5) 50%, transparent 80%); mix-blend-mode: soft-light; }
.live-art[data-live="play"] .cta-shimmer { animation: cta-shimmer 8s var(--ease-ui) 1.2s infinite; }
@keyframes cta-shimmer { 0% { translate: 0 0; opacity: 0; } 8% { opacity: 1; } 50% { translate: 300% 0; opacity: 1; } 56%, 100% { translate: 300% 0; opacity: 0; } }

/* Section-heading accent word (globals.css 1887–1907) */
.sweep-text { display: inline-block; }
.sweep-wait { color: #d0d6d8; }
.sweep-go {
  background-image: linear-gradient(90deg, var(--foreground) 0%, var(--foreground) 42%, #d0d6d8 50%, #38bdf8 62%, #1662fd 70%, #38bdf8 78%, #d0d6d8 84%, #d0d6d8 100%);
  background-size: 400% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: sweep-text 1500ms cubic-bezier(0.45, 0, 0.25, 1) both;
}
@keyframes sweep-text { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }

/* v13 interactions (globals.css 1909–1978) */
.sticky-nav { transform: translateY(0); transition: opacity 150ms var(--ease-ui), visibility 0s linear 150ms, transform 220ms var(--ease-ui); }
.sticky-nav[data-show] { transition: opacity 150ms var(--ease-ui), visibility 0s, transform 220ms var(--ease-ui); }
.sticky-nav[data-show][data-hide] { transform: translateY(-100%); }
.fill-word { transition: color 220ms var(--ease-ui); }
.fill-word:not([data-on]) { color: rgb(9 11 12 / 0.16); }
[data-spot] { position: relative; }
.card-media, [data-spot] { transition: transform 320ms var(--ease-ui), box-shadow 320ms var(--ease-ui); }
.card-media::after, [data-spot]::after {
  content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity 320ms var(--ease-ui);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.5), transparent 62%);
}
[data-spot]::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(43 76 255 / 0.07), transparent 62%); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:hover .card-media, [data-spot]:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgb(9 11 12 / 0.28); }
  .card:hover .card-media::after, [data-spot]:hover::after { opacity: 1; }
}

/* v13 brand + hero polish (globals.css 1980–2046) */
.hero-aurora { filter: blur(60px); opacity: 0.9; }
.hero-aurora span { position: absolute; border-radius: 9999px; will-change: transform; }
.aurora-a { width: 46%; height: 52%; left: -6%; top: 22%; background: rgb(56 189 248 / 0.45); animation: aurora-a 22s ease-in-out infinite alternate; }
.aurora-b { width: 42%; height: 48%; right: -8%; top: 8%; background: rgb(124 140 255 / 0.5); animation: aurora-b 26s ease-in-out infinite alternate; }
.aurora-c { width: 54%; height: 40%; left: 24%; bottom: -6%; background: rgb(43 76 255 / 0.45); animation: aurora-c 30s ease-in-out infinite alternate; }
@keyframes aurora-a { to { transform: translate(18%, -10%) scale(1.15); } }
@keyframes aurora-b { to { transform: translate(-16%, 14%) scale(0.9); } }
@keyframes aurora-c { to { transform: translate(-10%, -12%) scale(1.2); } }
.hero-badge { position: relative; overflow: hidden; }
.hero-badge::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.85) 50%, transparent 65%);
  transform: translateX(-120%); animation: badge-sheen 4.8s ease-in-out 1.2s infinite; pointer-events: none;
}
@keyframes badge-sheen { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }
.hero-cta { position: relative; overflow: hidden; gap: 8px; box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 10px 24px -12px rgb(9 11 12 / 0.55); }
.cta-arrow { transition: transform 200ms var(--ease-ui); }
.hero-cta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / 0.28) 50%, transparent 70%);
  transform: translateX(-130%); pointer-events: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-cta:hover .cta-arrow { transform: translateX(3px); }
  .hero-cta:hover::after { transform: translateX(130%); transition: transform 700ms var(--ease-ui); }
}
.footer-mark {
  margin-top: 28px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(64px, 16.5vw, 236px);
  line-height: 0.8;
  letter-spacing: -0.055em;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, rgb(9 11 12 / 0.09) 0%, rgb(9 11 12 / 0) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  overflow: hidden;
}

/* Form state transitions (globals.css 2048–2124) */
.t-success-check { display: inline-block; flex: none; opacity: 0; transform-origin: center; }
.t-success-check svg path { stroke-dasharray: 21; stroke-dashoffset: 21; }
.t-success-check[data-state="in"] {
  animation: t-check-fade var(--check-dur) var(--ease-reveal) forwards, t-check-rotate var(--check-dur) var(--ease-reveal) forwards,
    t-check-blur var(--check-dur) var(--ease-reveal) forwards, t-check-rise var(--check-dur) cubic-bezier(0.34, 1.35, 0.64, 1) forwards;
}
.t-success-check[data-state="in"] svg path { animation: t-check-draw var(--check-dur) var(--ease-reveal) 80ms forwards; }
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur)); } to { filter: blur(0); } }
@keyframes t-check-rise { from { translate: 0 var(--check-y); } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }
.t-shake { animation: t-shake 280ms linear; }
@keyframes t-shake {
  0% { transform: translateX(0); animation-timing-function: var(--ease-reveal); }
  28.57% { transform: translateX(var(--shake-distance)); animation-timing-function: var(--ease-reveal); }
  57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--ease-reveal); }
  78.57% { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--ease-reveal); }
  100% { transform: translateX(0); }
}

/* Reduced motion (globals.css 1104–1154, 1905–1907, 1966–1969, 2044–2046, 2119–2124) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal]:not([data-in]) { opacity: 1; translate: none; }
  [data-reveal], .demo-chip, .demo-pop, .menu-icon, .sticky-nav, .sticky-nav[data-show] { transition: none; }
  .js .hero-in, .mobile-menu[open] .mobile-sheet, .caret, .spinner, .js .status-in, .live-dot::after,
  .live-art *, .live-art *::after, .how-step .hpc, .how-step .hpc *, .hero-aurora span, .hero-badge::after {
    animation: none !important;
  }
  .sk-o { display: none; }
  .how-line-fill, .how-node-fill, .icon-swap, .composer::after, .live-art * { transition: none !important; }
  .sweep-wait, .sweep-go { color: inherit; -webkit-text-fill-color: currentColor; background: none; animation: none; }
  .sticky-nav[data-show][data-hide] { transform: none; }
  .fill-word:not([data-on]) { color: inherit; }
  .t-success-check, .t-success-check[data-state="in"] { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
  .t-shake { animation: none !important; }
}

/* ===================================================================== */
/* Part B — home components translated from Tailwind classes             */
/* ===================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.muted { color: var(--muted-foreground); }

/* Skip link (app/page.tsx) */
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.skip:focus { position: fixed; top: 12px; left: 12px; z-index: 60; width: auto; height: auto; clip: auto; border-radius: var(--radius-sm); background: var(--foreground); color: var(--background); padding: 8px 12px; }

/* Button (components/ui/button.tsx) — pill = the page's single high-contrast CTA */
.btn {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; font-weight: 500; white-space: nowrap; user-select: none; outline: none;
  transition: background-color 150ms var(--ease-ui), color 150ms var(--ease-ui), opacity 150ms var(--ease-ui), scale 150ms var(--ease-ui);
}
.btn:focus-visible { box-shadow: 0 0 0 3px rgb(115 115 115 / 0.4); }
.btn:active { scale: 0.96; }
.btn:disabled, .btn[aria-busy="true"] { pointer-events: none; opacity: 0.5; }
.btn-pill { border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); }
.btn-pill:hover { background: rgb(9 11 12 / 0.8); }
.btn-sm { height: 36px; padding: 0 12px; font-size: 14px; line-height: 20px; gap: 6px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 16px; line-height: 24px; }

/* Badge (components/ui/badge.tsx) — pill / outline */
.badge {
  display: inline-flex; width: fit-content; flex-shrink: 0; align-items: center; justify-content: center; gap: 4px;
  overflow: hidden; border-radius: 9999px; border: 1px solid transparent; white-space: nowrap; font-weight: 500;
}
.badge-pill { height: 24px; border-color: rgb(9 11 12 / 0.15); padding: 0 10px; font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.01em; }
.badge-outline { height: 24px; border-color: rgb(9 11 12 / 0.12); padding: 0 8px; font-size: 11px; color: var(--muted-foreground); }

/* Eyebrow + SectionHeading + Section (components/site/section-heading.tsx) */
.section { border-top: 1px solid var(--hairline); padding: 48px 16px; }
.section--dashed { border-top-style: dashed; border-top-color: rgb(9 11 12 / 0.1); }
.section--subtle { background: var(--subtle); }
@media (width >= 48rem) { .section { padding: 96px 24px; } }
.sh { margin-inline: auto; max-width: 718px; }
.eyebrow { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--link); }
.eyebrow .ico { translate: 0 1px; stroke-width: 1.75; } /* home: ChevronRight strokeWidth 1.75 */
.sh .t-h2 { margin-top: 12px; }
.sh .sh-lead { margin-top: 16px; font-size: 18px; line-height: 28px; color: var(--muted-foreground); }

/* Card bare + CardMedia + CardCaption (components/ui/card.tsx) */
.card { display: flex; flex-direction: column; gap: 16px; }
.card-media { position: relative; overflow: hidden; border-radius: var(--radius-sm); }
:where(.card-media) { background: var(--muted); } /* zero specificity so .silk-* / bg overrides win (Tailwind utility order on the home) */
.card-caption { padding-inline: 4px; font-size: 16px; line-height: 24px; color: var(--muted-foreground); }
@media (width >= 48rem) { .card-caption { padding-inline: 6px; } }
.card-caption > .cap-title { display: inline; font-family: var(--font-sans); font-size: inherit; line-height: inherit; font-weight: 500; color: var(--foreground); text-wrap: wrap; }
.card-caption > .cap-body { display: inline; }
.card-num { position: absolute; top: 12px; left: 14px; z-index: 10; font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* Input / Textarea / Label (components/ui/input.tsx, textarea.tsx, label.tsx) */
.label { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1; font-weight: 500; }
.input {
  display: block; height: 40px; width: 100%; min-width: 0; border-radius: var(--radius-sm); border: 1px solid var(--input);
  background: var(--background); padding: 4px 12px; font-size: 16px; outline: none;
  transition: border-color 150ms var(--ease-ui), box-shadow 150ms var(--ease-ui);
}
textarea.input { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; field-sizing: content; }
.input::placeholder { color: var(--muted-foreground); opacity: 1; }
.input:focus-visible { border-color: rgb(9 11 12 / 0.4); box-shadow: 0 0 0 3px rgb(9 11 12 / 0.08); }
.input[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3px rgb(198 42 42 / 0.2); }
@media (width >= 48rem) { .input { font-size: 14px; } }

/* Nav (components/site/nav.tsx, logo.tsx, sticky-nav.tsx, mobile-menu.tsx) */
.nav { position: relative; display: flex; height: 56px; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo { margin-inline: -4px; border-radius: var(--radius-sm); padding-inline: 4px; outline: none; }
.nav-logo:focus-visible, .nav-links a:focus-visible { box-shadow: 0 0 0 3px rgb(115 115 115 / 0.4); }
.logo-lockup { display: flex; align-items: center; gap: 8px; }
.logo-word { font-family: var(--font-heading); font-size: 19px; line-height: 28px; font-weight: 500; letter-spacing: -0.3px; white-space: nowrap; }
.nav-links { position: absolute; left: 50%; display: none; translate: -50% 0; align-items: center; gap: 4px; }
.nav-links a { display: block; border-radius: var(--radius-sm); padding: 8px; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; outline: none; transition: opacity 150ms var(--ease-ui); }
.nav-links a:hover { opacity: 0.7; }
.nav-cta { display: none; font-family: var(--font-heading); }
@media (width >= 48rem) { .nav-links, .nav-cta { display: flex; } }
@media (width >= 64rem) { .nav-links a { padding-inline: 12px; } }
.sticky-nav { position: fixed; inset-inline: 0; top: 0; z-index: 40; border-bottom: 1px solid var(--hairline); background: rgb(255 255 255 / 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sticky-nav .frame-col { border-inline: 0; padding-inline: 16px; }
@media (width >= 48rem) { .sticky-nav .frame-col { padding-inline: 24px; } }
.mobile-menu { display: block; }
@media (width >= 48rem) { .mobile-menu { display: none; } }
.mobile-menu summary { margin-right: -6px; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 9999px; list-style: none; outline: none; transition: background-color 150ms var(--ease-ui); }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary:hover { background: rgb(9 11 12 / 0.05); }
.mobile-menu summary:focus-visible { box-shadow: 0 0 0 3px rgb(115 115 115 / 0.4); }
.menu-icons { position: relative; display: grid; width: 20px; height: 20px; place-items: center; }
.menu-icons .ico { width: 20px; height: 20px; }
.menu-icon-close { position: absolute; }
.mobile-sheet { position: absolute; inset-inline: 0; top: 100%; z-index: 50; margin-top: 6px; border-radius: var(--radius-lg); background: var(--background); padding: 8px; color: var(--foreground); }
.mobile-sheet a.sheet-link { display: flex; height: 48px; align-items: center; border-radius: var(--radius-md); padding-inline: 14px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; transition: background-color 150ms var(--ease-ui); }
.mobile-sheet a.sheet-link:hover, .mobile-sheet a.sheet-link:active { background: var(--muted); }
.sheet-foot { margin-top: 8px; border-top: 1px dashed rgb(9 11 12 / 0.1); padding: 12px 6px 6px; }
.sheet-cta { display: flex; height: 48px; width: 100%; align-items: center; justify-content: center; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); font-size: 16px; font-weight: 500; transition: background-color 150ms var(--ease-ui), scale 150ms var(--ease-ui); }
.sheet-cta:hover { background: rgb(9 11 12 / 0.8); }
.sheet-cta:active { scale: 0.96; }