/* ============================================================
   HALIFY — halify.de · "Tagesstudio"
   Warmes Papierweiss · elektrisches Lime · High-Contrast
   Space Grotesk · Inter · IBM Plex Mono · OKLCH
   ------------------------------------------------------------
   Kontrast geprueft (WCAG AA):
   fg/bg 15.9 · muted/bg 7.4 · muted-2/bg 5.1 · lime-ink/bg 4.8
   ink/lime 11.6 · weiss/wa 5.3
   ============================================================ */

@font-face { font-family:"Space Grotesk"; font-weight:500; font-style:normal; font-display:swap; src:url("fonts/spacegrotesk-500.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-weight:700; font-style:normal; font-display:swap; src:url("fonts/spacegrotesk-700.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:400; font-style:normal; font-display:swap; src:url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:500; font-style:normal; font-display:swap; src:url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-weight:600; font-style:normal; font-display:swap; src:url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:500; font-style:normal; font-display:swap; src:url("fonts/plexmono-500.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:600; font-style:normal; font-display:swap; src:url("fonts/plexmono-600.woff2") format("woff2"); }

:root {
  color-scheme: light;

  --bg: oklch(96.37% 0.0035 354.7);
  --bg-2: oklch(94.5% 0.0035 354.7);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(95.5% 0.0035 354.7);

  --lime: oklch(33.16% 0.1884 264.3);          /* Flaeche, dazu --ink als Text */
  --lime-2: oklch(42% 0.20 264.3);        /* Hover-Flaeche */
  --lime-ink: oklch(33.16% 0.1884 264.3);      /* Lime als Text auf hellem Grund */
  --lime-soft: oklch(52% 0.19 264.3 / 0.18);
  --lime-line: oklch(52% 0.19 264.3 / 0.45);
  --ink: oklch(99% 0 0);           /* Text auf Lime */

  --fg: oklch(22% 0.006 300);
  --muted: oklch(43% 0.006 300);
  --muted-2: oklch(52% 0.006 300);

  --wa: oklch(50% 0.15 152);
  --wa-deep: oklch(43% 0.13 152);
  --red: oklch(52% 0.19 25);

  --line: oklch(22% 0.006 300 / 0.12);
  --line-2: oklch(22% 0.006 300 / 0.22);
  --shadow: oklch(30% 0.006 300 / 0.10);
  --shadow-2: oklch(30% 0.006 300 / 0.16);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 18px;
  --radius-lg: 26px;
  --wrap: 1180px;
  --pad: clamp(1.15rem, 5vw, 3rem);
  --z-bg:0; --z-cursor:90; --z-nav:100; --z-mnav:105; --z-bar:110; --z-skip:130;
}

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust:100%; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: clamp(1rem, .97rem + .15vw, 1.07rem);
  line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1,h2,h3,h4 { font-family: var(--font-display); font-weight:700; letter-spacing:-0.02em; line-height:1.04; text-wrap:balance; color: var(--fg); }
p { text-wrap: pretty; }
img { max-width:100%; display:block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--lime-ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--lime); color: var(--ink); }

.wrap { width:100%; max-width: var(--wrap); margin-inline:auto; padding-inline: var(--pad); }
.skip { position: fixed; top:10px; left:10px; z-index: var(--z-skip); background: var(--lime); color: var(--ink); padding:10px 16px; border-radius:10px; font-weight:600; transform: translateY(-160%); transition: transform .2s; }
.skip:focus { transform: translateY(0); }

.eyebrow { display:inline-flex; align-items:center; gap:.6em; font-family: var(--font-mono); font-size:.74rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color: var(--lime-ink); margin-bottom:1.1rem; }
.eyebrow .dot { width:7px; height:7px; border-radius:50%; background: var(--lime-ink); box-shadow:0 0 0 0 var(--lime-ink); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 oklch(52% 0.19 264.3 / .45)} 70%{box-shadow:0 0 0 9px oklch(52% 0.19 264.3 / 0)} 100%{box-shadow:0 0 0 0 oklch(52% 0.19 264.3 / 0)} }
.glow { color: var(--lime-ink); }
.sec__title { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.1rem); }
.sec__lede { color: var(--muted); font-size: 1.1rem; margin-top: 1rem; max-width: 46ch; }

