/* =========================================================================
   AdVynce — stylesheet
   Contents
   01 Tokens & themes       08 Services / pillars    15 Contact
   02 Base & reset          09 Live demos            16 Footer
   03 Utilities & buttons   10 AI cinematic          17 Floating UI (cursor, consent…)
   04 Header & dropdown     11 Packages              18 Responsive
   05 Mobile sheet          12 Process               19 Reduced motion
   06 Hero                  13 Portfolio
   07 Marquee               14 About / FAQ
   ========================================================================= */

/* ---------- 01 Tokens & themes ---------- */
:root {
  --font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif: "Instrument Serif", "Times New Roman", serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --morph: 0.5s;

  --accent: #ff5b1f;
  --accent-soft: #ffb38a;
  --navy: #1d3045;

  --radius: 18px;
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1280px;
  --header-h: 60px;
}

:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1013;
  --bg-2: #0f161b;
  --card: #121a20;
  --card-2: #172129;
  --text: #f2f1ee;
  --soft: rgba(242, 241, 238, 0.74);
  --muted: rgba(242, 241, 238, 0.56);
  --faint: rgba(242, 241, 238, 0.32);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --panel: rgba(14, 19, 23, 0.84);
  --bar: rgba(12, 17, 21, 0.62);
  --hover: rgba(255, 255, 255, 0.065);
  --solid-bg: #f2f1ee;
  --solid-fg: #0b0f12;
  --shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.65), 0 2px 10px rgba(0, 0, 0, 0.2);
  --grain-op: 0.05;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f1ec;
  --bg-2: #ebe8e1;
  --card: #fbfaf7;
  --card-2: #f1eee8;
  --text: #0e1418;
  --soft: rgba(14, 20, 24, 0.74);
  --muted: rgba(14, 20, 24, 0.58);
  --faint: rgba(14, 20, 24, 0.32);
  --line: rgba(14, 20, 24, 0.1);
  --line-2: rgba(14, 20, 24, 0.18);
  --panel: rgba(250, 249, 246, 0.88);
  --bar: rgba(250, 249, 246, 0.66);
  --hover: rgba(14, 20, 24, 0.055);
  --solid-bg: #0e1418;
  --solid-fg: #ffffff;
  --shadow: 0 30px 70px -30px rgba(20, 30, 40, 0.35), 0 2px 10px rgba(20, 30, 40, 0.08);
  --grain-op: 0.035;
}

/* View-transition theme switch (circular reveal from the toggle) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9999; }

/* ---------- 02 Base & reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
img, video, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  padding: 10px 16px; border-radius: 10px; background: var(--solid-bg); color: var(--solid-fg);
  transform: translateY(-150%); transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- 03 Utilities & buttons ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.section { position: relative; padding: clamp(90px, 13vw, 170px) 0; }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.kicker span {
  display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 7px;
  border: 1px solid var(--line-2); border-radius: 999px; color: var(--text); font-size: 11px;
}
.sec-head { max-width: 760px; margin-bottom: clamp(48px, 7vw, 88px); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.sec-title {
  margin-top: 22px;
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  font-weight: 400; line-height: 0.98; letter-spacing: -0.035em;
}
.sec-title .serif { color: var(--accent); }
.sec-lede { margin-top: 22px; max-width: 560px; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--soft); }
.sec-head.center .sec-lede { margin-left: auto; margin-right: auto; }
.sec-lede a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 22px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn.w100 { width: 100%; }
.btn-solid { background: var(--solid-bg); color: var(--solid-fg); }
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(255, 91, 31, 0.55); }
.btn-line { border: 1px solid var(--line-2); color: var(--text); }
.btn-line:hover { border-color: var(--text); background: var(--hover); }
.btn-ink { background: var(--navy); color: #fff; }
.btn-ink:hover { background: #142334; transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(29, 48, 69, 0.6); }
.btn-ghost-ink { color: var(--navy); border: 1px solid rgba(29, 48, 69, 0.35); background: rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost-ink:hover { background: rgba(255, 255, 255, 0.55); }
.btn .arr { transition: transform 0.35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  font-weight: 500; border-bottom: 1px solid var(--line-2); padding-bottom: 4px;
  transition: border-color 0.3s, gap 0.3s var(--ease);
}
.link-arrow:hover { border-color: var(--accent); gap: 14px; }

.round-btn {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid currentColor; transition: transform 0.35s var(--ease), background-color 0.3s, opacity 0.3s;
}
.round-btn.sm { width: 40px; height: 40px; }
.round-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.round-btn:hover { transform: scale(1.06); }

/* Scroll reveal */
.js .reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- 04 Header & morphing dropdown ---------- */
.header {
  position: fixed; top: 12px; left: 50%; z-index: 60;
  width: min(calc(100% - 24px), 1240px);
  translate: -50% 0;
  transition: translate 0.55s var(--ease), top 0.4s var(--ease);
}
.header.hide { translate: -50% calc(-100% - 24px); }
.bar {
  position: relative;
  height: var(--header-h); padding: 0 10px 0 18px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-radius: 999px;
  background: var(--bar);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.45);
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.logo {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  animation: fadeDown 0.9s var(--ease) 0.35s backwards;
}
.logo img { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; }
.logo-word { font-size: 18px; font-weight: 500; letter-spacing: -0.03em; }

.desktop-nav { animation: fadeIn 0.9s ease 0.45s backwards; } /* opacity only: never transform the nav */
.links { display: flex; align-items: center; gap: 26px; }
.trigger, .plain-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0;
  font-size: 14.5px; color: var(--soft); transition: color 0.25s ease;
}
.trigger:hover, .plain-link:hover, .trigger[aria-expanded="true"], .plain-link.active, .trigger.active { color: var(--text); }
.trigger[aria-current="page"] { color: var(--text); }
.trigger[aria-current="page"]::before { content: ""; position: absolute; left: 50%; bottom: -2px; width: 4px; height: 4px; margin-left: -6px; border-radius: 50%; background: var(--accent); }
.plain-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease);
}
.plain-link.active::after, .plain-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.plain-link[aria-current="page"] { color: var(--text); }
.plain-link:hover::after { transform: scaleX(1); transform-origin: left; }
.trigger svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease); }
.trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.actions { justify-self: end; display: flex; align-items: center; gap: 8px; animation: fadeDown 0.9s var(--ease) 0.55s backwards; }
.cta {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px;
  background: var(--solid-bg); color: var(--solid-fg); font-size: 14px; font-weight: 500;
  transition: background-color 0.25s, transform 0.25s var(--ease);
}
.cta:hover { transform: translateY(-1px); }

.theme-toggle {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); overflow: hidden; transition: background-color 0.3s, border-color 0.3s;
}
.theme-toggle:hover { background: var(--hover); border-color: var(--line-2); }
.theme-toggle svg { position: absolute; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform 0.6s var(--ease), opacity 0.4s; }
[data-theme="dark"] .theme-toggle .i-sun { transform: translateY(130%) rotate(90deg); opacity: 0; }
[data-theme="light"] .theme-toggle .i-moon { transform: translateY(-130%) rotate(-90deg); opacity: 0; }

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

.dd {
  --x: 0px; --w: 400px; --h: 300px; --s: 0.97;
  position: absolute; top: calc(var(--header-h) + 10px); left: 0;
  width: var(--w); height: var(--h);
  transform: translateX(var(--x)) scale(var(--s)); transform-origin: 50% 0;
  opacity: 0; pointer-events: none;
  border-radius: 18px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  overflow: hidden;
  transition: transform var(--morph) var(--ease), width var(--morph) var(--ease), height var(--morph) var(--ease), opacity 0.3s ease;
}
.dd.open { --s: 1; opacity: 1; pointer-events: auto; }
.dd.instant { transition: opacity 0.3s ease, transform var(--morph) var(--ease); }
.dd.instant.snap { transition: none; }

.panel {
  position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; filter: blur(8px); transform: translateX(0);
  transition: opacity 0.26s ease, transform var(--morph) var(--ease), filter 0.4s ease, visibility 0s linear var(--morph);
}
.panel[data-state="exit-left"] { transform: translateX(-56px); }
.panel[data-state="exit-right"] { transform: translateX(56px); }
.panel[data-state="active"] {
  opacity: 1; visibility: visible; filter: blur(0); transform: translateX(0);
  transition: opacity 0.36s ease 0.06s, transform var(--morph) var(--ease), filter 0.45s ease 0.04s, visibility 0s;
}
.panel.snap { transition: none !important; }

/* Panel: About (photo cards) */
#p-about { width: 446px; height: 308px; padding: 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.card {
  position: relative; overflow: hidden; border-radius: 12px; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; color: #fff;
}
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.9s var(--ease), filter 0.5s; }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 11, 13, 0.9) 0%, rgba(8, 11, 13, 0.35) 40%, rgba(8, 11, 13, 0) 62%); }
.card:hover img, .card:focus-visible img { transform: scale(1.05); filter: brightness(1.08); }
.card strong { font-size: 15.5px; font-weight: 500; margin-bottom: 5px; }
.card span { font-size: 13px; line-height: 1.42; color: rgba(255, 255, 255, 0.68); }

