/* Marketing core — tokens, base, chrome (nav, sheet, footer, modal) shared by every marketing page */
:root {
    --bg: #16332c;
    --bg-2: #1c3d35;
    --surface: rgba(255, 255, 255, 0.035);
    --surface-2: rgba(255, 255, 255, 0.06);
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.14);
    --text: #eef5f2;
    --text-2: #b4c4be;
    --text-3: #7d918a;
    --brand: #295c51;
    --brand-2: #3a7d6e;
    --mint: #3ddc97;
    --mint-2: #8ef0c4;
    --glow: rgba(61, 220, 151, 0.35);
    --max: 76rem;
    --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* Safari 26 paints the tab from background-color. The page color is the dark green. */
/* iOS Safari otherwise inflates text in wide boxes (e.g. the hero alert's max-content marquee track) */
html { scroll-behavior: smooth; background-color: #050b09; accent-color: var(--mint); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--text);
    background-color: #050b09;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    font-feature-settings: "ss01", "cv11";
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* html2canvas finds the text baseline with an inline 1px gif appended to <body>; a block img shifts every captured glyph down */
body > div > img[src^="data:image/gif"] { display: inline; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(61, 220, 151, 0.3); color: #fff; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) { .wrap { padding: 0 2rem; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Safari 26 samples a full-width fixed strip at the top. Same color as the page, so it stays invisible.
   It has to sit above the grain, or the grey noise becomes the tab color once the preloader leaves.
   Sliding it up on scroll keeps the tab color. Opacity, visibility, and display do not. */
.safari-tint {
    position: fixed; top: 0; left: 0; z-index: 210; width: 100%; height: 6px;
    background-color: #050b09; pointer-events: none;
    animation-name: safari-tint-hide;
    animation-timeline: scroll();
    animation-fill-mode: both;
    animation-range-start: 8px;
    animation-range-end: 9px;
    animation-duration: .1s;
}
@keyframes safari-tint-hide {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100px); }
}

/* Film grain keeps big dark gradients from banding.
   A tiled image, not a live filter, and on a pseudo so Safari's tab sampler does not read it. */
body::after {
    content: "";
    position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .35;
    background-image: url("grain.png?v=2");
    background-size: 160px 160px;
}

/* ---------------- Buttons ---------------- */
.btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600; font-size: .92rem; letter-spacing: -.01em;
    padding: .8rem 1.35rem; border-radius: 9999px; border: 0; cursor: pointer; white-space: nowrap;
    transition: transform .2s var(--ease), box-shadow .25s, background .25s, color .25s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.btn:hover svg.arrow { transform: translateX(3px); }
