/*
 * Kervio UI — shadcn-inspired design tokens + components.
 * Everything is prefixed `kv-` so it never collides with Bricks / Automatic CSS.
 * Fonts are intentionally NOT set here: headings and body inherit the fonts from the
 * Bricks theme style (heading font / body font).
 *
 * Usage: add classes to any Bricks element (Style > CSS > CSS classes).
 */

/* ───────────────────────── Tokens ───────────────────────── */
:root {
    --kv-background: 240 10% 4%;
    --kv-foreground: 0 0% 98%;
    --kv-card: 240 8% 7%;
    --kv-card-foreground: 0 0% 98%;
    --kv-popover: 240 8% 7%;
    --kv-muted: 240 6% 12%;
    --kv-muted-foreground: 240 5% 65%;
    --kv-border: 240 6% 16%;
    --kv-input: 240 6% 18%;
    --kv-primary: 268 100% 43%;        /* #6c00de — brand purple */
    --kv-primary-foreground: 0 0% 100%;
    --kv-primary-glow: 270 90% 62%;
    --kv-secondary: 240 6% 14%;
    --kv-secondary-foreground: 0 0% 98%;
    --kv-accent: 190 95% 55%;
    --kv-destructive: 0 72% 55%;
    --kv-success: 150 65% 45%;
    --kv-ring: 270 90% 62%;

    --kv-radius: 0.75rem;
    --kv-radius-sm: calc(var(--kv-radius) - 0.25rem);
    --kv-radius-lg: calc(var(--kv-radius) + 0.5rem);
    --kv-radius-full: 999px;

    --kv-container: 1240px;
    --kv-gutter: clamp(1.25rem, 4vw, 2.5rem);
    --kv-section-y: clamp(4.5rem, 10vw, 9rem);

    --kv-shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4);
    --kv-shadow-md: 0 8px 30px hsl(0 0% 0% / 0.35);
    --kv-shadow-glow: 0 0 0 1px hsl(var(--kv-primary) / 0.5), 0 10px 40px -10px hsl(var(--kv-primary) / 0.65);

    --kv-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --kv-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ───────────────────────── Layout ───────────────────────── */
.kv-dark {
    background: hsl(var(--kv-background));
    color: hsl(var(--kv-foreground));
}

.kv-section {
    position: relative;
    padding-block: var(--kv-section-y);
    padding-inline: var(--kv-gutter);
}

.kv-section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.kv-section--flush-top { padding-top: 0; }
.kv-section--bordered { border-top: 1px solid hsl(var(--kv-border)); }
.kv-section--muted { background: hsl(var(--kv-muted) / 0.35); }

.kv-container {
    width: 100%;
    max-width: var(--kv-container);
    margin-inline: auto;
}

.kv-container--narrow { max-width: 820px; }
.kv-container--wide { max-width: 1480px; }

.kv-stack { display: flex; flex-direction: column; gap: var(--kv-stack-gap, 1.25rem); }
.kv-stack--sm { --kv-stack-gap: 0.625rem; }
.kv-stack--lg { --kv-stack-gap: 2rem; }
.kv-stack--xl { --kv-stack-gap: 3.5rem; }
.kv-center { align-items: center; text-align: center; }
.kv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.kv-row--center { justify-content: center; }
.kv-row--between { justify-content: space-between; }
.kv-row--end { align-items: flex-end; }

/* readable measures for headline blocks */
.kv-max-sm { max-width: 40rem; }
.kv-max-md { max-width: 44rem; }
.kv-max-lg { max-width: 56rem; }

.kv-grid {
    display: grid;
    gap: var(--kv-grid-gap, 1.5rem);
    grid-template-columns: repeat(var(--kv-cols, 3), minmax(0, 1fr));
}
.kv-grid--2 { --kv-cols: 2; }
.kv-grid--3 { --kv-cols: 3; }
.kv-grid--4 { --kv-cols: 4; }
.kv-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.kv-grid--split { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }

