/* ─── Full-page landing — "cray good" edition ─────────────────────────
   Layered on top of landing-styles.css. Smooth momentum scrolling is
   driven by Lenis + GSAP ScrollTrigger (see landing-fullpage.html); each
   section fills the viewport. A single accent colour (--fp-accent) tweens
   as you scroll; the VLAN section flips the stage dark and cycles colour. */

/* Make the accent an animatable custom property so theme shifts tween. */
@property --fp-accent { syntax: '<color>'; inherits: true; initial-value: #0066ff; }

:root { --fp-ease: cubic-bezier(0.22, 1, 0.36, 1); }

body.fp {
    margin: 0;
    background: #ffffff;
    --fp-accent: #0066ff;
    transition: --fp-accent 0.9s ease;
    scrollbar-width: none;            /* full-bleed look; Lenis owns the motion */
}
body.fp::-webkit-scrollbar { width: 0; height: 0; }

/* Lenis smooth-scroll plumbing (recommended baseline) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ─── Fixed artistic background (recolours with the active section) ──── */
.fp-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(58% 48% at 80% 14%, color-mix(in srgb, var(--fp-accent) 20%, transparent), transparent 72%),
        radial-gradient(54% 54% at 10% 86%, color-mix(in srgb, var(--fp-accent) 14%, transparent), transparent 72%),
        radial-gradient(46% 40% at 52% 50%, color-mix(in srgb, var(--fp-accent) 7%,  transparent), transparent 70%),
        #ffffff;
    transition: background 0.6s linear;
}
/* Faint network dot-grid, fading toward the edges */
.fp-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(12, 22, 44, 0.05) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 28%, transparent 82%);
            mask-image: radial-gradient(circle at 50% 42%, #000 28%, transparent 82%);
}
/* A slow drifting aura of accent light */
.fp-bg::after {
    content: "";
    position: absolute;
    width: 70vmax; height: 70vmax;
    top: -18vmax; right: -16vmax;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--fp-accent) 26%, transparent), transparent 70%);
    filter: blur(28px);
    opacity: 0.65;
    animation: fpDrift 24s ease-in-out infinite alternate;
    transition: background 0.6s linear;
}
@keyframes fpDrift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-12vw, 10vh) scale(1.18); }
    100% { transform: translate(6vw, -6vh) scale(0.96); }
}

/* ─── Scroll progress bar (top) ─────────────────────────────────────── */
.fp-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(var(--p, 0));
    transform-origin: 0 50%;
    z-index: 200;
    background: linear-gradient(90deg,
        var(--fp-accent),
        color-mix(in srgb, var(--fp-accent) 45%, #ffffff));
    box-shadow: 0 0 14px color-mix(in srgb, var(--fp-accent) 70%, transparent);
}

/* ─── Document flows naturally; Lenis drives smooth momentum scroll ──── */
.fp-scroll {
    position: relative;
    z-index: 1;
}

.fp-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 96px 40px 56px;
    box-sizing: border-box;
    background: transparent;           /* let the animated bg show through */
}

.fp-inner { width: 100%; max-width: 1240px; margin: 0 auto; position: relative; z-index: 2; }

/* ─── Nav polish on top of landing-styles ───────────────────────────── */
.lp-nav.scrolled { box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 30px rgba(10,20,40,0.05); }
.fp .lp-btn-accent { background: var(--fp-accent); border-color: var(--fp-accent); transition: background .3s ease, border-color .3s ease, transform .15s var(--fp-ease), box-shadow .3s ease; }
.fp .lp-btn-accent:hover { box-shadow: 0 10px 26px color-mix(in srgb, var(--fp-accent) 45%, transparent); transform: translateY(-1px); }

/* ─── Hero ──────────────────────────────────────────────────────────── */
.fp-hero .fp-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: calc(100vh - 152px);
}
/* Constellation canvas behind the hero copy */
.fp-net {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}
.fp-hero .fp-inner > * { position: relative; z-index: 2; }