.btn-sm { padding: .55rem 1rem; font-size: .84rem; }
.btn-lg { padding: 1rem 1.6rem; font-size: 1rem; }
.btn-mint {
    color: #04150e;
    background: linear-gradient(180deg, #6ff0b5, var(--mint));
    box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 10px 30px -8px var(--glow), 0 0 0 0 var(--glow);
}
.btn-mint:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 16px 40px -8px rgba(61,220,151,.55), 0 0 0 6px rgba(61,220,151,.12); }
.btn-glass { color: var(--text); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255,255,255,.1); }
.btn-white { color: #062019; background: #fff; }
.btn-white:hover { box-shadow: 0 12px 30px -10px rgba(255,255,255,.35); }
.btn-block { width: 100%; }
.gsap [data-magnetic] { transition-property: box-shadow, background, color; }

/* ---------------- Nav (floating island) ---------------- */
.nav-shell { position: fixed; inset: .85rem 0 auto; z-index: 80; display: flex; justify-content: center; padding: 0 .75rem; pointer-events: none; }
.nav {
    pointer-events: auto; position: relative;
    width: 100%; max-width: 72rem;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
    padding: .32rem .32rem .32rem 1.2rem; border-radius: 9999px;
    background: rgba(7, 16, 14, .78);
    -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 16px 40px -20px rgba(0,0,0,.7);
    transition: max-width .45s var(--ease), background .3s, box-shadow .3s;
}
.nav.is-scrolled {
    max-width: 66rem; background: rgba(6, 13, 11, .96);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 32px -18px rgba(0,0,0,.75);
}
.nav-progress { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 0; height: 1px; overflow: hidden; border-radius: 9999px; }
.nav-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, transparent, var(--mint), transparent); }
/* Larger mark without a taller bar: negative margins keep its layout height at 1.5rem, the rest sits in the nav's padding */
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 2.3rem; width: auto; margin: -.4rem 0; }
.nav-links { display: none; align-items: center; flex-wrap: nowrap; gap: .05rem; }
.nav-link, .nav-trigger, .nav-login, .nav-currency-btn, .nav .btn-sm {
    height: 2.3rem; box-sizing: border-box;
}
.nav-link, .nav-trigger {
    display: inline-flex; align-items: center; gap: .28rem; white-space: nowrap;
    font-size: .875rem; font-weight: 500; letter-spacing: -.015em; color: #e7f2ec;
    padding: 0 .75rem; border-radius: 9999px; background: none; border: 0; cursor: pointer;
    transition: color .2s, background .2s;
}
.nav-link:hover, .nav-trigger:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.open .nav-trigger { color: #fff; background: rgba(255,255,255,.08); box-shadow: none; }
.nav-trigger svg { width: .7rem; height: .7rem; opacity: .7; transition: transform .25s var(--ease), opacity .2s; }
.nav-item.open .nav-trigger svg { opacity: 1; }
.nav-item { position: relative; }
.nav-item.open .nav-trigger svg { transform: rotate(180deg); }
.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: .15rem; position: relative; z-index: 2; }
.nav-logo { position: relative; z-index: 2; }
.nav-currency { position: relative; flex-shrink: 0; }
.nav-currency-btn {
    display: inline-flex; align-items: center; gap: .32rem; white-space: nowrap;
    padding: 0 .7rem 0 .45rem; border-radius: 9999px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: .875rem; font-weight: 600; color: #e7f2ec;
    transition: background .2s;
}
.nav-currency-btn img { width: 1rem; height: 1rem; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.nav-currency-symbol { line-height: 1; letter-spacing: -.02em; }
.nav-currency-btn:hover,
.nav-currency-btn[aria-expanded="true"] { background: rgba(255,255,255,.06); }
.nav-currency-btn[aria-disabled="true"] { cursor: default; }
.nav-currency-menu {
    min-width: 14.5rem; padding: .35rem; border-radius: 1rem;
    background: rgba(8, 18, 15, .96);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14), 0 24px 50px -24px rgba(0,0,0,.88);
}
.nav-currency-menu.hidden { display: none; }
.nav-currency-option {
    width: 100%; display: flex; align-items: center; gap: .7rem;
    padding: .6rem .7rem; border: 0; border-radius: .75rem;
    background: transparent; color: #fff; cursor: pointer; text-align: left;
}
.nav-currency-option:hover { background: rgba(61,220,151,.08); }
.nav-currency-option img { width: 1.25rem; height: 1.25rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.nav-currency-option b { display: block; font-size: .84rem; font-weight: 650; letter-spacing: -.01em; }
.nav-currency-option small { display: block; margin-top: .08rem; font-size: .72rem; color: var(--text-3); }
#geo-currency-confirm-modal.geo-confirm-open { align-items: center; justify-content: center; padding: 1rem; }
#geo-currency-confirm-modal .geo-confirm-backdrop { position: absolute; inset: 0; }
#geo-currency-confirm-modal .geo-currency-confirm-card { position: relative; width: min(760px, 100%); }
#geo-currency-confirm-modal .geo-currency-confirm-card > button { position: absolute; top: 1rem; right: 1rem; z-index: 20; }
#geo-currency-confirm-modal .geo-currency-confirm-card > .relative { position: relative; z-index: 10; text-align: center; }
.nav-login { display: inline-flex; align-items: center; font-size: .875rem; font-weight: 500; letter-spacing: -.015em; color: #e7f2ec; padding: 0 .75rem; white-space: nowrap; transition: color .2s; }
.nav-login:hover { color: #fff; }
.nav .btn-sm { height: 2.3rem; padding: 0 1rem; }
.nav-burger { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 9999px; background: transparent; border: 0; cursor: pointer; color: #e7f2ec; }
.nav-burger svg { width: 1.1rem; height: 1.1rem; }
@media (min-width: 960px) {
    .nav-links { display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
    .nav-burger { display: none; }
}
@media (min-width: 960px) and (max-width: 1180px) { .nav-link, .nav-trigger { padding: 0 .5rem; } .nav-login { padding: 0 .55rem; } }
@media (max-width: 560px) { .nav-login { display: none; } }

.mega {
    position: absolute; top: calc(100% + .75rem); left: 50%;
    width: min(40rem, calc(100vw - 2rem));
    transform: translate(-50%, 8px) scale(.98); transform-origin: 50% 0;
    opacity: 0; visibility: hidden; pointer-events: none;
    padding: .4rem; border-radius: 1.35rem;
    background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 2.2rem), rgba(8, 18, 15, .96);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1px 0 rgba(255,255,255,.14), 0 28px 70px -28px rgba(0,0,0,.88);
    transition: opacity .2s, transform .3s var(--ease), visibility .2s;
}
.mega::before { content: ""; position: absolute; left: 10%; right: 10%; top: -.75rem; height: .75rem; }
.nav-item.open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.mega-label { margin: .45rem .75rem .2rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
@media (min-width: 960px) {
    .nav-item:has(.mega.is-solutions) { position: static; }
}
.mega.is-product { width: min(46rem, calc(100vw - 2rem)); }
.mega.is-solutions { width: min(52rem, calc(100vw - 2rem)); }
.mega.is-join { width: min(28rem, calc(100vw - 2rem)); }
.mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem; }
.mega-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-grid.is-stack { grid-template-columns: minmax(0, 1fr); }
.mega a { display: flex; gap: .7rem; align-items: flex-start; min-width: 0; padding: .7rem .75rem; border-radius: .95rem; box-shadow: inset 0 0 0 1px transparent; transition: background .2s, box-shadow .2s; }
.mega a > span:last-child { min-width: 0; }
.mega-grid.three a { align-items: flex-start; padding: .6rem .65rem; }
.mega-grid.three .mega-ico { width: 1.9rem; height: 1.9rem; margin-top: 0; border-radius: .6rem; font-size: .9rem; }
.mega a:hover { background: rgba(61,220,151,.07); box-shadow: inset 0 0 0 1px rgba(61,220,151,.3); }
.mega a b { display: block; font-size: .86rem; font-weight: 650; letter-spacing: -.015em; color: #fff; }
.mega a small { display: block; margin-top: .18rem; font-size: .74rem; font-weight: 450; color: var(--text-3); line-height: 1.4; }
.mega-ico { flex-shrink: 0; width: 2.15rem; height: 2.15rem; margin-top: .05rem; border-radius: .7rem; display: grid; place-items: center; background: rgba(255,255,255,.04); color: var(--mint-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); font-size: .95rem; transition: background .2s, box-shadow .2s; }
.mega a:hover .mega-ico { background: rgba(61,220,151,.16); box-shadow: inset 0 0 0 1px rgba(61,220,151,.32); }
.mega-ico svg { width: 1.05rem; height: 1.05rem; }
.mega-foot { margin: .2rem .15rem .15rem; padding: .7rem .85rem; border-radius: .95rem; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .8rem; color: var(--text-2); }
.mega-foot a { flex-shrink: 0; padding: .4rem .75rem; border-radius: 999px; color: #04150e; font-weight: 700; background: var(--mint); box-shadow: none; }
.mega-foot a:hover { background: #fff; box-shadow: none; }
.mega-integ { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .15rem .2rem .05rem; padding: .35rem .45rem .45rem; }
.mega-integ > span { margin-right: .2rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
.mega-integ a { display: inline-flex; align-items: center; padding: .32rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mega-integ a:hover { background: rgba(61,220,151,.1); box-shadow: inset 0 0 0 1px rgba(61,220,151,.32); }
.mega a.is-role { padding-left: .95rem; }

/* Mobile sheet */
.sheet { position: fixed; inset: 0; z-index: 90; display: none; }
.sheet.open { display: block; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .25s; }
.sheet-panel {
    position: absolute; left: .75rem; right: .75rem; top: .75rem; max-height: calc(100dvh - 1.5rem); overflow-y: auto;
    padding: 1rem; border-radius: 1.75rem; background: #0b1814; box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -20px #000;
    animation: sheetIn .35s var(--ease);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: .25rem .25rem 1rem; }
.sheet-head img { height: 2.1rem; margin: -.3rem 0; }
.sheet-group { padding: .75rem 0; border-top: 1px solid var(--line); }
.sheet-group h5 { margin: 0 .5rem .5rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.sheet-group a { display: flex; align-items: center; gap: .6rem; padding: .7rem .5rem; border-radius: .9rem; font-weight: 500; font-size: .95rem; }
.sheet-group a:active { background: rgba(255,255,255,.05); }
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; }
.sheet-cta { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
@keyframes fade { from { opacity: 0; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(-12px) scale(.98); } }
.hero-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }

/* ---------------- Section scaffolding ---------------- */
.section { position: relative; padding: 7rem 0; }
@media (min-width: 768px) { .section { padding: 9rem 0; } }
.kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.kicker::before { content: ""; width: 1.25rem; height: 1px; background: currentColor; opacity: .6; }
.center .kicker::after { content: ""; width: 1.25rem; height: 1px; background: currentColor; opacity: .6; }
/* Fade via mask (not background-clip:text) so split, animated words always paint — see .hero h1 */
.h2 {
    margin: calc(1rem - .08em) 0 -.18em; padding: .08em 0 .18em; max-width: 18ch;
    font-size: clamp(2.1rem, 4.8vw, 3.8rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.02; color: #fff;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, .62));
    mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, .62));
}
.h2 em { font-style: normal; color: var(--mint); }
/* Forced line break that survives data-split (a <br> would be wrapped into a word unit) */
.h2 .line { display: block; }
.h2.is-wide { max-width: 28ch; }
.lede { margin-top: 1.2rem; max-width: 36rem; font-size: 1.08rem; line-height: 1.7; color: var(--text-2); }
/* Phones: a bigger title over a quieter intro, so the paragraph doesn't outweigh the heading */
@media (max-width: 640px) {
    /* Capped by width so the longest titles ("Simple plans. Meta’s fees at cost.") still fit at 360px */
    .h2 { font-size: min(2.3rem, 9.8vw); }
    .lede { margin-top: 1rem; font-size: .98rem; line-height: 1.6; }
}
.center { text-align: center; }
.center .h2, .center .lede { margin-left: auto; margin-right: auto; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }

.seg { position: relative; display: inline-flex; padding: .3rem; border-radius: 9999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { position: relative; z-index: 1; padding: .5rem 1rem; border: 0; border-radius: 9999px; background: none; cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--text-3); transition: color .25s; display: inline-flex; align-items: center; gap: .4rem; }
.seg button.on { color: #04150e; }
.seg-pill { position: absolute; z-index: 0; top: .3rem; bottom: .3rem; border-radius: 9999px; background: var(--mint); transition: left .35s var(--ease), width .35s var(--ease); }
.save { font-size: .64rem; font-weight: 700; padding: .12rem .4rem; border-radius: 9999px; background: rgba(61,220,151,.18); color: var(--mint); }
.seg button.on .save { background: rgba(4,21,14,.15); color: #04150e; }

/* ---------------- Closing (green chrome) ---------------- */
.closing { position: relative; isolation: isolate; overflow: hidden; margin: 0 .625rem; border-radius: 2.5rem 2.5rem 0 0; background: var(--brand); }
@media (min-width: 768px) { .closing { border-radius: 3rem 3rem 0 0; } }
.closing::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -20rem; width: 70rem; height: 40rem; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(61,220,151,.45), transparent); }
.closing::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent 70%); }
.cta { padding: 7rem 0 5.5rem; text-align: center; }
@media (min-width: 768px) { .cta { padding: 9rem 0 7rem; } }
.cta h2 { max-width: 15ch; margin: 0 auto; font-size: clamp(2.4rem, 6.2vw, 5rem); font-weight: 800; letter-spacing: -.055em; line-height: .98; color: #fff; }
.cta p { margin: 1.4rem auto 0; max-width: 34rem; font-size: 1.08rem; line-height: 1.6; color: rgba(255,255,255,.78); }
.cta .hero-ctas { margin-top: 2.4rem; }
.foot { padding: 3.5rem 0 2rem; border-top: 1px solid rgba(255,255,255,.12); }
.foot-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.6fr repeat(4, 1fr); } }
.foot-brand { grid-column: 1 / -1; }
@media (min-width: 860px) { .foot-brand { grid-column: auto; } }
.foot-brand img { height: 1.7rem; width: auto; }
.foot-brand p { margin-top: 1rem; max-width: 22rem; font-size: .86rem; line-height: 1.6; color: rgba(255,255,255,.72); }
.foot-badges { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.foot-badges span { padding: .3rem .65rem; border-radius: 9999px; font-size: .7rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.foot h4 { margin-bottom: .9rem; font-size: .8rem; font-weight: 600; color: #fff; }
.foot a { display: block; padding: .28rem 0; font-size: .86rem; color: rgba(255,255,255,.68); transition: color .15s; }
.foot a:hover { color: #fff; }
.foot-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; font-size: .76rem; color: rgba(255,255,255,.55); }
.foot-wordmark {
    margin-top: 2.5rem; padding: .1em 0; font-size: clamp(3rem, 15vw, 12rem); font-weight: 800; letter-spacing: -.07em; line-height: .8; text-align: center; user-select: none;
    color: rgba(255, 255, 255, .14);
    -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 85%); mask-image: linear-gradient(180deg, #000 10%, transparent 85%);
}

/* ---------------- Demo modal ---------------- */
.modal { position: fixed; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal.open { display: flex; }
.modal-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade .25s; }
.modal-card { position: relative; width: 100%; max-width: 56rem; max-height: calc(100dvh - 2rem); overflow-y: auto; display: grid; border-radius: 2rem; background: #0b1814; box-shadow: inset 0 0 0 1px var(--line-2), 0 60px 120px -30px #000; animation: sheetIn .4s var(--ease); }
@media (min-width: 820px) { .modal-card { grid-template-columns: 1fr 1.1fr; } }
.modal-side { position: relative; overflow: hidden; padding: 2.25rem; background: radial-gradient(100% 80% at 0% 0%, rgba(61,220,151,.25), transparent 60%), var(--brand); }
.modal-side h3 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.modal-side p { margin-top: .8rem; font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.8); }
.modal-side ul { margin-top: 1.5rem; display: grid; gap: .7rem; }
.modal-side li { display: flex; gap: .6rem; font-size: .88rem; color: rgba(255,255,255,.9); }
.modal-side li svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; margin-top: .1rem; color: var(--mint-2); }
.modal-side blockquote { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .86rem; line-height: 1.6; font-style: italic; color: rgba(255,255,255,.85); }
.modal-side cite { display: block; margin-top: .6rem; font-style: normal; font-size: .78rem; font-weight: 600; color: #fff; }
@media (max-width: 819px) { .modal-side ul, .modal-side blockquote { display: none; } .modal-side { padding: 1.75rem; } }
.modal-form { padding: 2.25rem; }
@media (max-width: 819px) { .modal-form { padding: 1.75rem; } }
.modal-form h4 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.modal-form > p { margin-top: .35rem; font-size: .85rem; line-height: 1.55; color: var(--text-3); }
.field { margin-top: 1rem; }
.field label { display: block; margin-bottom: .4rem; font-size: .8rem; font-weight: 600; color: var(--text-2); }
.field input, .field select {
    width: 100%; padding: .8rem 1rem; border-radius: .9rem; border: 0; outline: 0;
    font: inherit; font-size: 16px; color: var(--text);
    background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line-2);
    transition: box-shadow .2s, background .2s;
    -webkit-appearance: none; appearance: none;
}
@media (min-width: 768px) { .field input, .field select { font-size: .92rem; } }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237d918a'%3E%3Cpath d='M5.3 7.3a1 1 0 011.4 0L10 10.6l3.3-3.3a1 1 0 111.4 1.4l-4 4a1 1 0 01-1.4 0l-4-4a1 1 0 010-1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1rem; padding-right: 2.4rem; }
.field select option { background: #0b1814; color: var(--text); }
.field input::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--mint), 0 0 0 4px rgba(61,220,151,.12); }
.phone-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: .5rem; }
.modal-form .btn { margin-top: 1.5rem; }
.form-msg { margin-top: .9rem; font-size: .82rem; min-height: 1.2rem; color: #fca5a5; }
.modal-x { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 2.3rem; height: 2.3rem; border-radius: 9999px; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; transition: background .2s; }
.modal-x:hover { background: rgba(255,255,255,.16); }
.modal-x svg { width: 1rem; height: 1rem; }
.success { display: none; padding: 3rem 2rem; text-align: center; grid-column: 1 / -1; }
.success i { width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem; border-radius: 9999px; display: grid; place-items: center; background: var(--mint); color: #04150e; box-shadow: 0 0 0 10px rgba(61,220,151,.12); }
.success i svg { width: 1.5rem; height: 1.5rem; }
.success h4 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; }
.success p { margin: .6rem auto 1.5rem; max-width: 26rem; font-size: .92rem; line-height: 1.6; color: var(--text-2); }
.modal-card.is-done .modal-side, .modal-card.is-done .modal-form { display: none; }
.modal-card.is-done .success { display: block; }

/* ---------------- Mobile sticky CTA ---------------- */
.mobile-cta { position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 75; display: none; grid-template-columns: 1fr 1.4fr; gap: .5rem; padding: .45rem; border-radius: 9999px; background: rgba(10,22,18,.85); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -12px #000; transform: translateY(160%); transition: transform .45s var(--ease); }
.mobile-cta .btn { padding: .75rem 1rem; }
.mobile-cta.show { transform: none; }
@media (max-width: 767px) { .mobile-cta { display: grid; } }

/* ---------------- Accessibility & perf ---------------- */
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .seg button:focus-visible, .nav-trigger:focus-visible, .nav-link:focus-visible { outline-offset: 3px; border-radius: 9999px; }
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }

/* Nav tucks away while reading, returns on scroll up */
.nav-shell { transition: transform .45s var(--ease); }
.nav-shell.is-hidden { transform: translateY(calc(-100% - 1.5rem)); }

/* ---------------- Shared keyframes ---------------- */
@keyframes blink { 50% { opacity: .3; } }

/* ---------------- Motion ----------------
   Markup API (see public/js/marketing/motion.js):
   data-reveal="up|fade|scale|left|right|blur"  data-delay=".1"
   data-stagger[=".selector"]   data-split   data-scrub-words
   data-parallax="-.2"          data-count="80" data-suffix="%"
   data-magnetic
   `.reveal` is a legacy alias for data-reveal="up". Hidden states only apply
   once JS has flagged <html class="js">, so content is never lost without JS. */
.js .reveal, .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in-view, .js [data-reveal].in-view { opacity: 1; transform: none; }
.gsap .reveal, .gsap [data-reveal] { transition: none; }
.js [data-stagger]:not(.in-view) > * { opacity: 0; }
.gsap [data-stagger]:not(.in-view) > * { opacity: 1; }

/*
 * Word mask: clips only vertically (the reveal slides words up from below) and leaves generous side room.
 * Gradient text only paints inside its own box, so .sw-i is padded past descenders and overhanging
 * glyphs (tight line-height / negative tracking); matching negative margins keep the layout unchanged.
 */
.sw { display: inline-block; vertical-align: top; padding: .1em 0 .26em; margin: -.1em 0 -.26em; clip-path: inset(0 -.4em); }
.sw-i { display: inline-block; padding: .1em .14em .26em; margin: -.1em -.14em -.26em; -webkit-background-clip: text; background-clip: text; }
.sw-i.has-clip { color: transparent; }
[data-split-chars] { overflow: hidden; padding-bottom: .14em; }
[data-split-chars] .sw { padding: 0; margin: 0; clip-path: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .js .reveal, .js [data-reveal], .js [data-stagger] > * { opacity: 1; transform: none; filter: none; }
    .marquee-track { animation: none !important; }
}