/* Panel: Services (list + live preview) */
#p-services { width: 664px; height: 358px; display: grid; grid-template-columns: 252px 1fr; }
.d-list { display: flex; flex-direction: column; padding: 8px; gap: 2px; }
.d-item {
  flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 12px; border-radius: 10px;
  transition: background-color 0.3s;
}
.d-item.is-active { background: var(--hover); }
.d-item strong { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.d-item span { font-size: 13px; line-height: 1.42; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot-ai { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.dot-mk { background: #d94fa0; box-shadow: 0 0 10px #d94fa0; }
.dot-web { background: #3fb7ff; box-shadow: 0 0 10px #3fb7ff; }

.d-media {
  position: relative; overflow: hidden; border-radius: 0 17px 17px 0;
  background: radial-gradient(120% 90% at 80% 10%, #2b3f52 0%, #121a21 60%, #0b1013 100%);
}
.d-media::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 70px; z-index: 2; background: linear-gradient(to right, rgba(14, 19, 23, 0.55), rgba(14, 19, 23, 0)); pointer-events: none; }
.dm {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  opacity: 0; transform: scale(1.06); filter: blur(10px);
  transition: opacity 0.6s ease, transform 0.9s var(--ease), filter 0.6s ease;
}
.dm.is-active { opacity: 1; transform: scale(1); filter: blur(0); z-index: 1; }

.mini-chat { width: 100%; max-width: 300px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; }
.mc-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 12px; }
.mc-head em { margin-left: auto; font-style: normal; font-size: 11px; color: #7cf3b0; }
.orb { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffd2b8, var(--accent) 55%, #7a2a0c); box-shadow: 0 0 14px rgba(255, 91, 31, 0.7); animation: pulse 2.4s ease-in-out infinite; }
.mc-b { width: fit-content; max-width: 86%; padding: 8px 11px; margin-bottom: 7px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; }
.mc-b.bot { background: rgba(255, 255, 255, 0.1); border-bottom-left-radius: 4px; }
.mc-b.me { margin-left: auto; background: var(--accent); border-bottom-right-radius: 4px; }
.mc-typing { display: flex; gap: 4px; padding: 6px 2px; }
.mc-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); animation: blink 1.2s infinite; }
.mc-typing i:nth-child(2) { animation-delay: 0.15s; } .mc-typing i:nth-child(3) { animation-delay: 0.3s; }

.mini-mk { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.mk-post { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); }
.mk-av { display: block; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #d94fa0, var(--accent)); margin-bottom: 8px; }
.mk-img { height: 90px; margin: 8px 0; border-radius: 8px; background: linear-gradient(135deg, #d94fa0, #ff5b1f 60%, #ffc28a); }
.mk-line { display: block; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); margin-top: 6px; }
.w40 { width: 40%; } .w60 { width: 60%; } .w80 { width: 80%; }
.mk-chart { height: 170px; display: flex; align-items: flex-end; gap: 7px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.mk-chart i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(to top, rgba(217, 79, 160, 0.4), #d94fa0); transform-origin: bottom; }
.dm.is-active .mk-chart i { animation: grow 0.9s var(--ease) both; }
.dm.is-active .mk-chart i:nth-child(2) { animation-delay: 0.06s; } .dm.is-active .mk-chart i:nth-child(3) { animation-delay: 0.12s; }
.dm.is-active .mk-chart i:nth-child(4) { animation-delay: 0.18s; } .dm.is-active .mk-chart i:nth-child(5) { animation-delay: 0.24s; }
.dm.is-active .mk-chart i:nth-child(6) { animation-delay: 0.3s; }

.mini-web { width: 100%; max-width: 330px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); }
.mw-top { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: rgba(255, 255, 255, 0.06); font-family: var(--mono); font-size: 10px; color: rgba(255, 255, 255, 0.6); }
.mw-top i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.mw-top span { margin-left: 8px; }
.mw-body { padding: 14px; display: grid; gap: 9px; }
.mw-hero { height: 58px; border-radius: 8px; background: linear-gradient(120deg, #3fb7ff, #1d3045 70%); }
.mw-row { height: 7px; width: 70%; border-radius: 4px; background: rgba(255, 255, 255, 0.25); }
.mw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mw-grid i { height: 46px; border-radius: 7px; background: rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; }
.mw-grid i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.18), transparent 70%); animation: shimmer 2s infinite; }

/* Panel: Packages (list) */
#p-packages { width: 300px; height: 236px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.r-link { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; border-radius: 10px; transition: background-color 0.25s; }
.r-link:hover, .r-link:focus-visible { background: var(--hover); }
.r-link span { display: flex; flex-direction: column; }
.r-link b { font-size: 15px; font-weight: 500; }
.r-link small { font-size: 12.5px; color: var(--muted); }
.pill { font-style: normal; font-size: 10.5px; font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: #fff; }

/* Menu button */
.menu-btn {
  display: none; place-items: center; width: 42px; height: 38px; border-radius: 999px;
  background: var(--hover); border: 1px solid var(--line);
}
.menu-btn svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.menu-btn path { transition: transform 0.45s var(--ease); transform-origin: 8px 8px; }
.menu-btn[aria-expanded="true"] .l1 { transform: translateY(2.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .l2 { transform: translateY(-2.5px) rotate(-45deg); }

/* ---------- 05 Mobile full-screen sheet ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 55;
  background: var(--bg);
  clip-path: circle(0% at calc(100% - 44px) 42px);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease), visibility 0s linear 0.7s;
}
.sheet.open { clip-path: circle(150% at calc(100% - 44px) 42px); visibility: visible; transition: clip-path 0.8s var(--ease), visibility 0s; }
.sheet-inner { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 110px var(--gutter) max(28px, env(safe-area-inset-bottom)); overflow: auto; }
.sheet-nav { display: flex; flex-direction: column; }
.sheet-nav a {
  display: flex; align-items: baseline; gap: 16px; padding: 10px 0;
  font-size: clamp(2.1rem, 9vw, 3.4rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease), color 0.3s;
}
.sheet-nav a span { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.1em; }
.sheet-nav a:hover, .sheet-nav a[aria-current="page"] { color: var(--accent); }
.sheet.open .sheet-nav a { opacity: 1; transform: none; transition-delay: calc(0.18s + var(--i) * 0.06s); }
.sheet-foot { display: grid; gap: 18px; margin-top: 36px; opacity: 0; transition: opacity 0.5s ease; }
.sheet.open .sheet-foot { opacity: 1; transition-delay: 0.55s; }
.sheet-meta, .sheet-social { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--soft); font-size: 15px; }
.sheet-social a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- 06 Hero ---------- */
.hero { position: relative; height: 430vh; }
.hero-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate;
  color: var(--navy);
  background: linear-gradient(180deg, #e8eef2 0%, #cfdbe4 55%, #9fb2c2 100%);
}
.scrub { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.scrub-video, .scrub-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrub-video { opacity: 0; transition: opacity 0.6s ease; }
.scrub-video.has-frame { opacity: 1; }
.scrub-canvas { opacity: 0; transition: opacity 0.5s ease; }
.scrub.canvas-live .scrub-canvas { opacity: 1; }
.hero .scrub { animation: heroIn 2.4s var(--ease) both; }
@keyframes heroIn { from { transform: scale(1.08); filter: brightness(0.75); } to { transform: scale(1); filter: brightness(1); } }

.hero-grain {
  position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: 0.07;
  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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }

.scene { position: absolute; inset: 0; opacity: var(--o, 0); transition: opacity 0.1s ease-out; pointer-events: none; }
.scene.live { pointer-events: auto; }
.scene .st { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: var(--d, 0ms); }
.scene.vis .st { opacity: 1; transform: none; }

/* Without JS: show the first scene statically */
html:not(.js) .s1 { opacity: 1; pointer-events: auto; }
html:not(.js) .scene .st { opacity: 1; transform: none; }
html:not(.js) .hero { height: auto; }

/* Scene 1 */
.s1 { display: flex; align-items: center; padding: 90px var(--gutter) 0 clamp(20px, 8vw, 128px); }
.s1-inner { max-width: 760px; position: relative; z-index: 2; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(29, 48, 69, 0.15);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.eb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 91, 31, 0.2); animation: pulse 2s infinite; }
.hero-title {
  margin-top: 24px;
  font-size: clamp(2.9rem, 7.4vw, 7rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.045em;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero-title .line > .st { display: inline-block; transform: translateY(105%); }
.scene.vis .hero-title .line > .st { transform: none; }
.hero-title .serif { color: var(--accent); font-size: 1.04em; }
.hero-sub { margin-top: 26px; max-width: 520px; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.55; color: rgba(29, 48, 69, 0.82); }
.hero-sub b { color: var(--navy); font-weight: 500; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.tags { position: absolute; inset: 0; pointer-events: none; }
.tag {
  position: absolute; left: var(--x); top: var(--y);
  padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 30px -16px rgba(29, 48, 69, 0.45);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  translate: calc(var(--mx, 0) * var(--z) * 26px) calc(var(--my, 0) * var(--z) * 26px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), translate 0.9s var(--ease-out);
  animation: float 7s ease-in-out infinite;
  animation-delay: calc(var(--z) * -3s);
}
.tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
@keyframes float { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }

.s1-next { position: absolute; right: var(--gutter); bottom: 48px; color: rgba(29, 48, 69, 0.8); }
.scroll-cue {
  position: absolute; left: 50%; bottom: 40px; translate: -50% 0;
  display: flex; align-items: center; gap: 14px; font-size: 13.5px; letter-spacing: 0.01em; color: rgba(29, 48, 69, 0.85);
}
.scroll-cue span:first-child, .scroll-cue span:last-child { opacity: 0.7; }

/* Scene 2 */
.s2 { display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); }
.s2-title {
  max-width: 980px; text-align: center;
  font-size: clamp(1.9rem, 5vw, 4.8rem); font-weight: 200; letter-spacing: -0.03em; line-height: 1.12;
}
.s2-title .a80 { color: rgba(29, 48, 69, 0.78); font-family: var(--serif); font-style: italic; font-weight: 400; }
.s2-title .a50 { color: rgba(29, 48, 69, 0.5); }
.s2-rail { position: absolute; right: var(--gutter); bottom: 64px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--navy); }
.dots { display: flex; flex-direction: column; gap: 8px; align-items: center; margin: 4px 0; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(29, 48, 69, 0.35); transition: all 0.4s var(--ease); }
.dots i.on { width: 8px; height: 8px; background: var(--navy); }
.s2-pillars { position: absolute; left: var(--gutter); bottom: 56px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; color: rgba(29, 48, 69, 0.8); }
.s2-pillars span { font-family: var(--mono); font-size: 11px; color: var(--accent); margin-right: 6px; }

/* Scene 3 */
.s3 { display: flex; align-items: center; justify-content: flex-end; padding: 0 var(--gutter); color: #fff; }
.s3-inner { max-width: 640px; }
.s3-eyebrow { font-size: 17px; color: rgba(255, 255, 255, 0.65); margin-bottom: 18px; letter-spacing: 0.01em; }
.s3-eyebrow span { opacity: 0.5; margin: 0 6px; }
.s3-title { font-size: clamp(2.3rem, 5vw, 4.8rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.04em; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25); margin-bottom: 36px; }
.s3-title .serif { color: var(--accent-soft); }
.s3-cta { display: inline-flex; align-items: center; gap: 16px; font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.s3-circle { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #1f2937; transition: transform 0.4s var(--ease), background-color 0.3s; }
.s3-circle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.s3-cta:hover .s3-circle { transform: scale(1.12) rotate(-45deg); background: var(--accent); color: #fff; }

/* ---------- 07 Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 26px 0; background: var(--bg); }
.marquee-track { display: flex; align-items: center; gap: 34px; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font-size: clamp(1.6rem, 3.4vw, 2.8rem); font-weight: 400; letter-spacing: -0.035em; white-space: nowrap; }
.marquee span:nth-of-type(odd) { font-family: var(--serif); font-style: italic; color: var(--muted); }
.marquee i { font-style: normal; color: var(--accent); font-size: 1.1rem; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 08 Services / pillars ---------- */
.pillars { display: grid; grid-template-columns: 270px 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.pillar-index { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 4px; }
.pi {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 0 16px; color: var(--muted);
  font-size: 15.5px; border-bottom: 1px solid var(--line); transition: color 0.35s;
}
.pi span { font-family: var(--mono); font-size: 11px; }
.pi:hover, .pi.is-active { color: var(--text); }
.pi-bar { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.pi-cta { margin-top: 26px; padding: 16px; border-radius: 14px; border: 1px dashed var(--line-2); font-size: 14px; color: var(--muted); transition: border-color 0.3s, background-color 0.3s; }
.pi-cta b { display: block; margin-top: 4px; color: var(--text); font-weight: 500; }
.pi-cta:hover { border-color: var(--accent); background: var(--hover); }

.pillar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; padding: 56px 0 96px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.pillar:first-child { border-top: 0; padding-top: 0; }
.p-num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.p-title { margin-top: 16px; font-size: clamp(1.75rem, 2.8vw, 2.6rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; }
.p-pitch { margin-top: 16px; color: var(--soft); font-size: 1.05rem; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
.stat { padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.stat b { display: block; font-size: 1.9rem; font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.stat span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ticks { margin-top: 24px; display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 30px; color: var(--soft); font-size: 15px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.ticks li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 7px; height: 4px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); }
.dl-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

.pillar-visual { position: relative; }

/* ---------- 09 Live demos ---------- */
/* Chat demo */
.demo-chat {
  position: relative; display: flex; flex-direction: column; height: 520px;
  border-radius: 24px; overflow: hidden;
  background: linear-gradient(160deg, var(--card-2), var(--card));
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.demo-chat::before { content: ""; position: absolute; width: 360px; height: 360px; right: -140px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 91, 31, 0.28), transparent 65%); pointer-events: none; }
.dc-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.dc-head b { display: block; font-weight: 500; font-size: 15px; }
.dc-head small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.dc-head small i { width: 6px; height: 6px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.dc-orb { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #ffe3d3, var(--accent) 52%, #6d2208); box-shadow: 0 0 22px rgba(255, 91, 31, 0.55); animation: pulse 2.6s ease-in-out infinite; }
.dc-tag { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.dc-log { position: relative; flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.msg { max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; animation: msgIn 0.5s var(--ease) both; }
.msg.bot { background: var(--hover); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg.me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.msg a { text-decoration: underline; text-underline-offset: 2px; }
.msg.typing { display: flex; gap: 5px; padding: 14px; width: fit-content; }
.msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.1s infinite; }
.msg.typing i:nth-child(2) { animation-delay: 0.15s; } .msg.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.dc-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 6px; border-top: 1px solid var(--line); }
.dc-chips button { padding: 8px 13px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line-2); transition: background-color 0.25s, border-color 0.25s, opacity 0.25s, transform 0.25s var(--ease); }
.dc-chips button:hover { border-color: var(--accent); background: var(--hover); transform: translateY(-1px); }
.dc-chips button:disabled { opacity: 0.4; pointer-events: none; }
.dc-note { padding: 4px 20px 16px; font-size: 11.5px; color: var(--faint); }

/* Brand playground */
.brand-lab { padding: 18px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.bl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bl-title { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bl-swatches { display: flex; gap: 8px; }
.bl-swatches button { width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(var(--a) 0 50%, var(--b) 0); border: 2px solid transparent; outline: 1px solid var(--line-2); transition: transform 0.3s var(--ease); }
.bl-swatches button[aria-checked="true"] { border-color: var(--bg); outline: 2px solid var(--text); transform: scale(1.1); }
.bl-stage { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 12px; }
.bl-post { border-radius: 16px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.bl-post-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; font-size: 13px; }
.bl-post-head small { display: block; font-size: 11px; color: var(--muted); }
.bl-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-weight: 600; color: #fff; background: var(--b1); transition: background-color 0.6s var(--ease); }
.bl-art { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--b2); transition: background-color 0.6s var(--ease); }
.bl-shape { position: absolute; border-radius: 50%; background: var(--b1); transition: background-color 0.6s var(--ease), transform 1s var(--ease); }
.s-a { width: 75%; height: 75%; right: -20%; top: -18%; }
.s-b { width: 34%; height: 34%; left: 10%; bottom: 14%; opacity: 0.55; }
.brand-lab:hover .s-a { transform: translate(-6%, 6%) scale(1.04); }
.bl-headline { position: absolute; left: 16px; bottom: 16px; right: 16px; color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; transition: opacity 0.35s, transform 0.35s var(--ease); }
.bl-headline.swap { opacity: 0; transform: translateY(8px); }
.bl-post-foot { display: flex; justify-content: space-between; padding: 10px 12px; font-size: 13px; font-weight: 500; color: var(--b1); transition: color 0.6s; }
.bl-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.bl-card { padding: 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); min-height: 100px; display: flex; flex-direction: column; justify-content: space-between; }
.bl-card.wide { grid-column: span 2; min-height: 0; }
.bl-card small { font-size: 11px; color: var(--muted); font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.bl-logo { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; font-weight: 600; font-size: 22px; background: var(--b1); transition: background-color 0.6s, border-radius 0.6s var(--ease); }
.bl-card:hover .bl-logo { border-radius: 50%; }
.bl-logo i { position: absolute; right: -4px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--b2); border: 2px solid var(--bg); }
.bl-type { font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1; color: var(--b1); transition: color 0.6s; }
.bl-ch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bl-ch button { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); transition: all 0.3s var(--ease); }
.bl-ch button.on { background: var(--b1); border-color: var(--b1); color: #fff; }
.bl-headlines { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.bl-headlines button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); transition: border-color 0.3s, background-color 0.3s; }
.bl-headlines button:hover { border-color: var(--b1); background: var(--hover); }

/* Device lab */
.device-lab { padding: 18px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.dv-switch { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.dv-switch button { position: relative; z-index: 1; height: 36px; border-radius: 999px; font-size: 13.5px; color: var(--muted); transition: color 0.35s; }
.dv-switch button[aria-selected="true"] { color: var(--solid-fg); }
.dv-glider { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--solid-bg); transition: transform 0.5s var(--ease); }
.device-lab[data-device="tablet"] .dv-glider { transform: translateX(100%); }
.device-lab[data-device="mobile"] .dv-glider { transform: translateX(200%); }
.dv-stage { height: 330px; display: grid; place-items: center; margin-top: 16px; border-radius: 16px; background: radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, #3fb7ff 14%, transparent), transparent), var(--bg); border: 1px solid var(--line); overflow: hidden; }
.dv-frame { width: 92%; height: 280px; border-radius: 12px; overflow: hidden; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.5); transition: width 0.7s var(--ease), height 0.7s var(--ease), border-radius 0.7s var(--ease); }
.device-lab[data-device="tablet"] .dv-frame { width: 58%; height: 290px; border-radius: 16px; }
.device-lab[data-device="mobile"] .dv-frame { width: 34%; height: 300px; border-radius: 22px; }
.dv-bar { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.dv-bar i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.dv-bar span { margin-left: 6px; }
.dv-site { padding: 12px; display: grid; gap: 10px; }
.dv-nav { display: flex; align-items: center; gap: 8px; }
.dv-nav b { width: 22px; height: 10px; border-radius: 3px; background: #3fb7ff; }
.dv-nav span { margin-left: auto; width: 18px; height: 5px; border-radius: 3px; background: var(--line-2); }
.dv-nav span + span { margin-left: 0; }
.dv-hero { display: grid; gap: 7px; padding: 16px 12px; border-radius: 10px; background: linear-gradient(120deg, #1d3045, #3fb7ff); }
.dv-hero .h1 { height: 11px; width: 70%; border-radius: 4px; background: rgba(255, 255, 255, 0.92); }
.dv-hero .h2 { height: 6px; width: 50%; border-radius: 4px; background: rgba(255, 255, 255, 0.5); }
.dv-hero .btnx { height: 14px; width: 54px; border-radius: 999px; background: #fff; margin-top: 4px; }
.dv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; transition: grid-template-columns 0.5s; }
.dv-cards i { height: 52px; border-radius: 8px; background: var(--hover); border: 1px solid var(--line); }
.device-lab[data-device="mobile"] .dv-cards { grid-template-columns: 1fr; }
.device-lab[data-device="mobile"] .dv-cards i { height: 26px; }
.dv-bot { display: flex; justify-content: flex-end; }
.dv-bot span { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255, 91, 31, 0.6); animation: ring 2s infinite; }
.dv-checks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.dv-checks li { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; border-radius: 12px; border: 1px solid var(--line); font-size: 12.5px; color: var(--soft); opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i) * 0.09s + 0.3s); }
.dv-checks li::before { content: "✓"; color: #3ddc84; font-weight: 600; }
.reveal.in .dv-checks li, .no-js .dv-checks li { opacity: 1; transform: none; }

@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255, 91, 31, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(255, 91, 31, 0); } }

/* ---------- 10 AI cinematic ---------- */
.ai { position: relative; color: #fff; background: #0a0a0a; }
.ai-bg { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; z-index: 0; background: radial-gradient(90% 80% at 60% 40%, #2c3138, #0b0d10); }
.ai-bg .scrub { z-index: 0; }
.ai-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(5, 7, 9, 0.55) 0%, rgba(5, 7, 9, 0) 28%), linear-gradient(to top, rgba(5, 7, 9, 0.7) 0%, rgba(5, 7, 9, 0.15) 45%, rgba(5, 7, 9, 0) 65%); }
.ai-screen { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 110px var(--gutter) clamp(48px, 6vw, 72px); max-width: 1440px; margin: 0 auto; }
.ai-spacer { height: 70vh; }
.ai-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px; }
.ai-list { display: grid; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); }
.ai-intro { max-width: 340px; text-align: right; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); }
.ai-intro.wide { max-width: 400px; }
.ai-bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.badge { display: inline-block; margin-bottom: 20px; padding: 7px 12px; border-left: 2px solid #fff; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }
.ai-title { font-size: clamp(3rem, 7.4vw, 6.4rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.045em; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35); }
.talk-card { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.talk-card img { width: 80px; height: 96px; border-radius: 10px; object-fit: cover; }
.talk-card b { display: block; font-size: 15px; font-weight: 500; }
.talk-card small { display: block; margin: 4px 0 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; background: #fff; color: #000; font-size: 13px; font-weight: 500; transition: background-color 0.3s, transform 0.3s var(--ease); }
.pill-btn.lg { height: 46px; padding: 0 22px; font-size: 14.5px; }
.pill-btn:hover { background: rgba(255, 255, 255, 0.85); transform: translateY(-1px); }
.pill-btn svg, .cap svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.glass-btn { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 14.5px; transition: background-color 0.3s; }
.glass-btn:hover { background: rgba(255, 255, 255, 0.22); }
.ai-bottom-2 { align-items: flex-end; gap: 48px; }
.ai-left { max-width: 620px; }
.ai-body { margin-top: 22px; max-width: 460px; color: rgba(255, 255, 255, 0.82); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); }
.ai-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cap-panel { width: 100%; max-width: 440px; padding: 0 22px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.cap { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.cap:last-child { border-bottom: 0; }
.cap-i { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.55); padding-top: 4px; }
.cap b { display: flex; align-items: center; gap: 6px; font-size: 1.1rem; font-weight: 500; }
.cap b svg { color: rgba(255, 255, 255, 0.4); transition: transform 0.3s var(--ease), color 0.3s; }
.cap:hover b svg { transform: translateX(3px); color: #fff; }
.cap small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }

/* ---------- 11 Packages ---------- */
.packages { background: var(--bg-2); transition: background-color 0.5s var(--ease); }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.pkg {
  --mx: 50%; --my: 0%;
  position: relative; display: flex; flex-direction: column; gap: 22px; padding: 30px 26px 26px;
  border-radius: 26px; background: var(--card); border: 1px solid var(--line); overflow: hidden; isolation: isolate;
  transition: transform 0.6s var(--ease), border-color 0.4s, box-shadow 0.6s var(--ease), opacity 0.9s var(--ease-out);
}
.pkg:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.pkg-glow { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.4s; background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); }
.pkg:hover .pkg-glow { opacity: 1; }
.pkg.featured { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--card)), var(--card) 45%); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pkg.flash { animation: flash 1.4s var(--ease); }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 91, 31, 0); } 30% { box-shadow: 0 0 0 4px rgba(255, 91, 31, 0.5); } }
.ribbon { position: absolute; top: 22px; right: 22px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: #fff; }
.pkg-letter { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; font-family: var(--serif); font-style: italic; font-size: 26px; background: var(--hover); border: 1px solid var(--line); margin-bottom: 18px; }
.pkg.featured .pkg-letter { background: var(--accent); color: #fff; border-color: transparent; }
.pkg h3 { font-size: 1.45rem; font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
.pkg header p { margin-top: 10px; color: var(--soft); font-size: 15px; }
.pkg-tabs { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); align-self: flex-start; }
.pkg-tabs button { padding: 6px 13px; border-radius: 999px; font-size: 13px; color: var(--muted); transition: background-color 0.3s, color 0.3s; }
.pkg-tabs button[aria-selected="true"] { background: var(--solid-bg); color: var(--solid-fg); }
.pkg-list { display: grid; gap: 10px; flex: 1; align-content: start; }
.pkg-list li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--soft); animation: msgIn 0.45s var(--ease) both; }
.pkg-list li:nth-child(2) { animation-delay: 0.03s; } .pkg-list li:nth-child(3) { animation-delay: 0.06s; } .pkg-list li:nth-child(4) { animation-delay: 0.09s; }
.pkg-list li:nth-child(5) { animation-delay: 0.12s; } .pkg-list li:nth-child(6) { animation-delay: 0.15s; } .pkg-list li:nth-child(7) { animation-delay: 0.18s; }
.pkg-list.in li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 5px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); }
.pkg-list.out li::before { content: "×"; position: absolute; left: 2px; top: -2px; font-size: 18px; color: var(--muted); }
.bonus { padding: 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; color: var(--soft); background: var(--hover); border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); }
.bonus b { display: block; margin-bottom: 3px; color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.pkg footer { margin-top: auto; }
.pkg-note { margin-top: 36px; text-align: center; color: var(--muted); }
.pkg-note a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* ---------- 12 Process ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 40px; }
.steps-line { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line-2); }
.steps-line i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.step { position: relative; }
.step::before { content: ""; position: absolute; top: -45px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--accent); }
.step-n { font-family: var(--serif); font-style: italic; font-size: 3.4rem; line-height: 1; color: var(--faint); }
.step h3 { margin-top: 14px; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; }
.step p { margin-top: 8px; color: var(--soft); font-size: 15px; }

/* ---------- 13 Portfolio ---------- */
.portfolio { overflow: hidden; }
.pf-ctrl { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pf-filters { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.pf-filters button { padding: 8px 15px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: background-color 0.3s, color 0.3s; }
.pf-filters button[aria-selected="true"] { background: var(--solid-bg); color: var(--solid-fg); }
.pf-arrows { display: flex; gap: 8px; }
.pf-arrows .round-btn { border-color: var(--line-2); }
.pf-rail {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 6px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) 24px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  cursor: grab; outline: none;
}
.pf-rail::-webkit-scrollbar { display: none; }
.pf-rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.pf-rail.dragging .pf-item { pointer-events: none; }
.pf-item {
  flex: none; width: clamp(280px, 30vw, 400px); scroll-snap-align: start; text-align: left;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), width 0.5s var(--ease);
}
.pf-item.out { display: none; }
.pf-cover { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; isolation: isolate; background: var(--card); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s var(--ease); }
.pf-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pf-item:hover .pf-cover img, .pf-item:hover .pf-art { transform: scale(1.05); }
.pf-art { position: absolute; inset: 0; transition: transform 1s var(--ease); background: var(--g); }
.pf-art::before, .pf-art::after { content: ""; position: absolute; border-radius: 50%; }
.pf-art::before { width: 80%; aspect-ratio: 1; right: -25%; top: -15%; background: var(--c1); opacity: 0.85; filter: blur(2px); }
.pf-art::after { width: 46%; aspect-ratio: 1; left: -8%; bottom: 8%; border: 1.5px solid rgba(255, 255, 255, 0.45); }
.pf-art .glyph { position: absolute; left: 22px; top: 20px; font-family: var(--serif); font-style: italic; font-size: 5rem; line-height: 1; color: rgba(255, 255, 255, 0.9); }
.pf-art .ui { position: absolute; left: 22px; right: 22px; bottom: 22px; height: 38%; border-radius: 14px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pf-art .ui::before { content: ""; position: absolute; left: 14px; top: 14px; width: 50%; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.8); box-shadow: 0 18px 0 -1px rgba(255, 255, 255, 0.4), 0 34px 0 -1px rgba(255, 255, 255, 0.3); }
.pf-tag { position: absolute; z-index: 2; top: 16px; right: 16px; padding: 6px 11px; border-radius: 999px; font-size: 12px; color: #fff; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
.pf-view { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #fff; color: #000; font-size: 13px; font-weight: 500; scale: 0.4; opacity: 0; transition: scale 0.5s var(--ease), opacity 0.3s; }
.pf-item:hover .pf-view, .pf-item:focus-visible .pf-view { scale: 1; opacity: 1; }
.pf-meta { display: flex; justify-content: space-between; gap: 12px; padding: 16px 4px 0; }
.pf-meta b { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.02em; }
.pf-meta small { display: block; margin-top: 3px; color: var(--muted); font-size: 13.5px; }
.pf-meta span { font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 5px; }
.pf-progress { height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.pf-progress i { display: block; height: 100%; width: 20%; background: var(--text); border-radius: 2px; transition: width 0.2s, transform 0.2s; }

.pf-dialog { width: min(760px, calc(100% - 28px)); max-height: calc(100svh - 40px); padding: 0; border: 1px solid var(--line); border-radius: 26px; background: var(--card); color: var(--text); overflow: auto; }
.pf-dialog::backdrop { background: rgba(5, 8, 10, 0.6); backdrop-filter: blur(6px); }
.pf-dialog[open] { animation: dlgIn 0.55s var(--ease); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(26px) scale(0.97); } }
.pfd-close-wrap { position: absolute; top: 14px; right: 14px; z-index: 3; }
.pfd-close { width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; backdrop-filter: blur(8px); }
.pfd-cover { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.pfd-body { padding: 28px; }
.pfd-cat { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.pfd-body h3 { margin: 10px 0 12px; font-size: 1.9rem; font-weight: 400; letter-spacing: -0.03em; }
.pfd-body > p:not(.pfd-cat) { color: var(--soft); }
.pfd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pfd-tags li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; }
.pfd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* ---------- 14 About / FAQ ---------- */
.mission { margin: 26px 0 clamp(64px, 9vw, 120px); max-width: 1100px; font-size: clamp(2rem, 4.6vw, 4.1rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.035em; }
[data-words] em, [data-words] b { font-style: normal; font-weight: inherit; }
[data-words] .w { opacity: 0.16; transition: opacity 0.4s ease, color 0.4s, filter 0.4s; }
[data-words] .w.on { opacity: 1; }
[data-words] .w.accent.on { color: var(--accent); }
.mission .w.accent.on { font-family: var(--serif); font-style: italic; }
.team { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.member { display: grid; gap: 26px; }
.m-photo { position: relative; aspect-ratio: 5 / 6; border-radius: 26px; overflow: hidden; background: var(--card); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease); }
.m-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.9) contrast(1.05); transform: scale(1.04); transition: filter 0.8s var(--ease), transform 1.2s var(--ease); }
.member:hover .m-photo img { filter: none; transform: scale(1); }
.m-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 40%); pointer-events: none; }
.m-role { position: absolute; z-index: 2; left: 18px; bottom: 18px; padding: 8px 14px; border-radius: 999px; font-size: 13px; color: #fff; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.m-copy h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 400; letter-spacing: -0.035em; }
.m-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.m-chips li { padding: 6px 12px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line-2); color: var(--soft); }
.m-copy p { color: var(--soft); }

.faq-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq .sec-head { position: sticky; top: 120px; margin-bottom: 0; }
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-item button { position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 26px 0; text-align: left; font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 400; letter-spacing: -0.02em; transition: color 0.3s; }
.acc-item button:hover { color: var(--accent); }
.acc-item button i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform 0.5s var(--ease), background-color 0.3s, border-color 0.3s; }
.acc-item button i::before, .acc-item button i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; translate: -50% -50%; transition: transform 0.5s var(--ease); }
.acc-item button i::after { transform: rotate(90deg); }
.acc-item button[aria-expanded="true"] i { transform: rotate(180deg); background: var(--accent); border-color: var(--accent); color: #fff; }
.acc-item button[aria-expanded="true"] i::after { transform: rotate(0deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding: 0 60px 26px 0; color: var(--soft); }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }

/* ---------- 15 Contact ---------- */
.contact { overflow: hidden; }
.contact-aura { position: absolute; width: 760px; height: 760px; left: var(--ax, 70%); top: var(--ay, 30%); translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%); filter: blur(30px); transition: left 1.2s var(--ease), top 1.2s var(--ease); }
.contact-head { position: relative; margin-bottom: clamp(48px, 7vw, 80px); }
.big-title { margin-top: 22px; font-size: clamp(3.2rem, 10vw, 9rem); font-weight: 400; line-height: 0.92; letter-spacing: -0.055em; }
.big-title .serif { color: var(--accent); }
.contact-grid { position: relative; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.contact-side { display: grid; gap: 12px; }
.book-card { display: grid; gap: 6px; padding: 26px; border-radius: 24px; background: var(--solid-bg); color: var(--solid-fg); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.book-card:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 30px 60px -30px rgba(255, 91, 31, 0.6); }
.bc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.bc-live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.bc-live i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; animation: pulse 2s infinite; }
.bc-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 20px; transition: transform 0.5s var(--ease); }
.book-card:hover .bc-arrow { transform: rotate(45deg); }
.book-card b { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.03em; }
.book-card small { font-size: 14px; opacity: 0.65; }
.info-row { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: border-color 0.3s, transform 0.4s var(--ease); }
.info-row:hover { border-color: var(--line-2); transform: translateX(4px); }
.info-row svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.info-row span { font-size: 1.05rem; }
.info-row small { display: block; font-size: 12px; color: var(--muted); font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.socials a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.socials a:hover { background: var(--solid-bg); color: var(--solid-fg); border-color: var(--solid-bg); }
.socials svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.socials svg .fill { fill: currentColor; stroke: none; }

.lead-form { padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.lf-head b { display: block; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; }
.lf-head small { color: var(--muted); font-size: 14px; }
.lf-interest { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 6px; }
.lf-interest label { cursor: pointer; }
.lf-interest input { position: absolute; opacity: 0; pointer-events: none; }
.lf-interest span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; transition: all 0.3s var(--ease); }
.lf-interest span::before { content: "+"; font-size: 15px; color: var(--muted); transition: transform 0.3s var(--ease); }
.lf-interest input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.lf-interest input:checked + span::before { content: "✓"; color: #fff; }
.lf-interest input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.lf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.field { position: relative; }
.field.full { grid-column: 1 / -1; }
.field input, .field textarea, .field select {
  width: 100%; padding: 24px 16px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg);
  font-size: 15.5px; outline: none; transition: border-color 0.3s, box-shadow 0.3s; resize: vertical; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 17px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field label { position: absolute; left: 17px; top: 17px; font-size: 15px; color: var(--muted); pointer-events: none; transform-origin: left top; transition: transform 0.3s var(--ease), color 0.3s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field label.fixed { transform: translateY(-9px) scale(0.76); }
.field input:focus + label, .field textarea:focus + label { color: var(--accent); }
.field.err input { border-color: #ff4d4f; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lf-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.lf-legal { font-size: 12.5px; color: var(--muted); }
.lf-legal a { text-decoration: underline; }
.lf-status { margin-top: 12px; font-size: 14px; min-height: 1.4em; }
.lf-status.ok { color: #2fbf71; } .lf-status.bad { color: #ff4d4f; }
.spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
.loading .spin { display: inline-block; }
.loading .lbl { opacity: 0.6; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 16 Footer ---------- */
.footer { padding: clamp(70px, 9vw, 110px) 0 28px; border-top: 1px solid var(--line); background: var(--bg-2); transition: background-color 0.5s var(--ease); }
.f-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.f-brand p { margin: 18px 0 22px; max-width: 360px; color: var(--soft); }
.f-brand .logo { animation: none; }
.f-col { display: flex; flex-direction: column; gap: 10px; }
.f-col h4 { font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.f-col a { width: fit-content; color: var(--soft); transition: color 0.25s, transform 0.3s var(--ease); }
.f-col a:hover { color: var(--text); transform: translateX(3px); }
.f-word { display: flex; justify-content: space-between; margin: clamp(48px, 7vw, 90px) 0 20px; font-size: clamp(4.6rem, 19vw, 18rem); font-weight: 500; line-height: 0.8; letter-spacing: -0.06em; user-select: none; }
.f-word span { display: inline-block; color: transparent; -webkit-text-stroke: 1px var(--line-2); transition: color 0.5s var(--ease), transform 0.6s var(--ease), -webkit-text-stroke-color 0.5s; }
.f-word span:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent); transform: translateY(-6%); }
.f-word.in span { color: var(--text); -webkit-text-stroke-color: transparent; transition-delay: calc(var(--i, 0) * 60ms); }
.f-word.in span:hover { color: var(--accent); transition-delay: 0s; }
.f-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.f-bottom a, .linklike { color: var(--muted); font-size: inherit; transition: color 0.25s; }
.f-bottom a:hover, .linklike:hover { color: var(--text); }
.to-top { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color 0.3s, transform 0.4s var(--ease); }
.to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-3px); }

/* ---------- 17 Floating UI ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 70; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }

.cursor { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; border-radius: 50%; pointer-events: none; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); }
.cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid color-mix(in srgb, var(--text) 40%, transparent); display: grid; place-items: center; transition: width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), background-color 0.3s, border-color 0.3s; }
.cursor-label { font-style: normal; font-size: 12px; font-weight: 500; color: #000; opacity: 0; transition: opacity 0.2s; }
.cursor.hover .cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cursor.label .cursor-ring { width: 78px; height: 78px; margin: -39px 0 0 -39px; background: #fff; border-color: #fff; }
.cursor.label .cursor-label { opacity: 1; }
.cursor.label .cursor-dot { opacity: 0; }
.cursor.hide { opacity: 0; }

.consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 80; width: min(430px, calc(100% - 32px));
  padding: 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: 14px; color: var(--soft);
  animation: dlgIn 0.6s var(--ease) both;
}
.consent a { color: var(--text); text-decoration: underline; }
.consent-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 85; translate: -50% 140%; padding: 12px 18px; border-radius: 999px; background: var(--solid-bg); color: var(--solid-fg); font-size: 14px; box-shadow: var(--shadow); transition: translate 0.5s var(--ease); pointer-events: none; }
.toast.show { translate: -50% 0; }

.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 75; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 12px 30px -10px rgba(37, 211, 102, 0.6); transition: transform 0.4s var(--ease); }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; fill: currentColor; }

/* ---------- 18 Responsive ---------- */
@media (max-width: 1100px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar-index { position: sticky; top: 82px; z-index: 5; flex-direction: row; gap: 6px; overflow-x: auto; padding: 8px; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); scrollbar-width: none; }
  .pillar-index::-webkit-scrollbar { display: none; }
  .pi { flex: none; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
  .pi.is-active { background: var(--solid-bg); color: var(--solid-fg); border-color: var(--solid-bg); }
  .pi-bar, .pi-cta { display: none; }
  .pillar { grid-template-columns: 1fr; padding: 48px 0 72px; }
  .pkg-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .f-top { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --header-h: 56px; }
  .bar { grid-template-columns: 1fr auto; padding: 0 8px 0 14px; }
  .desktop-nav { display: none; }
  .menu-btn { display: grid; }
  .cta { display: none; }
  .tags { inset: auto var(--gutter) 108px; display: flex; flex-wrap: wrap; gap: 8px; }
  .tag { position: static; translate: none; animation: none; font-size: 12.5px; padding: 7px 12px; }
  .s1 { align-items: flex-start; padding-top: 120px; }
  .s1-next { bottom: 40px; }
  .scroll-cue { display: none; }
  .s2-pillars { bottom: 40px; flex-direction: column; gap: 6px; }
  .s2-rail { bottom: 40px; }
  .ai-intro { text-align: left; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .steps-line { display: none; }
  .step::before { display: none; }
  .team { grid-template-columns: 1fr; }
  .faq-wrap { grid-template-columns: 1fr; }
  .faq .sec-head { position: static; margin-bottom: 20px; }
  .contact-grid { grid-template-columns: 1fr; }
  .bl-stage { grid-template-columns: 1fr; }
}

@media (min-width: 861px) { .sheet { display: none; } }
@media (max-width: 860px) and (max-height: 760px) { .tags { display: none; } }

@media (max-width: 640px) {
  .hero { height: 380vh; }
  .hero-title { font-size: clamp(2.6rem, 12.5vw, 4rem); }
  .hero-cta .btn { height: 46px; padding: 0 18px; font-size: 14.5px; }
  .stat-row { grid-template-columns: 1fr 1fr 1fr; }
  .stat { padding: 12px 10px; }
  .stat b { font-size: 1.45rem; }
  .demo-chat { height: 500px; }
  .dv-checks { grid-template-columns: 1fr 1fr; }
  .lf-grid { grid-template-columns: 1fr; }
  .f-top { grid-template-columns: 1fr; }
  .acc-panel p { padding-right: 0; }
  .ai-title { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .talk-card { width: 100%; }
  .s2-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .s3 { justify-content: flex-start; }
  .theme-toggle { width: 36px; height: 36px; }
  .steps { grid-template-columns: 1fr; }
  .pkg { padding: 26px 20px 22px; }
}

/* ---------- 19 Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --morph: 0.01s; }
  *, *::before, *::after { animation-duration: 0.01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .panel, .dm { filter: none !important; }
  .marquee-track { animation: none; }
  .hero-grain { display: none; }
}

/* =========================================================================
   20 Multi-page additions — transitions, page heroes, text effects,
      decks, founders, bento, finder, CTA orb and more
   ========================================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(255, 91, 31, 0.7); }
.header.scrolled .bar { box-shadow: 0 16px 50px -24px rgba(0, 0, 0, 0.6); }

/* ---- Page transition curtain ---- */
.curtain {
  position: fixed; inset: 0; z-index: 120; pointer-events: none;
  display: grid; place-items: center;
  background: var(--accent);
  transform: translateY(101%);
}
.curtain::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25)); }
.curtain-label {
  position: relative; color: #fff; font-size: clamp(2.6rem, 9vw, 7rem); font-weight: 400; letter-spacing: -0.05em;
  font-family: var(--serif); font-style: italic; opacity: 0; transform: translateY(30px);
}
.curtain.cover { pointer-events: auto; animation: curtainIn 0.56s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
.curtain.cover .curtain-label { animation: labelIn 0.5s var(--ease) 0.16s forwards; }
html.pt-in .curtain { transform: none; animation: curtainOut 0.75s cubic-bezier(0.76, 0, 0.24, 1) 0.12s forwards; }
html.pt-in .curtain-label { opacity: 1; transform: none; animation: labelOut 0.4s ease forwards; }
@keyframes curtainIn { from { transform: translateY(101%); border-radius: 50% 50% 0 0 / 12% 12% 0 0; } to { transform: translateY(0); border-radius: 0; } }
@keyframes curtainOut { from { transform: translateY(0); } to { transform: translateY(-101%); border-radius: 0 0 50% 50% / 0 0 12% 12%; } }
@keyframes labelIn { to { opacity: 1; transform: none; } }
@keyframes labelOut { to { opacity: 0; transform: translateY(-30px); } }
html.pt-in .header { animation: fadeDown 0.8s var(--ease) 0.45s backwards; }

/* ---- Split-word headings ---- */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.sw-i { display: inline-block; }
.js [data-split] .sw-i { transform: translateY(110%) rotate(4deg); transform-origin: left bottom; transition: transform 1s var(--ease-out); transition-delay: calc(var(--wi, 0) * 55ms); }
.js [data-split].in .sw-i { transform: none; }
.sec-title .sw-i .serif, .ph-title .sw-i .serif, .cta-title .sw-i .serif, .big-title .sw-i .serif, .ind-title .sw-i .serif { color: var(--accent); }

/* ---- Letter names ---- */
[data-letters] { display: flex; flex-wrap: wrap; overflow: hidden; padding-bottom: 0.08em; }
[data-letters] .ch { display: inline-block; }
[data-letters] .ch.sp { width: 0.28em; }
.js [data-letters] .ch { opacity: 0; transform: translateY(80%) rotateX(-80deg); transform-origin: 50% 100%; transition: opacity 0.6s ease, transform 0.9s var(--ease-out), color 0.3s; transition-delay: calc(var(--ci, 0) * 35ms); }
.js [data-letters].in .ch { opacity: 1; transform: none; }
[data-letters] .ch:hover { color: var(--accent); transition-delay: 0s; }

/* ---- Page hero (inner pages) ---- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(92vh, 860px); display: flex; align-items: flex-end;
  padding: 150px 0 clamp(56px, 8vw, 96px);
  border-bottom: 1px solid var(--line);
}
.ph-bg { position: absolute; inset: 0; z-index: -1; opacity: var(--fade, 1); }
.ph-grid {
  position: absolute; inset: -2px;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 70% at 70% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 70% at 70% 30%, #000 20%, transparent 75%);
  animation: gridDrift 24s linear infinite;
}
@keyframes gridDrift { to { background-position: 64px 64px; } }
.ph-orb { position: absolute; border-radius: 50%; filter: blur(60px); transition: translate 1.4s var(--ease); }
.ph-orb.o1 { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; right: -8%; top: -18%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 65%); translate: calc(var(--px, 0) * -40px) calc(var(--py, 0) * -30px); animation: orbFloat 12s ease-in-out infinite; }
.ph-orb.o2 { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; left: 30%; bottom: -20%; background: radial-gradient(circle, rgba(63, 183, 255, 0.35), transparent 65%); translate: calc(var(--px, 0) * 50px) calc(var(--py, 0) * 40px); animation: orbFloat 15s ease-in-out -4s infinite reverse; }
@keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 30px) scale(1.08); } }
.ph-num {
  position: absolute; right: var(--gutter); top: 90px; z-index: -1;
  font-size: clamp(9rem, 30vw, 26rem); font-weight: 500; line-height: 0.8; letter-spacing: -0.08em;
  color: transparent; -webkit-text-stroke: 1px var(--line-2); user-select: none; will-change: transform;
}
.ph-inner { position: relative; }
.crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.crumbs a { transition: color 0.25s; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--text); }
.ph-title { margin-top: 22px; max-width: 1050px; font-size: clamp(3rem, 8.6vw, 8rem); font-weight: 400; line-height: 0.96; letter-spacing: -0.05em; }
.ph-lede { margin-top: 28px; max-width: 580px; font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--soft); }
.ph-cue { display: inline-flex; align-items: center; gap: 12px; margin-top: 44px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.ph-cue i { position: relative; width: 1px; height: 42px; background: var(--line-2); overflow: hidden; }
.ph-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--accent); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }

/* ---- Home: intro stat band ---- */
.intro .mission { margin-bottom: clamp(48px, 7vw, 80px); }
.intro .mission em { font-style: normal; }
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sb { position: relative; padding: 30px 24px 28px; border-left: 1px solid var(--line); overflow: hidden; }
.sb:first-child { border-left: 0; padding-left: 0; }
.sb::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease); }
.sb:hover::after { transform: scaleX(1); }
.sb b { display: flex; align-items: baseline; gap: 8px; font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
.sb b em { font-style: normal; }
.sb b small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 400; }
.sb span { display: block; margin-top: 12px; color: var(--muted); font-size: 14.5px; }

/* ---- Spotlight (pointer-follow glow) ---- */
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 0.4s; background: radial-gradient(380px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--c, var(--accent)) 20%, transparent), transparent 65%); }
.spot:hover::before { opacity: 1; }

/* ---- Home: service cards ---- */
.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-card { display: flex; flex-direction: column; border-radius: 26px; background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform 0.6s var(--ease), border-color 0.4s, box-shadow 0.6s var(--ease), opacity 0.9s var(--ease-out); }
.svc-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: var(--shadow); }
.svc-vis { position: relative; height: 230px; display: grid; place-items: center; padding: 22px; margin: 8px 8px 0; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 90% at 80% 10%, #2b3f52 0%, #121a21 60%, #0b1013 100%); }
.svc-vis > * { transition: transform 0.9s var(--ease); }
.svc-card:hover .svc-vis > * { transform: scale(1.05) translateY(-4px); }
.svc-vis .mk-chart { height: 140px; }
.svc-vis .mk-chart i { animation: grow 1.2s var(--ease) both; }
.svc-card:hover .mk-chart i { animation: barPulse 1.6s var(--ease) infinite alternate; }
@keyframes barPulse { to { transform: scaleY(1.12); } }
.svc-body { position: relative; padding: 26px 26px 28px; flex: 1; }
.svc-n { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--c); }
.svc-body h3 { margin-top: 10px; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.svc-body p { margin-top: 10px; color: var(--soft); font-size: 15px; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.svc-tags li { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line-2); color: var(--muted); transition: border-color 0.3s, color 0.3s; }
.svc-card:hover .svc-tags li { border-color: color-mix(in srgb, var(--c) 45%, transparent); color: var(--text); }
.svc-go { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color 0.4s, border-color 0.4s, transform 0.5s var(--ease); }
.svc-card { position: relative; }
.svc-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.svc-card:hover .svc-go { background: var(--c); border-color: var(--c); color: #fff; transform: rotate(45deg); }

/* ---- Home: founders teaser ---- */
.ft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ft-card { position: relative; display: grid; grid-template-columns: 0.8fr 1fr; gap: 0; border-radius: 26px; overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: border-color 0.4s, transform 0.6s var(--ease), opacity 0.9s var(--ease-out); }
.ft-card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.ft-photo { position: relative; overflow: hidden; min-height: 300px; }
.ft-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.85); transform: scale(1.06); transition: filter 0.8s var(--ease), transform 1.2s var(--ease); }
.ft-card:hover .ft-photo img { filter: none; transform: scale(1); }
.ft-copy { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 28px; }
.ft-copy small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.ft-copy b { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; }
.ft-copy p { margin-top: 6px; font-size: 1.05rem; line-height: 1.45; }

/* ---- About: approach ---- */
.approach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: ap; }
.ap { position: relative; padding: 28px 26px 30px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); overflow: hidden; transition: transform 0.6s var(--ease), border-color 0.4s, opacity 0.9s var(--ease-out); }
.ap::after { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); }
.ap:hover { transform: translateY(-4px); border-color: var(--line-2); }
.ap:hover::after { transform: scaleX(1); }
.ap-n { font-family: var(--serif); font-style: italic; font-size: 3rem; line-height: 1; color: var(--faint); transition: color 0.4s; }
.ap:hover .ap-n { color: var(--accent); }
.ap h3 { margin-top: 18px; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; }
.ap p { margin-top: 8px; color: var(--soft); font-size: 15px; }

/* ---- About: founders ---- */
.founders { padding-bottom: clamp(60px, 8vw, 110px); }
.founder { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.founder.flip .f-media { order: 2; }
.f-media { position: sticky; top: 100px; }
.f-photo { --p: 0; position: relative; aspect-ratio: 5 / 6; border-radius: 28px; overflow: hidden; background: var(--card); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease); clip-path: inset(calc((1 - min(1, var(--p) * 1.6)) * 18%) calc((1 - min(1, var(--p) * 1.6)) * 8%) round 28px); }
.f-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(calc(1 - var(--p))) contrast(1.05); transform: scale(calc(1.18 - var(--p) * 0.18)); }
.f-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 45%); pointer-events: none; }
.f-scan { position: absolute; left: 0; right: 0; height: 30%; top: -30%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 28%, transparent), transparent); mix-blend-mode: screen; }
.founder:hover .f-scan { animation: scan 1.6s var(--ease); }
@keyframes scan { to { top: 100%; } }
.f-copy { padding-top: 10px; }
.f-idx { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.f-name { margin-top: 16px; font-size: clamp(2.8rem, 6.4vw, 5.6rem); font-weight: 400; line-height: 0.95; letter-spacing: -0.05em; }
.f-copy .m-chips { margin: 22px 0 30px; }
.f-bio { font-size: clamp(1.3rem, 2.1vw, 1.85rem); line-height: 1.38; letter-spacing: -0.02em; font-weight: 400; }
.f-bio .w { opacity: 0.14; }
.f-bio .w.accent.on { font-family: var(--serif); font-style: italic; }
.f-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.f-stats > div { padding: 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.f-stats b { display: block; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 300; letter-spacing: -0.05em; line-height: 1; }
.f-stats span { display: block; margin-top: 10px; font-size: 13.5px; color: var(--muted); }

/* ---- About: why grid ---- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.why-card { padding: 24px 22px 26px; min-height: 230px; display: flex; flex-direction: column; border-radius: 22px; background: var(--card); border: 1px solid var(--line); transition: transform 0.6s var(--ease), border-color 0.4s, opacity 0.9s var(--ease-out); }
.why-card:hover { transform: translateY(-5px); border-color: var(--line-2); }
.why-n { font-family: var(--mono); font-size: 11.5px; color: var(--accent); letter-spacing: 0.1em; }
.why-card h3 { margin-top: auto; padding-top: 34px; font-size: 1.18rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.why-card p { margin-top: 10px; color: var(--muted); font-size: 14.5px; line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s var(--ease), opacity 0.4s, margin 0.4s; }
.why-card:hover p, .why-card:focus-within p { max-height: 140px; opacity: 1; }
@media (hover: none) { .why-card p { max-height: none; opacity: 1; } }

/* ---- Services: problem → solution ---- */
.problem-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.pb-list { margin-top: 44px; border-top: 1px solid var(--line); }
.pb-list li { position: relative; padding: 24px 0 24px 44px; border-bottom: 1px solid var(--line); font-size: clamp(1.1rem, 1.8vw, 1.45rem); letter-spacing: -0.02em; transition: color 0.5s; }
.pb-list li::before { content: "✕"; position: absolute; left: 0; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; color: #ff4d4f; border: 1px solid color-mix(in srgb, #ff4d4f 40%, transparent); transition: all 0.5s var(--ease); }
.pb-list li::after { content: ""; position: absolute; left: 44px; right: 0; top: 50%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); }
.pb-list li.struck { color: var(--faint); }
.pb-list li.struck::after { transform: scaleX(1); }
.pb-list li.struck::before { content: "✓"; color: #fff; background: #2fbf71; border-color: #2fbf71; }
.pb-right { position: sticky; top: 120px; }
.pb-card { padding: clamp(26px, 3vw, 40px); border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color 0.6s, box-shadow 0.6s; }
.pb-card.solved { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--accent) 50%, transparent); }
.pb-sol { margin-top: 22px; font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.32; letter-spacing: -0.025em; }
.pb-meter { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 32px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pb-meter b { color: var(--text); font-weight: 500; }
.pb-meter i { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pb-meter em { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ffb38a); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); }

/* ---- Services: bento ---- */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bn { padding: 26px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform 0.6s var(--ease), border-color 0.4s, opacity 0.9s var(--ease-out); }
.bn:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.bn-wide { grid-column: span 2; }
.bn-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); transition: transform 0.6s var(--ease); }
.bn:hover .bn-ic { transform: rotate(-10deg) scale(1.08); }
.bn-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bn h3 { margin-top: 22px; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; }
.bn p { margin-top: 8px; color: var(--soft); font-size: 15px; max-width: 520px; }
.bn-serp { position: relative; display: grid; gap: 8px; margin-top: 22px; padding: 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.bn-serp i { height: 9px; width: var(--w); border-radius: 5px; background: var(--line-2); }
.bn-serp i:first-child { background: var(--c); animation: serpGrow 2.4s var(--ease) infinite alternate; }
@keyframes serpGrow { from { width: 30%; } to { width: var(--w); } }
.bn-serp b { position: absolute; right: 16px; top: 50%; translate: 0 -50%; font-size: 2rem; font-weight: 300; letter-spacing: -0.04em; color: var(--c); }
.bn-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.bn-flow span { padding: 7px 12px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--line-2); }
.bn-flow i { position: relative; width: 28px; height: 1px; background: var(--line-2); overflow: hidden; }
.bn-flow i::after { content: ""; position: absolute; top: -1px; left: -10px; width: 10px; height: 3px; border-radius: 2px; background: var(--c); animation: flow 1.4s linear infinite; }
.bn-flow i:nth-of-type(2)::after { animation-delay: 0.45s; } .bn-flow i:nth-of-type(3)::after { animation-delay: 0.9s; }
@keyframes flow { to { left: 100%; } }
.bn-flow span:last-child { background: var(--c); border-color: var(--c); color: #fff; }

/* ---- Services: industries marquee ---- */
.industries { padding: clamp(70px, 10vw, 130px) 0; border-top: 1px solid var(--line); overflow: hidden; }
.ind-title { margin: 22px 0 clamp(36px, 5vw, 56px); max-width: 900px; font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 400; line-height: 1; letter-spacing: -0.04em; }
.ind-rows { display: grid; gap: 14px; }
.ind-row { overflow: hidden; }
.ind-track { display: flex; gap: 14px; width: max-content; animation: marquee 40s linear infinite; }
.ind-row.rev .ind-track { animation-direction: reverse; animation-duration: 46s; }
.ind-track span { padding: 18px 28px; border-radius: 999px; border: 1px solid var(--line-2); font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: -0.02em; white-space: nowrap; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.ind-row.rev .ind-track span { font-family: var(--serif); font-style: italic; color: var(--muted); }
.ind-track span:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.ind-rows:hover .ind-track { animation-play-state: paused; }

/* ---- Downloads: deck cards ---- */
.decks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.deck { display: flex; flex-direction: column; border-radius: 28px; background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: border-color 0.5s, box-shadow 0.6s var(--ease), opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.deck:hover { border-color: color-mix(in srgb, var(--deck) 45%, transparent); box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--deck) 55%, transparent); }
.deck-stage {
  position: relative; height: clamp(250px, 26vw, 330px); margin: 8px 8px 0; border-radius: 22px; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; perspective: 1100px; cursor: pointer;
  background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--deck) 30%, #0d1116), #0b0e12 70%);
}
.deck-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 30%), color-mix(in srgb, var(--deck-2) 45%, transparent), transparent 65%); opacity: 0.7; transition: opacity 0.4s; }
.deck-stack { position: relative; width: 62%; aspect-ratio: 16 / 9; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease); }
.pg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform 0.8s var(--ease), filter 0.6s; }
.pg2 { transform: translate3d(5%, -6%, -30px) rotate(3deg); filter: brightness(0.7); }
.pg3 { transform: translate3d(10%, -12%, -60px) rotate(6deg); filter: brightness(0.5); }
.deck:hover .pg1, .deck.fan .pg1 { transform: translate3d(-22%, 8%, 40px) rotate(-8deg); }
.deck:hover .pg2, .deck.fan .pg2 { transform: translate3d(0, -4%, 10px) rotate(0deg); filter: brightness(0.95); }
.deck:hover .pg3, .deck.fan .pg3 { transform: translate3d(24%, 8%, -20px) rotate(8deg); filter: brightness(0.85); }
.deck.sending .pg1 { animation: pageFly 1.3s var(--ease) both; }
@keyframes pageFly { 0% { transform: translate3d(0, 0, 0); } 35% { transform: translate3d(0, -14%, 80px) rotate(-3deg) scale(1.04); } 100% { transform: translate3d(0, 120%, 0) rotate(4deg) scale(0.4); opacity: 0; } }
.deck-badge { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.deck-info { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.deck-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.deck-meta span { padding: 4px 10px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); }
.deck-meta span:first-child { color: #fff; background: var(--deck); border-color: var(--deck); }
.deck-info h3 { margin-top: 16px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 500; letter-spacing: -0.03em; }
.deck-info p { margin-top: 8px; color: var(--soft); font-size: 15px; }
.deck-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: auto; padding-top: 24px; }
.deck-peek { font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: color 0.3s, border-color 0.3s; }
.deck-peek:hover { color: var(--text); border-color: var(--deck); }

.dl-btn {
  --fill: 0;
  position: relative; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px 0 6px;
  border-radius: 999px; overflow: hidden; isolation: isolate;
  background: var(--solid-bg); color: var(--solid-fg); font-size: 15px; font-weight: 500;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.5s var(--ease);
}
.dl-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -16px color-mix(in srgb, var(--deck) 80%, transparent); }
.dl-btn:active { transform: scale(0.97); }
.dl-fill { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--deck), var(--deck-2)); transform: scaleX(var(--fill)); transform-origin: left; }
.dl-btn.busy, .dl-btn.done { color: #fff; }
.dl-btn.done .dl-fill { transform: scaleX(1); }
.dl-icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--deck); color: #fff; overflow: hidden; transition: background-color 0.4s, transform 0.5s var(--ease); }
.dl-btn:hover .dl-icon { transform: rotate(-8deg); }
.dl-btn.busy .dl-icon, .dl-btn.done .dl-icon { background: rgba(255, 255, 255, 0.22); }
.dl-icon svg { position: absolute; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease), opacity 0.3s; }
.dl-btn:hover .i-arrow path:first-child { animation: nudge 0.9s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateY(2px); } }
.dl-btn.busy .i-arrow path:first-child { animation: drop 0.6s linear infinite; }
@keyframes drop { 0% { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
.i-check { opacity: 0; transform: scale(0.4); }
.i-check path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.dl-btn.done .i-arrow { opacity: 0; transform: translateY(14px); }
.dl-btn.done .i-check { opacity: 1; transform: none; }
.dl-btn.done .i-check path { animation: draw 0.5s var(--ease) 0.1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.dl-label { position: relative; display: grid; }
.dl-label > span { grid-area: 1 / 1; display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap; transition: opacity 0.3s, transform 0.45s var(--ease); }
.l-busy, .l-done { opacity: 0; transform: translateY(100%); }
.dl-btn.busy .l-idle, .dl-btn.done .l-idle, .dl-btn.done .l-busy { opacity: 0; transform: translateY(-100%); }
.dl-btn.busy .l-busy, .dl-btn.done .l-done { opacity: 1; transform: none; }
.dl-pct { font-family: var(--mono); font-size: 12.5px; opacity: 0.85; }
.spark { position: fixed; z-index: 130; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 2px; pointer-events: none; animation: spark 0.85s var(--ease-out) forwards; }
@keyframes spark { 0% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(0.2) rotate(220deg); opacity: 0; } }

/* ---- CTA band ---- */
.cta-band { position: relative; overflow: hidden; padding: clamp(90px, 12vw, 160px) 0; border-top: 1px solid var(--line); }
.cta-aura { position: absolute; width: 760px; height: 760px; left: var(--ax, 75%); top: var(--ay, 50%); translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%); filter: blur(30px); transition: left 1.2s var(--ease), top 1.2s var(--ease); }
.cta-inner { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(32px, 6vw, 96px); }
.cta-title { margin-top: 22px; font-size: clamp(3rem, 9vw, 8rem); font-weight: 400; line-height: 0.92; letter-spacing: -0.055em; }
.cta-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.cta-orb { position: relative; display: grid; place-items: center; width: clamp(170px, 18vw, 230px); aspect-ratio: 1; border-radius: 50%; color: var(--text); transition: translate 0.5s var(--ease), opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.orb-text { position: absolute; inset: 0; width: 100%; height: 100%; animation: spinSlow 16s linear infinite; }
.orb-text text { fill: currentColor; font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.cta-orb:hover .orb-text { animation-duration: 5s; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.orb-core { display: grid; place-items: center; width: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 20px 50px -18px rgba(255, 91, 31, 0.8); transition: transform 0.6s var(--ease); }
.orb-core svg { width: 34%; height: 34%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.6s var(--ease); }
.cta-orb:hover .orb-core { transform: scale(1.1); }
.cta-orb:hover .orb-core svg { transform: rotate(45deg); }

/* ---- Packages: finder ---- */
.finder-sec { padding: clamp(56px, 8vw, 96px) 0 0; }
.finder { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 22px clamp(24px, 4vw, 56px); padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.fd-head h2 { margin-top: 16px; font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.1; }
.fd-head .serif { color: var(--accent); }
.fd-steps { display: grid; gap: 18px; }
.fd-q p { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--soft); }
.fd-q p span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-family: var(--mono); font-size: 11px; border: 1px solid var(--line-2); transition: all 0.4s var(--ease); }
.fd-q.done p span { background: var(--accent); border-color: var(--accent); color: #fff; }
.fd-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fd-opts button { padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14.5px; transition: all 0.35s var(--ease); }
.fd-opts button:hover { border-color: var(--accent); transform: translateY(-1px); }
.fd-opts button[aria-pressed="true"] { background: var(--solid-bg); color: var(--solid-fg); border-color: var(--solid-bg); }
.fd-result { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px; border-radius: 20px; background: var(--bg); border: 1px dashed var(--line-2); }
.fd-result > div { flex: 1; min-width: 180px; }
.fd-result small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.fd-result b { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; }
.fd-letter { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; font-family: var(--serif); font-style: italic; font-size: 30px; background: var(--hover); border: 1px solid var(--line); transition: all 0.5s var(--ease); }
.fd-result.show { border-style: solid; border-color: color-mix(in srgb, var(--accent) 50%, transparent); animation: popIn 0.6s var(--ease); }
.fd-result.show .fd-letter { background: var(--accent); color: #fff; border-color: transparent; transform: rotate(-6deg); }
.fd-result [aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
@keyframes popIn { 0% { transform: scale(0.97); } 60% { transform: scale(1.01); } }
.pkg.dim { opacity: 0.55; }
.pkg.picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.packages .pkg.reveal.in.dim { opacity: 0.55; }

/* ---- Portfolio page grid ---- */
.pf-page { padding-top: clamp(56px, 8vw, 96px); }
.pf-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.pf-filters { position: relative; }
.pf-filters button { position: relative; z-index: 1; }
.pf-glider { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; background: var(--solid-bg); transition: transform 0.5s var(--ease), width 0.5s var(--ease); }
.pf-page .pf-filters button[aria-selected="true"] { background: transparent; }
.pf-count { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pf-count b { color: var(--text); font-weight: 500; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 18px; }
.pf-grid .pf-item { width: auto; }
.pf-grid .pf-item:nth-child(3n + 2) { margin-top: 60px; }
.js .pf-grid .pf-item { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(mod(var(--k, 0), 3) * 90ms); }
.js .pf-grid .pf-item.in { opacity: 1; transform: none; }
.pf-grid .pf-item.pop { animation: pfPop 0.7s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms); }
@keyframes pfPop { from { opacity: 0; transform: translateY(30px) scale(0.96); } }

/* ---- Contact page ---- */
.contact-page { padding-top: 150px; }
.next-list { border-top: 1px solid var(--line); }
.nx { display: grid; grid-template-columns: 90px 1fr auto; gap: 24px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--line); transition: padding 0.5s var(--ease), opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.nx:hover { padding-left: 14px; }
.nx-n { font-family: var(--serif); font-style: italic; font-size: 2.8rem; line-height: 1; color: var(--faint); transition: color 0.4s; }
.nx:hover .nx-n { color: var(--accent); }
.nx h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -0.025em; }
.nx p { margin-top: 6px; max-width: 560px; color: var(--soft); }
.nx-t { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* ---- Responsive for additions ---- */
@media (max-width: 1100px) {
  .svc-cards { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .svc-vis { height: 210px; }
  .ft-grid, .decks { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: 1fr 1fr; }
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-grid .pf-item:nth-child(3n + 2) { margin-top: 0; }
  .pf-grid .pf-item:nth-child(2n) { margin-top: 50px; }
  .finder { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .stat-band { grid-template-columns: 1fr 1fr; }
  .sb:nth-child(3) { border-left: 0; padding-left: 0; }
  .sb:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .approach { grid-template-columns: 1fr; }
  .founder, .founder.flip { grid-template-columns: 1fr; }
  .founder.flip .f-media { order: 0; }
  .f-media { position: relative; top: 0; max-width: 460px; }
  .problem-wrap { grid-template-columns: 1fr; }
  .pb-right { position: relative; top: 0; }
  .cta-inner { grid-template-columns: 1fr; }
  .cta-orb { justify-self: start; }
  .nx { grid-template-columns: 56px 1fr; }
  .nx-t { grid-column: 2; justify-self: start; }
  .page-hero { min-height: 0; padding-top: 130px; }
  .contact-page { padding-top: 120px; }
}
@media (max-width: 640px) {
  .ft-card { grid-template-columns: 1fr; }
  .ft-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .why-grid, .bento, .pf-grid { grid-template-columns: 1fr; }
  .bn-wide { grid-column: auto; }
  .pf-grid .pf-item:nth-child(2n) { margin-top: 0; }
  .f-stats { grid-template-columns: 1fr 1fr; }
  .deck-stack { width: 72%; }
  .dl-btn { width: 100%; }
  .deck-actions { gap: 14px; }
  .ph-num { top: auto; bottom: -4%; }
  .why-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
  .js [data-split] .sw-i, .js [data-letters] .ch, .js .pf-grid .pf-item { transform: none !important; opacity: 1 !important; }
  .f-photo { clip-path: none; }
  .f-photo img { filter: none; transform: none; }
  .ind-track, .orb-text, .ph-grid { animation: none !important; }
}
.curtain-label:empty::before { content: var(--pt, ""); }
[data-letters] .wd { display: inline-block; white-space: nowrap; }
.bento .bn:last-child { grid-column: 1 / -1; }
.bento .bn:last-child p { max-width: 640px; }
.toast { translate: -50% calc(100% + 40px); visibility: hidden; transition: translate 0.5s var(--ease), visibility 0s linear 0.5s; }
.toast.show { translate: -50% 0; visibility: visible; transition: translate 0.5s var(--ease), visibility 0s; }
@media (max-width: 640px) and (max-height: 880px) { .tags { display: none; } }

/* =========================================================================
   21 Portfolio showcase covers, booking modal and case pages
   ========================================================================= */

/* ---- Booking modal (Calendly inline embed in the top layer) ---- */
.cal-dialog { width: min(1000px, calc(100% - 24px)); height: min(780px, calc(100svh - 24px)); max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); border-radius: 24px; background: var(--card); color: var(--text); overflow: hidden; box-shadow: var(--shadow); }
.cal-dialog::backdrop { background: rgba(5, 8, 10, 0.68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cal-dialog[open] { animation: dlgIn 0.5s var(--ease); }
.cal-shell { display: flex; flex-direction: column; height: 100%; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px 14px 22px; border-bottom: 1px solid var(--line); }
.cal-head b { display: block; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.02em; }
.cal-head small { color: var(--muted); font-size: 13px; }
.cal-close { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 15px; transition: background-color 0.3s, transform 0.4s var(--ease); }
.cal-close:hover { background: var(--hover); transform: rotate(90deg); }
.cal-body { position: relative; flex: 1; min-height: 0; background: #fff; }
.cal-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.4s ease; }
.cal-frame.ready { opacity: 1; }
.cal-state, .cal-fail { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: var(--card); color: var(--soft); }
.cal-fail small a { text-decoration: underline; }
.cal-spin { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
.cal-out { padding: 10px 22px 12px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }
.cal-out:hover { color: var(--text); }
@media (max-width: 640px) { .cal-dialog { width: 100%; height: 100%; max-height: 100svh; border-radius: 0; border: 0; } }

/* ---- Showcase covers ---- */
.pf-meta span { white-space: nowrap; }
.cv { position: absolute; inset: 0; overflow: hidden; transition: transform 1s var(--ease); }
.pf-item:hover .cv { transform: scale(1.04); }
.cv > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pfd-cover .cv { transform: none !important; }

.cv-chat { display: grid; place-items: center; padding: 22px; background: radial-gradient(90% 70% at 85% 0%, rgba(255, 91, 31, 0.55), transparent 60%), linear-gradient(160deg, #1b1310, #0b0f12 70%); }
.cvc-win { width: 100%; max-width: 300px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; box-shadow: 0 30px 60px -30px #000; backdrop-filter: blur(8px); }
.cvc-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 12px; }
.cvc-head em { margin-left: auto; font-style: normal; font-size: 11px; color: #7cf3b0; }
.cvc-b { width: fit-content; max-width: 86%; padding: 8px 11px; margin-bottom: 7px; border-radius: 12px; font-size: 12.5px; }
.cvc-b.bot { background: rgba(255, 255, 255, 0.1); border-bottom-left-radius: 4px; }
.cvc-b.me { margin-left: auto; background: var(--accent); border-bottom-right-radius: 4px; }
.cvc-card { padding: 10px 11px; border-radius: 12px; background: rgba(255, 255, 255, 0.95); color: #0e1418; font-size: 12px; }
.cvc-card span { font-weight: 600; }
.cvc-card i { display: block; height: 5px; margin: 7px 0 6px; border-radius: 4px; background: linear-gradient(90deg, #2fbf71 var(--w), #e6e6e6 var(--w)); }
.cvc-card small { color: #5a6570; }
.cvc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.cvc-chips span { padding: 5px 9px; border-radius: 999px; font-size: 11px; border: 1px solid rgba(255, 255, 255, 0.25); }

.cv-wild { background: #000; }
.cv-wild > img { opacity: 0.38; filter: grayscale(0.25); }
.cvw-ring { position: absolute; left: 50%; top: 48%; width: 70%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; animation: spinSlow 30s linear infinite; }
.cvw-ring i { position: absolute; left: 50%; top: 0; width: 22%; aspect-ratio: 3 / 2; margin-left: -11%; border-radius: 2px; background: rgba(244, 242, 239, 0.14); border: 1px solid rgba(244, 242, 239, 0.3); transform-origin: 50% calc(50% + 290%); }
.cvw-ring i:nth-child(1) { transform: rotate(0deg); } .cvw-ring i:nth-child(2) { transform: rotate(45deg); } .cvw-ring i:nth-child(3) { transform: rotate(90deg); } .cvw-ring i:nth-child(4) { transform: rotate(135deg); }
.cvw-ring i:nth-child(5) { transform: rotate(180deg); } .cvw-ring i:nth-child(6) { transform: rotate(225deg); } .cvw-ring i:nth-child(7) { transform: rotate(270deg); } .cvw-ring i:nth-child(8) { transform: rotate(315deg); }
.cvw-t { position: absolute; left: 0; right: 0; top: 48%; translate: 0 -50%; text-align: center; color: #fff; font-family: "Playfair Display", var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.06; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6); }
.cvw-w { position: absolute; left: 20px; top: 18px; color: #fff; font-family: "Playfair Display", var(--serif); font-size: 15px; }
.cvw-w em { font-style: normal; }

.cv-cosmo { background: #0d1b3d; }
.cv-cosmo > img { object-position: 22% 46%; transform: scale(1.35); transform-origin: 22% 46%; }
.cvx-chip { position: absolute; left: 18px; bottom: 18px; display: flex; gap: 5px; padding: 6px; border-radius: 999px; background: rgba(13, 27, 61, 0.7); backdrop-filter: blur(8px); border: 1px solid rgba(217, 168, 90, 0.4); }
.cvx-chip i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); }

.cv-ads { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 12px; padding: 22px 18px; background: radial-gradient(90% 70% at 10% 100%, rgba(63, 183, 255, 0.35), transparent 60%), linear-gradient(160deg, #0f1a24, #0b1013); color: #fff; }
.cva-phone { border-radius: 18px; overflow: hidden; background: #fff; color: #111; box-shadow: 0 30px 50px -25px #000; font-size: 11px; }
.cva-top { display: flex; align-items: center; gap: 6px; padding: 8px 9px; }
.cva-top i { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #1d3045, #3fb7ff); }
.cva-top small { margin-left: auto; color: #888; font-size: 10px; }
.cva-art { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; color: #fff; background: radial-gradient(70% 60% at 70% 20%, #ffb38a, transparent 60%), linear-gradient(180deg, #2b4a66, #10202f); }
.cva-art b { font-size: 16px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.cva-art span { width: fit-content; padding: 4px 8px; border-radius: 999px; background: #fff; color: #10202f; font-size: 10px; font-weight: 600; }
.cva-cta { display: flex; justify-content: space-between; padding: 8px 9px; font-weight: 600; }
.cva-funnel { display: grid; gap: 7px; justify-items: center; }
.cva-funnel i { display: block; width: var(--w); min-width: 4.6em; white-space: nowrap; padding: 7px 0; border-radius: 8px; text-align: center; font-style: normal; font-size: 11px; background: rgba(63, 183, 255, 0.18); border: 1px solid rgba(63, 183, 255, 0.4); }
.cva-funnel i:last-child { background: var(--accent); border-color: var(--accent); }

.cv-social { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: linear-gradient(165deg, #f4ede4, #e8dccd); color: #2a2018; }
.cvs-head { display: flex; align-items: center; gap: 10px; }
.cvs-head b { display: block; font-size: 14px; }
.cvs-head small { font-size: 11.5px; color: #7a6a5a; }
.cvs-av { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-style: normal; font-family: var(--serif); font-size: 22px; color: #f4ede4; background: #b4532a; box-shadow: 0 0 0 3px #f4ede4, 0 0 0 5px #d94fa0; }
.cvs-hl { display: flex; gap: 10px; }
.cvs-hl i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-style: normal; font-size: 9px; color: #2a2018; background: #efe3d3; border: 1.5px solid #c9b49a; }
.cvs-feed { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.cvs-feed i { border-radius: 2px; background: #c9b49a; }
.cvs-feed i:nth-child(3n + 1) { background: #b4532a; } .cvs-feed i:nth-child(4n + 2) { background: #8a9a7b; } .cvs-feed i:nth-child(5) { background: #2a2018; } .cvs-feed i:nth-child(9) { background: #e9d7c0; }

.cv-hair { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 22px; background: radial-gradient(80% 60% at 50% 0%, rgba(24, 195, 176, 0.3), transparent 60%), linear-gradient(170deg, #0f2a2c, #0b1013 75%); color: #fff; }
.cvh-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; overflow: hidden; background: #e9f3f1; }
.cvh-side { position: relative; display: grid; place-items: center; padding: 14px 6px 22px; }
.cvh-side.after { background: #d9ece8; }
.cvh-side svg { width: 78%; }
.cvh-side .sk { fill: #e6bfa0; }
.cvh-side .hr { fill: #3a2a20; }
.cvh-side .hr.thin { fill: #3a2a20; opacity: 0.75; }
.cvh-side small { position: absolute; left: 8px; bottom: 6px; color: #2a4a48; font-size: 10.5px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.cvh-knob { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; }
.cvh-knob::after { content: "↔"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #0f2a2c; font-size: 13px; }
.cvh-l { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.cvh-l i { width: 7px; height: 7px; border-radius: 50%; background: #18c3b0; box-shadow: 0 0 10px #18c3b0; }

.cv-landing { display: grid; place-items: center; padding: 22px; background: radial-gradient(90% 70% at 100% 100%, rgba(108, 99, 255, 0.45), transparent 60%), linear-gradient(160deg, #11131f, #0b1013); }
.cvl-win { width: 100%; border-radius: 12px; overflow: hidden; background: #fbfaf7; box-shadow: 0 30px 60px -30px #000; }
.cvl-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: #ece9e2; font-family: var(--mono); font-size: 9.5px; color: #777; }
.cvl-bar i { width: 7px; height: 7px; border-radius: 50%; background: #cfcac0; }
.cvl-bar span { margin-left: 6px; }
.cvl-body { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 10px; padding: 16px 12px; color: #14162b; }
.cvl-body b { display: block; font-size: 15px; font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; }
.cvl-body .l1, .cvl-body .l2 { display: block; height: 5px; margin-top: 8px; border-radius: 4px; background: #d8d5ce; width: 90%; }
.cvl-body .l2 { width: 60%; }
.cvl-body em { display: inline-block; margin-top: 12px; padding: 6px 10px; border-radius: 999px; background: #6c63ff; color: #fff; font-style: normal; font-size: 10px; font-weight: 600; }
.cvl-form { display: grid; gap: 6px; padding: 9px; border-radius: 10px; background: #fff; border: 1px solid #e6e3dc; }
.cvl-form span { height: 16px; border-radius: 5px; background: #f1efea; border: 1px solid #e6e3dc; }
.cvl-form em { height: 18px; margin: 0; border-radius: 5px; background: #14162b; padding: 0; }

/* ---- Case pages (/work/…) ---- */
.work-page .page-hero { min-height: min(78vh, 760px); }
.wk-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.wk-tags li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--soft); }
.wk-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 9px 14px; border-radius: 12px; font-size: 13.5px; color: var(--soft); background: var(--hover); border: 1px dashed var(--line-2); }
.wk-note b { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.wk-sec { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--line); }
.wk-sec:first-of-type { border-top: 0; }
.wk-split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.wk-split > :first-child { position: sticky; top: 110px; }
.wk-h { margin-top: 18px; font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; }
.wk-h .serif { color: var(--accent); }
.wk-p { margin-top: 16px; color: var(--soft); max-width: 520px; }
.wk-list { display: grid; gap: 10px; margin-top: 22px; }
.wk-list li { position: relative; padding-left: 28px; color: var(--soft); font-size: 15px; }
.wk-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.wk-list li::after { content: ""; position: absolute; left: 5px; top: 8px; width: 7px; height: 4px; border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); }
.wk-frame { border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.wk-frame-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--muted); }
.wk-frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.wk-frame-bar span { margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-frame-bar a { margin-left: auto; color: var(--text); white-space: nowrap; }
.wk-frame iframe { display: block; width: 100%; border: 0; background: #fff; }
.wk-devices { display: inline-flex; padding: 4px; margin-bottom: 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.wk-devices button { padding: 7px 14px; border-radius: 999px; font-size: 13px; color: var(--muted); transition: background-color 0.3s, color 0.3s; }
.wk-devices button[aria-pressed="true"] { background: var(--solid-bg); color: var(--solid-fg); }
.wk-stage { display: grid; justify-items: center; padding: 18px; border-radius: 24px; background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent), var(--bg-2); border: 1px solid var(--line); }
.wk-stage .wk-frame { width: 100%; transition: width 0.7s var(--ease); }
.wk-stage[data-w="tablet"] .wk-frame { width: min(100%, 800px); }
.wk-stage[data-w="mobile"] .wk-frame { width: min(100%, 390px); }
.wk-next { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; }
.wk-next > div { display: grid; justify-items: start; }
.wk-next a.next-card { display: grid; gap: 4px; padding: 22px 26px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); min-width: min(100%, 340px); transition: border-color 0.3s, transform 0.5s var(--ease); }
.wk-next a.next-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.wk-next small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wk-next b { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; }
.sample-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #e8c22a; border: 1px solid color-mix(in srgb, #e8c22a 50%, transparent); background: color-mix(in srgb, #e8c22a 10%, transparent); }
@media (max-width: 860px) {
  .wk-split { grid-template-columns: 1fr; }
  .wk-split > :first-child { position: static; }
}
[data-theme="light"] .sample-tag { color: #8a6a00; }

/* =========================================================================
   21 Hero — "Lifting your brand with →" model + live screen
   A model holds a tablet. Picking a service swaps the live HTML mapped onto
   the tablet's screen, relights the scene and changes the giant word behind
   him. Scrolling zooms gently into the screen (sticky stage, transform only).
   Markup: legacy/index.html  ·  Behaviour: assets/js/hero.js
   ========================================================================= */
.hx {
  --hx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hx-slow: cubic-bezier(0.65, 0, 0.35, 1);
  --hx-bg: #02060f;
  --hx-ink: #f4f2ee;
  --hx-soft: rgba(244, 242, 238, 0.72);
  --hx-fill: rgba(255, 255, 255, 0.06);
  --hx-stroke: rgba(255, 255, 255, 0.12);
  --acc: 255 91 31;
  position: relative;
  height: 160vh; height: 160svh;
  background: var(--hx-bg); color: var(--hx-ink);
}
.hx[data-state="ai"] { --acc: 124 92 255; }
.hx[data-state="ads"] { --acc: 255 61 110; }
.hx[data-state="brand"] { --acc: 255 181 71; }
.hx[data-state="web"] { --acc: 63 183 255; }
[data-light="base"] { --a: 255 91 31; --b: 255 179 138; }
[data-light="ai"] { --a: 124 92 255; --b: 79 215 255; }
[data-light="ads"] { --a: 255 61 110; --b: 255 138 61; }
[data-light="brand"] { --a: 255 181 71; --b: 255 120 60; }
[data-light="web"] { --a: 63 183 255; --b: 61 220 132; }

.hx-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden; isolation: isolate;
}

/* ---- Scene (photo + lighting + giant word + cutout + screen) ---- */
.hx-scene {
  position: absolute; inset: 0; z-index: 0;
  transform-origin: var(--ox, 50%) var(--oy, 55%);
  background: var(--hx-bg);
}
.hx-media {
  position: absolute; left: 50%; top: var(--m-top, 0px);
  width: max(100%, 177.78vh); width: var(--m-w, max(100%, 177.78svh));
  aspect-ratio: 16 / 9; translate: -50% 0;
  container-type: inline-size;
  /* soft edges so the photo melts into the stage whatever its size */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-composite: intersect;
  animation: hxMediaIn 1.8s var(--hx-ease) 0.05s backwards;
}
.hx-photo, .hx-cutout { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.hx-glow {
  position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  transition: opacity 1.2s var(--hx-ease);
  background:
    radial-gradient(24% 44% at 50% 24%, rgb(var(--a) / 0.42), transparent 70%),
    radial-gradient(46% 34% at 50% 104%, rgb(var(--b) / 0.22), transparent 70%),
    radial-gradient(16% 34% at 24% 46%, rgb(var(--b) / 0.1), transparent 70%),
    radial-gradient(16% 34% at 76% 46%, rgb(var(--a) / 0.1), transparent 70%);
}
.hx-glow.is-on { opacity: 1; }
.hx-glow[data-light="base"].is-on { opacity: 0.6; }

.hx-word { position: absolute; left: 0; right: 0; top: 3.2cqw; height: 15cqw; translate: 0 calc(var(--p, 0) * -5cqw); }
.hx-word span {
  position: absolute; left: 0; right: 0; top: 0; text-align: center; white-space: nowrap;
  font-size: 15.5cqw; font-weight: 600; line-height: 0.86; letter-spacing: -0.065em;
  background: linear-gradient(180deg, rgb(var(--b) / 0.85) 0%, rgb(var(--a) / 0.5) 45%, rgb(var(--a) / 0.03) 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(3cqw) scale(0.96);
  transition: opacity 0.8s var(--hx-ease), transform 1.1s var(--hx-ease);
}
.hx-word span.is-on { opacity: 0.85; transform: none; transition-delay: 0.15s; }
/* Short words are set larger and wider so they reach past his head */
.hx-word [data-word="ai"] { font-size: 27cqw; letter-spacing: 0.1em; text-indent: 0.1em; }
.hx-word [data-word="ads"] { font-size: 21cqw; letter-spacing: -0.02em; }
.hx-word [data-word="brand"] { font-size: 17.5cqw; }
.hx-word [data-word="web"] { font-size: 21cqw; letter-spacing: -0.02em; }

.hx-spill {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.5;
  background:
    radial-gradient(17% 30% at 49.7% 53%, rgb(var(--acc) / 0.6), transparent 72%),
    radial-gradient(7% 10% at 49.8% 28%, rgb(var(--acc) / 0.2), transparent 80%);
  -webkit-mask: url("/assets/img/hero/model-cutout.webp") 0 0 / 100% 100% no-repeat;
          mask: url("/assets/img/hero/model-cutout.webp") 0 0 / 100% 100% no-repeat;
  transition: opacity 0.7s ease;
}
.hx.is-flash .hx-spill { opacity: 0.95; transition-duration: 0.12s; }

/* The tablet screen — mapped to the photo (x 653–872, y 410–550 of 1536×864) */
.hx-screen {
  position: absolute; left: 42.513%; top: 47.454%; width: 14.323%; height: 16.319%;
  overflow: hidden; border-radius: 0.5cqw; background: #06090d;
  container-type: size;
  box-shadow: 0 0 2.4cqw rgb(var(--acc) / 0.28);
  transition: box-shadow 0.8s ease;
}
.hx-scr {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  font-size: 3.6cqw; line-height: 1.3; color: #f4f2ee; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(5cqh) scale(1.03); filter: blur(3px);
  transition: opacity 0.4s ease, transform 0.6s var(--hx-ease), filter 0.4s ease, visibility 0s linear 0.6s;
}
.hx-scr.is-on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity 0.5s ease 0.16s, transform 0.7s var(--hx-ease) 0.16s, filter 0.5s ease 0.16s, visibility 0s; }
.hx-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at 50% 35%, #fff, rgb(var(--acc)) 75%); }
.hx.is-flash .hx-flash { animation: hxFlash 0.7s ease both; }
.hx-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 30%, transparent 46%); }

/* Screen: base */
.s-base {
  align-items: center; justify-content: center; gap: 1.8cqw; text-align: center;
  background: radial-gradient(70% 80% at 50% -5%, rgba(255, 91, 31, 0.38), transparent 62%), radial-gradient(60% 60% at 50% 125%, rgba(255, 179, 138, 0.22), transparent 60%), #070a0e;
}
.sb-orb { width: 12cqw; height: 12cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffb38a 28%, #ff5b1f 58%, #6a1a00); box-shadow: 0 0 7cqw rgba(255, 91, 31, 0.65); animation: hxOrb 4s ease-in-out infinite; }
.sb-word { margin-top: 1cqw; font-size: 9cqw; font-weight: 500; line-height: 1; letter-spacing: -0.045em; }
.sb-tag { font-family: var(--mono); font-size: 2.5cqw; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.sb-hint { margin-top: 2.4cqw; padding: 1.4cqw 3.6cqw; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); font-size: 3cqw; }
.sb-hint i { display: inline-block; font-style: normal; animation: hxBob 1.6s ease-in-out infinite; }

/* Screen: shared top bar */
.sc-top { display: flex; align-items: center; gap: 2cqw; padding: 3cqw 4.4cqw; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 3.4cqw; white-space: nowrap; }
.sc-top b { font-weight: 500; }
.sc-top em { margin-left: auto; font-style: normal; font-size: 2.8cqw; color: #3ddc84; }
.sc-orb { width: 4cqw; height: 4cqw; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, rgb(var(--acc)) 55%); box-shadow: 0 0 3cqw rgb(var(--acc) / 0.8); }
.sc-live { width: 2.4cqw; height: 2.4cqw; flex: none; border-radius: 50%; background: rgb(var(--acc)); box-shadow: 0 0 0 1cqw rgb(var(--acc) / 0.25); animation: pulse 1.6s infinite; }

/* Screen: AI chat */
.s-ai { background: radial-gradient(80% 60% at 100% 0%, rgba(124, 92, 255, 0.22), transparent 60%), #0b0f14; }
.sa-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.8cqw; padding: 2.6cqw 4.4cqw; overflow: hidden; }
.sa-b { max-width: 80%; padding: 1.9cqw 3cqw; border-radius: 3.4cqw; font-size: 3.2cqw; line-height: 1.28; opacity: 0; transform: translateY(3cqw) scale(0.96); }
.sa-b.me { align-self: flex-end; background: rgba(255, 255, 255, 0.13); border-bottom-right-radius: 0.8cqw; }
.sa-b.bot { align-self: flex-start; background: rgb(var(--acc) / 0.28); border: 1px solid rgb(var(--acc) / 0.45); border-bottom-left-radius: 0.8cqw; }
.is-live .sa-b { animation: hxPop 0.5s var(--hx-ease) forwards; animation-delay: calc(0.45s + var(--k) * 0.8s); }
.sa-input { display: flex; align-items: center; justify-content: space-between; margin: 0 4.4cqw 3.4cqw; padding: 1.8cqw 1.8cqw 1.8cqw 3.2cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.07); font-size: 2.9cqw; color: rgba(255, 255, 255, 0.45); }
.sa-input i { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: rgb(var(--acc)); }

/* Screen: Ads dashboard */
.s-ads { background: radial-gradient(80% 60% at 0% 0%, rgba(255, 61, 110, 0.18), transparent 60%), #0b0f14; }
.sd-chart { position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 1.6cqw; margin: 3.4cqw 4.4cqw 0; }
.sd-chart i { flex: 1; height: var(--h); border-radius: 1cqw 1cqw 0.3cqw 0.3cqw; background: linear-gradient(to top, rgb(var(--acc) / 0.22), rgb(var(--acc))); transform: scaleY(0); transform-origin: bottom; }
.is-live .sd-chart i { animation: hxGrowY 0.8s var(--hx-ease) forwards; animation-delay: calc(0.35s + var(--k) * 0.07s); }
.sd-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sd-chart path { fill: none; stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6)); }
.is-live .sd-chart path { animation: hxDraw 1.4s var(--hx-ease) 1s forwards; }
.sd-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; padding: 3.2cqw 4.4cqw 3.8cqw; }
.sd-kpis span { padding: 1.8cqw 2.2cqw; border-radius: 2cqw; background: rgba(255, 255, 255, 0.06); opacity: 0; transform: translateY(2cqw); }
.is-live .sd-kpis span { animation: hxPop 0.5s var(--hx-ease) forwards; }
.is-live .sd-kpis span:nth-child(1) { animation-delay: 1.2s; }
.is-live .sd-kpis span:nth-child(2) { animation-delay: 1.32s; }
.is-live .sd-kpis span:nth-child(3) { animation-delay: 1.44s; }
.sd-kpis small { display: block; font-size: 2.4cqw; color: rgba(255, 255, 255, 0.55); }
.sd-kpis b { font-size: 3.2cqw; font-weight: 500; color: #3ddc84; }
.sd-kpis .up::before { content: "↗ "; }
.sd-kpis .dn::before { content: "↘ "; }

/* Screen: Brand board */
.s-brand { flex-direction: row; gap: 4cqw; padding: 5cqw; background: radial-gradient(80% 100% at 0% 0%, rgba(255, 181, 71, 0.2), transparent 60%), #0b0f14; }
.sbr-mark { flex: 1.25; display: flex; flex-direction: column; justify-content: center; gap: 1cqw; }
.sbr-mark svg { width: 21cqw; height: 21cqw; }
.sbr-mark .mk-o { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.5; }
.sbr-mark .mk-a { fill: none; stroke: rgb(var(--acc)); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.sbr-mark .mk-d { fill: #fff; transform: scale(0); transform-origin: 32px 14.5px; }
.is-live .sbr-mark .mk-a { animation: hxDraw 1.1s var(--hx-ease) 0.5s forwards; }
.is-live .sbr-mark .mk-d { animation: hxPopScale 0.45s var(--hx-ease) 1.35s forwards; }
.sbr-mark b { margin-top: 1.6cqw; font-size: 6.6cqw; font-weight: 500; line-height: 1; letter-spacing: -0.045em; }
.sbr-mark span { font-family: var(--mono); font-size: 2.3cqw; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.sbr-pal { flex: 1; display: grid; grid-template-rows: repeat(4, 1fr); gap: 1.6cqw; }
.sbr-pal i { position: relative; border-radius: 1.8cqw; background: var(--c); transform: scaleX(0); transform-origin: left; }
.sbr-pal span { position: absolute; right: 2cqw; bottom: 1.2cqw; font-family: var(--mono); font-size: 2.3cqw; color: rgba(255, 255, 255, 0.88); }
.sbr-pal i:nth-child(n + 3) span { color: rgba(14, 20, 24, 0.72); }
.is-live .sbr-pal i { animation: hxGrowX 0.7s var(--hx-ease) forwards; animation-delay: calc(0.6s + var(--k) * 0.12s); }

/* Screen: Website build */
.s-web { background: #f4f2ee; color: #0e1418; }
.s-web > *, .sw-hero > *, .sw-grid i { opacity: 0; transform: translateY(2.4cqw); }
.is-live.s-web > *, .is-live .sw-hero > *, .is-live .sw-grid i { animation: hxPop 0.5s var(--hx-ease) forwards; }
.is-live .sw-nav { animation-delay: 0.3s; }
.is-live .sw-hero { animation-delay: 0.45s; }
.is-live .sw-hero > :nth-child(1) { animation-delay: 0.6s; }
.is-live .sw-hero > :nth-child(2) { animation-delay: 0.72s; }
.is-live .sw-hero > :nth-child(3) { animation-delay: 0.86s; }
.is-live .sw-hero > :nth-child(4) { animation-delay: 1s; }
.is-live .sw-grid { animation-delay: 1.1s; }
.is-live .sw-grid i:nth-child(1) { animation-delay: 1.15s; }
.is-live .sw-grid i:nth-child(2) { animation-delay: 1.25s; }
.is-live .sw-grid i:nth-child(3) { animation-delay: 1.35s; }
.is-live .sw-pills { animation-delay: 1.55s; }
.sw-nav { display: flex; align-items: center; gap: 2.6cqw; padding: 2.8cqw 4.4cqw; border-bottom: 1px solid rgba(14, 20, 24, 0.08); }
.sw-logo { width: 4.6cqw; height: 4.6cqw; border-radius: 1.3cqw; background: linear-gradient(135deg, #ff5b1f, #ffb38a); }
.sw-nav span { width: 7cqw; height: 1.3cqw; border-radius: 1cqw; background: rgba(14, 20, 24, 0.22); }
.sw-nav span:first-of-type { margin-left: auto; }
.sw-nav b { width: 12cqw; height: 4.6cqw; border-radius: 99px; background: #0e1418; }
.sw-hero { display: grid; gap: 1.6cqw; padding: 3.6cqw 4.4cqw 3cqw; background: radial-gradient(70% 130% at 100% 0%, rgb(var(--acc) / 0.35), transparent 62%); }
.sw-h1 { display: block; width: 70%; height: 4.2cqw; border-radius: 1cqw; background: #0e1418; }
.sw-h1.short { width: 46%; }
.sw-p { display: block; width: 58%; height: 1.5cqw; border-radius: 1cqw; background: rgba(14, 20, 24, 0.25); }
.sw-btn { width: max-content; padding: 1.4cqw 3.4cqw; border-radius: 99px; background: rgb(var(--acc)); color: #fff; font-size: 2.7cqw; font-weight: 500; }
.sw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2cqw; padding: 0 4.4cqw; }
.sw-grid i { height: 10cqw; border-radius: 2cqw; background: #e4e0d8; }
.sw-grid i:nth-child(2) { background: linear-gradient(135deg, #1d3045, rgb(var(--acc))); }
.sw-pills { display: flex; gap: 1.6cqw; margin-top: auto; padding: 2.6cqw 4.4cqw 3.4cqw; }
.sw-pills span { padding: 1.1cqw 2.4cqw; border-radius: 99px; background: #0e1418; color: #fff; font-size: 2.5cqw; }

/* ---- Readability shade over the photo ---- */
.hx-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 6, 15, 0.7), rgba(2, 6, 15, 0) 30%, rgba(2, 6, 15, 0) 70%, rgba(2, 6, 15, 0.7)),
    linear-gradient(to top, rgba(2, 6, 15, 0.92), rgba(2, 6, 15, 0) 32%);
}

/* ---- UI layer ---- */
.hx-ui { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.hx-ui a, .hx-ui button { pointer-events: auto; }
.hx-left, .hx-right {
  position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 24px) 0 clamp(150px, 22vh, 220px);
  opacity: calc(1 - var(--p, 0) * 1.8); translate: 0 calc(var(--p, 0) * -40px);
}
.hx-left { left: var(--gutter); width: clamp(260px, 27vw, 420px); align-items: flex-start; }
.hx-right { right: var(--gutter); width: clamp(260px, 25vw, 360px); }

.hx-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 11px; border-radius: 999px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-soft);
  background: var(--hx-fill); border: 1px solid var(--hx-stroke);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: hxRise 0.9s var(--hx-ease) 0.2s backwards;
}
.hx-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: rgb(var(--acc)); box-shadow: 0 0 0 4px rgb(var(--acc) / 0.2); transition: background-color 0.6s, box-shadow 0.6s; animation: pulse 2s infinite; }
.hx-eyebrow-text { transition: opacity 0.26s ease; }

.hx-title {
  margin-top: 20px;
  font-size: clamp(52px, 6.2vw, 104px); font-weight: 400; line-height: 0.9; letter-spacing: -0.055em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.hx-title > span {
  display: block; width: max-content;
  transition: opacity 900ms var(--hx-ease), filter 900ms var(--hx-ease), transform 900ms var(--hx-ease);
  animation: hxWordIn 1.2s var(--hx-ease) 0.35s backwards;
}
.hx-title > span:nth-child(2) { transition-delay: 90ms; animation-delay: 0.47s; }
.hx-title > span:nth-child(3) { transition-delay: 180ms; animation-delay: 0.59s; }
.hx-title .serif { color: var(--accent); letter-spacing: -0.02em; padding-right: 0.06em; font-size: 1.06em; }
.hx-title > span:nth-child(4) { transition-delay: 270ms; animation-delay: 0.71s; }
.hx-title .hx-with { margin-top: 0.14em; font-size: 0.5em; letter-spacing: -0.035em; color: var(--hx-soft); }
.hx-title .hx-with b { font-weight: 500; color: var(--hx-ink); }
.hx.title-hidden .hx-title > span { opacity: 0; filter: blur(12px); transform: translateY(-10px); }

.hx-copy {
  font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.55; letter-spacing: -0.01em; color: var(--hx-soft);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8);
  transition: opacity 0.26s ease, filter 0.26s ease, transform 0.26s ease;
  animation: hxRise 1s var(--hx-ease) 0.75s backwards;
}
.hx-copy b { color: var(--hx-ink); font-weight: 500; }
.hx-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; animation: hxRise 1s var(--hx-ease) 0.88s backwards; }
.hx-short { display: none; }
.hx-btn-main { background: var(--accent); color: #fff; box-shadow: 0 16px 36px -16px rgba(255, 91, 31, 0.8); }
.hx-btn-main:hover { background: #ff6a33; transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(255, 91, 31, 0.9); }
.hx-btn-ghost {
  color: var(--hx-ink); border: 1px solid var(--hx-stroke); background: var(--hx-fill);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.26s ease, transform 0.35s var(--ease);
}
.hx-btn-ghost:hover { border-color: var(--hx-soft); background: var(--hx-stroke); }
.hx.is-swap .hx-copy { opacity: 0; filter: blur(6px); transform: translateY(6px); }
.hx.is-swap .hx-eyebrow-text, .hx.is-swap .hx-btn-ghost { opacity: 0; }

/* ---- Glass controller ---- */
.hx-ctrl {
  --cap-left: -5px; --cap-width: calc(20% + 5px);
  position: absolute; left: 50%; bottom: clamp(64px, 10.5vh, 116px); translate: -50% 0;
  width: min(880px, calc(100vw - 48px)); height: 72px;
  opacity: calc(1 - max(0, var(--p, 0) - 0.55) * 2.6);
  animation: hxRise 1s var(--hx-ease) 0.6s backwards;
}
.hx-glass { position: absolute; border-radius: 999px; pointer-events: none; }
.hx-glass::before, .hx-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.hx-glass::before {
  background:
    radial-gradient(120% 150% at var(--glass-x, 24%) var(--glass-y, 8%), rgb(255 255 255 / 0.25), rgb(255 255 255 / 0) 53%),
    linear-gradient(115deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0) 42%);
}
.hx-glass::after {
  padding: 1px;
  background: conic-gradient(from 225deg, rgb(var(--acc)), rgb(255 255 255 / 0.35), #ffffff, #ffd9c7, rgb(255 255 255 / 0.35), rgb(var(--acc)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0.27;
}
.hx-track {
  top: 4px; left: 0; width: 100%; height: 64px;
  background-color: rgb(24 55 82 / 0.31);
  border: 1px solid rgb(255 255 255 / 0.2);
  -webkit-backdrop-filter: blur(9px) saturate(126%) contrast(108%) brightness(103%);
          backdrop-filter: blur(9px) saturate(126%) contrast(108%) brightness(103%);
  box-shadow: 0 14px 38px rgb(4 24 43 / 0.16), 0 2px 7px rgb(4 24 43 / 0.1),
    inset 1px 1px 0 rgb(255 255 255 / 0.48), inset -1px -1px 0 rgb(21 49 73 / 0.14), inset 0 0 0 0.5px rgb(255 255 255 / 0.16);
  transition: left 980ms var(--hx-slow), width 980ms var(--hx-slow), top 980ms var(--hx-slow), height 980ms var(--hx-slow), opacity 400ms linear;
}
.hx-capsule {
  top: -1px; height: 72px; left: var(--cap-left); width: var(--cap-width);
  background-color: rgb(246 251 255 / 0.22);
  border: 1px solid rgb(255 255 255 / 0.28);
  -webkit-backdrop-filter: blur(13px) saturate(128%) contrast(107%) brightness(105%);
          backdrop-filter: blur(13px) saturate(128%) contrast(107%) brightness(105%);
  box-shadow: 0 11px 28px rgb(4 24 43 / 0.17), 0 2px 6px rgb(4 24 43 / 0.1),
    inset 1px 1px 0 rgb(255 255 255 / 0.62), inset -1px -1px 0 rgb(20 49 73 / 0.18), inset 0 0 12px rgb(255 255 255 / 0.055);
  transition: left 620ms var(--hx-ease), width 620ms var(--hx-ease), top 980ms var(--hx-slow), height 980ms var(--hx-slow), background-color 980ms var(--hx-slow), opacity 400ms ease;
}
.hx-capsule::after { opacity: 0.3; }
.hx-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; }
.hx-cell {
  position: relative; display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 14px;
  font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: -0.035em; white-space: nowrap; color: var(--hx-ink);
  border-radius: 999px;
  transition: opacity 420ms var(--hx-ease), filter 420ms var(--hx-ease), transform 980ms var(--hx-slow);
}
.hx-lead { color: var(--hx-soft); transition: opacity 300ms ease, filter 420ms var(--hx-ease), transform 980ms var(--hx-slow); }
.hx-lead span { display: inline-block; margin-left: 0.32em; animation: hxNudge 2.4s ease-in-out infinite; }
.hx-ctrl.is-hl .hx-lead { opacity: 0.5; }
.hx-opt { cursor: pointer; }
.hx-opt:disabled { cursor: default; }
.hx-opt:focus-visible { outline: 2px solid var(--hx-ink); outline-offset: -5px; border-radius: 999px; }
.hx-lbl { transition: opacity 0.3s ease, filter 0.3s ease; }
.hx-back {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; pointer-events: none;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  opacity: 0; filter: blur(10px);
  transition: opacity 520ms var(--hx-ease), filter 520ms var(--hx-ease);
}
.hx-opt.is-reset .hx-lbl { opacity: 0; filter: blur(8px); }
.hx-opt.is-reset .hx-back { opacity: 1; filter: none; }
.hx-cell.is-chosen { z-index: 2; transform: translate(var(--tx, 0px), var(--ty, 0px)); }
.hx-ctrl.collapsed .hx-capsule {
  left: calc(50% - 100px); width: 200px; background-color: rgb(246 251 255 / 0.14);
  transition: left 980ms var(--hx-slow), width 980ms var(--hx-slow), top 980ms var(--hx-slow), height 980ms var(--hx-slow), background-color 980ms var(--hx-slow), opacity 400ms ease;
}
.hx-ctrl.collapsed .hx-track {
  left: calc(50% - 96px); width: 192px; opacity: 0;
  transition: left 980ms var(--hx-slow), width 980ms var(--hx-slow), top 980ms var(--hx-slow), height 980ms var(--hx-slow), opacity 400ms linear 650ms;
}
.hx-ctrl.collapsed .hx-cell:not(.is-chosen) { opacity: 0; filter: blur(10px); transform: scale(0.94); pointer-events: none; }
.hx-ctrl.is-opening .hx-capsule { transition: left 980ms var(--hx-slow), width 980ms var(--hx-slow), top 980ms var(--hx-slow), height 980ms var(--hx-slow), background-color 980ms var(--hx-slow), opacity 400ms ease; }
.hx-ctrl.is-opening .hx-cell { transition: opacity 760ms var(--hx-ease) 60ms, filter 760ms var(--hx-ease) 60ms, transform 980ms var(--hx-slow); }

.hx-foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 24px; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; pointer-events: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hx-soft);
  opacity: calc(1 - var(--p, 0) * 3);
  animation: hxRise 1s var(--hx-ease) 1.1s backwards;
}
.hx-scroll { display: inline-flex; align-items: center; gap: 12px; }
.hx-scroll i { position: relative; width: 46px; height: 1px; overflow: hidden; background: var(--hx-stroke); }
.hx-scroll i::after { content: ""; position: absolute; inset: 0; background: var(--hx-ink); transform: translateX(-100%); animation: hxLine 2.4s var(--hx-ease) infinite; }
.hx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Detail cards (flow out of the screen into the left column) ---- */
.hx-cards {
  position: absolute; z-index: 6; left: var(--gutter); top: var(--ct, 26%); width: 252px; pointer-events: none;
  opacity: calc(1 - var(--p, 0) * 1.8);
}
.hx-group { position: absolute; left: 0; top: 0; width: 100%; display: grid; gap: 14px; }
.hx-card {
  position: relative; padding: 14px; border-radius: 18px;
  font-size: 12.5px; line-height: 1.4; color: var(--hx-ink);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 60%), rgba(10, 15, 19, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  opacity: 0; visibility: hidden;
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) scale(0.25);
  transition:
    transform 700ms var(--hx-slow) calc((1 - var(--i)) * 60ms),
    opacity 300ms ease calc((1 - var(--i)) * 60ms + 380ms),
    visibility 0s linear 1000ms;
}
.hx-group.is-on .hx-card {
  opacity: 1; visibility: visible;
  transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)) scale(1);
  transition:
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1) calc(260ms + var(--i) * 110ms),
    opacity 380ms ease calc(260ms + var(--i) * 110ms),
    visibility 0s;
}
.hx-group.is-live .hx-card { animation: hxFloat 7s ease-in-out infinite; animation-delay: calc(var(--i) * -2.3s); }
.hx-card.c1 { --r: -1.5deg; }
.hx-card.c2 { --r: 1.5deg; margin-left: 28px; }

.hx-ch { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-soft); }
.hx-ch::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: rgb(var(--acc)); }
.hx-big { display: block; font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: -0.05em; }
.hx-note { display: block; margin-top: 6px; color: var(--hx-soft); }
.hx-wave-bars { display: flex; align-items: center; gap: 3px; height: 24px; margin-top: 12px; }
.hx-wave-bars i { flex: 1; height: 100%; border-radius: 2px; background: rgb(var(--acc) / 0.85); transform: scaleY(0.2); }
.is-live .hx-wave-bars i { animation: hxEq 1.1s ease-in-out infinite; }
.hx-wave-bars i:nth-child(3n + 1) { animation-delay: -0.2s; }
.hx-wave-bars i:nth-child(3n + 2) { animation-delay: -0.55s; }
.hx-wave-bars i:nth-child(4n) { animation-delay: -0.85s; }
.hx-flow { display: grid; gap: 7px; }
.hx-flow li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: var(--hx-fill); opacity: 0.35; }
.hx-flow li i { position: relative; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--hx-stroke); }
.hx-flow li i::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%; transform: scale(0);
  background: rgb(var(--acc)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.is-live .hx-flow li { animation: hxLit 0.4s ease forwards; animation-delay: calc(0.9s + var(--k) * 0.5s); }
.is-live .hx-flow li i::after { animation: hxPopScale 0.4s var(--hx-ease) forwards; animation-delay: calc(0.9s + var(--k) * 0.5s); }
.hx-ad { padding: 10px; }
.hx-ad-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hx-av { width: 26px; height: 26px; flex: none; border-radius: 50%; background: linear-gradient(135deg, rgb(var(--acc)), #ffb38a); }
.hx-ad-top b { display: block; font-size: 12px; font-weight: 500; }
.hx-ad-top small { display: block; font-size: 10px; color: var(--hx-soft); }
.hx-ad-img {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; height: 104px; padding: 11px; border-radius: 10px;
  font-size: 17px; font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; color: #fff;
  background: radial-gradient(70% 90% at 80% 15%, rgba(255, 220, 190, 0.9), transparent 60%), linear-gradient(135deg, #ff3d6e, #ff8a3d 60%, #ffd29d);
}
.hx-ad-img em { font-family: var(--serif); font-weight: 400; font-size: 1.12em; }
.hx-ad-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); transform: translateX(-120%); }
.is-live .hx-ad-img::after { animation: hxSheen 2.8s ease-in-out 1s infinite; }
.hx-ad-cta { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--hx-soft); }
.hx-ad-cta b { padding: 5px 10px; border-radius: 6px; background: var(--hx-stroke); color: var(--hx-ink); font-weight: 500; }
.hx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hx-chips li { padding: 6px 10px; border-radius: 99px; border: 1px solid var(--hx-stroke); background: var(--hx-fill); font-size: 11.5px; opacity: 0; transform: translateY(6px) scale(0.96); }
.hx-chips li:first-child { border-color: rgb(var(--acc) / 0.5); background: rgb(var(--acc) / 0.18); }
.is-live .hx-chips li { animation: hxPop 0.45s var(--hx-ease) forwards; animation-delay: calc(0.8s + var(--k) * 0.12s); }
.hx-aa { display: block; margin: 2px 0 8px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 60px; line-height: 0.95; color: rgb(var(--acc)); }
.hx-type-row { display: flex; justify-content: space-between; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--hx-stroke); font-size: 11.5px; color: var(--hx-soft); }
.hx-type-row em { font-style: normal; color: var(--hx-ink); }
.hx-type-row:first-of-type em { font-family: var(--serif); font-style: italic; font-size: 13px; }
.hx-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.hx-feed i { aspect-ratio: 1; border-radius: 6px; opacity: 0; transform: scale(0.8); }
.hx-feed i:nth-child(1) { background: linear-gradient(135deg, #ff5b1f, #ffb38a); }
.hx-feed i:nth-child(2) { background: #1d3045; }
.hx-feed i:nth-child(3) { background: radial-gradient(circle at 30% 30%, #fff 0 12%, transparent 13%), linear-gradient(135deg, #ffb547, #ff5b1f); }
.hx-feed i:nth-child(4) { background: #f3f1ec; }
.hx-feed i:nth-child(5) { background: linear-gradient(160deg, #1d3045 40%, #ff5b1f); }
.hx-feed i:nth-child(6) { background: #ffb38a; }
.hx-feed i:nth-child(7) { background: #ff5b1f; }
.hx-feed i:nth-child(8) { background: linear-gradient(135deg, #f3f1ec, #ffb38a); }
.hx-feed i:nth-child(9) { background: radial-gradient(circle at 70% 70%, #ff5b1f 0 18%, transparent 19%), #1d3045; }
.is-live .hx-feed i { animation: hxPop 0.45s var(--hx-ease) forwards; animation-delay: calc(0.8s + var(--k) * 0.07s); }
.hx-rings { display: flex; justify-content: space-between; gap: 8px; }
.hx-rings span { display: grid; justify-items: center; gap: 6px; font-size: 11px; color: var(--hx-soft); }
.hx-rings svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.hx-rings circle { fill: none; stroke: var(--hx-stroke); stroke-width: 3; }
.hx-rings .fill { stroke: rgb(var(--acc)); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; }
.is-live .hx-rings .fill { animation: hxRing 1.4s var(--hx-ease) 0.8s forwards; }

/* ---- Keyframes ---- */
@keyframes hxMediaIn { from { opacity: 0; transform: scale(1.06); } }
@keyframes hxRise { from { opacity: 0; transform: translateY(18px); } }
@keyframes hxWordIn { from { opacity: 0; filter: blur(14px); transform: translateY(28px); } }
@keyframes hxFlash { 0% { opacity: 0; } 22% { opacity: 0.65; } 100% { opacity: 0; } }
@keyframes hxOrb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes hxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(18%); } }
@keyframes hxNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes hxLine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes hxFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes hxPop { to { opacity: 1; transform: none; } }
@keyframes hxPopScale { to { transform: scale(1); } }
@keyframes hxLit { to { opacity: 1; } }
@keyframes hxGrowX { to { transform: scaleX(1); } }
@keyframes hxGrowY { to { transform: scaleY(1); } }
@keyframes hxEq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes hxSheen { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
@keyframes hxDraw { to { stroke-dashoffset: 0; } }
@keyframes hxRing { to { stroke-dashoffset: calc(94.25 * (1 - var(--p, 1))); } }

/* ---- Responsive ---- */
@media (max-width: 1180px) {
  .hx-title { font-size: clamp(48px, 5.8vw, 72px); }
  .hx-cell { font-size: clamp(17px, 2.1vw, 22px); }
}
@media (max-width: 1100px), (max-height: 640px) {
  .hx-cards { display: none; }
}
@media (max-height: 760px) {
  .hx-card.c2 { display: none; }
}
@media (max-width: 980px) and (min-height: 521px) {
  /* Stacked layout: title on top, model in the middle, controls below */
  .hx { height: 145vh; height: 145svh; }
  .hx-media { width: var(--m-w, 240vw); }
  .hx-pops { display: none; }
  .hx-title .hx-with { display: block; }
  .hx-shade { background: linear-gradient(to top, rgba(2, 6, 15, 0.95) 0%, rgba(2, 6, 15, 0.7) 22%, rgba(2, 6, 15, 0) 42%); }
  .hx-ui { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 20px 22px; }
  .hx-left {
    left: 16px; right: 16px; width: auto; top: calc(var(--header-h) + 22px); bottom: auto;
    align-items: center; justify-content: flex-start; padding: 0; text-align: center;
  }
  .hx-title { margin-top: 14px; font-size: clamp(40px, 11vw, 64px); line-height: 0.94; text-align: center; }
  .hx-title > span { display: inline; width: auto; }
  .hx-title > span.serif { display: inline-block; }
  .hx-right { position: relative; order: 2; inset: auto; width: auto; padding: 0; text-align: center; align-items: center; }
  .hx-copy { max-width: 560px; margin: 0 auto; font-size: 14.5px; }
  .hx-cta { justify-content: center; margin-top: 16px; }
  .hx-ctrl { position: relative; order: 1; left: auto; bottom: auto; translate: none; align-self: center; margin-bottom: 16px; }
  .hx-foot { display: none; }
}
@media (max-width: 700px) {
  .hx-eyebrow { font-size: 9.5px; letter-spacing: 0.1em; padding: 6px 12px 6px 9px; }
  .hx-ctrl { width: 100%; height: 56px; }
  .hx-track { top: 0; height: 56px; }
  .hx-capsule { top: -2px; height: 60px; opacity: 0; pointer-events: none; }
  .hx-cells { grid-template-columns: repeat(4, 1fr); }
  .hx-lead { display: none; }
  .hx-cell { font-size: 15.5px; padding: 0 6px; }
  .hx-opt:active { background: var(--hx-fill); }
  .hx-ctrl.collapsed .hx-capsule { opacity: 1; left: calc(50% - 90px); width: 180px; background-color: rgb(246 251 255 / 0.18); }
  .hx-ctrl.collapsed .hx-track { left: calc(50% - 86px); width: 172px; }
  .hx-cta .btn { height: 46px; padding: 0 18px; font-size: 14.5px; }
  .hx-long { display: none; }
  .hx-short { display: inline; }
  .hx-word span { font-size: 13cqw; }
}
@media (max-width: 980px) and (min-height: 521px) and (max-height: 700px) {
  .hx-eyebrow { display: none; }
  .hx-title { font-size: clamp(34px, 9.5vw, 48px); }
  .hx-copy { display: none; }
  .hx-cta { margin-top: 0; }
}
@media (max-height: 520px) and (orientation: landscape) {
  /* Short landscape phones: no sticky zoom, compact single screen */
  .hx { height: auto; }
  .hx-sticky { position: relative; height: 100vh; height: 100svh; min-height: 340px; }
  .hx-eyebrow, .hx-copy, .hx-foot, .hx-cards, .hx-pops { display: none; }
  .hx-left { padding-top: calc(var(--header-h) + 12px); padding-bottom: 110px; }
  .hx-title { font-size: clamp(30px, 8vh, 48px); margin-top: 0; }
  .hx-right { padding-bottom: 110px; }
  .hx-ctrl { bottom: 14px; height: 56px; width: min(720px, calc(100vw - 32px)); }
  .hx-track { top: 0; height: 56px; }
  .hx-capsule { top: -2px; height: 60px; }
  .hx-cell { font-size: 16px; }
  .hx-left { width: clamp(200px, 24vw, 300px); padding-bottom: 80px; }
  .hx-right { width: clamp(190px, 22vw, 280px); padding-bottom: 80px; justify-content: center; }
  .hx-cta .btn { height: 42px; padding: 0 16px; font-size: 14px; }
  .hx-long { display: none; }
  .hx-short { display: inline; }
}

/* ---- Pop-up badges: burst out of the screen to the left and right ---- */
.hx-pops { position: absolute; inset: 0; pointer-events: none; }
.hx-pgroup { position: absolute; inset: 0; }
.hx-pop {
  position: absolute; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 230px;
  padding: 9px 14px 9px 9px; border-radius: 16px;
  font-size: 13px; line-height: 1.25; color: var(--hx-ink); text-align: left;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 70%), rgba(10, 15, 20, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  opacity: 0; visibility: hidden;
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) scale(0.2);
  transition: transform 600ms var(--hx-slow) calc((3 - var(--i)) * 40ms), opacity 260ms ease calc((3 - var(--i)) * 40ms + 340ms), visibility 0s linear 900ms;
}
.hx-pgroup.is-on .hx-pop {
  opacity: 1; visibility: visible; transform: translate3d(0, 0, 0) scale(1);
  transition: transform 900ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(380ms + var(--i) * 120ms), opacity 300ms ease calc(380ms + var(--i) * 120ms), visibility 0s;
}
.hx-pgroup.is-live .hx-pop { animation: hxFloat 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.5s); }
.hx-pop i {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px;
  background: rgb(var(--acc) / 0.22); border: 1px solid rgb(var(--acc) / 0.45); color: #fff;
  box-shadow: 0 0 18px rgb(var(--acc) / 0.35);
}
.hx-pop i svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hx-pop b { display: block; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.hx-pop small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--hx-soft); white-space: nowrap; }
.hx-pop .ok { color: #3ddc84; }
/* anchors, in photo percentages so they stay beside her at any size / zoom */
.hx-pop.p1 { right: 64.5%; top: 21%; }
.hx-pop.p2 { left: 63.5%; top: 15%; }
.hx-pop.p3 { right: 63.5%; top: 72%; }
.hx-pop.p4 { left: 64.5%; top: 64%; }
@media (max-height: 700px) { .hx-pop { padding: 7px 12px 7px 7px; font-size: 12px; } .hx-pop i { width: 28px; height: 28px; border-radius: 9px; } }