/* Calm palette (warm paper, navy, one green accent) with scroll-driven motion.
   Loaded after site.css. Sections only swap tokens, so components adapt by themselves. */

html, body { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- sections: paper, warm paper, navy ---------- */
.theme { background: var(--bg); color: var(--ink); --em: var(--green-ink); }
.t-paper  { --bg: #f3f0e8; }
.t-paper2 { --bg: #ebe7dc; --card: #f6f3ea; }
.t-navy, .t-ink {
  --bg: #0d2550; --ink: #f3f0e8; --ink-2: #c6d0e6; --muted: #98a6c2; --paper: #0a1428; --card: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.16); --line-strong: rgba(255, 255, 255, 0.3); --green-ink: #2ee59d; --em: #2ee59d;
}
.t-ink { --bg: #070c18; }

.sheet { position: relative; border-radius: 32px 32px 0 0; margin-top: -32px; padding-top: 140px; border-top: 0 !important; z-index: 1; }
.sheet + .sheet { z-index: 2; }
.section + .section { border-top: 0; }
.h1 em, .h2 em { color: var(--em); }
.lead { color: var(--ink-2); }
.wrap { position: relative; z-index: 1; }

/* ---------- header follows the section under it ---------- */
.site-header { transition: background 0.35s, color 0.35s, border-color 0.2s; }
.site-header.on-dark { --ink: #f3f0e8; --ink-2: #c6d0e6; --muted: #98a6c2; --line: rgba(255, 255, 255, 0.16); --line-strong: rgba(255, 255, 255, 0.3); --paper: #0a1428; background: rgba(7, 12, 24, 0.82); color: var(--ink); }
.site-header.on-dark .brand b i { color: #2ee59d; }
.site-header.on-dark .brand img { background: #eef2f6; border-radius: 8px; padding: 3px; }
.progress { position: fixed; z-index: 80; top: 0; left: 0; height: 3px; width: 100%; transform-origin: left; transform: scaleX(0); background: #2ee59d; }

/* ---------- reveals: slide in from the sides, up, zoom ---------- */
[data-anim] { opacity: 0; transition: opacity 0.9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); will-change: transform, opacity; }
[data-anim="up"]    { transform: translateY(54px); }
[data-anim="left"]  { transform: translateX(-140px); }
[data-anim="right"] { transform: translateX(140px); }
[data-anim="zoom"]  { transform: scale(0.9) translateY(30px); }
[data-anim="tilt-left"]  { transform: translateX(-160px) rotate(-4deg); }
[data-anim="tilt-right"] { transform: translateX(160px) rotate(4deg); }
[data-anim="drop"]  { transform: translateY(-40px); }
[data-anim].is-in { opacity: 1; transform: none; }

/* big headlines: words rise out of a mask one after another */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.split .w > span { display: inline-block; transform: translateY(115%) rotate(5deg); transition: transform 1.05s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + 100ms); }
.split.is-in .w > span { transform: none; }

/* ---------- hero ---------- */
.hero { overflow: visible; }
.hero .h1 em { color: var(--ink); }
.hero__visual { position: relative; perspective: 1400px; }
.hero__visual .instrument {
  position: relative; transform-style: preserve-3d; will-change: transform;
  transform: translate3d(0, var(--hy, 0px), 0) rotateX(var(--hrx, 0deg)) rotateY(var(--hry, 0deg)) scale(var(--hs, 1));
  box-shadow: 0 50px 80px -40px rgba(10, 20, 40, 0.55);
}
.hero__visual::before {
  content: ""; position: absolute; inset: 8% -4% -6% 10%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 229, 157, 0.35), transparent 70%); filter: blur(30px);
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
}
.eyebrow b { animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---------- layer scene (principle): pinned, layers pull apart while scrolling ---------- */
.xray { position: relative; height: 320vh; margin-top: 10px; }
.xray__pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px; }
.xray__scene { position: relative; height: min(70vh, 560px); display: grid; place-items: center; perspective: 1700px; }
.xray__stack { position: relative; width: min(420px, 90%); aspect-ratio: 1.45; transform-style: preserve-3d; transform: rotateX(calc(52deg + var(--p, 0) * 6deg)) rotateZ(calc(-34deg + var(--p, 0) * 10deg)); }
.xl {
  position: absolute; inset: 0; border-radius: 22px; display: flex; align-items: flex-end; gap: 12px; padding: 22px;
  background: var(--card); border: 1px solid var(--line-strong); color: var(--muted);
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  transform: translate3d(0, 0, calc((var(--i) - 1.5) * (14px + var(--p, 0) * 118px)));
  box-shadow: 0 30px 50px -30px rgba(10, 20, 40, 0.45);
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}
.xl svg { width: 38px; height: 38px; margin-left: auto; align-self: flex-start; }
.xl.is-on { background: #2ee59d; border-color: #2ee59d; color: #03150d; }
.xray__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.xi { padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); opacity: 0.38; transform: translateX(26px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), border-color 0.4s, background 0.4s; }
.xi.is-on { opacity: 1; transform: none; border-color: var(--green); background: var(--card); }
.xi h3 { font: 400 28px/1.1 var(--font-display); margin: 8px 0 6px; }
.xi p { color: var(--ink-2); font-size: 15.5px; line-height: 1.5; margin: 0; }
.pillars { margin-top: 40px; }

/* ---------- horizontal card track (pinned) ---------- */
.hscroll { position: relative; }
.hscroll__sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 28px; overflow: hidden; }
.hscroll__track { display: flex; gap: 24px; width: max-content; padding-inline: max(24px, calc((100vw - var(--wrap)) / 2)); will-change: transform; align-items: center; }
.mcard { position: relative; flex: none; width: clamp(310px, 28vw, 410px); min-height: min(60vh, 480px); padding: 30px 28px 28px; border-radius: 24px; color: var(--ink); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line-strong); overflow: hidden; transition: border-color 0.3s, background 0.3s; }
.mcard:hover { border-color: #2ee59d; background: rgba(46, 229, 157, 0.08); }
.mcard__no { position: absolute; right: 20px; top: 14px; font: 400 96px/1 var(--font-display); color: transparent; -webkit-text-stroke: 1px rgba(46, 229, 157, 0.55); pointer-events: none; }
.mcard h3 { font: 400 36px/1.05 var(--font-display); margin-top: auto; padding-top: 80px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mcard p { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.mcard .chips { margin-top: 18px; }
.mcard small { display: block; margin-top: 18px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hscroll__meta { display: flex; align-items: center; gap: 18px; padding-inline: max(24px, calc((100vw - var(--wrap)) / 2)); width: 100%; }
.hscroll__bar { flex: 1; height: 2px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.hscroll__bar i { display: block; height: 100%; background: #2ee59d; transform-origin: left; transform: scaleX(0); }
.hscroll__count { font: 500 13px/1 var(--font-mono); letter-spacing: 0.1em; min-width: 64px; text-align: right; }
.hscroll__hint { font: 500 12px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.hscroll__hint svg { width: 16px; height: 16px; animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }

/* ---------- details ---------- */
.mech li { transition: transform 0.3s var(--ease); }
.mech li:hover { transform: translateY(-5px); }
.mech b { color: var(--em); }
.plan { transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.plan[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.faq details { transition: background 0.3s; }
.faq summary:hover { color: var(--em); }
.cta { background: var(--bg); color: var(--ink); position: relative; overflow: hidden; text-align: center; }
.cta p { color: var(--ink-2); }
.steps li::before { color: var(--em); }
.site-footer { position: relative; z-index: 2; }

/* ---------- small screens: no pinning, plain stacks and native swipe ---------- */
@media (max-width: 860px) {
  .sheet { border-radius: 24px 24px 0 0; margin-top: -24px; padding-top: 100px; }
  .xray { height: auto; }
  .xray__pin { position: static; height: auto; grid-template-columns: 1fr; }
  .xray__scene { height: 300px; }
  .xray__stack { --p: 0.6; width: 260px; }
  .xi { opacity: 1; transform: none; }
  .hscroll { height: auto !important; }
  .hscroll__sticky { position: static; height: auto; }
  .hscroll__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; transform: none !important; }
  .mcard { flex: 0 0 82vw; width: auto; min-height: 360px; scroll-snap-align: center; }
  .hscroll__bar, .hscroll__count { display: none; }
  [data-anim="left"], [data-anim="tilt-left"] { transform: translateX(-50px); }
  [data-anim="right"], [data-anim="tilt-right"] { transform: translateX(50px); }
}
/* Looping decorations rest when the system asks for less motion; scroll animations stay. */
@media (prefers-reduced-motion: reduce) {
  .eyebrow b, .hscroll__hint svg { animation: none; }
}

@media (min-width: 861px) and (max-height: 780px) { .xray__list { gap: 8px; } .xi { padding: 12px 16px; } .xi h3 { font-size: 22px; margin: 4px 0 3px; } .xi p { font-size: 13.5px; line-height: 1.4; } .xray__scene { height: 60vh; } }

/* ---------- dark mode (toggle in the header, remembered per browser) ---------- */
.theme-toggle { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background 0.2s, transform 0.3s var(--ease); }
.theme-toggle:hover { background: rgba(127, 140, 170, 0.16); transform: rotate(-12deg); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
html[data-theme="dark"] .theme-toggle .i-sun { display: block; }
html[data-theme="dark"] .theme-toggle .i-moon { display: none; }
html, body, .theme, .site-header, .card, .plan, .faq details { transition: background-color 0.35s, color 0.35s, border-color 0.35s; }
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0a1020; --paper-2: #0e1629; --card: #121c32; --ink: #e8ecf4; --ink-2: #b7c2d9; --muted: #8a97b2;
  --line: rgba(150, 175, 220, 0.14); --line-strong: rgba(150, 175, 220, 0.26); --green: #2ee59d; --green-ink: #2ee59d; --navy: #7fa6ff;
}
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .t-paper { --bg: #0a1020; --card: #121c32; }
html[data-theme="dark"] .t-paper2 { --bg: #0e1629; --card: #131e36; }
html[data-theme="dark"] .site-header:not(.on-dark) { background: rgba(10, 16, 32, 0.86); }
html[data-theme="dark"] .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .hero__visual .instrument { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8); border: 1px solid var(--line-strong); }
html[data-theme="dark"] .brand img { background: #eef2f6; border-radius: 8px; padding: 3px; }
html[data-theme="dark"] .plan--hl .btn { color: #03150d; }
html[data-theme="dark"] .plan--hl .plan__for, html[data-theme="dark"] .plan--hl .plan__term { color: #4a5570; }
/* ---------- hero: centred headline, nothing else ---------- */
.hero { min-height: calc(100svh - 72px); display: grid; place-items: center; padding: 40px 0 110px; position: relative; overflow: hidden; }
.hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; transform: translate3d(0, var(--hy, 0px), 0) scale(var(--hs, 1)); opacity: var(--ho, 1); }
.hero__title { font-size: clamp(60px, 10.5vw, 168px); line-height: 0.92; letter-spacing: -0.035em; max-width: 11ch; }
.hero__title .w > span { transition-duration: 1.2s; transition-delay: calc(var(--i, 0) * 90ms + 150ms); }
.hero__lead { margin: 34px auto 0; max-width: 46ch; text-align: center; }
.hero__actions { justify-content: center; margin-top: 40px; }
.hero__cue { position: absolute; left: 50%; bottom: 34px; width: 1px; height: 56px; background: var(--line-strong); overflow: hidden; transform: translateX(-50%); }
.hero__cue i { position: absolute; left: 0; top: 0; width: 1px; height: 22px; background: var(--ink); animation: cue 1.9s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-24px); } 100% { transform: translateY(60px); } }
/* ---------- hero with photo background ---------- */
.hero.hero--photo { background: #0d0b0a; color: #fff; min-height: 100svh; margin-top: -72px; padding-top: 112px; }
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg::before { content: ""; position: absolute; inset: -4%;
  background: url("../assets/hero.jpg") center 58% / cover no-repeat, linear-gradient(180deg, #d99a5b 0%, #8a5532 48%, #1a120c 100%);
  animation: hero-zoom 26s cubic-bezier(0.2, 0.6, 0.2, 1) both; transform: translate3d(0, calc(var(--hy, 0px) * -0.35), 0); }
.hero__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 9, 18, 0.62) 0%, rgba(6, 9, 18, 0.28) 38%, rgba(6, 9, 18, 0.45) 70%, rgba(6, 9, 18, 0.92) 100%),
              radial-gradient(ellipse 80% 60% at 50% 45%, transparent 35%, rgba(6, 9, 18, 0.55) 100%); }
@keyframes hero-zoom { from { scale: 1.14; } to { scale: 1; } }
.hero--photo .hero__inner { position: relative; z-index: 1; }
.hero.hero--photo .h1 { color: #fff; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.35); }
.hero.hero--photo .h1 em { color: #ffbe7a; font-style: italic; }
.hero.hero--photo .lead { color: rgba(255, 255, 255, 0.86); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
.hero.hero--photo .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(6px); }
.hero.hero--photo .btn--ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.hero.hero--photo .hero__cue { background: rgba(255, 255, 255, 0.25); z-index: 1; }
.hero.hero--photo .hero__cue i { background: #fff; }