/* ---------- Background: grid + beams + noise ---------- */
.bg { position: fixed; inset:0; z-index: var(--z-bg); pointer-events:none; overflow:hidden; background: var(--bg); }
.bg__grid { position:absolute; inset:-2px;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 62px 62px; opacity:.55;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%); }
.bg__beam { position:absolute; border-radius:50%; filter: blur(100px); opacity:.42; will-change: transform; }
.bg__beam--1 { width:52vw; height:52vw; left:-14vw; top:-10vh; background: radial-gradient(circle, oklch(52% 0.19 264.3 / .24), transparent 68%); animation: drift 26s ease-in-out infinite; }
.bg__beam--2 { width:48vw; height:48vw; right:-16vw; top:44vh; background: radial-gradient(circle, oklch(78% 0.11 220 / .26), transparent 70%); animation: drift 32s ease-in-out infinite reverse; }
@keyframes drift { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(5vw,4vh) scale(1.08)} }
.bg__noise { position:absolute; inset:0; opacity:.55; mix-blend-mode: multiply;
  background-image: radial-gradient(oklch(22% 0.006 300 / .05) 1px, transparent 1px); background-size:3px 3px; }

/* ---------- Cursor glow (desktop, motion) ---------- */
.cursor { position: fixed; top:0; left:0; width:400px; height:400px; margin:-200px 0 0 -200px; z-index: var(--z-cursor); pointer-events:none; border-radius:50%;
  background: radial-gradient(circle, oklch(52% 0.19 264.3 / .16), transparent 62%); opacity:0; transition: opacity .4s; will-change: transform; }
html.has-cursor .cursor { opacity:1; }

/* ---------- Buttons ---------- */
.btn { --f: var(--fg); display:inline-flex; align-items:center; justify-content:center; gap:.55em; font-family: var(--font-body); font-weight:600; font-size:.98rem;
  padding:.82em 1.35em; border-radius: 999px; border:1px solid transparent; cursor:pointer; white-space:nowrap; line-height:1; will-change: transform;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .25s, color .25s, border-color .25s; }
.btn svg { flex:none; }
.btn--lg { padding:1.02em 1.7em; font-size:1.03rem; }
.btn--block { display:flex; width:100%; }
.btn--primary { color: var(--ink); background: var(--lime); box-shadow: 0 8px 24px oklch(52% 0.19 264.3 / .32); }
.btn--primary:hover { background: var(--lime-2); box-shadow: 0 10px 28px oklch(52% 0.19 264.3 / .42); }
.btn--ghost { color: var(--fg); background: transparent; border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--lime-ink); color: var(--lime-ink); }
.btn--nav { color: var(--ink); background: var(--lime); padding:.6em 1.1em; font-size:.9rem; }
.btn--nav:hover { background: var(--lime-2); box-shadow:0 8px 20px oklch(52% 0.19 264.3 / .38); }
.btn--wa { color: oklch(99% 0 0); background: var(--wa); box-shadow: 0 8px 22px oklch(50% 0.15 152 / .28); }
.btn--wa:hover { background: var(--wa-deep); }
.btn--line { color: var(--fg); background: transparent; border-color: var(--line-2); }
.btn--line:hover { border-color: var(--fg); }

