/* ==========================================================================
   Public marketing website (resources/views/website, layouts/website)
   Futuristic theme: deep-space hero bands, floating glass header, glowing
   gradient borders and a grid-floor footer. Bootstrap 5.3 underneath.
   Brand colours come from /css/brand.css - the same preset the Super Admin
   picks for the app (data-brand on <html>), so the site always matches it.
   ========================================================================== */

:root {
    --k-ink: #0b1220;
    --k-ink-2: #334155;
    --k-ink-3: #64748b;
    --k-line: #e5e9f0;
    --k-soft: #f5f7fb;
    --k-white: #ffffff;
    --k-space: #05070f;
    --k-space-2: #0a0f1e;
    --k-glass: rgba(12, 17, 32, .72);
    --k-glass-line: rgba(255, 255, 255, .1);
    --k-on-dark: #e2e8f0;
    --k-on-dark-2: #94a3b8;
    --k-primary: var(--brand-500);
    --k-primary-600: var(--brand-600);
    --k-primary-700: var(--brand-700);
    --k-primary-50: var(--brand-50);
    --k-accent: var(--brand-accent);
    --k-accent-50: color-mix(in srgb, var(--brand-accent) 10%, #ffffff);
    --k-glow: color-mix(in srgb, var(--brand-500) 16%, transparent);
    --k-glow-accent: color-mix(in srgb, var(--brand-accent) 16%, transparent);
    --k-gradient: linear-gradient(135deg, var(--brand-500), var(--brand-accent));
    --k-danger: #ef4444;
    --k-radius: 18px;
    --k-radius-lg: 28px;
    --k-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .14);
    --k-shadow-lg: 0 30px 60px -20px rgba(15, 23, 42, .28), 0 8px 20px -8px rgba(15, 23, 42, .12);
    --k-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --k-nav-offset: 6.5rem;

    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--k-ink-2);
    --bs-body-bg: var(--k-white);
}

/* Animatable angle for the rotating gradient borders */
@property --k-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

a { color: var(--k-primary-700); }
a:hover { color: var(--brand-800); }