@media (max-width: 991px) {
    .kv-grid--3, .kv-grid--4 { --kv-cols: 2; }
    .kv-grid--split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .kv-grid--2, .kv-grid--3, .kv-grid--4 { --kv-cols: 1; }
}

/* ───────────────────────── Typography helpers ───────────────────────── */
/* Sizes only — font-family is inherited from the theme (heading/body). */
.kv-display {
    font-size: clamp(2.75rem, 7.5vw, 6.5rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 600;
    text-wrap: balance;
}
.kv-display--md { font-size: clamp(2.25rem, 6vw, 5rem); }
.kv-h1 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; text-wrap: balance; }
.kv-h2 { font-size: clamp(1.875rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; }
.kv-h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; }
.kv-lead { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.6; color: hsl(var(--kv-muted-foreground)); max-width: 62ch; text-wrap: pretty; }
.kv-muted { color: hsl(var(--kv-muted-foreground)); }
.kv-small { font-size: 0.875rem; line-height: 1.5; }
.kv-balance { text-wrap: balance; }
.kv-gradient-text {
    background: linear-gradient(110deg, hsl(0 0% 100%) 20%, hsl(var(--kv-primary-glow)) 60%, hsl(var(--kv-accent)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: hsl(var(--kv-primary-glow));
}
.kv-eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: currentColor;
}

.kv-prose { max-width: 70ch; line-height: 1.75; color: hsl(var(--kv-foreground) / 0.85); }
.kv-prose > * + * { margin-top: 1.25em; }
.kv-prose h2, .kv-prose h3 { margin-top: 2em; color: hsl(var(--kv-foreground)); letter-spacing: -0.02em; }
.kv-prose a { color: hsl(var(--kv-primary-glow)); text-decoration: underline; text-underline-offset: 3px; }
.kv-prose blockquote { border-left: 2px solid hsl(var(--kv-primary)); padding-left: 1.25rem; color: hsl(var(--kv-foreground)); font-size: 1.15em; }

/* ───────────────────────── Buttons ───────────────────────── */
.kv-btn {
    --kv-btn-bg: hsl(var(--kv-primary));
    --kv-btn-fg: hsl(var(--kv-primary-foreground));
    --kv-btn-border: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 3rem;
    padding: 0 1.5rem;
    border: 1px solid var(--kv-btn-border);
    border-radius: var(--kv-radius-full);
    background: var(--kv-btn-bg);
    color: var(--kv-btn-fg);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.35s var(--kv-ease), background 0.25s ease, border-color 0.25s ease, box-shadow 0.35s ease, color 0.25s ease;
}
.kv-btn:hover { transform: translateY(-2px); box-shadow: var(--kv-shadow-glow); }
.kv-btn:active { transform: translateY(0) scale(0.98); }
.kv-btn:focus-visible { outline: 2px solid hsl(var(--kv-ring)); outline-offset: 3px; }

.kv-btn--secondary { --kv-btn-bg: hsl(var(--kv-secondary)); --kv-btn-fg: hsl(var(--kv-secondary-foreground)); }
.kv-btn--secondary:hover { box-shadow: var(--kv-shadow-md); }
.kv-btn--outline { --kv-btn-bg: transparent; --kv-btn-fg: hsl(var(--kv-foreground)); --kv-btn-border: hsl(var(--kv-border)); }
.kv-btn--outline:hover { background: hsl(var(--kv-foreground) / 0.06); border-color: hsl(var(--kv-foreground) / 0.3); box-shadow: none; }
.kv-btn--ghost { --kv-btn-bg: transparent; --kv-btn-fg: hsl(var(--kv-foreground)); }
.kv-btn--ghost:hover { background: hsl(var(--kv-foreground) / 0.07); box-shadow: none; }
.kv-btn--light { --kv-btn-bg: hsl(0 0% 98%); --kv-btn-fg: hsl(240 10% 6%); }
.kv-btn--sm { height: 2.25rem; padding: 0 1rem; font-size: 0.8125rem; }
.kv-btn--lg { height: 3.5rem; padding: 0 2rem; font-size: 1rem; }
.kv-btn--block { width: 100%; }

/* arrow that slides on hover — add <span class="kv-btn__arrow"> or rely on Bricks icon */
.kv-btn .kv-btn__arrow { transition: transform 0.35s var(--kv-ease); }
.kv-btn:hover .kv-btn__arrow { transform: translate(3px, -3px); }

/* ───────────────────────── Badges & pills ───────────────────────── */
.kv-badge,
.kv-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid hsl(var(--kv-border));
    border-radius: var(--kv-radius-full);
    background: hsl(var(--kv-foreground) / 0.04);
    color: hsl(var(--kv-foreground) / 0.85);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    backdrop-filter: blur(8px);
}
.kv-badge--primary { background: hsl(var(--kv-primary) / 0.18); border-color: hsl(var(--kv-primary) / 0.5); color: hsl(var(--kv-primary-glow)); }
.kv-badge--dot::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: hsl(var(--kv-success)); box-shadow: 0 0 0 3px hsl(var(--kv-success) / 0.25); }