/* ---------- Nav ---------- */
.nav { position: sticky; top:0; z-index: var(--z-nav); padding:.9rem 0; transition: padding .3s, background .3s, box-shadow .3s, border-color .3s; border-bottom:1px solid transparent; }
.nav.is-stuck { background: oklch(96.37% 0.0035 354.7 / .82); backdrop-filter: saturate(150%) blur(14px); border-color: var(--line); padding:.55rem 0; }
.nav__row { display:flex; align-items:center; gap:1.2rem; }
.brand { font-family: var(--font-display); font-weight:700; font-size:1.5rem; letter-spacing:-0.02em; color: var(--fg); }
.brand__dot { color: var(--lime-ink); }
.nav__links { display:flex; gap:1.6rem; margin-left:auto; }
.nav__links a { font-weight:500; color: var(--muted); font-size:.96rem; position:relative; transition: color .2s; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px; background: var(--lime-ink); transition: width .25s var(--ease); }
.nav__links a:hover { color: var(--fg); } .nav__links a:hover::after { width:100%; }
.nav__links a[aria-current="page"] { color: var(--fg); }
.nav__links a[aria-current="page"]::after { width:100%; background: var(--lime-ink); }
.nav__burger { display:none; margin-left:auto; width:44px; height:44px; background: var(--surface); border:1px solid var(--line-2); border-radius:11px; cursor:pointer; position:relative; }
.nav__burger span { position:absolute; left:11px; right:11px; height:2px; background: var(--fg); border-radius:2px; transition: transform .3s var(--ease), opacity .2s; }
.nav__burger span:nth-child(1){ top:16px; } .nav__burger span:nth-child(2){ bottom:16px; }
body.mopen .nav__burger span:nth-child(1){ top:21px; transform: rotate(45deg); }
body.mopen .nav__burger span:nth-child(2){ bottom:21px; transform: rotate(-45deg); }
.mnav { position: fixed; inset:0; z-index: var(--z-mnav); background: oklch(96.37% 0.0035 354.7 / .97); backdrop-filter: blur(16px); display:grid; place-items:center; opacity:0; pointer-events:none; transition: opacity .3s; }
.mnav[hidden] { display: none; }
.mnav.is-open { opacity:1; pointer-events:auto; }
.mnav__inner { display:flex; flex-direction:column; gap:1.4rem; text-align:center; }
.mnav__inner a:not(.btn) { font-family: var(--font-display); font-size:1.9rem; color: var(--fg); }
.mnav__cta { font-family: var(--font-body); font-size:1.05rem; margin-top:.8rem; }
.mnav__close { position:absolute; top: max(1.1rem, env(safe-area-inset-top)); right:1.1rem; width:48px; height:48px; display:grid; place-items:center;
  background: var(--surface); border:1px solid var(--line-2); border-radius:13px; cursor:pointer; }
.mnav__close::before, .mnav__close::after { content:""; position:absolute; width:20px; height:2px; border-radius:2px; background: var(--fg); }
.mnav__close::before { transform: rotate(45deg); }
.mnav__close::after { transform: rotate(-45deg); }
.mnav__close:hover { border-color: var(--lime-ink); }
.mnav__close:hover::before, .mnav__close:hover::after { background: var(--lime-ink); }

/* ---------- Reveal (clip wipe) ---------- */
html.js [data-reveal] { opacity:0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path .5s var(--ease), opacity .34s ease; will-change: clip-path, opacity; }
html.js [data-reveal].is-in { opacity:1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(2rem, 5vw, 4rem); }
.hero__grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items:center; min-height: min(74vh, 660px); }
.hero__title { font-size: clamp(2.5rem, 1.3rem + 5vw, 4.8rem); margin-bottom:1.4rem; }
.hero__lede { font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem); color: var(--muted); max-width: 38ch; margin-bottom:2rem; }
.hero__cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:2.4rem; }
.hero__proof { list-style:none; display:flex; flex-wrap:wrap; gap: clamp(1.2rem,4vw,2.4rem); border-top:1px solid var(--line); padding-top:1.4rem; }
.hero__proof li { display:flex; flex-direction:column; gap:.1rem; }
.hero__proof b { font-family: var(--font-mono); font-weight:600; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); color: var(--fg); letter-spacing:-.02em; }
.hero__proof span { font-size:.82rem; color: var(--muted-2); max-width:16ch; }
.num { font-variant-numeric: tabular-nums; }

/* hero visual: growth panel */
.hero__stage { position: relative; display:grid; place-items:center; min-height: 380px; }
.panel { position: relative; width: min(400px, 88%); background: linear-gradient(180deg, var(--surface), var(--bg-2)); border:1px solid var(--line-2); border-radius: var(--radius-lg);
  padding:1.4rem 1.4rem 1.2rem; box-shadow: 0 26px 60px var(--shadow-2); color: var(--lime-ink); overflow:hidden; will-change: transform; }