.fp-hero-headline {
    font-size: clamp(36px, 5.4vw, 66px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.04;
    margin: 0 0 16px;
    color: #0b1020;
    text-wrap: balance;
}
/* Word-by-word rise (spans injected by JS) */
.fp-word { display: inline-block; }
.fp-word > span {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.5em) rotate(2deg);
    filter: blur(6px);
    transition: opacity 0.7s var(--fp-ease), transform 0.7s var(--fp-ease), filter 0.7s var(--fp-ease);
    transition-delay: calc(var(--wi, 0) * 70ms);
}
.fp-section.in .fp-word > span { opacity: 1; transform: none; filter: none; }
/* The accent word shimmers in the live colour */
.fp-grad {
    background: linear-gradient(100deg,
        var(--fp-accent),
        color-mix(in srgb, var(--fp-accent) 55%, #8b5cf6) 50%,
        var(--fp-accent));
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: fpShine 6s linear infinite;
}
@keyframes fpShine { to { background-position: 220% 0; } }

.fp-hero-sub {
    font-size: clamp(15px, 1.6vw, 20px);
    color: #4a5568;
    margin: 0 0 22px;
}
.fp-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
.fp-hero-note {
    font-size: 13px; color: #6b7280; margin-top: 14px;
    display: inline-flex; align-items: center;
}

/* Browser-framed hero demo fills the remaining height */
.fp-hero-demo {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin-top: 26px;
    min-height: 0;
    display: flex;
    perspective: 1600px;
}
.fp-hero-demo .lp-browser {
    flex: 1; display: flex; flex-direction: column;
    transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
    transition: transform 0.3s var(--fp-ease), box-shadow 0.4s ease;
    box-shadow: 0 30px 80px rgba(10,20,40,0.16), 0 6px 18px rgba(10,20,40,0.06);
    will-change: transform;
}
.fp-hero-demo .lp-demo-frame { flex: 1; min-height: 0; }

/* ─── Feature sections ──────────────────────────────────────────────── */
.fp-feature {
    display: grid;
    grid-template-columns: 1fr 1.18fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
.fp-feature.right { direction: rtl; }
.fp-feature.right > * { direction: ltr; }

.fp-feature-num {
    font: 600 14px 'JetBrains Mono', monospace;
    color: var(--fp-accent);
    letter-spacing: 0.12em;
    margin-bottom: 18px;
    display: inline-flex; align-items: center;
    transition: color 0.5s ease;
}
.fp-feature-title {
    font-size: clamp(30px, 3.6vw, 52px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #0b1020;
    margin: 0 0 18px;
}
.fp-feature-desc {
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.6;
    color: #43506b;
    margin: 0 0 22px;
}
.fp-feature-desc code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88em;
    background: #f0f0f0;
    border-radius: 4px;
    padding: 1px 5px;
    color: #222;
}
.fp-bullets { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; }
.fp-bullets li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: clamp(14px, 1.2vw, 17px); color: #2c3650;
}
.fp-bullets li::before {
    content: ""; width: 21px; height: 21px; flex-shrink: 0; margin-top: 1px;
    border-radius: 50%;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--fp-accent) 20%, transparent), transparent 70%),
        var(--fp-accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' d='M8.5 13.5 4.5 9.5l1-1 3 3 6-6 1 1z'/></svg>") center/13px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='black' d='M8.5 13.5 4.5 9.5l1-1 3 3 6-6 1 1z'/></svg>") center/13px no-repeat;
    transition: background 0.5s ease;
}