/* ───────────────────────── Cards ───────────────────────── */
.kv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    border: 1px solid hsl(var(--kv-border));
    border-radius: var(--kv-radius-lg);
    background: linear-gradient(180deg, hsl(var(--kv-card)) 0%, hsl(var(--kv-card) / 0.6) 100%);
    color: hsl(var(--kv-card-foreground));
    overflow: hidden;
    transition: transform 0.5s var(--kv-ease), border-color 0.3s ease, box-shadow 0.4s ease;
}
.kv-card--interactive:hover,
a.kv-card:hover {
    transform: translateY(-4px);
    border-color: hsl(var(--kv-primary) / 0.5);
    box-shadow: var(--kv-shadow-md);
}
/* soft spotlight that follows the cursor (set by kervio-motion.js via --kv-mx / --kv-my) */
.kv-card--spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(420px circle at var(--kv-mx, 50%) var(--kv-my, 0%), hsl(var(--kv-primary-glow) / 0.14), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.kv-card--spotlight:hover::after { opacity: 1; }
.kv-card--glass { background: hsl(var(--kv-foreground) / 0.04); backdrop-filter: blur(18px) saturate(140%); }
.kv-card__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.kv-card__text { color: hsl(var(--kv-muted-foreground)); line-height: 1.6; }
.kv-card__index { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; color: hsl(var(--kv-primary-glow)); }

.kv-icon-box {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid hsl(var(--kv-border));
    border-radius: var(--kv-radius);
    background: hsl(var(--kv-primary) / 0.15);
    color: hsl(var(--kv-primary-glow));
}

/* ───────────────────────── Media (work cards) ───────────────────────── */
.kv-media { position: relative; overflow: hidden; border-radius: var(--kv-radius-lg); background: hsl(var(--kv-muted)); }
.kv-media img, .kv-media video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--kv-ease); }
.kv-media:hover img, .kv-media:hover video, a:hover > .kv-media img, a:hover > .kv-media video { transform: scale(1.06); }
.kv-media--16x10 { aspect-ratio: 16 / 10; }
.kv-media--4x3 { aspect-ratio: 4 / 3; }
.kv-media--square { aspect-ratio: 1; }
.kv-media--shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, hsl(0 0% 0% / 0.65), transparent 55%); pointer-events: none; }