html { scroll-behavior: smooth; scroll-padding-top: var(--k-nav-offset); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1, h2, h3, h4, h5, .display-heading { color: var(--k-ink); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
h1, h2, .h1, .h2 { font-family: var(--k-font-display); }
h1, .h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); letter-spacing: -.04em; }
h2, .h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -.03em; }
h3, .h3 { font-size: 1.3rem; letter-spacing: -.015em; }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.26rem); color: var(--k-ink-3); line-height: 1.6; }
.text-ink { color: var(--k-ink) !important; }
.text-muted-k { color: var(--k-ink-3) !important; }
.text-gradient { background: linear-gradient(100deg, var(--k-primary-600), var(--k-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 2000; background: var(--k-ink); color: #fff; padding: .6rem 1rem; border-radius: 10px; transition: top .2s; }
.skip-link:focus { top: 1rem; color: #fff; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--k-primary) 55%, transparent); outline-offset: 2px; }

/* Reusable: a 1px animated gradient border drawn with a mask */
.glow-border { position: relative; }
.glow-border::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--k-angle), transparent 0 55%, var(--brand-500) 70%, var(--brand-accent) 82%, transparent 92%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: k-spin 7s linear infinite;
}
@keyframes k-spin { to { --k-angle: 360deg; } }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn { --bs-btn-font-weight: 600; --bs-btn-padding-y: .72rem; --bs-btn-padding-x: 1.35rem; --bs-btn-border-radius: 999px; transition: transform .15s ease, box-shadow .25s ease, background-color .2s ease, filter .2s ease; }
.btn:active { transform: translateY(1px); }
.btn-lg { --bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1.7rem; --bs-btn-font-size: 1.05rem; }

/* Primary: brand gradient with a soft neon glow */
.btn-k {
    --bs-btn-color: #fff; --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: transparent; --bs-btn-active-border-color: transparent;
    background-image: var(--k-gradient);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 10px 28px -10px color-mix(in srgb, var(--brand-500) 85%, transparent);
}
.btn-k:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 16px 36px -10px color-mix(in srgb, var(--brand-accent) 80%, transparent); }
.btn-ink {
    --bs-btn-color: #fff; --bs-btn-bg: var(--k-ink); --bs-btn-border-color: var(--k-ink);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1e293b; --bs-btn-hover-border-color: #1e293b;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #1e293b;
}
.btn-ghost {
    --bs-btn-color: var(--k-ink); --bs-btn-bg: #fff; --bs-btn-border-color: var(--k-line);
    --bs-btn-hover-color: var(--k-ink); --bs-btn-hover-bg: var(--k-soft); --bs-btn-hover-border-color: #cbd5e1;
    --bs-btn-active-color: var(--k-ink); --bs-btn-active-bg: var(--k-soft);
}
/* Glass: secondary action on dark surfaces */
.btn-glass, .btn-on-dark {
    --bs-btn-color: #fff; --bs-btn-bg: rgba(255, 255, 255, .06); --bs-btn-border-color: rgba(255, 255, 255, .16);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .12); --bs-btn-hover-border-color: rgba(255, 255, 255, .3);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* ==========================================================================
   Header - floating glass bar with a rotating gradient outline
   ========================================================================== */
.k-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; padding-top: 14px; transition: padding .3s ease; pointer-events: none; }
.k-nav > .container { pointer-events: auto; }
.k-nav.is-scrolled { padding-top: 8px; }
.nav-shell {
    --bs-navbar-padding-y: .5rem; --bs-navbar-padding-x: .6rem;
    border-radius: 999px; background: var(--k-glass); box-shadow: 0 0 0 1px var(--k-glass-line) inset, 0 20px 50px -20px rgba(0, 0, 0, .7);
    backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); transition: background .3s ease, box-shadow .3s ease;
}
.k-nav.is-scrolled .nav-shell { background: rgba(8, 12, 24, .86); }
.nav-shell .brand { padding-left: .5rem; }
.nav-shell .nav-link {
    --bs-nav-link-font-weight: 500; --bs-navbar-nav-link-padding-x: 1rem;
    position: relative; color: rgba(255, 255, 255, .68); font-size: .95rem; border-radius: 999px; transition: color .2s ease, background .2s ease;
}
.nav-shell .nav-link:hover, .nav-shell .nav-link:focus-visible { color: #fff; background: rgba(255, 255, 255, .06); }
.nav-shell .nav-link.active { color: #fff; background: rgba(255, 255, 255, .09); }
.nav-shell .nav-link.active::after {
    content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; transform: translateX(-50%);
    background: var(--brand-accent); box-shadow: 0 0 8px 2px var(--brand-accent);
}
.nav-shell .btn { --bs-btn-padding-y: .55rem; --bs-btn-padding-x: 1.15rem; --bs-btn-font-size: .92rem; }
.nav-login { color: rgba(255, 255, 255, .8); font-weight: 600; font-size: .92rem; text-decoration: none; padding: .55rem .9rem; border-radius: 999px; }
.nav-login:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.navbar-toggler { border: 0; padding: .35rem .5rem; color: #fff; border-radius: 12px; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler:focus-visible { outline: 2px solid rgba(255, 255, 255, .4); }
@media (max-width: 991.98px) {
    .nav-shell { border-radius: 22px; }
    .nav-shell .navbar-collapse { padding: .75rem .35rem .4rem; }
    .nav-shell .nav-link { padding: .7rem 1rem; }
    .nav-shell .nav-link.active::after { left: auto; right: 1rem; top: 50%; bottom: auto; transform: translateY(-50%); }
}

.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--k-font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.03em; color: #fff; text-decoration: none; }
.brand:hover { color: #fff; }
.brand-mark { width: 34px; height: 34px; flex: none; border-radius: 10px; box-shadow: 0 0 18px -2px color-mix(in srgb, var(--brand-500) 70%, transparent); }

/* ==========================================================================
   Dark "space" surfaces: hero, page header, security band, footer
   ========================================================================== */
.space { position: relative; isolation: isolate; overflow: hidden; background: var(--k-space); color: var(--k-on-dark-2); }
.space h1, .space h2, .space h3 { color: #fff; }
.space .lead { color: #a5b4c8; }
.space .text-gradient { background-image: linear-gradient(100deg, #ffffff 0%, var(--brand-soft) 40%, var(--brand-accent) 100%); }
/* Aurora glows */
.space::before {
    content: ""; position: absolute; inset: -30% -10% auto; height: 130%; z-index: -2; pointer-events: none; filter: blur(20px);
    background:
        radial-gradient(38% 45% at 18% 28%, color-mix(in srgb, var(--brand-600) 55%, transparent), transparent 70%),
        radial-gradient(32% 40% at 82% 18%, color-mix(in srgb, var(--brand-accent) 45%, transparent), transparent 70%),
        radial-gradient(28% 35% at 60% 70%, color-mix(in srgb, var(--brand-800) 60%, transparent), transparent 70%);
    animation: k-aurora 18s ease-in-out infinite alternate;
}
/* Perspective grid floor */
.space::after {
    content: ""; position: absolute; left: -50%; right: -50%; bottom: 0; height: 60%; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 64px 64px; transform: perspective(520px) rotateX(62deg); transform-origin: bottom;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%);
    animation: k-grid 6s linear infinite;
}
@keyframes k-aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(3%, 4%, 0) scale(1.08); } }
@keyframes k-grid { to { background-position: 0 64px, 0 0; } }

/* ==========================================================================
   Sections (light)
   ========================================================================== */
.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section-sm { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.bg-soft { background-color: var(--k-soft); background-image: radial-gradient(rgba(15, 23, 42, .07) 1px, transparent 1px); background-size: 22px 22px; }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--k-primary-600); margin-bottom: 1rem; }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--k-gradient); box-shadow: 0 0 10px var(--brand-accent); }
.section-head .eyebrow::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--k-gradient); box-shadow: 0 0 10px var(--brand-accent); }
.section-head { max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.section-head p { margin-top: 1rem; }

/* ==========================================================================
   Home hero
   ========================================================================== */
.hero { padding: calc(var(--k-nav-offset) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(4.5rem, 9vw, 7.5rem); }
.hero-badge {
    display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .95rem .35rem .4rem; border-radius: 999px; text-decoration: none;
    background: rgba(255, 255, 255, .06); font-size: .87rem; font-weight: 500; color: var(--k-on-dark);
    box-shadow: 0 0 0 1px var(--k-glass-line) inset; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero-badge:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.hero-badge .pill { background: var(--k-gradient); color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .04em; padding: .2rem .6rem; border-radius: 999px; }
.hero h1 { margin: 1.4rem 0 1.25rem; }
.hero-points { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.75rem; padding: 0; list-style: none; font-size: .92rem; font-weight: 500; color: var(--k-on-dark-2); }
.hero-points i { color: var(--brand-accent); margin-right: .35rem; filter: drop-shadow(0 0 6px var(--brand-accent)); }

/* ---------- product mockup (pure CSS, no images) ---------- */
.mock-wrap { position: relative; max-width: 520px; margin-inline: auto; padding: 2rem 1rem; }
.mock-glow { position: absolute; inset: 6% 8%; border-radius: 40px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 60%, transparent), color-mix(in srgb, var(--brand-accent) 55%, transparent)); filter: blur(60px); z-index: 0; opacity: .8; }
.mock-phone { position: relative; z-index: 1; background: #fff; border: 1px solid var(--k-line); border-radius: var(--k-radius-lg); box-shadow: var(--k-shadow-lg); padding: 1.25rem 1.35rem 1.5rem; max-width: 340px; margin-inline: auto; }
.space .mock-phone { border-color: transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 40px 90px -25px color-mix(in srgb, var(--brand-600) 80%, transparent); }
.mock-chip { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border: 1px solid var(--k-line); border-radius: 14px; background: var(--k-soft); }
.mock-chip .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--k-primary-50); color: var(--k-primary-600); font-size: .8rem; }
.mock-chip small { display: block; font-size: .68rem; font-weight: 600; color: var(--k-ink-3); line-height: 1.2; }
.mock-chip strong { display: block; font-size: .85rem; color: var(--k-ink); line-height: 1.3; }
.mock-screen { text-align: center; padding: 1.1rem 0 .6rem; }
.mock-screen .num { font-family: var(--k-font-display); font-size: 1.65rem; font-weight: 700; color: var(--k-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mock-screen .state { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--k-primary-600); }
.mock-screen .state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: k-pulse 1.8s ease-in-out infinite; }
.mock-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .4rem 0 1rem; }
.mock-keys span { height: 44px; border-radius: 14px; background: var(--k-soft); display: grid; place-items: center; font-weight: 700; color: var(--k-ink); font-size: 1.05rem; }
.mock-actions { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.mock-actions .g { width: 40px; height: 40px; border-radius: 50%; background: var(--k-soft); display: grid; place-items: center; color: var(--k-ink-2); font-size: .9rem; }
.mock-actions .g.rec { background: var(--k-danger); color: #fff; animation: k-ring 1.8s ease-in-out infinite; }
.mock-actions .c { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.2rem; background: linear-gradient(180deg, #f87171, #dc2626); box-shadow: 0 12px 24px -10px rgba(220, 38, 38, .9); }
.mock-actions .c i { transform: rotate(135deg); }

.float-card {
    position: absolute; z-index: 2; display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; font-size: .82rem; border-radius: 16px;
    background: rgba(12, 17, 32, .78); box-shadow: 0 0 0 1px var(--k-glass-line) inset, 0 24px 48px -16px rgba(0, 0, 0, .7);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: k-float 6s ease-in-out infinite;
}
.float-card .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.float-card strong { display: block; color: #fff; font-size: .85rem; line-height: 1.25; }
.float-card small { color: var(--k-on-dark-2); }
.float-card.fc-1 { top: -1%; left: -6%; }
.float-card.fc-2 { bottom: 4%; right: -12%; animation-delay: -3s; }
.float-card.fc-3 { top: 52%; left: -18%; animation-delay: -1.5s; }
@media (max-width: 575.98px) {
    .float-card.fc-1 { left: 0; top: 0; }
    .float-card.fc-2 { right: 0; bottom: 0; }
    .float-card.fc-3 { display: none; }
}
.wave { display: inline-flex; align-items: end; gap: 2px; height: 16px; }
.wave i { width: 3px; border-radius: 2px; background: var(--k-danger); animation: k-wave 1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: -.2s; } .wave i:nth-child(3) { animation-delay: -.4s; } .wave i:nth-child(4) { animation-delay: -.6s; } .wave i:nth-child(5) { animation-delay: -.8s; }

@keyframes k-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes k-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); } 50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } }
@keyframes k-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes k-wave { 0%, 100% { height: 4px; } 50% { height: 16px; } }

/* ---------- capability ticker (under the hero) ---------- */
.ticker { position: relative; background: var(--k-space); border-block: 1px solid rgba(255, 255, 255, .06); overflow: hidden; padding: 1.1rem 0; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--k-space), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--k-space), transparent); }
.ticker-track { display: flex; width: max-content; animation: k-marquee 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; gap: 3rem; padding: 0 1.5rem; margin: 0; list-style: none; }
.ticker-list li { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; color: var(--k-on-dark); font-weight: 500; font-size: .95rem; }
.ticker-list i { color: var(--brand-accent); filter: drop-shadow(0 0 6px var(--brand-accent)); }
@keyframes k-marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   Cards - gradient border + cursor spotlight on hover
   ========================================================================== */