.panel::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background: linear-gradient(135deg, oklch(52% 0.19 264.3 / .55), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.panel__top { display:flex; justify-content:space-between; align-items:center; }
.panel__label { font-family: var(--font-mono); font-size:.72rem; letter-spacing:.06em; color: var(--muted); text-transform:uppercase; }
.panel__live { display:inline-flex; align-items:center; gap:.4em; font-family: var(--font-mono); font-size:.72rem; color: var(--lime-ink); }
.panel__live i { width:7px; height:7px; border-radius:50%; background: var(--lime-ink); box-shadow:0 0 0 3px oklch(52% 0.19 264.3 / .25); animation: pulse 2s ease-out infinite; }
.panel__big { display:flex; align-items:baseline; gap:.5rem; margin:.9rem 0 1rem; }
.panel__big b { font-family: var(--font-mono); font-weight:600; font-size: 2.4rem; color: var(--fg); letter-spacing:-.03em; }
.panel__big em { font-style:normal; font-size:.9rem; color: var(--muted); }
.panel__chart { width:100%; height:120px; color: var(--lime-ink); display:block; }
.panel__area { fill: url(#g) ; fill: oklch(52% 0.19 264.3 / .16); }
.panel__line { stroke-dasharray: 460; stroke-dashoffset: 460; animation: draw 1.8s var(--ease) .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.panel__dot { fill: var(--lime-ink); animation: dotpulse 2.2s ease-in-out infinite; transform-origin: center; }
@keyframes dotpulse { 0%,100%{ r:5; } 50%{ r:6.5; } }
.panel__foot { display:flex; justify-content:space-between; align-items:center; margin-top:.8rem; }
.panel__bars { display:flex; gap:5px; align-items:flex-end; height:26px; }
.panel__bars i { width:7px; background: oklch(52% 0.19 264.3 / .30); border-radius:3px; }
.panel__bars i:nth-child(1){ height:40%; } .panel__bars i:nth-child(2){ height:60%; } .panel__bars i:nth-child(3){ height:45%; } .panel__bars i:nth-child(4){ height:80%; } .panel__bars i:nth-child(5){ height:100%; background: var(--lime-ink); }
.panel__delta { font-family: var(--font-mono); font-size:.82rem; color: var(--lime-ink); }
.hchip { position:absolute; display:inline-flex; align-items:center; gap:.4em; font-size:.82rem; font-weight:600; color: var(--fg);
  background: var(--surface-2); border:1px solid var(--line-2); padding:.5em .8em; border-radius:12px; box-shadow:0 10px 26px var(--shadow); white-space:nowrap; will-change: transform; }
.hchip__ic { color: var(--red); }
.hchip--a { top:6%; right:-2%; } .hchip--b { bottom:12%; left:-6%; font-family: var(--font-mono); color: var(--lime-ink); }
[data-float] { animation: floaty 6s ease-in-out infinite; }
.hchip--a { animation: floaty 5s ease-in-out infinite; } .hchip--b { animation: floaty 6.5s ease-in-out infinite .5s; }
.panel { animation: floaty 8s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }

/* ---------- Kinetic marquee ---------- */
.kin { margin: clamp(3rem,7vw,5rem) 0 clamp(1rem,3vw,2rem); position:relative; display:flex; overflow:hidden; border-block:1px solid var(--line); padding:1.1rem 0; }
.kin::before, .kin::after, .tmarquee::before, .tmarquee::after { content:""; position:absolute; top:0; bottom:0; width:9%; max-width:130px; z-index:2; pointer-events:none; }
.kin::before, .tmarquee::before { left:0; background: linear-gradient(90deg, var(--bg), transparent); }
.kin::after, .tmarquee::after { right:0; background: linear-gradient(270deg, var(--bg), transparent); }
.kin__group { flex:0 0 auto; min-width:100%; display:flex; align-items:center; justify-content:space-around; animation: mscroll 30s linear infinite; }
.kin__group span { font-family: var(--font-display); font-weight:700; font-size: clamp(1.8rem, 1.2rem + 3vw, 3.4rem); letter-spacing:-.02em; color: var(--fg); text-transform:uppercase; white-space:nowrap; padding-inline: clamp(1rem,2.6vw,2.2rem); }
.kin__group span::after { content:"/"; margin-left: clamp(1rem,2.6vw,2.2rem); color: var(--lime-ink); }
.kin__o { color: transparent !important; -webkit-text-stroke:1.4px var(--lime-ink); }
@keyframes mscroll { to { transform: translateX(-100%); } }

/* ---------- Trust ---------- */
.trust { text-align:center; padding-block: clamp(1rem,3vw,2rem) clamp(2rem,5vw,3.5rem); }
.trust__label { display:inline-block; font-family: var(--font-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted-2); margin-bottom:1.6rem; }
.tmarquee { position:relative; display:flex; overflow:hidden; }
.tmarquee__group { flex:0 0 auto; min-width:100%; display:flex; align-items:center; justify-content:space-around; animation: mscroll 24s linear infinite; }
.tmarquee__group img { flex:none; height:32px; width:auto; padding-inline: clamp(1.2rem,3vw,2.6rem); opacity:.55; filter: brightness(0); backface-visibility:hidden; transition: opacity .3s; }
.tmarquee__group img:hover { opacity:.85; }

/* ---------- Section rhythm ---------- */
.problem,.plans,.more,.reach,.faq { padding-block: clamp(4rem,9vw,7rem); }

/* ---------- Problem ---------- */
.problem .sec__title { margin-bottom:2.6rem; max-width: 20ch; }
.problem__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.1rem; }
.pcard { position:relative; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:1.8rem; overflow:hidden; transition: transform .3s var(--ease), border-color .3s, background .3s; }
.pcard::after { content:""; position:absolute; left:0; top:0; width:100%; height:2px; background: var(--lime-ink); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease); }
.pcard:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--surface-2); }
.pcard:hover::after { transform: scaleX(1); }
.pcard__n { font-family: var(--font-mono); font-size:.82rem; color: var(--lime-ink); font-weight:600; }
.pcard h3 { font-size:1.3rem; margin:.7rem 0 .5rem; }
.pcard p { color: var(--muted); font-size:.98rem; }
.problem__turn { margin-top:2.4rem; font-size:1.2rem; font-weight:600; color: var(--fg); }
.problem__turn a { color: var(--lime-ink); border-bottom:2px solid oklch(52% 0.19 264.3 / .45); white-space:nowrap; }
.problem__turn a:hover { border-color: var(--lime-ink); }