/* The big demo box — interactive 3D tilt + accent glow */
.fp-demo-wrap { perspective: 1400px; width: 100%; }
.fp-demo {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: calc(100vh - 200px);
    margin: 0 auto;
    background: #fafafa;
    border: 1px solid color-mix(in srgb, var(--fp-accent) 22%, #e8e8e8);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
    transition: transform 0.35s var(--fp-ease), box-shadow 0.4s ease, border-color 0.5s ease;
    box-shadow:
        0 28px 70px rgba(10,20,40,0.12),
        0 0 0 1px rgba(255,255,255,0.6) inset,
        0 0 60px -28px var(--fp-accent);
    will-change: transform;
}
.fp-demo::after {                       /* cursor-follow sheen */
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 0%),
        color-mix(in srgb, var(--fp-accent) 22%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.fp-demo.hot::after { opacity: 1; }

/* ─── Reveal-on-enter (staggered, with blur) ────────────────────────── */
.fp-anim { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity 0.7s var(--fp-ease), transform 0.7s var(--fp-ease), filter 0.7s var(--fp-ease); }
.fp-section.in .fp-anim { opacity: 1; transform: none; filter: none; }
.fp-hero .fp-inner > .fp-anim:nth-child(1) { transition-delay: 0.05s; }
.fp-hero .fp-inner > .fp-anim:nth-child(2) { transition-delay: 0.13s; }
.fp-hero .fp-inner > .fp-anim:nth-child(3) { transition-delay: 0.21s; }
.fp-hero .fp-inner > .fp-anim:nth-child(4) { transition-delay: 0.29s; }
.fp-hero .fp-inner > .fp-anim:nth-child(5) { transition-delay: 0.40s; }

/* Sub-stagger the feature text contents */
.fp-feature-text > * { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--fp-ease), transform 0.6s var(--fp-ease); }
.fp-section.in .fp-feature-text > * { opacity: 1; transform: none; }
.fp-section.in .fp-feature-text > *:nth-child(1) { transition-delay: 0.10s; }
.fp-section.in .fp-feature-text > *:nth-child(2) { transition-delay: 0.17s; }
.fp-section.in .fp-feature-text > *:nth-child(3) { transition-delay: 0.24s; }
.fp-section.in .fp-feature-text > *:nth-child(4) { transition-delay: 0.31s; }
.fp-section.in .fp-demo-wrap.fp-anim { transition-delay: 0.18s; }

/* CTA contents reveal in sequence */
.fp-cta.in .fp-inner > .fp-anim:nth-child(1) { transition-delay: 0.05s; }
.fp-cta.in .fp-inner > .fp-anim:nth-child(2) { transition-delay: 0.13s; }
.fp-cta.in .fp-inner > .fp-anim:nth-child(3) { transition-delay: 0.21s; }
.fp-cta.in .fp-inner > .fp-anim:nth-child(4) { transition-delay: 0.30s; }

/* ─── VLAN section — the colour-cycling dark showpiece ───────────────── */
@property --vh { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.fp-vlan {
    color: #e8edf1;
    overflow: hidden;
}
.fp-vlan::before {                      /* animated dark colour field */
    content: "";
    position: absolute; inset: 0;
    z-index: 0;
    background:
        radial-gradient(60% 80% at 18% 20%, color-mix(in srgb, var(--fp-accent) 36%, #0b1220), transparent 60%),
        radial-gradient(70% 90% at 86% 88%, color-mix(in srgb, var(--fp-accent) 30%, #0b1220), transparent 62%),
        linear-gradient(135deg, #0a1018, #0e1622 55%, #0a1018);
    transition: background 0.4s linear;
}
.fp-vlan::after {                       /* slow rotating colour conic sweep */
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 0;
    background: conic-gradient(from var(--vh),
        rgba(34,211,238,0.16), rgba(52,211,153,0.16), rgba(139,92,246,0.18), rgba(34,211,238,0.16));
    filter: blur(40px);
    opacity: 0.9;
    animation: fpSpin 16s linear infinite;
}
@keyframes fpSpin { to { --vh: 360deg; } }
.fp-vlan .fp-inner { position: relative; z-index: 2; }
.fp-vlan .fp-feature-title { color: #f4f8fb; }
.fp-vlan .fp-feature-desc { color: #aeb9c6; }
.fp-vlan .fp-bullets li { color: #cdd6e0; }
.fp-vlan .fp-feature-num {
    color: var(--fp-accent);
    text-shadow: 0 0 18px color-mix(in srgb, var(--fp-accent) 70%, transparent);
}
.fp-vlan .fp-demo {
    background: #11161c;
    border-color: color-mix(in srgb, var(--fp-accent) 50%, #232a33);
    box-shadow: 0 30px 90px rgba(0,0,0,0.5), 0 0 90px -30px var(--fp-accent);
}
/* When the VLAN section is active, the chrome cycles colour too */
body.fp.fp-theme-vlan { animation: fpAccentCycle 9s linear infinite; }
@keyframes fpAccentCycle {
    0%   { --fp-accent: #22d3ee; }
    33%  { --fp-accent: #34d399; }
    66%  { --fp-accent: #8b5cf6; }
    100% { --fp-accent: #22d3ee; }
}

/* ─── Final CTA / pricing section ────────────────────────────────────── */
.fp-cta .fp-inner { text-align: center; max-width: 560px; }
.fp-cta .lp-pricing-card {
    border-color: color-mix(in srgb, var(--fp-accent) 26%, #e0e0e0);
    box-shadow: 0 30px 80px rgba(10,20,40,0.10), 0 0 70px -40px var(--fp-accent);
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
}
/* The headline price cycles colour like the VLAN section's dark backdrop */
.fp-cta .lp-pricing-amount {
    background: linear-gradient(100deg,
        #0891b2, #059669 35%, #6366f1 70%, #0891b2);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: fpPriceCycle 6s linear infinite;
}
@keyframes fpPriceCycle { to { background-position: 220% 0; } }
/* Patreon CTA shares the price's colour-shifting gradient */
.fp-cta .lp-pricing-cta {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 56px;
    padding-right: 56px;
    background: linear-gradient(100deg,
        #0891b2, #059669 35%, #6366f1 70%, #0891b2);
    background-size: 220% 100%;
    border-color: transparent;
    color: #fff;
    animation: fpPriceCycle 6s linear infinite;
    transition: transform 0.15s var(--fp-ease), box-shadow 0.3s ease;
}
.fp-cta .lp-pricing-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 12px 28px color-mix(in srgb, #6366f1 40%, transparent);
}
/* Pricing checkmarks: glow + shift colour in step with the price & CTA.
   drop-shadow (not box-shadow) so the glow hugs the tick's shape, not its box. */
.fp-cta .lp-pricing-list li::before {
    background: linear-gradient(100deg,
        #0891b2, #059669 35%, #6366f1 70%, #0891b2);
    background-size: 220% 100%;
    animation: fpPriceCycle 6s linear infinite;
    filter: drop-shadow(0 0 6px color-mix(in srgb, #6366f1 80%, transparent));
}

/* ─── Right-side section dots ────────────────────────────────────────── */
.fp-dots {
    position: fixed;
    right: 22px; top: 50%; transform: translateY(-50%);
    z-index: 90;
    display: flex; flex-direction: column; gap: 14px;
    align-items: flex-end;
}
.fp-dot {
    position: relative;
    width: 11px; height: 11px; border-radius: 50%;
    border: 1.5px solid #c4c9d2; background: transparent;
    padding: 0; cursor: pointer;
    transition: background 0.25s, border-color 0.25s, transform 0.25s var(--fp-ease);
}
.fp-dot:hover { border-color: var(--fp-accent); transform: scale(1.2); }
.fp-dot.active {
    background: var(--fp-accent); border-color: var(--fp-accent);
    transform: scale(1.35);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--fp-accent) 22%, transparent);
}
/* Label that slides out on hover */
.fp-dot::after {
    content: attr(data-label);
    position: absolute; right: 22px; top: 50%; transform: translate(6px, -50%);
    white-space: nowrap;
    font: 600 11px 'Inter', system-ui, sans-serif;
    color: #fff; background: rgba(15,20,32,0.86);
    padding: 4px 9px; border-radius: 6px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s var(--fp-ease);
    backdrop-filter: blur(4px);
}
.fp-dot:hover::after { opacity: 1; transform: translate(0, -50%); }

/* Scroll-down hint on the hero */
.fp-scroll-hint {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    color: #98a2b3; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    animation: fpBob 1.8s ease-in-out infinite;
    z-index: 3;
}
@keyframes fpBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 880px) {
    .fp-feature { grid-template-columns: 1fr; gap: 28px; }
    .fp-feature.right { direction: ltr; }
    .fp-section { padding: 88px 22px 48px; }
    .fp-demo { max-height: 52vh; }
    .fp-dots { display: none; }
}

/* ─── Respect reduced-motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fp-bg::after, .fp-vlan::after, .fp-grad,
    .fp-scroll-hint, body.fp.fp-theme-vlan,
    .fp-cta .lp-pricing-amount, .fp-cta .lp-pricing-cta,
    .fp-cta .lp-pricing-list li::before { animation: none !important; }
    .fp-scroll { scroll-behavior: auto; }
    .fp-anim, .fp-word > span, .fp-feature-text > * { transition-duration: 0.001s; }
    .fp-demo, .fp-hero-demo .lp-browser { transform: none !important; }
}