/* Work card (rendered by kervio_work_grid()) */
.kv-work-card { display: flex; flex-direction: column; gap: 1rem; color: inherit; text-decoration: none; }
.kv-work-card__title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kv-work-card__title { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
.kv-work-card__arrow { font-size: 1.25rem; opacity: 0.5; transition: transform 0.4s var(--kv-ease), opacity 0.3s ease; }
.kv-work-card:hover .kv-work-card__arrow { opacity: 1; transform: translate(4px, -4px); }
.kv-work-card__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
@media (min-width: 992px) { .kv-grid--offset > :nth-child(even) { margin-top: 5rem; } }

/* ───────────────────────── Forms ───────────────────────── */
.kv-input,
.kv-textarea,
.kv-select {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid hsl(var(--kv-input));
    border-radius: var(--kv-radius);
    background: hsl(var(--kv-foreground) / 0.03);
    color: hsl(var(--kv-foreground));
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.kv-textarea { min-height: 9rem; resize: vertical; }
.kv-input::placeholder, .kv-textarea::placeholder { color: hsl(var(--kv-muted-foreground) / 0.7); }
.kv-input:focus, .kv-textarea:focus, .kv-select:focus {
    outline: none;
    border-color: hsl(var(--kv-ring));
    box-shadow: 0 0 0 3px hsl(var(--kv-ring) / 0.25);
    background: hsl(var(--kv-foreground) / 0.05);
}
.kv-label { display: block; margin-bottom: 0.4rem; font-size: 0.875rem; font-weight: 500; color: hsl(var(--kv-foreground) / 0.9); }

/* selectable "chip" checkboxes/radios for service pickers */
.kv-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border: 1px solid hsl(var(--kv-border));
    border-radius: var(--kv-radius-full);
    background: transparent;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.25s ease;
}
.kv-chip:hover { border-color: hsl(var(--kv-foreground) / 0.35); }
.kv-chip:has(input:checked) { background: hsl(var(--kv-primary) / 0.2); border-color: hsl(var(--kv-primary)); color: hsl(var(--kv-primary-glow)); }

/* Bricksforge Pro Forms (add class `kv-form` to the form element) — styles its fields like the kit */
.kv-form { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.kv-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, select) {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid hsl(var(--kv-input));
    border-radius: var(--kv-radius);
    background: hsl(var(--kv-foreground) / 0.03);
    color: hsl(var(--kv-foreground));
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.kv-form textarea { min-height: 9rem; resize: vertical; }
.kv-form :is(input, textarea, select):focus {
    outline: none;
    border-color: hsl(var(--kv-ring));
    box-shadow: 0 0 0 3px hsl(var(--kv-ring) / 0.25);
}
.kv-form label { font-size: 0.875rem; font-weight: 500; color: hsl(var(--kv-foreground) / 0.9); }
.kv-form :is(input[type="checkbox"], input[type="radio"]) { accent-color: hsl(var(--kv-primary)); }
.kv-form .options-wrapper { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.kv-form [class*="message"] { font-size: 0.9rem; }

/* ───────────────────────── Sections: proof, stats, FAQ, CTA ───────────────────────── */
.kv-stat { display: flex; flex-direction: column; gap: 0.35rem; }
.kv-stat__value { font-size: clamp(2.5rem, 5vw, 4.25rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.kv-stat__label { font-size: 0.9rem; color: hsl(var(--kv-muted-foreground)); max-width: 24ch; }

.kv-quote { display: flex; flex-direction: column; gap: 1.5rem; }
.kv-quote__text { font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.45; letter-spacing: -0.015em; text-wrap: balance; }
.kv-quote__author { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.9rem; }
.kv-quote__author strong { font-weight: 600; }
.kv-quote__author span { color: hsl(var(--kv-muted-foreground)); }

.kv-faq { display: flex; flex-direction: column; border-top: 1px solid hsl(var(--kv-border)); }
.kv-faq details { border-bottom: 1px solid hsl(var(--kv-border)); }
.kv-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.35rem 0; font-size: 1.125rem; font-weight: 500; cursor: pointer; list-style: none; }
.kv-faq summary::-webkit-details-marker { display: none; }
.kv-faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: hsl(var(--kv-primary-glow)); transition: transform 0.3s var(--kv-ease); }
.kv-faq details[open] summary::after { transform: rotate(45deg); }
.kv-faq details > :not(summary) { padding-bottom: 1.5rem; color: hsl(var(--kv-muted-foreground)); line-height: 1.7; max-width: 70ch; }

.kv-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem);
    border: 1px solid hsl(var(--kv-border));
    border-radius: calc(var(--kv-radius-lg) * 1.5);
    background: hsl(var(--kv-card));
    isolation: isolate;
}

.kv-logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem 3.5rem; opacity: 0.7; }
.kv-logo-row img { height: 1.75rem; width: auto; filter: grayscale(1) brightness(2); }