/* ---------- Plans ---------- */
.plans__head { max-width:640px; margin-bottom:2.8rem; }
.plans__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.1rem; align-items:stretch; }
.plan { position:relative; border-radius: var(--radius-lg); padding:2rem 1.8rem; display:flex; flex-direction:column; border:1px solid var(--line); background: var(--surface); transition: transform .35s var(--ease), border-color .35s; }
.plan:hover { transform: translateY(-6px); border-color: var(--line-2); }
.plan__tag { align-self:flex-start; font-family: var(--font-mono); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--lime-ink); background: var(--lime-soft); padding:.35em .7em; border-radius:8px; margin-bottom:1rem; }
.plan__tag--ghost { color: var(--muted); background: transparent; border:1px solid var(--line-2); }
.plan__name { font-size:1.5rem; }
.plan__sub { color: var(--muted); font-size:.96rem; margin:.5rem 0 1.3rem; min-height:2.4em; }
.plan__price { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-bottom:.5rem; }
.plan__now { font-family: var(--font-mono); font-weight:600; font-size:2.5rem; letter-spacing:-.03em; color: var(--fg); }
.plan__now--word { font-size:1.9rem; color: var(--lime-ink); }
.plan__old { font-family: var(--font-mono); font-size:1.1rem; color: var(--muted-2); text-decoration: line-through; text-decoration-color: oklch(52% 0.19 25 / .8); }
.plan__from,.plan__per { font-size:.9rem; color: var(--muted-2); font-weight:500; }
.plan__hint { font-size:.84rem; color: var(--muted-2); margin-bottom:1.3rem; }
.plan__list { list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.6rem; flex:1; }
.plan__list li { position:relative; padding-left:1.7rem; font-size:.96rem; color: var(--muted); }
.plan__list li::before { content:""; position:absolute; left:0; top:.15em; width:18px; height:18px; border-radius:50%;
  background: var(--lime-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23437200' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.plan--feat { border-color: var(--lime-line); background: linear-gradient(180deg, oklch(52% 0.19 264.3 / .10), var(--surface) 55%); box-shadow: 0 0 0 1px oklch(52% 0.19 264.3 / .30), 0 26px 56px var(--shadow-2); transform: translateY(-8px); }
.plan--feat:hover { transform: translateY(-12px); }
.plan__flag { position:absolute; top:0; left:50%; transform: translate(-50%,-50%); font-family: var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--ink); background: var(--lime); padding:.45em .9em; border-radius:999px; box-shadow:0 8px 18px oklch(52% 0.19 264.3 / .40); white-space:nowrap; z-index:2; }
.plans__foot { text-align:center; color: var(--muted-2); margin-top:2rem; font-size:.96rem; }

/* ---------- More ---------- */
.more__head { max-width:620px; margin-bottom:2rem; }
.more__grid { display:grid; grid-template-columns: repeat(2,1fr); gap:1rem; }
.mlink { position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; row-gap:.35rem; padding:1.5rem 1.7rem; border-radius: var(--radius); border:1px solid var(--line); background: var(--surface); overflow:hidden; transition: transform .3s var(--ease), border-color .3s, background .3s; }
.mlink::after { content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, oklch(52% 0.19 264.3 / .16), transparent); transition: left .6s var(--ease); }
.mlink:hover { transform: translateY(-3px); border-color: var(--lime-line); background: var(--surface-2); }
.mlink:hover::after { left:130%; }
.mlink__k { grid-column:1; grid-row:1; font-family: var(--font-display); font-weight:700; font-size:1.25rem; }
.mlink__d { grid-column:1; grid-row:2; color: var(--muted); font-size:.95rem; }
.mlink__go { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:1.3rem; color: var(--lime-ink); transition: transform .3s var(--ease); }
.mlink:hover .mlink__go { transform: translateX(5px); }