.k-card { position: relative; isolation: isolate; height: 100%; background: #fff; border: 1px solid var(--k-line); border-radius: var(--k-radius); padding: 1.75rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.k-card::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .25s ease;
    background: var(--k-gradient);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.k-card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s ease;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand-500) 11%, transparent), transparent 45%);
}
.k-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--brand-600) 45%, transparent); border-color: transparent; }
.k-card:hover::before, .k-card:hover::after { opacity: 1; }
.k-card h3 { margin: 1.1rem 0 .55rem; font-size: 1.12rem; }
.k-card p { margin: 0; color: var(--k-ink-3); font-size: .98rem; }
.k-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; }
.tone-green { background: var(--k-primary-50); color: var(--k-primary-600); }
.tone-indigo { background: var(--k-accent-50); color: var(--k-accent); }
.tone-red { background: #fef2f2; color: #dc2626; }
.tone-amber { background: #fffbeb; color: #d97706; }
.tone-sky { background: #f0f9ff; color: #0284c7; }
.tone-pink { background: #fdf2f8; color: #db2777; }

/* ---------- split (alternating) blocks ---------- */
.split + .split { margin-top: clamp(4rem, 8vw, 6.5rem); }
.check-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .8rem; }
.check-list li { display: flex; gap: .75rem; align-items: flex-start; }
.check-list i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--k-gradient); color: #fff; font-size: .8rem; margin-top: .2rem; box-shadow: 0 4px 12px -4px var(--brand-500); }
.panel { position: relative; background: linear-gradient(160deg, var(--k-soft), #fff); border: 1px solid var(--k-line); border-radius: var(--k-radius-lg); padding: clamp(1.25rem, 3vw, 2.25rem); overflow: hidden; }
.panel.panel-dark { background: var(--cd-hero); border-color: transparent; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--brand-700) 80%, transparent); }
.panel.panel-dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; 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: 32px 32px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }

/* mini UI pieces used inside panels */
.ui-card { background: #fff; border: 1px solid var(--k-line); border-radius: 16px; box-shadow: var(--k-shadow); padding: 1rem 1.1rem; }
.ui-row { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--k-line); font-size: .88rem; }
.ui-row:last-child { border-bottom: 0; }
.ui-row .av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: .85rem; }
.ui-row .meta { flex: 1; min-width: 0; line-height: 1.3; }
.ui-row .meta strong { display: block; color: var(--k-ink); font-variant-numeric: tabular-nums; }
.ui-row .meta small { color: var(--k-ink-3); }
.ui-tag { font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; }
.ui-tag.ok { background: var(--k-primary-50); color: var(--k-primary-600); }
.ui-tag.miss { background: #fef2f2; color: #dc2626; }
.ui-tag.rec { background: #fef2f2; color: #dc2626; }
.ui-player { display: flex; align-items: center; gap: .8rem; margin-top: .9rem; padding: .7rem .8rem; border-radius: 12px; background: var(--k-soft); }
.ui-player .play { width: 34px; height: 34px; border-radius: 50%; background: var(--k-gradient); color: #fff; display: grid; place-items: center; flex: none; font-size: .85rem; }
.ui-bars { flex: 1; display: flex; align-items: center; gap: 3px; height: 28px; }
.ui-bars i { flex: 1; border-radius: 2px; background: #cbd5e1; }
.ui-bars i.on { background: var(--k-primary); }
.ui-stat { position: relative; z-index: 1; color: #fff; }
.ui-stat .v { font-family: var(--k-font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.ui-stat .k { font-size: .8rem; color: rgba(255, 255, 255, .72); margin-top: .35rem; }
.ui-chart { position: relative; z-index: 1; display: flex; align-items: end; gap: 8px; height: 140px; margin-top: 1.5rem; }
.ui-chart span { flex: 1; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55)); box-shadow: 0 0 16px -4px rgba(255, 255, 255, .6); }
.ui-chart span:nth-child(even) { background: linear-gradient(180deg, var(--brand-100), var(--brand-soft)); opacity: .75; }

/* ---------- steps ---------- */
.step { position: relative; height: 100%; padding: 2rem 1.75rem; border-radius: var(--k-radius); background: #fff; border: 1px solid var(--k-line); overflow: hidden; }
.step::after { content: attr(data-step); position: absolute; right: 1rem; top: -.5rem; font-family: var(--k-font-display); font-size: 6rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--k-line); pointer-events: none; }
.step-num { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--k-gradient); color: #fff; font-family: var(--k-font-display); font-weight: 700; margin-bottom: 1.2rem; box-shadow: 0 10px 24px -10px var(--brand-500); }
.step h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.step p { color: var(--k-ink-3); margin: 0; font-size: .98rem; }

/* ---------- use-case tabs ---------- */
.uc-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: .35rem; background: #fff; border: 1px solid var(--k-line); border-radius: 999px; box-shadow: var(--k-shadow); }
.uc-tabs .nav-link { border-radius: 999px; font-weight: 600; color: var(--k-ink-2); padding: .55rem 1.2rem; transition: color .2s ease, background .2s ease; }
.uc-tabs .nav-link.active { background: var(--k-gradient); color: #fff; box-shadow: 0 8px 20px -10px var(--brand-500); }

/* ---------- dark band (security) / CTA ---------- */
.band-dark { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.band-dark .text-muted-k { color: var(--k-on-dark-2) !important; }
.band-dark .k-card { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .09); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.band-dark .k-card p { color: var(--k-on-dark-2); }
.band-dark .k-card h3 { color: #fff; }
.band-dark .k-card:hover { box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--brand-500) 70%, transparent); }
.band-dark .k-card::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand-500) 22%, transparent), transparent 45%); }
.eyebrow-on-dark { color: var(--brand-soft); }

/* Same gradient as the app's header band, with a glowing grid overlay */
.cta { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--k-radius-lg); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); color: rgba(255, 255, 255, .85);
    background: var(--cd-hero); box-shadow: 0 30px 70px -28px color-mix(in srgb, var(--brand-700) 80%, transparent); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(80% 90% at 85% 10%, #000, transparent 70%); mask-image: radial-gradient(80% 90% at 85% 10%, #000, transparent 70%); }
.cta::after { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand-accent) 70%, transparent), transparent 65%); filter: blur(10px); }
.cta h2 { color: #fff; }
.cta-text { color: rgba(255, 255, 255, .82); }
.cta .btn-light { --bs-btn-color: var(--brand-700); --bs-btn-hover-color: var(--brand-800); box-shadow: 0 0 30px -6px rgba(255, 255, 255, .55); }

/* ---------- pricing ---------- */
.billing-toggle { display: inline-flex; align-items: center; gap: .75rem; font-weight: 600; color: var(--k-ink-2); }
.billing-toggle .form-check-input { width: 3rem; height: 1.6rem; cursor: pointer; }
.billing-toggle .form-check-input:checked { background-color: var(--k-primary-600); border-color: var(--k-primary-600); }
.save-pill { background: var(--k-gradient); color: #fff; font-size: .74rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; }
.plan { position: relative; height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--k-line); border-radius: var(--k-radius-lg); padding: 2rem 1.75rem; transition: transform .25s ease, box-shadow .25s ease; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-lg); }
.plan.is-featured { border-color: transparent; box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--brand-600) 70%, transparent); }
.plan.is-featured::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
    background: conic-gradient(from var(--k-angle), var(--brand-500), var(--brand-accent), var(--brand-500));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: k-spin 6s linear infinite;
}
.plan-flag { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); background: var(--k-gradient); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .04em; padding: .3rem .9rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 20px -8px var(--brand-500); }
.plan h3, .plan .h3 { font-size: 1.2rem; font-family: var(--k-font-display); }
.plan .desc { color: var(--k-ink-3); font-size: .95rem; min-height: 3rem; }
.plan .price { display: flex; align-items: baseline; gap: .35rem; margin: 1.25rem 0 .25rem; color: var(--k-ink); }
.plan .price .amt { font-family: var(--k-font-display); font-size: 3rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.plan.is-featured .price .amt { background: var(--k-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan .price .per { color: var(--k-ink-3); font-size: .9rem; }
.plan .note { font-size: .82rem; color: var(--k-ink-3); min-height: 1.3rem; }
.plan ul { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: .7rem; font-size: .95rem; }
.plan ul li { display: flex; gap: .6rem; }
.plan ul i { color: var(--k-primary-600); flex: none; margin-top: .15rem; }
.plan .btn { margin-top: auto; }

.compare { border-radius: var(--k-radius); overflow: hidden; border: 1px solid var(--k-line); box-shadow: var(--k-shadow); }
.compare table { margin: 0; }
.compare th, .compare td { padding: 1rem 1.25rem; vertical-align: middle; }
.compare thead th { background: var(--k-space-2); color: #fff; font-weight: 600; border-color: var(--k-space-2); }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; }
.compare .bi-check-circle-fill { color: var(--k-primary-600); font-size: 1.1rem; }
.compare .bi-dash { color: #cbd5e1; font-size: 1.1rem; }

/* ---------- FAQ ---------- */
.faq .accordion-item { border: 1px solid var(--k-line); border-radius: 16px !important; overflow: hidden; }
.faq .accordion-item + .accordion-item { margin-top: .75rem; }
.faq .accordion-button { font-weight: 700; color: var(--k-ink); padding: 1.2rem 1.4rem; font-size: 1.02rem; }
.faq .accordion-button:not(.collapsed) { background: var(--k-soft); box-shadow: inset 3px 0 0 var(--brand-500); }
.faq .accordion-button:focus { box-shadow: none; }
.faq .accordion-body { color: var(--k-ink-3); padding: 0 1.4rem 1.3rem; background: var(--k-soft); }

/* ==========================================================================
   Inner page header (dark)
   ========================================================================== */
.page-hero { padding: calc(var(--k-nav-offset) + clamp(2rem, 5vw, 3.5rem)) 0 clamp(3.5rem, 7vw, 5rem); text-align: center; }
.page-hero::after { height: 75%; }
.page-hero .lead { max-width: 680px; margin: 1.1rem auto 0; }
.page-hero .eyebrow { color: var(--brand-soft); }
.breadcrumb { justify-content: center; font-size: .85rem; --bs-breadcrumb-divider-color: rgba(255, 255, 255, .35); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--k-on-dark-2); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .active { color: var(--k-on-dark); }
.anchor-nav { padding-top: 1.75rem; }

/* ---------- contact ---------- */
.form-control, .form-select { border-radius: 12px; padding: .75rem 1rem; border-color: var(--k-line); }
.form-control:focus, .form-select:focus { border-color: var(--k-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-primary) 15%, transparent); }
.form-label { font-weight: 600; color: var(--k-ink); font-size: .92rem; }
.contact-tile { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.contact-tile:hover { border-color: color-mix(in srgb, var(--brand-500) 40%, var(--k-line)); box-shadow: var(--k-shadow); }
.contact-tile + .contact-tile { margin-top: 1rem; }
.contact-tile h3 { font-size: 1rem; margin-bottom: .2rem; }
.contact-tile p { margin: 0; font-size: .95rem; color: var(--k-ink-3); }

/* ==========================================================================
   Legal pages (privacy, terms) - readable column with a sticky contents list
   ========================================================================== */
.legal-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 3.5rem; align-items: start; }
@media (max-width: 991.98px) { .legal-wrap { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.legal-toc { position: sticky; top: calc(var(--k-nav-offset) + 1rem); padding: 1.25rem; border: 1px solid var(--k-line); border-radius: var(--k-radius); background: var(--k-soft); font-size: .88rem; }
@media (max-width: 991.98px) { .legal-toc { position: static; } }
.legal-toc-title { font-family: var(--k-font-display); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--k-ink); margin-bottom: .75rem; }
.legal-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; color: var(--k-ink-3); }
.legal-toc a { color: var(--k-ink-2); text-decoration: none; }
.legal-toc a:hover { color: var(--k-primary-700); }
.legal-prose { max-width: 760px; color: var(--k-ink-2); font-size: 1.02rem; }
.legal-prose h2 { font-size: 1.45rem; margin: 2.75rem 0 .9rem; scroll-margin-top: calc(var(--k-nav-offset) + 1rem); }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h3 { font-size: 1.05rem; margin: 1.5rem 0 .6rem; }
.legal-prose ul { padding-left: 1.2rem; display: grid; gap: .5rem; margin-bottom: 1rem; }
.legal-prose li::marker { color: var(--k-primary); }
.legal-prose strong { color: var(--k-ink); }
.legal-note { font-size: .9rem; color: var(--k-ink-3); border-left: 3px solid var(--k-line); padding-left: 1rem; }
.legal-callout { display: flex; gap: .9rem; padding: 1.1rem 1.25rem; border-radius: 14px; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; }
.legal-callout i { color: #ea580c; font-size: 1.2rem; margin-top: .15rem; }
.legal-callout p { margin: 0; }
.legal-callout strong { color: #7c2d12; }
.consent-note { font-size: .84rem; color: var(--k-ink-3); margin: 0; }
.legal-table { border: 1px solid var(--k-line); border-radius: 14px; margin: 1.25rem 0; }
.legal-table table { margin: 0; font-size: .9rem; }
.legal-table th { background: var(--k-soft); color: var(--k-ink); font-weight: 600; white-space: nowrap; }
.legal-table th, .legal-table td { padding: .8rem 1rem; }
.legal-table code { white-space: nowrap; }

/* ==========================================================================
   Footer - glowing edge, grid horizon and a giant gradient wordmark
   ========================================================================== */
.k-footer { padding: clamp(4rem, 8vw, 6rem) 0 1.75rem; font-size: .95rem; }
.k-footer::after { top: 0; bottom: auto; height: 70%; transform: perspective(520px) rotateX(-62deg); transform-origin: top; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 80%); mask-image: linear-gradient(to bottom, #000 0%, transparent 80%); opacity: .6; }
.footer-edge { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-500), var(--brand-accent), transparent); box-shadow: 0 0 24px 2px color-mix(in srgb, var(--brand-accent) 60%, transparent); }
.k-footer .footer-tagline { max-width: 340px; color: var(--k-on-dark-2); }
.k-footer h2 { display: flex; align-items: center; gap: .5rem; font-family: var(--k-font-display); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; font-weight: 600; margin-bottom: 1.1rem; }
.k-footer h2::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-accent); box-shadow: 0 0 10px 2px var(--brand-accent); }
.k-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.k-footer a { color: var(--k-on-dark-2); text-decoration: none; transition: color .2s ease; }
.k-footer .brand { color: #fff; }
.k-footer ul a:hover { color: #fff; text-shadow: 0 0 14px color-mix(in srgb, var(--brand-accent) 80%, transparent); }
.k-footer .social a { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px var(--k-glass-line) inset; transition: background .2s ease, box-shadow .2s ease, transform .2s ease; }
.k-footer .social a:hover { background: color-mix(in srgb, var(--brand-500) 30%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-accent) 60%, transparent) inset, 0 0 22px -4px var(--brand-accent); transform: translateY(-2px); }
.footer-wordmark {
    margin: clamp(2.5rem, 6vw, 4rem) 0 0; font-family: var(--k-font-display); font-weight: 700; line-height: .82; letter-spacing: -.06em; text-align: center;
    font-size: clamp(4.5rem, 19vw, 15rem); user-select: none; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, color-mix(in srgb, var(--brand-500) 30%, transparent) 55%, transparent 95%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 1.5rem; font-size: .84rem; color: #64748b; }
.footer-bottom .legal { flex: 1 1 520px; margin: 0; }
.footer-bottom .legal a { color: var(--k-on-dark-2); text-decoration: underline; text-underline-offset: 2px; }
.to-top { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; border: 0; color: #fff; font-size: .84rem; font-weight: 600; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px var(--k-glass-line) inset; transition: background .2s ease, box-shadow .2s ease; }
.to-top:hover { background: color-mix(in srgb, var(--brand-500) 30%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-accent) 60%, transparent) inset, 0 0 18px -4px var(--brand-accent); }

/* ==========================================================================
   Reveal on scroll + reduced motion
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .space::before, .space::after, .glow-border::before, .plan.is-featured::before, .ticker-track,
    .float-card, .wave i, .mock-actions .g.rec, .mock-screen .state::before { animation: none; }
    .wave i { height: 10px; }
}