.kv-divider { height: 1px; border: 0; background: linear-gradient(90deg, transparent, hsl(var(--kv-border)), transparent); }

/* trust strip under hero: "Avg. response < 24h · Fixed-price quotes · …" */
.kv-trust { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; font-size: 0.875rem; color: hsl(var(--kv-muted-foreground)); }
.kv-trust > * { display: inline-flex; align-items: center; gap: 0.5rem; }
.kv-trust > *::before { content: "✓"; color: hsl(var(--kv-success)); font-weight: 700; }

/* ───────────────────────── Blog ───────────────────────── */
.kv-post-card { gap: 0; padding: 0; }
.kv-post-card .kv-media { border-radius: 0; }
.kv-post-card__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem; }
.kv-post-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8125rem; color: hsl(var(--kv-muted-foreground)); }
.kv-toc { position: sticky; top: 6rem; padding: 1.25rem; border: 1px solid hsl(var(--kv-border)); border-radius: var(--kv-radius); font-size: 0.875rem; }

/* ───────────────────────── Header, footer, links ───────────────────────── */
.kv-link { color: hsl(var(--kv-muted-foreground)); text-decoration: none; transition: color 0.2s ease; }
.kv-link:hover { color: hsl(var(--kv-foreground)); }

.kv-header { position: sticky; top: 0; z-index: 100; padding: 0.875rem var(--kv-gutter); border-bottom: 1px solid hsl(var(--kv-border) / 0.6); background: hsl(var(--kv-background) / 0.7); backdrop-filter: blur(16px) saturate(140%); }
.kv-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.kv-header__nav .bricks-nav-menu { gap: 0.25rem; }
.kv-header__nav .bricks-nav-menu > li > a { padding: 0.5rem 0.9rem; border-radius: var(--kv-radius-full); color: hsl(var(--kv-foreground) / 0.8); font-size: 0.9375rem; transition: background 0.2s ease, color 0.2s ease; }
.kv-header__nav .bricks-nav-menu > li > a:hover { background: hsl(var(--kv-foreground) / 0.07); color: hsl(var(--kv-foreground)); }

.kv-footer { padding-bottom: 2rem; }

/* ───────────────────────── Backgrounds ───────────────────────── */
/* Use .kv-shader on a wrapper; kervio-shader.js injects the <canvas>. The gradient is the no-WebGL fallback. */
.kv-shader {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(60% 60% at 20% 20%, hsl(var(--kv-primary) / 0.45), transparent 70%),
        radial-gradient(50% 50% at 85% 75%, hsl(var(--kv-accent) / 0.22), transparent 70%),
        hsl(var(--kv-background));
}
.kv-shader > canvas.kv-shader__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.kv-shader::after { /* vignette keeps text readable */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, hsl(var(--kv-background) / 0.1), hsl(var(--kv-background) / 0.85) 100%);
    pointer-events: none;
}
.kv-shader--hero { min-height: min(100svh, 980px); display: flex; align-items: center; }

.kv-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.06;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.kv-grid-bg {
    background-image:
        linear-gradient(hsl(var(--kv-foreground) / 0.04) 1px, transparent 1px),
        linear-gradient(90deg, hsl(var(--kv-foreground) / 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.kv-glow-border { border: 1px solid transparent; background: linear-gradient(hsl(var(--kv-card)), hsl(var(--kv-card))) padding-box, linear-gradient(135deg, hsl(var(--kv-primary)), hsl(var(--kv-accent) / 0.6), transparent 70%) border-box; }

/* ───────────────────────── Utilities ───────────────────────── */
.kv-relative { position: relative; }
.kv-z1 { position: relative; z-index: 1; }
.kv-hide-mobile { display: initial; }
.kv-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) { .kv-hide-mobile { display: none !important; } }