/* ---------- Reach / radar ---------- */
.reach__grid { display:grid; grid-template-columns:1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
.reach__stats { list-style:none; display:flex; gap:2.4rem; margin-top:1.8rem; }
.reach__stats b { display:block; font-family: var(--font-mono); font-weight:600; font-size:1.55rem; color: var(--lime-ink); }
.reach__stats span { font-size:.85rem; color: var(--muted-2); }
.reach__map { display:grid; place-items:center; }
.radar { position:relative; width:min(360px,82vw); aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, var(--surface) 0%, var(--bg-2) 72%, var(--bg) 100%); border:1px solid var(--line-2); box-shadow: inset 0 0 60px oklch(52% 0.19 264.3 / .10), 0 18px 40px var(--shadow); overflow:hidden; }
.radar__ring { position:absolute; inset:0; margin:auto; border-radius:50%; border:1px solid oklch(52% 0.19 264.3 / .28); }
.radar__ring:nth-child(1){ width:33%; height:33%; } .radar__ring:nth-child(2){ width:66%; height:66%; } .radar__ring:nth-child(3){ width:100%; height:100%; }
.radar__sweep { position:absolute; inset:0; border-radius:50%; background: conic-gradient(from 0deg, oklch(52% 0.19 264.3 / .30) 0deg, transparent 55deg); animation: sweep 4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.radar__core { position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%; background: var(--lime); display:grid; place-items:center; color: var(--ink); font-weight:700; font-size:.8rem; box-shadow:0 0 0 6px oklch(52% 0.19 264.3 / .18), 0 8px 22px oklch(52% 0.19 264.3 / .35); }
.ping { position:absolute; width:11px; height:11px; border-radius:50%; background: var(--lime-ink); }
.ping::after { content:""; position:absolute; inset:0; border-radius:50%; background: var(--lime-ink); animation: ripple 2.6s ease-out infinite; }
.ping--1 { top:24%; left:30%; } .ping--1::after { animation-delay:0s; }
.ping--2 { top:60%; left:22%; } .ping--2::after { animation-delay:.6s; }
.ping--3 { top:30%; left:70%; } .ping--3::after { animation-delay:1.2s; }
.ping--4 { top:70%; left:66%; } .ping--4::after { animation-delay:1.8s; }
.ping--5 { top:48%; left:50%; } .ping--5::after { animation-delay:2.2s; }
@keyframes ripple { 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(4.5); opacity:0; } }

