/* =====================================================================
Traders Boutique — landing. Direction: "COLOR IS DATA".
The interface is fully monochrome (ink on bone / white on graphite).
The ONLY colour on the page is the trader's own P&L: green gains,
red losses. No brand gradients, no coloured buttons, no ornament.
Flat + frosted glass. Oversized display type is the one bold gesture.
Light default, dark toggle. Snappy load-in — no scroll theatre.
===================================================================== */
:root {
--bg: #f4f4f4; /* app "Standard" base */
--bg-2: #eceae3; /* app --bg-1 — features/intro band */
--surface: rgba(255,255,255,0.55);
--surface-2: rgba(255,255,255,0.80);
--ink: #1f1f1f;
--dim: #5f5f5f;
--faint: #9a9a9a;
--line: rgba(31,31,31,0.06);
--line-2: rgba(31,31,31,0.13);
--grid: rgba(31,31,31,0.045);
--pos: #1f9d63; --pos-soft: rgba(31,157,99,0.12);
--neg: #d8453f; --neg-soft: rgba(216,69,63,0.10);
--warn: #c98a00;
/* per-section wayfinding accents (nav hover ↔ section) */
--acc-start: #13C48C; --acc-ai: #FF6A3D; --acc-feat: #4C86F0; --acc-copier: #06B6D4; --acc-price: #A277F0; --acc-about: #E8993A;
--font-display: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-mono: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--navH: 62px;
color-scheme: light;
}
:root[data-theme="dark"] {
--bg: #181a20; /* app "Slate" base */
--bg-2: #14161b; /* app --bg-1 — features/intro band */
--surface: rgba(34,37,45,0.55); /* slate-tinted frosted glass (app #22252d) */
--surface-2: rgba(42,46,55,0.78); /* app #2a2e37 */
--ink: #f4f4f4;
--dim: #b4b4b4;
--faint: #8a8a8a;
--line: rgba(255,255,255,0.045);
--line-2: rgba(255,255,255,0.12);
--grid: rgba(255,255,255,0.045);
--pos: #3fbf7d; --pos-soft: rgba(63,191,125,0.15);
--neg: #e8635e; --neg-soft: rgba(232,99,94,0.15);
--warn: #e0a53a;
--acc-start: #17E6A1; --acc-ai: #FF8A5C; --acc-feat: #6AA6FF; --acc-copier: #22D3EE; --acc-price: #C084FC; --acc-about: #FFB454;
color-scheme: dark;
}
/* app "Slate" signature: subtle diagonal body gradient in dark mode */
:root[data-theme="dark"] body { background: linear-gradient(160deg, #20232b 0%, #181a20 45%, #131519 100%) fixed; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
/* lock page scroll while a full-screen overlay is open — body's own overflow:hidden doesn't hold because html's overflow-x:clip breaks the body→viewport overflow propagation, leaving html the scroller */
html:has(body.cc-open), html:has(body.menu-open), html:has(body.lb-open) { overflow: hidden; }
body {
font-family: var(--font-display); color: var(--ink); background: var(--bg);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
min-height: 100vh; overflow-x: clip;
transition: background 0.25s ease, color 0.25s ease;
}
::selection { background: var(--pos-soft); }
a { color: inherit; }
/* measured price grid — monochrome texture, faded toward edges */
.bg-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image:
repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 92px),
repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 92px);
-webkit-mask-image: radial-gradient(130% 90% at 50% 0%, #000 55%, transparent 100%);
mask-image: radial-gradient(130% 90% at 50% 0%, #000 55%, transparent 100%);
}
/* ===================== Vorschau-Streifen =====================
Steht VOR dem Kopf im Dokument und scrollt mit weg. Bewusst nicht klebend:
zwei klebende Leisten uebereinander fressen auf dem Telefon ein Drittel des
Bildes, und der Kopf ist der wichtigere von beiden. Der Hinweis muss nicht
dauerhaft SICHTBAR sein — er muss dauerhaft DA sein, also nicht wegklickbar
und auf jeder Seite. Wer zum Preis scrollt, findet dort die zweite Haelfte
der Aussage („Planned prices").
Der Kopf ist `position: sticky; top: 0` — weil der Streifen darueber im
Fluss liegt, klebt der Kopf erst, wenn der Streifen durchgelaufen ist. Das
ist genau das gewuenschte Verhalten und braucht keine Sonderregel. */
.pv-bar {
background: var(--ink); color: var(--bg);
padding: 10px clamp(18px, 4vw, 48px) 11px;
}
.pv-inner {
max-width: 1160px; margin: 0 auto;
display: flex; align-items: center; justify-content: center;
gap: 10px 22px; flex-wrap: wrap;
}
.pv-text { margin: 0; font-size: 13px; line-height: 1.45; opacity: .9; }
.pv-text b { font-weight: 700; opacity: 1; }
.pv-form { display: flex; align-items: center; gap: 7px; }
.pv-input {
font: inherit; font-size: 13px; padding: 7px 11px; width: 210px; max-width: 46vw;
color: var(--bg); background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.24); border-radius: 8px;
}
.pv-input::placeholder { color: rgba(255,255,255,.45); }
.pv-input:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
/* Der Knopf ist die INVERSE des Streifens — auf dunklem Grund hell. Ein
Akzentfarbton hier waere die dritte Farbe in einer Zeile. */
.pv-btn {
font: inherit; font-size: 13px; font-weight: 650; padding: 7px 15px;
color: var(--ink); background: var(--bg);
border: 0; border-radius: 8px; cursor: pointer; white-space: nowrap;
transition: opacity .15s;
}
.pv-btn:hover { opacity: .82; }
.pv-btn:disabled { opacity: .5; cursor: default; }
.pv-note {
max-width: 1160px; margin: 7px auto 0; text-align: center;
font-size: 12px; line-height: 1.45; opacity: .85; min-height: 0;
}
.pv-note:empty { display: none; }
.pv-form.is-done { display: none; }
/* Honigtopf und Beschriftung: da, aber unsichtbar und nicht erreichbar.
`display:none` waere falsch — manche Bots pruefen darauf. */
.pv-hp, .pv-sr {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 720px) {
.pv-inner { flex-direction: column; gap: 9px; }
.pv-text { text-align: center; }
.pv-input { width: 100%; max-width: none; flex: 1 1 auto; }
.pv-form { width: 100%; max-width: 380px; }
}
/* „Geplante Preise" — steht dort, wo die Zahl steht, nicht in einer Box, die
vorher weggeklickt wurde. */
.pr-planned {
display: block; font-size: 12px; font-weight: 650; letter-spacing: .01em;
color: var(--ink); opacity: .75; margin-bottom: 4px;
}
/* ===================== Header ===================== */
header {
position: sticky; top: 0; z-index: 30; height: var(--navH);
display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px);
padding: 0 clamp(18px, 4vw, 48px);
background: var(--surface); border-bottom: 1px solid var(--line);
-webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
}
header { transition: height 0.28s cubic-bezier(.4,0,.2,1), background 0.25s; }
header.scrolled { height: 46px; }
.brand-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); transition: gap 0.28s cubic-bezier(.4,0,.2,1); }
.brand-mark svg { width: 24px; height: 24px; display: block; flex-shrink: 0; } /* logo stays */
.brand-mark b { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.2em; font-size: 12.5px; text-transform: uppercase;
white-space: nowrap; overflow: hidden; max-width: 220px; opacity: 1;
transition: max-width 0.28s cubic-bezier(.4,0,.2,1), opacity 0.2s ease; }
header.scrolled .brand-mark { gap: 0; }
header.scrolled .brand-mark b { max-width: 0; opacity: 0; }
.main-nav { display: flex; gap: clamp(14px, 2vw, 28px); }
.main-nav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); text-decoration: none; transition: color 0.14s; }
.main-nav a[href="#top"]:hover { color: var(--acc-start); }
.main-nav a[href="#ai"]:hover { color: var(--acc-ai); }
.main-nav a[href="#features"]:hover { color: var(--acc-feat); }
.main-nav a[href="#copier"]:hover { color: var(--acc-copier); }
.main-nav a[href="#pricing"]:hover { color: var(--acc-price); }
.main-nav a[href="#about"]:hover { color: var(--acc-about); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn {
width: 28px; height: 28px; display: inline-grid; place-content: center;
border: none; background: transparent; color: var(--dim); cursor: pointer;
transition: color 0.14s, transform 0.14s;
}
.icon-btn:hover { color: var(--ink); transform: scale(1.1); }
.icon-btn svg { width: 17px; height: 17px; }
/* burger — desktop/tablet: never shown; mobile: shown once scrolled */
.burger { display: none; width: 30px; height: 30px; place-content: center; border: none; background: transparent; color: var(--ink); cursor: pointer; padding: 0; }
.burger svg { width: 24px; height: 24px; }
/* ===================== Mobile full-screen menu (glass) ===================== */
.menu-overlay {
position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
padding: clamp(20px, 6vw, 34px) clamp(22px, 6vw, 30px) clamp(28px, 7vh, 44px);
background: color-mix(in srgb, var(--bg) 80%, transparent);
-webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility .28s;
}
.menu-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.menu-close { position: absolute; top: clamp(14px, 4vw, 22px); right: clamp(14px, 4vw, 22px); width: 40px; height: 40px; display: grid; place-content: center; border: none; background: transparent; color: var(--ink); cursor: pointer; }
.menu-close svg { width: 26px; height: 26px; }
.menu-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); margin-top: clamp(6px, 2vh, 24px); }
.menu-brand svg { width: 40px; height: 40px; flex-shrink: 0; }
.menu-brand b { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.2em; font-size: 15px; text-transform: uppercase; line-height: 1.28; }
.menu-nav { display: flex; flex-direction: column; gap: clamp(4px, 1.4vh, 12px); margin-top: clamp(24px, 6vh, 52px); }
.menu-nav a { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 9vw, 40px); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; width: max-content; }
.menu-nav a[href="#top"]:active { color: var(--acc-start); }
.menu-nav a[href="#ai"]:active { color: var(--acc-ai); }
.menu-nav a[href="#features"]:active { color: var(--acc-feat); }
.menu-nav a[href="#copier"]:active { color: var(--acc-copier); }
.menu-nav a[href="#pricing"]:active { color: var(--acc-price); }
.menu-nav a[href="#about"]:active { color: var(--acc-about); }
.menu-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }
.menu-divider { height: 1px; background: var(--line-2); margin-bottom: 12px; }
.menu-cta { width: 100%; height: 54px; }
.menu-theme { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; margin-top: 4px; border: none; background: transparent; color: var(--dim); cursor: pointer;
font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.menu-theme svg { width: 18px; height: 18px; }
.menu-theme:hover { color: var(--ink); }
/* ===================== Buttons / chips ===================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
height: 46px; padding: 0 24px; border-radius: 12px; cursor: pointer; text-decoration: none; white-space: nowrap;
font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
transition: filter 0.14s, background 0.14s, border-color 0.14s, color 0.14s, transform 0.14s;
}
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.btn-primary:hover { transform: translateY(-1px); filter: opacity(0.9); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost svg { transition: transform 0.16s; }
.btn-ghost:hover svg { transform: translateY(2px); }
.chip {
height: 32px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 30px;
border: 1px solid var(--line-2); background: transparent; color: var(--ink); text-decoration: none;
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
transition: border-color 0.14s, background 0.14s;
}
.chip:hover { border-color: var(--ink); }
.text-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); text-decoration: none; white-space: nowrap; transition: color 0.14s; }
.text-link:hover { color: var(--ink); }
.chip-solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip-solid:hover { filter: opacity(0.88); }
/* simple underline-reveal links (hero) — hover swipes in the Start accent */
.ul-link { --hover: var(--acc-start); position: relative; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 1.7vw, 21px); color: var(--ink); }
.ul-link p { margin: 0; position: relative; }
.ul-link p::before { position: absolute; content: attr(data-text); inset: 0; width: 0; overflow: hidden; white-space: nowrap; color: var(--hover); transition: width 0.3s ease-out; }
.ul-link::after { position: absolute; content: ""; left: 0; bottom: -7px; width: 0; height: 2px; background: var(--hover); transition: width 0.3s ease-out; }
.ul-link:hover p::before { width: 100%; }
.ul-link:hover::after { width: 100%; }
.ul-link svg { position: relative; width: 16px; height: 16px; color: var(--ink); transition: transform 0.25s ease, color 0.25s ease; transition-delay: 0.1s; }
.ul-link:hover svg { color: var(--hover); }
/* the word "data" — orange→red gradient, angle follows the cursor */
.grad-data { background: linear-gradient(var(--dataAng, 105deg), #FF9A2E, #FF2D55);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* blue → dark blue, off --acc-feat so it re-derives itself in dark mode instead
of needing a second hand-picked pair of stops. Mixed toward a navy, not
black — black desaturates the blue into a muddy grey, a saturated navy
stays friendly while still reading as "dark blue". */
.grad-blue { background: linear-gradient(105deg, var(--acc-feat), color-mix(in srgb, var(--acc-feat) 62%, #14237a 38%));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* ===================== Ticker strip ===================== */
.ticker {
position: relative; z-index: 1; height: 34px; display: flex; align-items: center; overflow: hidden;
border-bottom: 1px solid var(--line); background: var(--surface);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
font-family: var(--font-mono); font-size: 11px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.tape-track { display: inline-flex; white-space: nowrap; will-change: transform; animation: tape 48s linear infinite; }
.tape-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; border-right: 1px solid var(--line); color: var(--dim); }
.tape-item b { color: var(--ink); font-weight: 500; letter-spacing: 0.03em; }
.tape-item .up { color: var(--pos); } .tape-item .dn { color: var(--neg); }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ===================== Hero ===================== */
main { position: relative; z-index: 1; }
/* first screen fills the viewport so the divider band sits at the bottom edge */
.hero-screen { display: flex; flex-direction: column; min-height: calc(100vh - var(--navH) - 35px); min-height: calc(100dvh - var(--navH) - 35px); }
.hero {
flex: 1 1 auto; max-width: 1320px; width: 100%; margin: 0 auto;
padding: clamp(20px, 3.5vh, 48px) clamp(20px, 4vw, 48px) 0;
display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(20px, 3vw, 44px); align-items: stretch;
}
.hero-copy { justify-content: flex-start; padding-top: clamp(6px, 3vh, 40px); } /* copy sits high */
/* desktop (two-column grid): centre the copy block in the full hero height, at any viewport height.
.hero's own top padding has to go too — with padding-bottom already 0, keeping it would inset the
grid row (and so the copy block's centering box) from the top only, throwing the centre off by
half that padding relative to .hero's true box. */
@media (min-width: 1025px) {
.hero { padding-top: 0; }
.hero-copy { justify-content: center; padding-top: 0; }
}
.hero-visual { align-self: end; } /* curve pinned to the bottom (band) */
.hero-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc-start); box-shadow: 0 0 10px var(--acc-start); }
.hero h1 { margin-top: 18px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.045em; line-height: 0.9; font-size: clamp(42px, 7.6vw, 104px); color: var(--ink); }
.kh-lead { display: block; white-space: nowrap; } /* "Know your" stays on one line, overflows right into the empty space */
/* plain overflow:hidden (Safari-safe); box clears g/p descenders but ends ABOVE the sub-text so sliding words never glide over it (no negative margin) */
/* the rotating word and the second line sit side by side on one row */
.kh-row { display: flex; align-items: center; gap: clamp(10px, 1.3vw, 20px); }
.kh-slot { display: block; position: relative; width: 5.3em; height: 1.28em; overflow: hidden; flex: none; } /* width sized to the longest word ("strategies"), so the second line lands in a stable spot whichever word shows */
.kw { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 0 0.18em 0.32em 0; transform: translateY(1.5em); } /* padding extends the gradient's paint box (background-clip:text) so g/p/y descenders AND the trailing period aren't dropped */
.kh-slot .kw:first-child { transform: translateY(0); }
.kw-edge { background: linear-gradient(105deg, #17E6A1, #4C86F0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.kw-trades { background: linear-gradient(105deg, #A277F0, #FF5DA0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.kw-patterns { background: linear-gradient(105deg, #22D3EE, #14B8A6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.kw-strategies { background: linear-gradient(105deg, #6366F1, #EC4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.kw-game { background: linear-gradient(105deg, #F59E0B, #10B981); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.kw-setups { background: linear-gradient(105deg, #06B6D4, #8B5CF6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* second headline line — subordinate (~1/3 of the h1) so "Know your data." stays the thesis; nowrap like .kh-lead, which already overflows the narrow copy column by design */
/* hidden until the carousel settles — until then its position beside the word would be wrong */
.kh-second { flex: none; white-space: nowrap; /* the
sets the two lines; without nowrap the flex squeeze breaks it into three */
font-size: clamp(15px, 2vw, 27px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink);
opacity: 0; transition: opacity .55s ease; }
.kh-second.in { opacity: 1; }
.hero-sub { margin-top: 10px; max-width: 400px; font-size: clamp(14px, 1.6vw, 17px); line-height: 1.55; color: var(--dim); }
/* the two halves of the sub-line are the two products — each is a link to its own section.
At rest they read as plain body copy; the gradient IS the hover affordance (no permanent underline). */
a.hs-link { color: inherit; text-decoration: none; cursor: pointer; transition: color .18s ease; } /* a.… beats the later [data-tip]{cursor:help} at equal specificity */
.hs-journal:hover, .hs-journal:focus-visible {
background-image: var(--kh-grad, linear-gradient(105deg, #17E6A1, #4C86F0)); /* fallback covers the moment before the carousel lands */
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hs-copier:hover, .hs-copier:focus-visible {
background-image: linear-gradient(105deg, #22D3EE, #0891B2);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
:root[data-theme="dark"] .hs-copier:hover, :root[data-theme="dark"] .hs-copier:focus-visible {
background-image: linear-gradient(105deg, #67E8F9, #22D3EE); }
.hero-cta { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero-trust { margin-top: 26px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.hero-copy { position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; } /* headline may overflow over the curve */
.hero-visual { position: relative; z-index: 1; }
/* curve bleeds off both screen edges; height is decoupled so the right bleed can't blow it up */
.hero-chart { position: relative; height: clamp(260px, 44vh, 520px);
width: auto; margin-left: clamp(-96px, -6vw, -24px); margin-right: calc(68% - 50vw); }
.hero-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
#heroEqLine { fill: none; stroke: var(--pos); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; }
#heroEqArea { fill: var(--pos); opacity: 0.11; }
.hero-eq-dot { position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--pos); opacity: 0; transform: translate(-50%,-50%); box-shadow: 0 0 14px var(--pos); animation: dotp 1.7s ease-in-out infinite; }
@keyframes dotp { 0%,100% { box-shadow: 0 0 10px var(--pos); } 50% { box-shadow: 0 0 18px 4px var(--pos); } }
/* divider band — blends with the start section, top hairline sits exactly on the curve's baseline */
.hero-band { flex: 0 0 auto; background: var(--bg); border-top: 1px solid var(--line); } /* opaque base colour: hides the fixed bg-grid below the divider line, still blends with the hero */
.hb-inner { max-width: 1320px; margin: 0 auto; padding: 13px clamp(20px, 4vw, 48px); display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); text-align: center; }
.hb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 9px var(--pos); flex-shrink: 0; }
/* ===================== Cards / widgets ===================== */
.card { border-radius: 14px; padding: 19px 22px; background: var(--surface-2); border: 1px solid var(--line);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.card .label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.card .value { font-family: var(--font-mono); font-size: clamp(24px, 5vw, 34px); font-weight: 600; letter-spacing: -0.02em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.card .meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); margin-top: 10px; }
.pos { color: var(--pos); } .neg { color: var(--neg); } .muted { color: var(--faint); }
/* two tidy flanking columns, staggered to rise left→right with the curve */
.float-widget { position: absolute; width: min(290px, 46vw); }
/* staggered cascade that follows the curve low-left → high-right */
/* centres placed on the arrow endpoints from the annotated screenshot */
.fw-gauge { top: -62%; left: 18%; width: min(320px, 50vw); } /* Win Rate — widest (gauge + chips) */
.fw-health { top: -58%; left: 70%; } /* System Health */
.fw-kpi { top: 28%; left: 11%; } /* Net P&L */
.fw-donut { top: 26%; left: 88%; } /* Profit Factor */
/* below the hero's max-width the big widgets get cramped; pull the gauge left + right-anchor the right column */
@media (max-width: 1340px) { .fw-gauge { left: 7%; } .fw-health { left: auto; right: 0; } .fw-donut { left: auto; right: 0; } }
.fw-cal { display: none; } /* calendar lives in the features section */
/* Gauge */
.gauge-card .gauge-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.gauge-val { font-family: var(--font-mono); font-size: clamp(24px, 6vw, 33px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.gauge-graphic { display: flex; flex-direction: column; align-items: center; gap: 9px; flex-shrink: 0; }
.gauge-graphic svg { width: 150px; height: 88px; display: block; }
/* etched "stitched" ticks (app Etched style) — used by the hero gauge + donut */
.g-tick { stroke-width: 2.4; stroke-linecap: round; }
.g-tick.pos { stroke: var(--pos); }
.g-tick.be { stroke: var(--faint); }
.g-tick.neg { stroke: var(--neg); }
.gauge-chips { display: flex; gap: 6px; }
.g-chip { font-family: var(--font-mono); min-width: 28px; padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 500; text-align: center; color: var(--gc); background: color-mix(in srgb, var(--gc) 16%, transparent); }
/* Donut */
.donut-card .gauge-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.donut-graphic svg { width: 96px; height: 96px; display: block; }
/* Calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.cal-cell { aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--line); display: grid; place-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: 500; color: var(--faint); }
.cal-cell.green { background: var(--pos-soft); border-color: color-mix(in srgb, var(--pos) 42%, transparent); color: var(--pos); }
.cal-cell.red { background: var(--neg-soft); border-color: color-mix(in srgb, var(--neg) 42%, transparent); color: var(--neg); }
.cal-cell.empty { opacity: 0.35; }
/* Health traffic light */
.health-body { display: flex; align-items: center; gap: 15px; }
.health-lights { display: flex; gap: 8px; }
.hl { width: 18px; height: 18px; border-radius: 50%; opacity: 0.2; }
.hl.r { background: var(--neg); } .hl.a { background: var(--warn); } .hl.g { background: var(--pos); }
.hl.on { opacity: 1; box-shadow: 0 0 14px currentColor; color: var(--pos); }
.health-verdict { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--pos); }
/* ===================== Hero widget tooltips (frosted, desktop hover) ===================== */
[data-tip] { cursor: help; }
.tt-bubble {
position: fixed; z-index: 40; max-width: 240px; width: max-content;
padding: 12px 14px; border-radius: 12px;
background: var(--surface-2); border: 1px solid var(--line);
-webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
box-shadow: 0 14px 38px rgba(0,0,0,0.22);
font-family: var(--font-display); font-size: 12px; line-height: 1.5; color: var(--dim);
pointer-events: none;
opacity: 0; transform: translateY(4px); transition: opacity .13s ease, transform .13s ease;
}
.tt-bubble.show { opacity: 1; transform: translateY(0); }
.tt-title { font-weight: 700; color: var(--ink); font-size: 12.5px; margin-bottom: 3px; }
.tt-body { color: var(--dim); }
/* richer bubbles (logo + title row, then body, then a footer hint) — used by the hero sub-line links */
.tt-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.tt-head .tt-title { margin-bottom: 0; }
.tt-foot { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; }
/* Score ring (features) */
.score-card { display: flex; align-items: center; gap: 20px; }
.ring { position: relative; width: 118px; height: 118px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); }
.ring-track { stroke: var(--line); }
#tbRing { stroke: var(--pos); transition: none; }
.ring-val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-val b { font-family: var(--font-mono); font-size: 30px; font-weight: 600; letter-spacing: -1px; line-height: 1; color: var(--pos); font-variant-numeric: tabular-nums; }
.ring-val small { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); display: block; margin-top: 3px; }
.sc-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 5px; color: var(--pos); }
.sc-side .meta { font-family: var(--font-mono); font-size: 11px; line-height: 1.55; color: var(--faint); }
/* ===================== Features section ===================== */
.brand { display: flex; align-items: center; justify-content: center; gap: 16px; }
.brand .b-word { font-family: var(--font-display); font-size: clamp(15px, 3vw, 24px); font-weight: 600; letter-spacing: 0.2em; color: var(--ink); }
.brand .b-word.l { text-align: right; }
.brand-logo { width: clamp(30px, 5vw, 46px); aspect-ratio: 1; color: var(--ink); }
.brand-logo svg { width: 100%; height: 100%; display: block; }
/* "your trade data" zone — its own area with the deeper bg, sits between hero and Features, not anchored */
/* scroll-margin-top stays a flat 46px here (unlike .feat-band/.cp-intro below, which use var(--navH))
— measured directly: the browser's scroll-anchoring heuristic already compensates for the header's
post-jump collapse shift when landing on THIS section, so 46px alone lands flush. It does NOT
compensate for #features/#copier (unclear why — presumably which node Chrome picks as the anchor
differs), so those two need the pre-compensated var(--navH) value instead. Don't "simplify" these
to match each other without re-measuring both from a cold, unscrolled page load. */
.feat-intro { background: #eaebee; scroll-margin-top: 46px; } /* own neutral band that fits the app palette; anchors flush with the shrunk header */
:root[data-theme="dark"] .feat-intro { background: #1e2027; } /* lifted slate */
.feat-intro-inner { max-width: 1000px; margin: 0 auto; text-align: center; padding: clamp(56px, 9vh, 108px) clamp(20px, 5vw, 60px) clamp(46px, 7vh, 86px); }
/* Features section — hero-like bg (no grid); its top border IS the divider; anchor lands it just under the shrunk nav */
.feat-band { background: var(--bg); border-top: 1px solid var(--line); scroll-margin-top: var(--navH); } /* see .feat-intro comment above — pre-compensates for the post-jump header-collapse shift */
.feat-inner { max-width: 1200px; margin: 0 auto; padding: clamp(26px, 3.8vh, 46px) clamp(20px, 5vw, 60px) 11vh; }
.feat-section-title { text-align: center; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(30px, 5vw, 56px); color: var(--ink); margin-bottom: clamp(6px, 1vh, 12px); }
.feat-head { text-align: center; margin-bottom: clamp(34px, 6vh, 60px); }
.brand-feat { margin-bottom: 24px; }
.feat-h { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; font-size: clamp(28px, 4.6vw, 52px); color: var(--ink); }
.feat-sub { margin-top: 14px; color: var(--dim); font-size: clamp(13px, 1.8vw, 16px); }
/* ---- Boutique AI brand lockup + animated logo (light: black dot/white logo · dark: inverse) ---- */
.brand-ai { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ai-logo { position: relative; width: clamp(48px, 7.5vw, 66px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex-shrink: 0; transition: box-shadow .3s ease; }
.ai-logo svg { width: 58%; height: 58%; overflow: visible; }
.ai-logo-base { stroke: var(--bg); } /* white logo (light) / black logo (dark) */
.ai-logo-fill { stroke: url(#aiLogoGrad); stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; } /* hidden until first hover */
.ai-logo.filled .ai-logo-fill { opacity: 1; animation: aiDraw .62s ease forwards; } /* draws on, then persists */
@keyframes aiDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.ai-logo:hover { box-shadow: 0 0 22px 3px rgba(255,138,40,0.62), 0 0 48px 11px rgba(255,45,85,0.42); } /* orange→red glow, hover only */
.ai-more { --hover: var(--acc-feat); font-size: 14px; background: none; border: none; padding: 0; cursor: pointer; margin-top: clamp(18px, 3vh, 30px); }
/* ---- Boutique AI lightbox (centered; full-screen on mobile) ---- */
.ai-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vw, 40px);
opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s; }
.ai-lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
.ai-lb-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 42%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ai-lb-panel { position: relative; z-index: 1; width: min(560px, 100%); max-height: min(88vh, 720px); overflow: auto;
background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 4vw, 40px);
padding-top: clamp(26px, 4.4vw, 44px); /* ~10% more space between the logo and the top edge */
-webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
box-shadow: 0 30px 80px rgba(0,0,0,0.28); transform: translateY(10px) scale(0.98); transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.ai-lightbox.open .ai-lb-panel { transform: none; }
.ai-lb-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-content: center; border: none; background: transparent; color: var(--faint); cursor: pointer; border-radius: 50%; transition: color .14s, background .14s; }
.ai-lb-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ai-lb-close svg { width: 20px; height: 20px; }
.ai-lb-head { display: flex; align-items: center; gap: 15px; } /* ~5% more space between the logo and the text */
.ai-lb-badge { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex-shrink: 0; color: var(--bg); transition: box-shadow .5s ease; }
.ai-lb-badge svg { width: 56%; height: 56%; overflow: visible; }
.ai-lb-fill { stroke: url(#aiLbGrad); stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; } /* hidden until the lightbox first opens on mobile */
.ai-lb-badge.filled .ai-lb-fill { opacity: 1; animation: aiDraw 1.1s ease forwards; } /* draws on, then persists */
.ai-lb-badge.glow { box-shadow: 0 0 22px 3px rgba(255,138,40,0.62), 0 0 48px 11px rgba(255,45,85,0.42); } /* fires on open, fades back out */
.ai-lb-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
background: linear-gradient(90deg, #FF9A2E, #FF2D55); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ai-lb-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 5vw, 32px); letter-spacing: -0.02em; color: var(--ink); margin-top: 3px; }
.ai-lb-lead { margin-top: 20px; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 2.4vw, 20px); color: var(--ink); }
.ai-lb-body { margin-top: 10px; font-size: clamp(13px, 1.7vw, 15px); line-height: 1.6; color: var(--dim); }
.ai-lb-list { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ai-lb-list li { position: relative; padding-left: 20px; font-size: clamp(13px, 1.7vw, 15px); line-height: 1.5; color: var(--dim); }
.ai-lb-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #FF9A2E, #FF2D55); }
.ai-lb-note { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--faint); }
.ai-lb-foot { display: flex; justify-content: center; margin-top: 19px; } /* ~5% more space between the text and the Register button */
body.lb-open { overflow: hidden; }
/* ===================== Stay Synced zone ===================== */
.sync-intro { background: #e5e9e7; } /* own neutral tone, faintly green-cooled; distinct from Boutique AI — tunable */
/* Cyan-Schiefer, gerechnet statt geraten. Der Vorgaenger #171b19 hatte
L* 9.3 — EXAKT die Helligkeit der Seite (#181a20), der Abschnitt war also
unsichtbar. Und sein Farbton lag bei 150 Grad, also 6 Grad neben der
„synced"-Gruenstufe (156 Grad): der Grund trug denselben Ton wie der
Akzent, der darauf leuchten soll. Heller machen allein haette das Gruen
gedaempft.
200 Grad ist die Mitte zwischen den beiden Akzenten dieses Abschnitts —
gruen 156 Grad und violett 255 Grad — und damit der Punkt mit dem groessten
Abstand zu beiden (43 statt 6 Grad). L* 15.5 = +6.2 gegenueber der Seite,
doppelt so viel wie die uebliche Systemstufe (.feat-intro: +3.0).
Kuehl bleibt es absichtlich, s. den Kommentar bei .cp-intro. */
:root[data-theme="dark"] .sync-intro { background: #20282c; }
.sync-inner { max-width: 1120px; margin: 0 auto; text-align: left; padding: clamp(56px, 9vh, 108px) clamp(20px, 5vw, 60px) clamp(46px, 7vh, 86px); }
.sync-top { display: flex; align-items: flex-start; gap: clamp(24px, 4vw, 48px); flex-wrap: wrap; }
.sync-h { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; font-size: clamp(40px, 7vw, 82px); color: var(--ink); flex: 0 0 auto; text-align: right; margin-top: 8px; } /* "Stay" pushed right, ends flush with the "d" of "Synced"; nudged down so the "d" bottom aligns with the cTrader logo bottom */
.sync-l1, .sync-synced { display: block; }
.sync-synced { position: relative; display: inline-block; }
.sync-synced-fill { position: absolute; top: 0; left: 0; padding-bottom: 0.22em; /* extend the background-clip:text paint box so the y-descender is fully coloured (same fix as the word carousel .kw) */
background: linear-gradient(120deg, #12B37D, #066241); /* light mode: darkened green → green (dark mode overrides back to the brighter pair below) */
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
clip-path: circle(0% at 50% 50%); } /* starts empty, fills radially */
:root[data-theme="dark"] .sync-synced-fill { background-image: linear-gradient(120deg, #2CFFAF, #078A56); } /* longhand — the `background` shorthand would reset background-clip:text back to border-box and break the text-clip */
@keyframes syncRadial { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(120% at 50% 50%); } } /* 120% so the whole word incl. the y-descender is covered (no black left over) */
.sync-inner.frin .sync-synced-fill { animation: syncRadial 1.1s ease .15s forwards; }
.sync-right { flex: 1 1 300px; min-width: 240px; max-width: 420px; margin-top: clamp(10px, 1.4vw, 20px); } /* right column top edge a bit below "Stay" */
.sync-sub { color: var(--dim); font-size: clamp(13px, 1.8vw, 16px); line-height: 1.6; } /* match the Boutique AI .feat-sub size */
/* purple nudge box, right of the paragraph — fades in after ~15s */
.sync-nudge { flex: 0 0 auto; width: clamp(230px, 24vw, 280px); align-self: flex-start; margin-top: clamp(10px, 1.4vw, 20px);
background: linear-gradient(120deg, #7C5CE0, #A855F7); border-radius: 16px; padding: 20px 22px;
opacity: 0; visibility: hidden; transform: translate(10%, 10px); transition: opacity .6s ease, transform .6s ease, visibility .6s; } /* translateX(10%) = ~10% further right */
.sync-nudge.show { opacity: 1; visibility: visible; transform: translateX(10%); }
.sync-nudge-q { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.9vw, 18px); color: #fff; line-height: 1.3; }
.sync-nudge-b { margin-top: 8px; font-size: clamp(12.5px, 1.6vw, 14px); line-height: 1.55; color: rgba(255,255,255,0.92); }
.sync-nudge .sync-mig-chip { margin-top: 16px; }
.sync-logos { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(16px, 3vw, 30px); margin-top: clamp(20px, 3vh, 32px); } /* left-aligned under the paragraph */
.sync-logo { height: clamp(28px, 4.5vw, 38px); width: auto; display: block; opacity: 0; }
.sync-inner.frin .sync-logo { animation: ccFlicker .5s ease var(--fd, 0s) forwards; } /* flicker on one after another, then stay (like the cookie headline) */
/* manual import methods (MANUAL / CSV · MANUAL / Excel) — flicker in after the logos, same sequence */
.sync-manual { display: flex; flex-direction: column; line-height: 1; opacity: 0; }
.sync-manual-cap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--faint); }
.sync-manual-fmt { margin-top: 4px; font-family: var(--font-display); font-size: clamp(17px, 2.6vw, 24px); font-weight: 700; letter-spacing: -0.01em; color: color-mix(in srgb, var(--dim) 55%, var(--faint) 45%); } /* smaller + lighter grey — CSV/Excel don't stand out, still legible */
.sync-inner.frin .sync-manual { animation: ccFlicker .5s ease var(--fd, 0s) forwards; }
.sync-more { --hover: var(--pos); font-size: 14px; background: none; border: none; padding: 0; cursor: pointer; display: block; width: max-content; margin: clamp(20px, 3vh, 32px) auto 0; } /* centered */
/* Stay Synced lightbox — same look as .ai-lb-* */
.sync-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vw, 40px);
opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s; }
.sync-lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
.sync-lb-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 42%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sync-lb-panel { --pad: clamp(24px, 4vw, 40px); position: relative; z-index: 1; width: min(560px, 100%); overflow: visible; /* sized to content — never scrollable on desktop (grows when the bar opens) */
background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; padding: var(--pad);
-webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
box-shadow: 0 30px 80px rgba(0,0,0,0.28); transform: translateY(10px) scale(0.98); transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.sync-lightbox.open .sync-lb-panel { transform: none; }
.sync-lb-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-content: center; border: none; background: transparent; color: var(--faint); cursor: pointer; border-radius: 50%; transition: color .14s, background .14s; z-index: 2; }
.sync-lb-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.sync-lb-close svg { width: 20px; height: 20px; }
.sync-lb-head { display: flex; align-items: center; gap: 15px; }
.sync-lb-badge { width: 52px; height: 52px; border-radius: 50%; background: var(--pos); display: grid; place-items: center; flex-shrink: 0; color: #fff; } /* green sync badge */
.sync-lb-badge svg { width: 54%; height: 54%; }
.sync-lb-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
background: linear-gradient(90deg, #22E0A1, #0FB985); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.sync-lb-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 5vw, 32px); letter-spacing: -0.02em; color: var(--ink); margin-top: 3px; }
.sync-lb-lead { margin-top: 20px; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 2.4vw, 20px); color: var(--ink); }
.sync-lb-body { margin-top: 10px; font-size: clamp(13px, 1.7vw, 15px); line-height: 1.6; color: var(--dim); }
.sync-lb-list { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sync-lb-list li { position: relative; padding-left: 20px; font-size: clamp(13px, 1.7vw, 15px); line-height: 1.5; color: var(--dim); }
.sync-lb-list li b { color: var(--ink); font-weight: 700; }
.sync-lb-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #22E0A1, #0FB985); }
.sync-lb-foot { display: flex; justify-content: center; margin-top: 19px; }
/* full-width purple migration bar (opens ~1s after the lightbox shows) */
.sync-mig { margin: 22px calc(-1 * var(--pad)) calc(-1 * var(--pad)); padding: 0 var(--pad);
background: linear-gradient(120deg, #7C5CE0, #A855F7); border-radius: 0 0 18px 18px;
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s ease, opacity .4s ease, padding-top .5s ease, padding-bottom .5s ease;
padding-top: 0; padding-bottom: 0; }
.sync-mig.show { max-height: 260px; opacity: 1; padding-top: 18px; padding-bottom: 18px; }
.sync-mig-text { color: #fff; font-size: clamp(12.5px, 1.6vw, 14px); line-height: 1.5; margin: 0; flex: 1 1 220px; }
.sync-mig-chip { flex-shrink: 0; border-color: rgba(255,255,255,0.6); color: #fff; } /* white chip on purple */
.sync-mig-chip:hover { border-color: #fff; background: rgba(255,255,255,0.14); }
/* ===================== Copier zone ===================== */
/* deepest band on the page (cool/blue-leaning) so it can't blur into Sync's green-leaning grey */
/* near-white canvas so the board sits on a clean, bright ground. anchors flush under the shrunk 46px header, same as #features.
The hairline is load-bearing: against the page base (#f4f4f4) the bottom edge is only ~5 luminance points, i.e. no visible edge. */
.cp-intro { background: #faf9f7; scroll-margin-top: var(--navH); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* top hairline separates Copier from Stay Synced above — sits exactly where the #copier anchor lands, since scroll-margin-top is on this same element (see .feat-intro comment re: var(--navH) vs a flat 46px) */
:root[data-theme="dark"] .cp-intro { background: #131519; } /* dark stays cool — the Slate theme is deliberately cool, a warm dark would go muddy */
/* top padding is deliberately tighter than the sibling bands: this section is tall (mark + text +
the route board), and on a 13" laptop the "more" link has to stay above the fold */
.cp-inner { max-width: 1000px; margin: 0 auto; text-align: center; padding: clamp(26px, 4.4vh, 56px) clamp(20px, 5vw, 60px) clamp(38px, 5.6vh, 70px); }
/* the copier mark, ported 1:1 from the app (js/app.js markHtml + css/copier.css) — the ghost copies
flashing in one after another ARE the product metaphor. overflow:visible so they aren't clipped. */
.cp-mark { width: clamp(96px, 13vw, 150px); height: auto; margin: 0 auto; display: block; overflow: visible; }
.cp-mark .disc, .cp-mark .copy { fill: var(--ink); }
.cp-mark .bolt-flick, .cp-mark .bolt-draw { stroke: var(--bg); } /* counter-colour inside the ink disc — inverts with the theme */
/* pre-reveal: nothing visible yet (the app shows its end state by default; here it plays on scroll) */
.cp-mark .disc-g, .cp-mark .copy, .cp-mark .bolt-flick { opacity: 0; }
.cp-mark .bolt-draw { stroke-dasharray: 300; stroke-dashoffset: 300; opacity: 0; }
/* on reveal — same curves + timings as the app, driven by .frin instead of the app's .play gate */
.cp-inner.frin .cp-mark .disc-g { transform-origin: 50px 50px; animation: cpMarkPop .25s cubic-bezier(.2,.7,.2,1) both; }
.cp-inner.frin .cp-mark .bolt-flick { animation: cpMarkFlicker .72s steps(1, end) .2s both; }
.cp-inner.frin .cp-mark .bolt-draw { animation: cpMarkDraw .6s ease .92s forwards; }
.cp-inner.frin .cp-mark .copy { animation: cpMarkCopy .5s ease both; }
.cp-inner.frin .cp-mark .c1 { --final: .45; animation-delay: 1.52s; }
.cp-inner.frin .cp-mark .c2 { --final: .28; animation-delay: 1.70s; }
.cp-inner.frin .cp-mark .c3 { --final: .16; animation-delay: 1.88s; }
@keyframes cpMarkPop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes cpMarkFlicker { 0%{opacity:0} 8%{opacity:.45} 16%{opacity:0} 26%{opacity:.45} 36%{opacity:0} 48%{opacity:.45} 58%{opacity:0} 70%{opacity:.45} 100%{opacity:.45} }
@keyframes cpMarkDraw { 0% { stroke-dashoffset: 300; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes cpMarkCopy { 0% { opacity: 0; } 22% { opacity: .9; } 100% { opacity: var(--final); } }
.cp-h { margin-top: clamp(18px, 2.6vh, 28px); font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; font-size: clamp(38px, 6.2vw, 72px); color: var(--ink); }
/* mark + wordmark on one line, like the Boutique AI lockup */
.cp-lockup { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.8vw, 24px); }
.cp-lockup .cp-mark { margin: 0; width: clamp(58px, 7.4vw, 96px); } /* sized so the disc's height reads level with the wordmark */
.cp-lockup .cp-h { margin-top: 0; }
.cp-sub { margin: clamp(36px, 4.4vh, 46px) auto 0; max-width: 640px; color: var(--dim); font-size: clamp(13px, 1.8vw, 16px); line-height: 1.6; } /* ~a line further down than the heading needs, for air */
/* the page's one and only italic — font-style can't tween, so it SNAPS; darkens to ink so it reads in a dim paragraph */
.cp-ms { font-style: normal; transition: color .18s ease; }
.cp-ms.ital { font-style: italic; color: var(--ink); }
.cp-more { --hover: var(--acc-copier); font-size: 14px; background: none; border: none; padding: 0; cursor: pointer; display: block; width: max-content; margin: clamp(20px, 3vh, 32px) auto 0; }
/* ---- the Copier board ("Strecke"), ported from the app's css/copier.css with the node boxes removed ---- */
/* width tracks the viewport (min 10% margin each side), capped so nodes don't drift apart on huge monitors.
left+translate centres on the parent's own centre — mixing % with vw (the .carousel trick) lands
half a scrollbar off, which would break the 10% floor on one side. */
.cp-board { position: relative; overflow: visible; text-align: left;
margin: clamp(28px, 4.5vh, 52px) 0 0;
width: min(94%, 832px); /* pre-JS fallback only — drawCopierWires() sets the real width from .cp-sub */
left: 50%; transform: translateX(-50%); }
.cp-board-inner { position: relative; z-index: 1; }
.cp-wires { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: visible; }
.cp-wire-tools { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* explicit spacer tracks: the webhook→master gap is deliberately tighter than master→slave,
and the webhook column is narrower — a route needs less room than an account. */
/* cards are max-content wide (no dead space inside them); every spare pixel goes into the
spacer tracks instead, which is what lengthens the routes. minmax(0,…) lets them shrink
rather than overflow on narrow desktops — the nowrap name ellipsises instead. */
.cp-cols { display: grid; gap: 0; align-items: center;
grid-template-columns: minmax(0, max-content) minmax(14px, 0.8fr) minmax(0, max-content) minmax(28px, 1.2fr) minmax(0, max-content); }
.cp-col-webhook { grid-column: 1; }
.cp-col-master { grid-column: 3; }
.cp-col-slave { grid-column: 5; }
.cp-col { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.cp-col-master { align-items: stretch; }
/* node card — the app's box. Border is the stronger hairline (--line-2): on this near-white band a
white card with the app's 6%-alpha border would have no visible edge at all. */
.cp-node { position: relative; min-width: 0;
background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 13px; }
.cp-node.master { border-left: 3px solid var(--ink); } /* the app's role stripe — accent === ink in this theme */
.cp-node-name { display: block; font-weight: 650; font-size: clamp(13px, 1.6vw, 15px); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-node-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.cp-node-mid { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.cp-node-foot { margin-top: 6px; font-size: 10.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-node-bal { font-size: clamp(13px, 1.6vw, 15px); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.cp-badge { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 5px;
background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--line-2); color: var(--dim); white-space: nowrap; }
.cp-role-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.cp-role-badge.master { background: var(--ink); color: var(--bg); } /* --accent === --text in this theme: ink-on-paper, inverted */
.cp-role-badge.slave { background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--dim); border: 1px solid var(--line-2); }
.cp-role-badge.chain { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); } /* the app's amber route badge — its --amber is byte-identical to this page's --warn in both themes */
.cp-mode-badge { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.cp-mode-badge.live { background: var(--pos-soft); color: var(--pos); }
.cp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.cp-dot.ok { background: var(--pos); }
/* wires — dashed = flow, and the flow only runs on a genuinely live route (the app's rule) */
.cp-wire { fill: none; stroke-width: 1.5; stroke-dasharray: 5 5; stroke: var(--line-2); }
.cp-wire.live { stroke: var(--pos); }
.cp-wire-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: help; }
@media (prefers-reduced-motion: no-preference) {
.cp-wire.live { animation: cpFlow 0.9s linear infinite; }
@keyframes cpFlow { to { stroke-dashoffset: -10; } }
.cp-dot.ok { animation: cpBeat 2s ease-in-out infinite; }
@keyframes cpBeat { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
}
/* ---- the route builds itself up left → right once the section scrolls into view ----
The wipe lives on a wrapper, not the path: the path's `animation` slot is already
taken by cpFlow, and a second animation on the same element would replace it. */
.cp-board .cp-node { opacity: 0; }
.cp-board .cp-wire-g { clip-path: inset(0 100% 0 0); }
.cp-board .cp-wire-gear { opacity: 0; }
.cp-board.cp-in .cp-node { animation: cpNodeIn .5s cubic-bezier(.2,.7,.2,1) var(--fd, 0s) forwards; }
.cp-board.cp-in .cp-wire-g { animation: cpWireIn .45s ease var(--fd, 0s) forwards; }
.cp-board.cp-in .cp-wire-gear { animation: cpGearIn .3s ease var(--fd, 0s) forwards; }
@keyframes cpNodeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cpWireIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cpGearIn { from { opacity: 0; transform: translate(-50%,-50%) scale(.7); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
/* once the build has played, hold the end state so a resize redraw can't replay it.
NOTE: the gear keeps translate(-50%,-50%) — that is what centres it on the path, not decoration. */
.cp-board.cp-done .cp-node { animation: none; opacity: 1; transform: none; }
.cp-board.cp-done .cp-wire-gear { animation: none; opacity: 1; transform: translate(-50%, -50%); }
.cp-board.cp-done .cp-wire-g { animation: none; clip-path: none; }
/* gear sits ON the wire, 26px before the target — the app's only shadowed element */
.cp-wire-gear { position: absolute; transform: translate(-50%, -50%); pointer-events: auto;
width: 24px; height: 24px; border-radius: 50%; cursor: help; font-size: 12px; line-height: 1;
display: grid; place-items: center; font-family: inherit;
border: 1px solid var(--line-2); background: var(--bg); color: var(--dim);
box-shadow: 0 2px 8px rgba(0,0,0,0.22); transition: transform 0.12s, color 0.12s, border-color 0.12s; }
.cp-wire-gear:hover { color: var(--ink); border-color: var(--ink); transform: translate(-50%, -50%) scale(1.15); }
/* short laptop screens (13"): the section is tall — mark, three lines of copy and the route board.
Tighten every vertical gap just here so the "more" link stays above the fold. Desktop-only:
below 701px the board is a stacked tree with its own spacing. */
@media (min-width: 701px) and (max-height: 740px) {
.cp-inner { padding-top: clamp(20px, 3vh, 34px); }
.cp-sub { margin-top: clamp(20px, 3vh, 28px); }
.cp-board { margin-top: clamp(18px, 2.6vh, 28px); }
.cp-col { gap: 18px; }
.cp-more { margin-top: clamp(14px, 2vh, 20px); }
}
/* mobile: stack the board so master sits above its receivers; wires switch to vertical */
@media (max-width: 700px) {
/* tree layout: each level indented past its parent, so the fan-out stays unambiguous.
Stacking them flush in one column would read as a chain (webhook → master → A → B), which is wrong. */
.cp-cols { grid-template-columns: 1fr; gap: 30px; }
.cp-col-webhook, .cp-col-master, .cp-col-slave { grid-column: 1; } /* undo the desktop spacer-track assignment */
.cp-slave-3 { display: none; } /* two receivers is enough on a phone */
.cp-col { align-items: stretch; gap: 30px; }
.cp-col-webhook { padding-left: 0; }
.cp-col-master { align-items: stretch; padding-left: 32px; }
.cp-col-slave { padding-left: 64px; } /* room for the branch + its gear between trunk and node */
}
/* Copier lightbox — same look as .sync-lb-* */
.cp-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vw, 40px);
opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s; }
.cp-lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
.cp-lb-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 42%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cp-lb-panel { position: relative; z-index: 1; width: min(560px, 100%); max-height: min(88vh, 720px); overflow: auto;
background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 4vw, 40px);
-webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
box-shadow: 0 30px 80px rgba(0,0,0,0.28); transform: translateY(10px) scale(0.98); transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.cp-lightbox.open .cp-lb-panel { transform: none; }
/* scrollbar in the page's own idiom: a thin ink-tinted thumb on a transparent track, no arrows */
.cp-lb-panel { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; }
.cp-lb-panel::-webkit-scrollbar { width: 8px; }
.cp-lb-panel::-webkit-scrollbar-track { background: transparent; }
.cp-lb-panel::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 999px;
border: 2px solid transparent; background-clip: content-box; }
.cp-lb-panel::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 38%, transparent); background-clip: content-box; }
.cp-lb-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-content: center; border: none; background: transparent; color: var(--faint); cursor: pointer; border-radius: 50%; transition: color .14s, background .14s; z-index: 2; }
.cp-lb-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.cp-lb-close svg { width: 20px; height: 20px; }
.cp-lb-head { display: flex; align-items: center; gap: 15px; }
.cp-lb-badge { width: 62px; flex-shrink: 0; margin: 0; } /* the mark again, static (no replay); margin:0 undoes .cp-mark's auto-centring, which would absorb the flex row's free space */
.cp-lb-badge .disc, .cp-lb-badge .copy { fill: var(--ink); }
.cp-lb-badge .bolt-draw { stroke: var(--bg); stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; }
.cp-lb-badge .bolt-flick { display: none; }
.cp-lb-badge .disc-g { opacity: 1; }
.cp-lb-badge .c1 { opacity: .45; } .cp-lb-badge .c2 { opacity: .28; } .cp-lb-badge .c3 { opacity: .16; }
.cp-lb-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc-copier); }
.cp-lb-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 5vw, 32px); letter-spacing: -0.02em; color: var(--ink); margin-top: 3px; }
.cp-lb-lead { margin-top: 20px; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 2.4vw, 20px); color: var(--ink); }
.cp-lb-body { margin-top: 10px; font-size: clamp(13px, 1.7vw, 15px); line-height: 1.6; color: var(--dim); }
.cp-lb-list { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cp-lb-list li { position: relative; padding-left: 20px; font-size: clamp(13px, 1.7vw, 15px); line-height: 1.5; color: var(--dim); }
.cp-lb-list li b { color: var(--ink); font-weight: 700; }
.cp-lb-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc-copier); }
.cp-lb-note { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--faint); }
.cp-lb-foot { display: flex; justify-content: center; margin-top: 19px; }
/* Core / Advanced tabs — plain text, no chrome; active is underlined */
.feat-tabs { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: clamp(4px, 0.8vh, 10px); font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2.6vw, 28px); letter-spacing: -0.02em; }
.feat-tab { position: relative; cursor: pointer; color: var(--ink); padding-bottom: 5px; -webkit-user-select: none; user-select: none; }
.feat-tab::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2.5px; border-radius: 2px; background: var(--ink); transition: width .3s ease-out; } /* sweeps in on hover, like the ul-links */
.feat-tab:hover::after, .feat-tab.active::after { width: 100%; } /* active stays underlined */
.feat-tab-adv { background: linear-gradient(90deg, #FF2D55, #FF7A00, #FBBF24); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.feat-tab-adv::after { background: linear-gradient(90deg, #FF2D55, #FF7A00, #FBBF24); }
.feat-tab-sep { color: var(--dim); font-weight: 400; font-size: 1.3em; line-height: 0; }
.feat-card { padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; }
/* horizontal card carousel: full-bleed, two in focus, cards run off both edges */
.carousel { position: relative; margin-top: clamp(0px, 0.4vh, 4px); width: 100vw; margin-left: calc(50% - 50vw); }
.car-viewport { position: relative; overflow: hidden; padding: 13px 0; } /* just enough room for the subtle flip grow */
/* soft fade over the tiles at each edge — signals the clipping is intentional */
.car-viewport::before, .car-viewport::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(28px, 7vw, 120px); z-index: 3; pointer-events: none; }
.car-viewport::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.car-viewport::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.car-track { display: flex; gap: 18px; align-items: stretch; padding: 0 clamp(16px, 4vw, 60px); transition: transform 0.5s cubic-bezier(.4,0,.2,1); will-change: transform; touch-action: pan-y; }
.car-track.dragging { transition: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* live 1:1 finger-follow while swiping */
/* Card size is deliberately independent of screen WIDTH: a wider screen must reveal MORE cards,
never bigger ones. The vh term is the short-screen guard only — it shrinks the card on a 13"
laptop so it still fits fully below the Features anchor, and is capped well before a 15" one. */
.car-track .feat-card { flex: 0 0 clamp(460px, 68vh, 600px); }
/* edge arrows — frameless chevrons over the fades; fade in only when the mouse is near the carousel */
.car-edge { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border: none; background: none; cursor: pointer;
display: grid; place-content: center; color: var(--ink); opacity: 0;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.38)); transition: opacity .25s ease, color .14s; }
.car-edge.l { left: clamp(4px, 1.5vw, 26px); }
.car-edge.r { right: clamp(4px, 1.5vw, 26px); }
.car-edge svg { width: 30px; height: 30px; }
.carousel:hover .car-edge { opacity: 0.85; } /* mouse near the carousel */
.car-edge:hover { opacity: 1; color: var(--acc-feat); }
.car-edge.is-off { opacity: 0; pointer-events: none; } /* keep last: wins at the ends */
.car-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(22px, 4vh, 38px); }
.car-arrow { width: 30px; height: 30px; border: none; background: transparent; color: var(--faint); cursor: pointer; display: grid; place-content: center; transition: color .14s, opacity .2s; }
.car-arrow:hover { color: var(--ink); }
.car-arrow svg { width: 20px; height: 20px; }
.car-arrow.is-off { opacity: 0; pointer-events: none; } /* keeps its slot — nav never shifts */
.car-dots { display: flex; gap: 9px; }
.car-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); border: none; padding: 0; cursor: pointer; transition: background .2s, transform .2s; }
.car-dot.active { background: var(--dim); transform: scale(1.35); }
/* Desktop: the carousel keeps exactly 10% of the screen free on each side at EVERY width.
Because the cards themselves are a fixed size, widening the screen simply brings more of
them into view. --vpw is written by JS from documentElement.clientWidth — vw units include
the scrollbar, which would otherwise pull both margins ~6px off the true 10%. */
@media (min-width: 1025px) {
.carousel, .carousel.car-flat { width: calc(var(--vpw, 100vw) * 0.8); margin-left: calc(50% - var(--vpw, 100vw) * 0.4); }
.car-track { padding: 0; } /* the 10% margin already insets the row — the edge padding would double it */
}
/* if all of a group's cards fit in one row at their normal size, drop the carousel chrome */
.carousel.car-flat .car-viewport::before,
.carousel.car-flat .car-viewport::after { display: none; } /* nothing is clipped — no fade needed */
.carousel.car-flat .car-edge,
.carousel.car-flat .car-nav { display: none; } /* no arrows/dots needed */
.carousel.car-flat .car-track { justify-content: center; transition: none; } /* center the row; no stray slide-in */
.feat-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.feat-card h3 { margin-top: 5px; font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 24px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.feat-card p { margin-top: 10px; font-size: clamp(12.5px, 1.5vw, 14.5px); line-height: 1.55; color: var(--dim); }
/* STANDARD card layout (calendar card = blueprint): snapshot panel pinned TOP (order:-1), fixed 1.72 ratio, then heading, then description */
.feat-visual { order: -1; margin: 0 0 clamp(14px, 1.8vw, 18px); padding: clamp(14px, 1.8vw, 18px); aspect-ratio: 1.72; box-sizing: border-box;
border-radius: 11px; background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line); overflow: hidden; }
/* flex-row visuals (score ring, health lights) self-centre in the panel via their own flex + this min-height */
.score-card.feat-visual, .health-body.feat-visual { justify-content: center; }
.feat-term { font-family: var(--font-mono); font-size: 12px; line-height: 2; color: var(--ink); display: flex; flex-direction: column; justify-content: center; }
.feat-visual:has(> .cal-grid) { display: flex; align-items: center; justify-content: center; }
.feat-term .t-dim { color: var(--faint); }
.feat-card .cal-grid { max-width: 250px; }
/* placeholder / upcoming feature cards */
.feat-card.ph { opacity: 0.66; }
.ph-soon { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 5px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); background: color-mix(in srgb, var(--faint) 15%, transparent); }
.ph-box { display: grid; place-content: center; border-style: dashed; border-color: var(--line-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }
.feat-trust { margin-top: clamp(28px, 5vh, 50px); text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
/* section accents echo the nav-hover colour */
#features .feat-eyebrow { color: var(--acc-feat); }
/* Copier Features — the accents above are bound to #features, so the twin needs its own */
#copier-features { border-top: none; } /* .cp-intro already carries a border-bottom — don't stack two hairlines */
#copier-features .feat-eyebrow { color: var(--acc-copier); }
#copier-features .fc-more, #copier-features .fc-signup { --hover: var(--acc-copier); }
#copier-features .car-edge:hover { color: var(--acc-copier); }
#copier-features .fc-list li::before { background: var(--acc-copier); } /* green bullets read as P&L — cyan ties them to the Copier zone */
/* mini-visuals inside the Copier cards */
.cp-mode-badge.dry { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.cv-route { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.cv-route svg { flex: 1 1 auto; height: 16px; min-width: 40px; overflow: visible; }
.cv-modes { display: flex; flex-direction: column; justify-content: center; gap: 7px; width: 100%; }
.cv-mode { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 12px; }
.cv-mode b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cv-switch { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.cv-switch svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
#pricing .feat-eyebrow { color: var(--acc-price); }
#about .feat-eyebrow { color: var(--acc-about); }
/* stubs */
.stub { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 24px; scroll-margin-top: calc(var(--navH) + 12px); }
.stub .feat-eyebrow { margin-bottom: 12px; }
.stub h2 { font-family: var(--font-display); font-size: clamp(30px, 6vw, 60px); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.stub p { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
/* ===================== Motion: snappy load-in + scroll reveal ===================== */
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rise { opacity: 0; animation: riseIn 0.6s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
.rise-hold { opacity: 0; } /* holds hero content invisible (no animation property) until JS swaps this for .rise once the cookie box is dismissed */
[data-fr] { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
[data-fr].frin { opacity: 1; transform: none; }
/* ===================== Flip cards ===================== */
.feat-card { position: relative; padding: 0; background: transparent; border: none;
-webkit-backdrop-filter: none; backdrop-filter: none; perspective: 1600px; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .55s ease; }
.fc-inner { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.fc-face { border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: clamp(15px, 1.7vw, 20px);
display: flex; flex-direction: column; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.fc-front { position: relative; height: 100%; }
.fc-back { position: absolute; inset: 0; transform: rotateY(180deg); }
.feat-card.flipped .fc-inner { transform: rotateY(180deg); }
.feat-card.flipped { transform: scale(1.045); z-index: 6; } /* subtle grow */
.feat-card.ph.flipped { opacity: 1; } /* full-strength once opened */
.fc-front .fc-foot { margin-top: auto; display: flex; justify-content: flex-end; }
.fc-back .fc-foot { margin-top: auto; display: flex; justify-content: flex-end; }
.fc-more, .fc-signup { --hover: var(--acc-feat); font-size: 13px; background: none; border: none; padding: 0; cursor: pointer; }
.fc-more svg, .fc-signup svg { width: 14px; height: 14px; }
.fc-x { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: none; background: transparent;
color: var(--faint); cursor: pointer; display: grid; place-content: center; border-radius: 50%; transition: color .14s; z-index: 2; }
.fc-x:hover { color: var(--ink); }
.fc-x svg { width: 18px; height: 18px; }
.fc-back .feat-eyebrow { padding-right: 34px; }
.fc-back h3 { margin-top: 12px; }
.fc-list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.fc-list li { position: relative; padding-left: 18px; font-size: clamp(12.5px, 1.5vw, 14px); line-height: 1.5; color: var(--dim); }
.fc-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--pos); }
/* ===================== Footer ===================== */
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--line); background: var(--bg-2); }
.site-footer-inner { max-width: 1320px; margin: 0 auto; padding: 22px clamp(20px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer-copy { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--faint); }
.site-footer-links { display: flex; align-items: center; gap: 20px; }
.site-footer-links button.text-link { border: none; background: none; padding: 0; font: inherit; cursor: pointer; }
/* ===================== Cookie consent (bottom lightbox) ===================== */
body.cc-open { overflow: hidden; }
.cc-lightbox { position: fixed; inset: 0; z-index: 260; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s; }
.cc-lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
/* fixed dark scrim (not theme-tinted) so the white headline always has strong contrast, regardless of light/dark mode */
.cc-backdrop { position: absolute; inset: 0; background: rgba(14,15,18,0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cc-stack { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
padding: clamp(20px, 4vw, 40px) clamp(20px, 4vw, 40px) clamp(24px, 4vw, 44px) clamp(24px, 5vw, 64px); }
.cc-row { display: flex; flex-direction: row; align-items: center; gap: clamp(22px, 3.2vw, 40px); }
.cc-headline { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; /* logo on top, text below */
font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.14; color: #fff; }
.cc-logo { width: 1.3em; height: 1.3em; border-radius: 50%; background: #fff; display: grid; place-items: center; flex-shrink: 0; }
.cc-logo svg { width: 60%; height: 60%; display: block; }
.cc-logo-inline { display: none; } /* desktop uses the top logo; the inline one is mobile-only (right of "Yes, we use", flickers last) */
/* words flow in a wrap row; explicit break elements control the line grouping (3 lines desktop, 2 lines mobile) */
.cc-headline-text { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: .32em; row-gap: 0; }
.cc-brk { flex-basis: 100%; height: 0; } /* forces the words after it onto a new line; .cc-brk-d only breaks on desktop */
/* logo, then each word (Yes / we / use / cookies) flicker on one after another (neon-sign style); staggered via inline --fd, replays on every reopen */
.cc-logo, .cc-fl { opacity: 0; }
.cc-lightbox.open .cc-logo, .cc-lightbox.open .cc-fl { animation: ccFlicker .45s ease var(--fd, 0s) forwards; }
@keyframes ccFlicker { 0%{opacity:0} 8%{opacity:.9} 14%{opacity:.15} 22%{opacity:1} 28%{opacity:.4} 36%{opacity:1} 100%{opacity:1} }
.cc-panel { width: min(460px, 100%); flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; padding: clamp(22px, 3vw, 28px);
-webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
box-shadow: 0 30px 80px rgba(0,0,0,0.28); transform: translateY(16px); opacity: 0; transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
.cc-lightbox.open .cc-panel { transform: none; opacity: 1; }
.cc-text { font-size: 13.5px; line-height: 1.6; color: var(--dim); }
.cc-link { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.cc-actions { margin-top: 18px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cc-actions .btn { height: 44px; padding: 0 26px; }
.cc-decline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--dim); background: none; border: none; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color .14s; }
.cc-decline:hover { color: var(--ink); }
@media (max-width: 640px) {
.cc-stack { padding: 0; align-items: stretch; } /* panel flush with the bottom edge */
.cc-row { flex-direction: column-reverse; align-items: stretch; gap: clamp(16px, 3vh, 26px); } /* headline above, box below */
.cc-headline { display: flex; padding: 0 22px; font-size: clamp(26px, 7.5vw, 36px); } /* shown on mobile, larger, side padding */
.cc-headline-text { align-items: center; } /* logo lines up centered with the "Yes, we use" row */
.cc-logo-top { display: none; } /* top logo is desktop-only */
.cc-logo-inline { display: grid; margin-left: .12em; transform: translate(.14em, .72em); } /* mobile logo: right of "Yes, we use", nudged down between the two lines + slightly right; flickers last */
.cc-brk-d { display: none; } /* two lines on mobile: "Yes, we use" [logo] / "cookies!" */
.cc-panel { width: 100%; height: 40vh; border-radius: 0; border: none;
display: flex; flex-direction: column; justify-content: center; } /* fills the bottom 40%, no rounded corners */
.cc-text { font-size: 18px; line-height: 1.6; } /* enlarge so the box isn't so empty */
.cc-actions { margin-top: 26px; gap: 20px; }
.cc-actions .btn { height: 54px; padding: 0 34px; font-size: 14.5px; }
.cc-decline { font-size: 14.5px; }
}
/* ===================== Responsive ===================== */
@media (max-width: 1024px) {
.hero-screen { min-height: 0; } /* stacked hero shouldn't force a full screen */
.hero { grid-template-columns: 1fr; gap: 32px; padding: clamp(28px, 5vh, 56px) clamp(20px, 4vw, 48px) 0; align-items: stretch; }
.hero-copy { justify-content: flex-start; }
.hero-visual { margin-top: 6px; align-self: stretch; }
.hero-chart { margin-right: clamp(-44px, -5vw, -14px); height: clamp(220px, 34vh, 340px); } /* small right bleed, no vw-blowup */
.car-track .feat-card { flex-basis: 68%; }
}
/* Tablet: desktop menu bar, but the Win Rate widget is hidden */
@media (min-width: 641px) and (max-width: 1024px) {
.fw-gauge { display: none; }
}
/* Tablet (stacked hero): re-place the 3 widgets over the curve band */
@media (min-width: 641px) and (max-width: 1024px) {
.fw-health { top: 4%; bottom: auto; left: 1%; right: auto; }
.fw-donut { top: -26%; bottom: auto; left: auto; right: 1%; } /* ~30% higher than the other top widget */
.fw-kpi { top: auto; bottom: 10%; left: 35%; right: auto; }
}
/* Tablet: purple migration nudge hidden (same reasoning as mobile — no reserved space) */
@media (min-width: 641px) and (max-width: 1024px) {
.sync-nudge { display: none; }
}
/* Mobile: burger menu; only the PnL curve (no widgets) */
body.menu-open { overflow: hidden; }
@media (max-width: 640px) {
.main-nav, .header-right { display: none; }
.burger { display: none; } /* hidden at the top */
header.scrolled .burger { display: grid; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
header.scrolled .brand-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.float-widget { display: none; } /* only the curve renders */
.hero h1 { font-size: clamp(38px, 13vw, 68px); line-height: 1.0; }
.hero-eyebrow { font-size: 11px; letter-spacing: 0.16em; } /* the longer "journal and trade copier" string would otherwise overflow ~375px phones */
.kh-row { display: block; } /* too narrow to sit beside the word — stack it */
.kh-slot { width: 10em; } /* full spin width again (JS leaves it alone here) */
.kh-second { margin-top: clamp(6px, 1vh, 12px); }
/* shrink the hero section's vertical footprint ~15% and pull everything up */
.hero { padding-top: clamp(24px, 4.25vh, 48px); gap: 27px; }
.hero-visual { margin-top: 5px; }
.hero-chart { height: clamp(187px, 28.9vh, 289px); }
/* push the copy block (eyebrow, headline + word carousel, sub-text, CTA buttons) ~10% further down within the hero */
.hero-copy { margin-top: clamp(16px, 8vh, 56px); }
.car-track .feat-card { flex-basis: 84%; }
/* bottom sheet, matching the cookie-consent mobile treatment (dynamic height capped at 90dvh — always ~10% free above) */
.ai-lightbox { padding: 0; align-items: flex-end; }
.ai-lb-backdrop { background: rgba(14,15,18,0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* exactly like .cc-backdrop */
.ai-lb-panel { width: 100%; max-width: none; height: auto; max-height: 90dvh; border-radius: 0; border: none; box-shadow: none;
background: var(--surface-2); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); /* exactly like .cc-panel */
display: flex; flex-direction: column;
padding-bottom: max(30px, calc(env(safe-area-inset-bottom, 0px) + 24px));
overflow-y: auto; -webkit-overflow-scrolling: touch; } /* dynamic up to 90dvh, then internally scrollable instead of growing further */
.ai-lb-panel > * { flex-shrink: 0; }
.ai-lb-head { flex-direction: column; text-align: center; } /* mobile only: logo centered, wordmark hidden below */
.ai-lb-badge { width: 64px; height: 64px; }
.ai-lb-title { display: none; }
/* Stay Synced: centered, single-line heading (matches the Boutique AI teaser layout); lightbox as bottom sheet like the AI lightbox */
.sync-top { flex-direction: column; align-items: center; gap: 6px; }
.sync-h { text-align: center; margin-top: 0; font-size: clamp(30px, 8.4vw, 40px); white-space: nowrap; }
.sync-l1 { display: inline; } /* "Stay Synced" on one line, centered */
.sync-right { flex: 0 0 auto; text-align: center; min-width: 0; max-width: 100%; } /* desktop's flex:1 1 300px basis becomes a forced HEIGHT once the row flips to a column — reset it */
.sync-sub { margin-top: 12px; }
.sync-logos { justify-content: center; }
.sync-nudge { display: none; } /* purple migration nudge hidden on mobile — no reserved space, section ends shortly below "more" */
.sync-more { margin-top: clamp(18px, 3vh, 30px); } /* match the Boutique AI section's content-to-"more" gap exactly */
.sync-lightbox { padding: 0; align-items: flex-end; }
.sync-lb-backdrop { background: rgba(14,15,18,0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.sync-lb-panel { width: 100%; max-width: none; height: auto; max-height: 90dvh; border-radius: 0; border: none; box-shadow: none; padding-bottom: 0; }
.sync-mig { border-radius: 0; margin-bottom: 0; } /* panel already has padding-bottom:0 — no negative margin needed, keeps the bar inside the viewport */
.sync-mig.show { padding-bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 14px)); } /* clear the home indicator */
/* Copier lightbox as a bottom sheet, like the AI / Sync ones */
.cp-lightbox { padding: 0; align-items: flex-end; }
.cp-lb-backdrop { background: rgba(14,15,18,0.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cp-lb-panel { width: 100%; max-width: none; height: auto; max-height: 90dvh; border-radius: 0; border: none; box-shadow: none;
padding-bottom: max(30px, calc(env(safe-area-inset-bottom, 0px) + 24px)); }
.cp-lb-head { flex-direction: column; text-align: center; }
.cp-lb-badge { width: 76px; }
}
/* ===================== Wide screens: the hero stops being a 1320px island =====================
Below 1441px nothing here applies and the layout is byte-for-byte what it was. Above it the
centered cap is dropped and position is driven by fluid padding instead: both values are
exactly 48px at 1440px (matching today) and reach 20vw / 9.6vw at 2560px, then hold. The grid
proportions and every widget offset are untouched, so all internal spacing relationships are
preserved — they simply map onto a wider block. */
@media (min-width: 1441px) {
.hero { --hero-pad-r: min(calc(48px + (100vw - 1440px) * 0.176), 9.6vw);
max-width: none;
padding-left: min(calc(48px + (100vw - 1440px) * 0.414), 20vw);
padding-right: var(--hero-pad-r); }
/* .hero-chart's margin-right: calc(68% - 50vw) resolves against .hero-visual — once the visual
widens that formula bleeds ~270px instead of the 98px it does today. Reproduce the measured
98px past the VIEWPORT edge: a negative margin only clears the container, so the right
padding has to be added back or the curve stops ~150px short. */
.hero-chart { margin-right: calc(-98px - var(--hero-pad-r)); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.rise, .rise-hold { animation: none; opacity: 1; } /* reduced motion: show hero content immediately, don't wait on the cookie box either */
.cc-logo, .cc-fl { animation: none; opacity: 1; } /* no flicker under reduced motion — show logo + text straight away */
[data-fr] { opacity: 1; transform: none; transition: none; }
.tape-track { animation: none; }
.hero-eq-dot { animation: none; }
.sync-synced-fill { animation: none; clip-path: circle(120% at 50% 50%); } /* Synced shown fully filled immediately */
.sync-logo, .sync-manual { animation: none; opacity: 1; }
.sync-mig { transition: none; }
/* Copier mark: show its end state immediately, no choreography */
.cp-mark .disc-g, .cp-mark .copy, .cp-mark .bolt-flick, .cp-mark .bolt-draw { animation: none; }
.cp-mark .disc-g { opacity: 1; }
.cp-mark .bolt-flick { opacity: 0; }
.cp-mark .bolt-draw { stroke-dashoffset: 0; opacity: 1; }
.cp-mark .c1 { opacity: .45; } .cp-mark .c2 { opacity: .28; } .cp-mark .c3 { opacity: .16; }
.cp-ms { font-style: italic; color: var(--ink); } /* already leaning — no snap to miss */
.cp-wire.live, .cp-dot.ok { animation: none; } /* board holds still; the route still reads as live via colour */
.cp-board .cp-node { animation: none; opacity: 1; transform: none; }
.cp-board .cp-wire-gear { animation: none; opacity: 1; transform: translate(-50%, -50%); } /* keep the centring transform */
.cp-board .cp-wire-g { animation: none; clip-path: none; } /* no build-up — the route is simply there */
* { transition: none !important; }
}