/* ---------- Word ---------- */
.word { padding-block: clamp(4rem,12vw,8rem); overflow:hidden; }
.word__stage { display:grid; place-items:center; text-align:center; perspective:1000px; }
.word__pre,.word__post { color: var(--muted-2); font-size: clamp(1rem, .9rem + .6vw, 1.35rem); font-weight:500; }
.word__pre { margin-bottom:1.4rem; } .word__post { margin-top:1.4rem; }
.word3d { transform-style: preserve-3d; will-change: transform; }
.word3d__face { display:block; font-family: var(--font-display); font-weight:700; letter-spacing:-.03em; font-size: clamp(2rem, 11.5vw, 8.5rem); line-height:.9; color: var(--lime-ink); }

/* ---------- Scene (pinned process) ---------- */
.scene { position:relative; padding-block: clamp(4rem,9vw,7rem); }
.scene__inner { max-width: 900px; }
.scene__head { margin-bottom:2.5rem; }
.scene__rail { margin-top:1.6rem; height:3px; border-radius:3px; background: var(--line-2); overflow:hidden; }
.scene__fill { display:block; height:100%; width:33%; background: var(--lime-ink); transition: width .5s var(--ease); }
.beats { list-style:none; display:flex; flex-direction:column; gap:1.1rem; }
.beat { display:flex; gap:1.4rem; align-items:flex-start; padding:1.6rem 1.8rem; border:1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: opacity .45s, border-color .45s, background .45s, box-shadow .45s, transform .45s var(--ease); }
.beat__n { font-family: var(--font-mono); font-weight:600; font-size:1.6rem; color: var(--muted-2); transition: color .45s; }
.beat h3 { font-size:1.35rem; margin-bottom:.4rem; }
.beat p { color: var(--muted); font-size:.98rem; }
.scene.is-live .beat { opacity:.5; }
.scene.is-live .beat.is-on { opacity:1; border-color: var(--lime-line); background: var(--surface); box-shadow: 0 0 0 1px oklch(52% 0.19 264.3 / .22), 0 18px 36px var(--shadow); }
.scene.is-live .beat.is-on .beat__n { color: var(--lime-ink); }
@media (min-width: 861px) {
  .scene.is-pinned { height: 200vh; }
  .scene.is-pinned .scene__stage { position: sticky; top:0; min-height:100vh; display:flex; align-items:center; }
  .scene.is-pinned .beat.is-on { transform: translateX(6px); }
}

/* ---------- FAQ ---------- */
.faq__head { max-width:620px; margin-bottom:2.2rem; }
.faq__list { max-width:780px; display:flex; flex-direction:column; gap:.8rem; }
.qa { background: var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition: border-color .3s, background .3s; }
.qa[open] { border-color: var(--lime-line); background: var(--surface); }
.qa summary { list-style:none; cursor:pointer; padding:1.25rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-family: var(--font-display); font-weight:700; font-size:1.06rem; color: var(--fg); }
.qa summary::-webkit-details-marker { display:none; }
.qa__ic { position:relative; flex:none; width:22px; height:22px; }
.qa__ic::before,.qa__ic::after { content:""; position:absolute; top:50%; left:50%; width:12px; height:2px; border-radius:2px; background: var(--lime-ink); transform: translate(-50%,-50%); transition: transform .3s var(--ease); }
.qa__ic::after { transform: translate(-50%,-50%) rotate(90deg); }
.qa[open] .qa__ic::after { transform: translate(-50%,-50%) rotate(0); }
.qa__a p { padding:0 1.5rem 1.35rem; color: var(--muted); font-size:1rem; max-width:60ch; }

/* ---------- CTA ---------- */
.cta { padding-block: clamp(3rem,7vw,5rem) clamp(4rem,9vw,7rem); }
.cta__panel { position:relative; border-radius: var(--radius-lg); padding: clamp(2.4rem,6vw,4.5rem) var(--pad); text-align:center; overflow:hidden;
  background: linear-gradient(180deg, var(--surface), var(--bg-2)); border:1px solid var(--line-2); }
.cta__panel::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 50% -10%, oklch(52% 0.19 264.3 / .28), transparent 62%); animation: breathe 6s ease-in-out infinite; pointer-events:none; }
@keyframes breathe { 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
.cta__title { position:relative; font-size: clamp(2rem, 1.3rem + 3vw, 3.3rem); margin-bottom:1rem; }
.cta__lede { position:relative; color: var(--muted); max-width:46ch; margin:0 auto 2rem; font-size:1.1rem; }
.cta__actions { position:relative; display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }
.cta__mail { position:relative; margin-top:1.5rem; color: var(--muted-2); font-size:.95rem; }
.cta__mail a { color: var(--lime-ink); border-bottom:1px solid oklch(52% 0.19 264.3 / .5); }

/* ---------- Footer ---------- */
.foot { position:relative; margin-top:2rem; border-top:1px solid var(--line); overflow:hidden; padding-top: clamp(3rem,7vw,4.5rem); }
.foot__glow { position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, var(--lime-ink), transparent); background-size:50% 100%; animation: beam 6s linear infinite; }
@keyframes beam { 0%{ background-position:-50% 0; } 100%{ background-position:150% 0; } }
.foot__inner { position:relative; display:grid; grid-template-columns:1.5fr repeat(4, 1fr); gap:2rem 1.6rem; padding-bottom:3rem; }
.foot__brand .brand { font-size:1.6rem; display:inline-block; margin-bottom:.8rem; }
.foot__brand p { max-width:32ch; color: var(--muted-2); font-size:.96rem; }
.foot__col h4 { font-family: var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color: var(--muted-2); margin-bottom:1rem; font-weight:500; }
.foot__col a { display:block; color: var(--muted); font-size:.96rem; padding:.28rem 0; transition: color .2s, transform .2s; }
.foot__col a:hover { color: var(--lime-ink); transform: translateX(3px); }
.foot__base { position:relative; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding:1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line); font-size:.85rem; color: var(--muted-2); }
.foot__top:hover { color: var(--lime-ink); }

/* ---------- Mobile bar ---------- */
.bar { position:fixed; left:0; right:0; bottom:0; z-index: var(--z-bar); display:none; gap:.6rem; padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background: oklch(96.37% 0.0035 354.7 / .94); backdrop-filter: blur(14px); border-top:1px solid var(--line-2); box-shadow: 0 -8px 24px var(--shadow); }
.bar__btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.45em; font-weight:600; font-size:.96rem; padding:.85em; border-radius:13px; }
.bar__btn--call { background: var(--lime); color: var(--ink); }
.bar__btn--wa { background: var(--wa); color: oklch(99% 0 0); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero__grid { grid-template-columns:1fr; gap:2.2rem; min-height:0; }
  .hero__stage { min-height:300px; }
  .hero__lede { max-width:46ch; }
  .reach__grid { grid-template-columns:1fr; } .reach__map { order:-1; }
  .foot__inner { grid-template-columns:1fr 1fr; } .foot__brand { grid-column:1 / -1; }
}
@media (max-width: 860px) {
  html.js [data-reveal] { transition: clip-path .34s var(--ease), opacity .24s ease; }
  .kin__group { animation-duration: 18s; }
  .tmarquee__group { animation-duration: 13s; }
  .nav__links, .btn--nav { display:none; }
  .nav__burger { display:block; }
  .problem__grid, .plans__grid { grid-template-columns:1fr; }
  .plan--feat { transform:none; } .plan--feat:hover { transform: translateY(-4px); }
  .more__grid { grid-template-columns:1fr; }
  .bar { display:flex; } body { padding-bottom:76px; }
  .cta__actions .btn { width:100%; }
}
@media (max-width: 420px) { .hero__proof { gap:1.1rem; } .foot__inner { grid-template-columns:1fr; } .hchip--a { right:0; } }

/* ---------- Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  html.js [data-reveal] { opacity:1 !important; clip-path:none !important; }
  .panel__line { stroke-dashoffset:0 !important; }
  [data-float], .panel { animation:none !important; }
  .cursor { display:none !important; }
}