@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =====================================================================
   GRID FRAMEWORK v7 — estilos.css
   ---------------------------------------------------------------------
   Lightweight, no-build CSS framework for landing pages and layouts.
   Every class from v6 still works (.row, .desktopContainer, .grid,
   .cols-*, .layer + 9-point, .card, .btn, header, drawer, footer...).

   THEMING QUICK GUIDE
   - Light / dark follows the OS by default.
   - Force a theme ........ <html data-theme="dark">  (or "light")
   - Invert one section ... <section class="theme-dark">  / "theme-light"
   - Change brand color ... edit --brand / --brand-2 below
                            or <html data-accent="emerald">
                            or <section style="--brand:#e11d48">
   - Rounder / sharper .... edit --radius
   - Optional JS .......... framework.js (theme toggle, drawer, tabs,
                            modals, toasts, reveal-on-scroll, ...)

   TABLE OF CONTENTS
     01. Design tokens
     02. Color themes (light / dark) & accents
     03. Reset & base
     04. Typography
     05. Containers & rows
     06. Grid system
     07. 9-point alignment layer
     08. Layout primitives
     09. Header & navigation
     10. Buttons
     11. Badges, pills & eyebrows
     12. Cards
     13. Forms
     14. Alerts & toasts
     15. Overlays (modal, dropdown, tooltip)
     16. Accordion & tabs
     17. Data display
     18. Breadcrumbs & pagination
     19. Landing sections
     20. Effects & backgrounds
     21. Motion & scroll animations
     22. Footer
     23. Utilities
     24. Responsive
     25. Accessibility & reduced motion
     26. Fallback for older browsers
   ===================================================================== */


/* =====================================================================
   01. DESIGN TOKENS — edit these to re-skin the whole framework
   ===================================================================== */

:root {
  /* Brand ------------------------------------------------------------ */
  --brand: #4f46e5;            /* main color: buttons, links, focus   */
  --brand-2: #c026d3;          /* secondary: gradients & highlights   */
  --brand-contrast: #ffffff;   /* text placed on top of --brand       */

  /* Typography -------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale (min → max between ~360px and ~1280px viewports) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  --text-3xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --text-4xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);
  --text-5xl: clamp(2.5rem, 1.8rem + 3.4vw, 4.25rem);
  --text-6xl: clamp(2.75rem, 1.7rem + 5vw, 5.5rem);

  --leading-none: 1;
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tighter: -0.04em;
  --tracking-tight: -0.022em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.1em;

  /* Spacing scale (4px base) ----------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius — change --radius and every corner follows ----------------- */
  --radius: 10px;
  --radius-xs: calc(var(--radius) * 0.4);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) * 1.4);
  --radius-xl: calc(var(--radius) * 2);
  --radius-2xl: calc(var(--radius) * 2.8);
  --radius-full: 9999px;

  /* Layout ------------------------------------------------------------ */
  --container-max: 1100px;     /* .desktopContainer (v6 value)        */
  --container-narrow: 760px;   /* .narrowContainer                    */
  --container-wide: 1320px;    /* .wideContainer                      */
  --container-pad: 20px;
  --header-height: 70px;
  --row-space: 40px;           /* .row vertical padding (v6 value)    */
  --section-space: clamp(4rem, 2.5rem + 6vw, 7.5rem); /* .section     */
  --grid-gap: 20px;            /* .grid gap (v6 value)                */

  /* Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.15s;
  --duration: 0.25s;
  --duration-slow: 0.6s;

  /* Z-index scale ----------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 1000;
  --z-backdrop: 1999;
  --z-drawer: 2000;
  --z-toast: 3000;

  /* Breakpoints (reference only — CSS variables can't be used in
     media queries): tablet ≤ 1024px · mobile ≤ 768px · small ≤ 480px */

  /* Internal UI icons (used by components, masked with currentColor) */
  --gf-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --gf-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --gf-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --gf-icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
  --gf-icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
  --gf-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --gf-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --gf-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --gf-icon-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
  --gf-icon-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
  --gf-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}


/* =====================================================================
   02. COLOR THEMES — light-dark(LIGHT, DARK) keeps both values together
   ===================================================================== */

:root {
  color-scheme: light dark;    /* follow the OS */

  /* Surfaces */
  --bg:             light-dark(#ffffff, #0a0b0f);
  --bg-subtle:      light-dark(#f7f8fa, #0f1116);
  --surface:        light-dark(#ffffff, #13151b);
  --surface-2:      light-dark(#f3f4f6, #1a1d25);
  --surface-3:      light-dark(#e8eaee, #242833);
  --surface-glass:  light-dark(rgb(255 255 255 / 0.72), rgb(19 21 27 / 0.72));
  --surface-inverse: light-dark(#0f1117, #f5f6f8);
  --border:         light-dark(#e5e7eb, #23262f);
  --border-strong:  light-dark(#d1d5db, #343845);
  --border-glass:   light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.08));
  --footer-bg:      light-dark(#f7f8fa, #07080b);

  /* Text */
  --text-strong:    light-dark(#0a0c12, #f5f6f9);
  --text:           light-dark(#2c313c, #cfd4dd);
  --text-muted:     light-dark(#5f6878, #959db0);
  --text-subtle:    light-dark(#8b93a3, #697084);
  --text-inverse:   light-dark(#ffffff, #0a0b0f);

  /* Status */
  --success:        light-dark(#15803d, #4ade80);
  --success-soft:   light-dark(#ecfdf3, rgb(74 222 128 / 0.1));
  --success-border: light-dark(#bbf7d0, rgb(74 222 128 / 0.25));
  --warning:        light-dark(#b45309, #fbbf24);
  --warning-soft:   light-dark(#fffbeb, rgb(251 191 36 / 0.1));
  --warning-border: light-dark(#fde68a, rgb(251 191 36 / 0.25));
  --danger:         light-dark(#dc2626, #f87171);
  --danger-soft:    light-dark(#fef2f2, rgb(248 113 113 / 0.1));
  --danger-border:  light-dark(#fecaca, rgb(248 113 113 / 0.25));
  --info:           light-dark(#0369a1, #38bdf8);
  --info-soft:      light-dark(#f0f9ff, rgb(56 189 248 / 0.1));
  --info-border:    light-dark(#bae6fd, rgb(56 189 248 / 0.25));
  --success-solid:  #16a34a;
  --danger-solid:   #dc2626;

  /* Elevation */
  --shadow-xs: 0 1px 2px light-dark(rgb(15 23 42 / 0.05), rgb(0 0 0 / 0.4));
  --shadow-sm: 0 1px 3px light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.45)), 0 1px 2px light-dark(rgb(15 23 42 / 0.04), rgb(0 0 0 / 0.3));
  --shadow-md: 0 6px 16px -4px light-dark(rgb(15 23 42 / 0.1), rgb(0 0 0 / 0.5)), 0 2px 4px -2px light-dark(rgb(15 23 42 / 0.05), rgb(0 0 0 / 0.35));
  --shadow-lg: 0 16px 36px -10px light-dark(rgb(15 23 42 / 0.16), rgb(0 0 0 / 0.6)), 0 4px 10px -4px light-dark(rgb(15 23 42 / 0.06), rgb(0 0 0 / 0.4));
  --shadow-xl: 0 28px 64px -16px light-dark(rgb(15 23 42 / 0.25), rgb(0 0 0 / 0.7)), 0 8px 20px -8px light-dark(rgb(15 23 42 / 0.08), rgb(0 0 0 / 0.5));
}

/* Brand-derived tokens. Re-declared on every element that changes the
   brand (data-accent or an inline --brand) so everything stays in sync. */
:root,
[data-accent],
[style*="--brand"] {
  --primary:            var(--brand);
  --primary-contrast:   var(--brand-contrast);
  --primary-hover:      light-dark(color-mix(in oklab, var(--brand), #000 14%), color-mix(in oklab, var(--brand), #fff 14%));
  --primary-text:       light-dark(color-mix(in oklab, var(--brand), #000 8%), color-mix(in oklab, var(--brand), #fff 38%));
  --primary-soft:       color-mix(in oklab, var(--brand) 11%, transparent);
  --primary-soft-hover: color-mix(in oklab, var(--brand) 18%, transparent);
  --primary-border:     color-mix(in oklab, var(--brand) 35%, transparent);
  --ring:               color-mix(in oklab, var(--brand) 38%, transparent);
  --accent:             var(--brand-2);
  --accent-text:        light-dark(color-mix(in oklab, var(--brand-2), #000 8%), color-mix(in oklab, var(--brand-2), #fff 35%));
  --accent-soft:        color-mix(in oklab, var(--brand-2) 11%, transparent);
  --gradient:           linear-gradient(135deg, var(--brand), var(--brand-2));
  --gradient-text:      linear-gradient(110deg, var(--primary-text), var(--accent-text));
  --shadow-glow:        0 12px 40px -12px color-mix(in oklab, var(--brand) 65%, transparent);
}

/* Force a theme on the whole page */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Base paint for .theme-light / .theme-dark sections (zero specificity,
   so components keep their own backgrounds). The color-scheme switch
   itself lives in 23. Utilities so it always wins. */
:where(.theme-light, .theme-dark) {
  background-color: var(--bg);
  color: var(--text);
}

/* Accent presets: <html data-accent="emerald"> or on any section */
[data-accent="indigo"]  { --brand: #4f46e5; --brand-2: #c026d3; --brand-contrast: #ffffff; }
[data-accent="blue"]    { --brand: #2563eb; --brand-2: #0891b2; --brand-contrast: #ffffff; }
[data-accent="violet"]  { --brand: #7c3aed; --brand-2: #db2777; --brand-contrast: #ffffff; }
[data-accent="emerald"] { --brand: #059669; --brand-2: #0284c7; --brand-contrast: #ffffff; }
[data-accent="teal"]    { --brand: #0d9488; --brand-2: #4f46e5; --brand-contrast: #ffffff; }
[data-accent="rose"]    { --brand: #e11d48; --brand-2: #f59e0b; --brand-contrast: #ffffff; }
[data-accent="orange"]  { --brand: #ea580c; --brand-2: #db2777; --brand-contrast: #ffffff; }
[data-accent="amber"]   { --brand: #d97706; --brand-2: #dc2626; --brand-contrast: #1c1206; }


/* =====================================================================
   03. RESET & BASE
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;    /* no layout jump when a modal / drawer locks scrolling */
  hanging-punctuation: first last;
}

/* Anchors land below a sticky / fixed header */
html:has(.header-sticky, .header-fixed) {
  scroll-padding-top: calc(var(--header-height) + 16px);
  --sticky-offset: calc(var(--header-height) + 24px);
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background-color: var(--bg);
  overflow-x: clip;            /* like hidden, but keeps position: sticky working */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

img,
svg,
video,
canvas,
iframe {
  vertical-align: middle;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

::selection {
  background-color: color-mix(in oklab, var(--brand) 28%, transparent);
}

hr {
  height: 0;
  margin: var(--space-8) 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.debug {
  outline: 1px solid red;
  outline-offset: -1px;
}


/* =====================================================================
   04. TYPOGRAPHY
   ===================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0 0 0.5em;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  text-wrap: balance;
}

h1, .h1 { font-size: var(--text-5xl); font-weight: 800; letter-spacing: var(--tracking-tighter); }
h2, .h2 { font-size: var(--text-3xl); letter-spacing: -0.03em; }
h3, .h3 { font-size: var(--text-xl); }
h4, .h4 { font-size: var(--text-lg); line-height: var(--leading-snug); }
h5, .h5 { font-size: var(--text-base); line-height: var(--leading-snug); }
h6, .h6 { font-size: var(--text-sm); line-height: var(--leading-snug); letter-spacing: 0; }

p {
  margin: 0 0 1em;
}

p,
li,
figcaption,
blockquote {
  text-wrap: pretty;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

a {
  color: var(--primary-text);
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* Plain links inside running text get an underline (accessibility) */
:where(p, li, dd, td, figcaption, blockquote) a:not([class]) {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in oklab, var(--brand) 45%, transparent);
  transition: text-decoration-color var(--duration-fast) ease;
}

:where(p, li, dd, td, figcaption, blockquote) a:not([class]):hover {
  text-decoration-color: currentColor;
}

b,
strong {
  font-weight: 600;
}

small,
.small {
  font-size: var(--text-sm);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background-color: var(--surface-2);
  color: var(--text-strong);
  font-size: 0.85em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.1em 0.45em;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background-color: var(--surface);
  color: var(--text-strong);
  font-size: 0.8em;
  text-align: center;
  line-height: 1.5;
}

mark {
  padding: 0 0.2em;
  border-radius: 3px;
  background-color: color-mix(in oklab, #facc15 45%, transparent);
  color: inherit;
}

blockquote {
  margin: 0 0 1em;
}

pre {
  margin: 0 0 1em;
  overflow-x: auto;
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--text-muted);
}

.display {
  font-size: var(--text-6xl);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--tracking-tighter);
}

.text-gradient {
  background-image: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Long-form content (blog posts, legal pages) */
.prose {
  max-width: 70ch;
  font-size: 1.0625rem;
  line-height: var(--leading-relaxed);
}

.prose :where(h2, h3, h4) { margin-top: 1.8em; }
.prose :where(h2) { font-size: var(--text-2xl); }
.prose :where(h3) { font-size: var(--text-xl); }
.prose :where(p, ul, ol, blockquote, pre, figure) { margin-bottom: 1.25em; }
.prose :where(a) { text-decoration-line: underline; }
.prose :where(li) { margin-bottom: 0.4em; }
.prose :where(li)::marker { color: var(--primary-text); }
.prose :where(img, video) { border-radius: var(--radius-lg); }
.prose :where(figcaption) { margin-top: 0.6em; font-size: var(--text-sm); color: var(--text-muted); text-align: center; }

.prose :where(blockquote) {
  padding-left: 1.1em;
  border-left: 3px solid var(--primary);
  color: var(--text-strong);
  font-size: 1.125rem;
  font-style: italic;
}


/* =====================================================================
   05. CONTAINERS & ROWS
   ===================================================================== */

.row {
  width: 100%;
  padding: var(--row-space) 0;
}

.row-sm  { padding-block: calc(var(--row-space) * 0.5); }
.row-lg,
.section { padding-block: var(--section-space); }
.row-flush { padding-block: 0; }

.desktopContainer,
.fullContainer,
.narrowContainer,
.wideContainer {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.desktopContainer { max-width: var(--container-max); }
.fullContainer    { max-width: 100%; }
.narrowContainer  { max-width: var(--container-narrow); }
.wideContainer    { max-width: var(--container-wide); }

/* Demo helpers kept from v6 (now theme-aware) */
.nested-box {
  min-height: 250px;
  background-color: var(--success-soft);
  border-radius: var(--radius-md);
}

.bg {
  background-color: rgb(127 127 127 / 0.08);
  z-index: -1;
}

.box {
  padding: 20px;
  border: 1px dashed var(--primary-border);
  border-radius: var(--radius-md);
  background-color: var(--primary-soft);
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: 500;
}

.altoUno {
  min-height: 250px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface-2);
}


/* =====================================================================
   06. GRID SYSTEM
   ===================================================================== */

.grid     { display: grid; gap: var(--grid-gap); }
.grid0gap { display: grid; gap: 0px; }

.cols-1  { grid-template-columns: minmax(0, 1fr); }
.cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Asymmetric columns */
.cols-300-auto { grid-template-columns: 300px minmax(0, 1fr); }
.cols-auto-250 { grid-template-columns: minmax(0, 1fr) 250px; }
.cols-250-auto { grid-template-columns: 250px minmax(0, 1fr); }
.cols-auto-300 { grid-template-columns: minmax(0, 1fr) 300px; }
.cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.cols-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cols-1-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.cols-3-1 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.cols-2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.cols-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

/* Auto-fit: as many columns as fit, each at least --min wide.
   No media queries needed:  <div class="grid grid-auto" style="--min:200px"> */
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 240px), 100%), 1fr));
}

/* Spans (work inside any grid) */
.span-2  { grid-column: span 2; }
.span-3  { grid-column: span 3; }
.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-9  { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }
.span-full { grid-column: 1 / -1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }

.order-first { order: -1; }
.order-last  { order: 99; }

/* Gap helpers (pixel names like v6) */
.gap-0  { gap: 0; }
.gap-5  { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }
.gap-40 { gap: 40px; }
.gap-60 { gap: 60px; }


/* =====================================================================
   07. 9-POINT ALIGNMENT LAYER
   ===================================================================== */

.layer {
  display: grid;
  position: relative;
  isolation: isolate;          /* keeps z-index: -1 children inside the layer */
}

.layer > * {
  grid-area: 1 / 1;
}

.tl { place-self: start start; }
.tc { place-self: start center; }
.tr { place-self: start end; }

.cl { place-self: center start; }
.cc { place-self: center; }
.cr { place-self: center end; }

.bl { place-self: end start; }
.bc { place-self: end center; }
.br { place-self: end end; }

/* Full-bleed media + readable scrim behind layered content */
.layer > .layer-bg,
.layer > .layer-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.layer > .layer-bg {
  z-index: -2;
  object-fit: cover;
  border-radius: inherit;
}

.layer > .layer-overlay {
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.15) 55%, rgb(0 0 0 / 0.05));
}

/* Inset layered content from the edges */
.layer-inset > :not(.bg, .layer-bg, .layer-overlay) {
  margin: var(--layer-inset, 24px);
}


/* =====================================================================
   08. LAYOUT PRIMITIVES
   ===================================================================== */

/* Vertical rhythm: children separated by --stack-gap */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-4));
}

.stack > * { margin-block: 0; }
.stack-sm { --stack-gap: var(--space-2); }
.stack-lg { --stack-gap: var(--space-8); }

/* Horizontal group that wraps (buttons, tags, icons) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-3));
}

/* Two ends pushed apart */
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.center {
  display: grid;
  place-items: center;
}

/* Container queries: children react to this box's width, not the viewport */
.cq {
  container-type: inline-size;
}

/* Bento grid: mix .span-2 / .row-span-2 tiles */
.bento {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--bento-row, 190px), auto);
  grid-auto-flow: dense;       /* back-fills holes left by big tiles */
}

.bento-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* .sticky-top lives in 23. Utilities so it also works on cards */


/* =====================================================================
   09. HEADER & NAVIGATION
   ===================================================================== */

/* Default header scrolls with the page (v6 "menu no fijo" behaviour).
   Add .header-sticky or .header-fixed to pin it. */
.site-header {
  position: relative;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  background-color: var(--surface-glass);
  -webkit-backdrop-filter: saturate(1.8) blur(14px);
  backdrop-filter: saturate(1.8) blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--duration) ease, box-shadow var(--duration) ease, border-color var(--duration) ease;
}

/* A header with its own theme is opaque (glass over the other theme looks grey) */
.site-header.theme-dark,
.site-header.theme-light {
  background-color: var(--surface);
}

.site-header.header-sticky { position: sticky; }

.site-header.header-fixed {
  position: fixed;
  left: 0;
  right: 0;
}

body:has(> .site-header.header-fixed) {
  padding-top: var(--header-height);
}

/* Transparent until the page scrolls (needs framework.js for .is-scrolled) */
body:has(> .site-header.header-fixed.header-transparent) {
  padding-top: 0;
}

.site-header.header-transparent:not(.is-scrolled) {
  background-color: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  height: var(--header-height);
}

.logo-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-square {
  width: 45px;
  height: 45px;
  object-fit: contain;
  display: block;
}

/* Text logo: <a class="brand"><span class="brand-mark">GF</span> Name</a> */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-strong);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--gradient);
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgb(255 255 255 / 0.25);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.desktop-menu {
  display: flex;
  gap: 2px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.desktop-menu a:not(.btn),
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.desktop-menu a:not(.btn):hover,
.nav-link:hover {
  color: var(--text-strong);
  background-color: var(--surface-2);
}

.desktop-menu a.is-active:not(.btn),
.desktop-menu a[aria-current="page"]:not(.btn),
.nav-link.is-active {
  color: var(--primary-text);
  background-color: var(--primary-soft);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Light / dark toggle: <button class="theme-toggle" data-theme-toggle></button> */
.theme-toggle {
  --tt-icon: var(--gf-icon-moon);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--surface);
  color: var(--text-strong);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.theme-toggle:hover {
  background-color: var(--surface-2);
  border-color: var(--border-strong);
}

.theme-toggle::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--tt-icon) center / contain no-repeat;
  mask: var(--tt-icon) center / contain no-repeat;
  transition: transform 0.5s var(--ease-spring);
}

.theme-toggle:active::before {
  transform: rotate(40deg) scale(0.85);
}

:root[data-theme="dark"] .theme-toggle { --tt-icon: var(--gf-icon-sun); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle { --tt-icon: var(--gf-icon-sun); }
}

/* Mobile nav trigger & drawer */
.mobile-menu-btn {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  color: var(--text-strong);
  cursor: pointer;
  font-size: 22px;
}

.mobile-menu-btn:hover {
  background-color: var(--surface-2);
}

.mobile-menu-btn img {
  width: 22px;
  height: 22px;
  display: block;
}

/* v6 used a black SVG image for the burger: invert it in dark mode */
:root[data-theme="dark"] .mobile-menu-btn img { filter: invert(1); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mobile-menu-btn img { filter: invert(1); }
}

.mobile-menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: 320px;                /* wider panel */
  max-width: 85vw;             /* prevents overflow on very small devices */
  height: 100vh;
  height: 100dvh;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--surface);
  color: var(--text);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
}

.mobile-menu-drawer.active {
  transform: none;
  visibility: visible;
  transition: transform 0.4s var(--ease-out), visibility 0s;
}

.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.mobile-close-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-strong);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.mobile-close-btn:hover {
  background-color: var(--surface-2);
}

.mobile-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-links a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.mobile-links a:hover,
.mobile-links a.is-active,
.mobile-links a[aria-current="page"] {
  transform: translateX(4px);
  color: var(--primary-text);
  background-color: var(--primary-soft);
}

.mobile-menu-drawer.active .mobile-links > li {
  animation: gf-slide-in 0.45s var(--ease-out) both;
}

.mobile-links > li:nth-child(2) { animation-delay: 40ms; }
.mobile-links > li:nth-child(3) { animation-delay: 80ms; }
.mobile-links > li:nth-child(4) { animation-delay: 120ms; }
.mobile-links > li:nth-child(5) { animation-delay: 160ms; }
.mobile-links > li:nth-child(6) { animation-delay: 200ms; }
.mobile-links > li:nth-child(7) { animation-delay: 240ms; }
.mobile-links > li:nth-child(8) { animation-delay: 280ms; }
.mobile-links > li:nth-child(n+9) { animation-delay: 320ms; }

/* Centered social icons pushed to the bottom of the drawer */
.mobile-social-icons {
  margin-top: auto;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 20px;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background-color: rgb(6 8 14 / 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.nav-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Thin bar above the header */
.announcement {
  position: relative;
  padding: 10px 48px;
  background: var(--gradient);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
}

.announcement a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.announcement .btn-close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: inherit;
}

.announcement .btn-close:hover {
  background-color: rgb(255 255 255 / 0.15);
  color: inherit;
}


/* =====================================================================
   10. BUTTONS
   ===================================================================== */

.btn {
  --btn-bg: var(--surface);
  --btn-color: var(--text-strong);
  --btn-border: var(--border-strong);
  --btn-hover-bg: var(--surface-2);
  --btn-hover-color: var(--btn-color);
  --btn-hover-border: var(--btn-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 42px;
  padding: 10px 20px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background-color: var(--btn-bg);
  color: var(--btn-color);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease,
              color var(--duration-fast) ease, box-shadow var(--duration) ease, transform var(--duration-fast) ease;
}

.btn:hover {
  background-color: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-color);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px) scale(0.985);
}

.btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.btn .icon {
  font-size: 1.15em;
  transition: transform var(--duration) var(--ease-out);
}

/* Variants */
.btn-primary {
  --btn-bg: var(--primary);
  --btn-color: var(--primary-contrast);
  --btn-border: transparent;
  --btn-hover-bg: var(--primary-hover);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.14);
}

.btn-secondary {
  --btn-bg: var(--surface-2);
  --btn-border: transparent;
  --btn-hover-bg: var(--surface-3);
}

.btn-outline {
  --btn-bg: transparent;
  --btn-color: var(--primary-text);
  --btn-border: var(--primary);
  --btn-hover-bg: var(--primary);
  --btn-hover-color: var(--primary-contrast);
}

.btn-soft {
  --btn-bg: var(--primary-soft);
  --btn-color: var(--primary-text);
  --btn-border: transparent;
  --btn-hover-bg: var(--primary-soft-hover);
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-color: var(--text);
  --btn-border: transparent;
  --btn-hover-bg: var(--surface-2);
  --btn-hover-color: var(--text-strong);
}

.btn-contrast {
  --btn-bg: var(--text-strong);
  --btn-color: var(--bg);
  --btn-border: transparent;
  --btn-hover-bg: var(--text);
}

.btn-gradient {
  --btn-color: #ffffff;
  --btn-border: transparent;
  background-image: var(--gradient);
  background-size: 140% 140%;
  background-position: 0% 50%;
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgb(255 255 255 / 0.2);
  transition: background-position 0.5s var(--ease-out), box-shadow var(--duration) ease, transform var(--duration-fast) ease;
}

.btn-gradient:hover {
  background-position: 100% 50%;
}

.btn-success {
  --btn-bg: var(--success-solid);
  --btn-color: #ffffff;
  --btn-border: transparent;
  --btn-hover-bg: color-mix(in oklab, var(--success-solid), #000 12%);
}

.btn-danger {
  --btn-bg: var(--danger-solid);
  --btn-color: #ffffff;
  --btn-border: transparent;
  --btn-hover-bg: color-mix(in oklab, var(--danger-solid), #000 12%);
}

/* For use on top of gradients / photos */
.btn-light {
  --btn-bg: #ffffff;
  --btn-color: #0a0b0f;
  --btn-border: transparent;
  --btn-hover-bg: rgb(255 255 255 / 0.88);
}

.btn-glass {
  --btn-bg: rgb(255 255 255 / 0.12);
  --btn-color: #ffffff;
  --btn-border: rgb(255 255 255 / 0.28);
  --btn-hover-bg: rgb(255 255 255 / 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn-link {
  --btn-bg: transparent;
  --btn-color: var(--primary-text);
  --btn-border: transparent;
  --btn-hover-bg: transparent;
  min-height: 0;
  padding: 0;
}

.btn-link:hover {
  text-decoration: underline;
}

/* Sizes & shapes */
.btn-sm { min-height: 34px; padding: 6px 14px; font-size: 14px; border-radius: var(--radius-sm); }
.btn-lg { min-height: 50px; padding: 13px 26px; font-size: 16px; }
.btn-xl { min-height: 58px; padding: 16px 32px; font-size: 17px; border-radius: var(--radius-lg); }
.btn-pill  { border-radius: var(--radius-full); }
.btn-block { display: flex; width: 100%; }

.btn-icon { width: 42px; padding: 0; }
.btn-icon.btn-sm { width: 34px; }
.btn-icon.btn-lg { width: 50px; }

/* Nudge a trailing arrow on hover: <span class="icon i-arrow-right icon-nudge"> */
.btn:hover .icon-nudge { transform: translateX(3px); }

/* Loading state */
.btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 1.1em;
  height: 1.1em;
  margin: auto;
  border: 2px solid var(--btn-color);
  border-right-color: transparent;
  border-radius: 50%;
  animation: gf-spin 0.7s linear infinite;
}

/* Attached buttons */
.btn-group {
  display: inline-flex;
  isolation: isolate;
}

.btn-group > .btn { border-radius: 0; }
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group > .btn:first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
.btn-group > .btn:last-child { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.btn-group > .btn:hover,
.btn-group > .btn:focus-visible { z-index: 1; }

/* Small square close button: <button class="btn-close" aria-label="Close"></button> */
.btn-close {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.btn-close::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--gf-icon-x) center / contain no-repeat;
  mask: var(--gf-icon-x) center / contain no-repeat;
}

.btn-close:hover {
  background-color: var(--surface-2);
  color: var(--text-strong);
}


/* =====================================================================
   11. BADGES, PILLS & EYEBROWS
   ===================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  padding: 0.2em 0.65em;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--surface-2);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.badge-primary { background-color: var(--primary-soft); color: var(--primary-text); border-color: var(--primary-border); }
.badge-success { background-color: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.badge-warning { background-color: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.badge-danger  { background-color: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-border); }
.badge-info    { background-color: var(--info-soft);    color: var(--info);    border-color: var(--info-border); }
.badge-solid   { background-color: var(--primary); color: var(--primary-contrast); border-color: transparent; }
.badge-gradient { background-image: var(--gradient); color: #ffffff; border-color: transparent; }
.badge-outline { background-color: transparent; }
.badge-glass   { background-color: rgb(255 255 255 / 0.18); color: #ffffff; border-color: rgb(255 255 255 / 0.3); }
.badge-lg      { padding: 0.35em 0.9em; font-size: 0.8125rem; }

.badge-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

/* Announcement pill (hero) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--duration) ease, box-shadow var(--duration) ease;
}

.pill:hover {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 4px var(--primary-soft);
  text-decoration: none;
}

.pill > .badge { border: 0; }
.pill .icon { transition: transform var(--duration) var(--ease-out); }
.pill:hover .icon { transform: translateX(2px); }

/* Small uppercase label above titles */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--space-3);
  color: var(--primary-text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Live status dot: <span class="status-dot status-dot-pulse"></span> */
.status-dot {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--dot-color, var(--success));
}

.status-dot-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: inherit;
  animation: gf-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}


/* =====================================================================
   12. CARDS
   ===================================================================== */

.card {
  --card-pad: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

.card > :last-child { margin-bottom: 0; }

/* Buttons line up at the bottom of equal-height cards (v6 behaviour) */
.card > button,
.card > .btn,
.card > .card-footer {
  margin-top: auto;
}

.card-sm { --card-pad: 16px; }
.card-lg { --card-pad: 32px; }

.card-title { margin-bottom: 0.35em; font-size: var(--text-lg); }
.card-text  { color: var(--text-muted); }

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-3);
  color: var(--text-subtle);
  font-size: var(--text-sm);
}

.card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

.card-divider {
  margin: var(--space-4) calc(var(--card-pad) * -1);
  border: 0;
  border-top: 1px solid var(--border);
}

/* Image / placeholder that bleeds to the card edges */
.card-media {
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}

.card-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

/* Variants */
.card-hover {
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), border-color var(--duration) ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.card-hover:hover .card-media > img,
.card-hover:hover .card-media > .ph {
  transform: scale(1.04);
}

.card-flat {
  border-color: transparent;
  background-color: var(--surface-2);
  box-shadow: none;
}

.card-elevated {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}

.card-glass {
  border-color: var(--border-glass);
  background-color: var(--surface-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
}

.card-featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--shadow-glow);
}

.card-gradient-border {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box;
}

/* Badge pinned on the top edge (e.g. "Most popular") */
.card-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Make the whole card clickable: <a class="card-link" href="...">Title</a> */
.card-link {
  color: inherit;
  text-decoration: none;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.card-link:focus-visible {
  outline: none;
}

.card-link:focus-visible::after {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Adapts to its CONTAINER: stacked when narrow, side-by-side when wide.
   Wrap it in an element with class .cq */
@container (min-width: 560px) {
  .card-adaptive {
    flex-direction: row;
    gap: var(--card-pad);
  }

  .card-adaptive > .card-media {
    flex: 0 0 42%;
    aspect-ratio: auto;
    min-height: 220px;
    margin: calc(var(--card-pad) * -1) 0 calc(var(--card-pad) * -1) calc(var(--card-pad) * -1);
    border-radius: calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px);
  }

  .card-adaptive > .card-content {
    align-self: center;
  }
}

/* Feature icon tile */
.icon-box {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--primary-soft);
  color: var(--primary-text);
  font-size: 22px;
}

.icon-box-sm { width: 38px; height: 38px; font-size: 18px; border-radius: var(--radius-sm); }
.icon-box-lg { width: 60px; height: 60px; font-size: 28px; border-radius: var(--radius-lg); }
.icon-box-round { border-radius: 50%; }
.icon-box-solid { background-color: var(--primary); color: var(--primary-contrast); }

.icon-box-gradient {
  background-image: var(--gradient);
  color: #ffffff;
  box-shadow: var(--shadow-glow);
}

.icon-box-outline {
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text-strong);
  box-shadow: var(--shadow-xs);
}


/* =====================================================================
   13. FORMS
   ===================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.label {
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: 500;
}

.label .req { color: var(--danger); }

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  color: var(--text-strong);
  font-size: 0.9375rem;
  line-height: 1.4;
  box-shadow: var(--shadow-xs);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-subtle);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--text-subtle);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--surface-2);
}

/* Validation: :user-invalid only kicks in after the user interacts */
.input:user-invalid,
.select:user-invalid,
.textarea:user-invalid,
.is-invalid {
  border-color: var(--danger);
}

.input:user-invalid:focus,
.textarea:user-invalid:focus,
.is-invalid:focus {
  box-shadow: 0 0 0 4px color-mix(in oklab, #dc2626 22%, transparent);
}

.is-valid { border-color: var(--success); }

.help-text {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.field-error {
  display: none;
  color: var(--danger);
  font-size: 0.8125rem;
}

.field:has(:user-invalid) .field-error,
.field:has(.is-invalid) .field-error {
  display: block;
}

.field:has(:user-invalid) .help-text {
  display: none;
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

.select {
  padding-right: 40px;
  background-image: var(--gf-select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  cursor: pointer;
}

.input-sm { min-height: 36px; padding: 6px 12px; font-size: var(--text-sm); }
.input-lg { min-height: 52px; padding: 13px 18px; font-size: 1rem; }

.input[type="file"] {
  padding: 6px;
}

.input::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  color: var(--text-strong);
  font-weight: 500;
  cursor: pointer;
}

/* Input with a leading icon */
.input-icon {
  position: relative;
}

.input-icon > .icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--text-subtle);
  font-size: 18px;
  pointer-events: none;
}

.input-icon > .input {
  padding-left: 42px;
}

/* Input + button on one line (newsletter, search) */
.input-row {
  display: flex;
  gap: 8px;
}

.input-row > .input {
  flex: 1;
  min-width: 0;
}

/* Joined addon: <div class="input-group"><span class="input-addon">https://</span><input class="input"></div> */
.input-group {
  display: flex;
}

.input-group > * {
  border-radius: 0;
}

.input-group > :first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
.input-group > :last-child  { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.input-group > * + * { margin-left: -1px; }
.input-group > .input { flex: 1; min-width: 0; }
.input-group > .input:focus { position: relative; z-index: 1; }

.input-addon {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  background-color: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* Checkbox & radio (native, tinted with the brand color) */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.45;
  cursor: pointer;
}

.check input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.range {
  width: 100%;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Switch: <label class="switch"><input type="checkbox"><span class="switch-ui"></span> Label</label> */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.switch-ui {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-full);
  background-color: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: background-color var(--duration) ease, box-shadow var(--duration) ease;
}

.switch-ui::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  transition: transform var(--duration) var(--ease-spring);
}

.switch input:checked + .switch-ui {
  background-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.switch input:checked + .switch-ui::before {
  transform: translateX(20px);
}

.switch input:focus-visible + .switch-ui {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.switch input:disabled + .switch-ui {
  opacity: 0.5;
}

/* Segmented control (radio group or buttons with aria-pressed) */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface-2);
}

.segmented > label,
.segmented > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.segmented > label:hover,
.segmented > button:hover {
  color: var(--text-strong);
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented > label:has(input:checked),
.segmented > button[aria-pressed="true"],
.segmented > button[aria-selected="true"] {
  background-color: var(--surface);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
}

.segmented > label:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.segmented .icon { font-size: 1.05em; }

.segmented-full { display: flex; }
.segmented-full > * { flex: 1; }


/* =====================================================================
   14. ALERTS & TOASTS
   ===================================================================== */

.alert {
  --alert-color: var(--primary-text);
  --alert-bg: var(--primary-soft);
  --alert-border: var(--primary-border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--alert-border);
  border-radius: var(--radius-md);
  background-color: var(--alert-bg);
  color: var(--text);
  font-size: 0.9375rem;
}

.alert > .icon:first-child {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--alert-color);
  font-size: 20px;
}

.alert-body { flex: 1; min-width: 0; }
.alert p { margin: 0; }

.alert-title {
  display: block;
  margin-bottom: 2px;
  color: var(--text-strong);
  font-weight: 600;
}

.alert .btn-close { margin: -4px -6px -4px auto; }

.alert-info    { --alert-color: var(--info);    --alert-bg: var(--info-soft);    --alert-border: var(--info-border); }
.alert-success { --alert-color: var(--success); --alert-bg: var(--success-soft); --alert-border: var(--success-border); }
.alert-warning { --alert-color: var(--warning); --alert-bg: var(--warning-soft); --alert-border: var(--warning-border); }
.alert-danger  { --alert-color: var(--danger);  --alert-bg: var(--danger-soft);  --alert-border: var(--danger-border); }

.alert-accent {
  border-width: 0 0 0 4px;
  border-color: var(--alert-color);
  border-radius: var(--radius-sm);
}

.is-dismissed {
  animation: gf-dismiss 0.25s ease forwards;
}

/* Toasts are created by framework.js → GF.toast('Saved!', { type: 'success' }) */
.toast-region {
  position: fixed;
  inset: auto 20px 20px auto;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 40px));
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  pointer-events: none;
}

.toast {
  --toast-icon: var(--gf-icon-bell);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 12px 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  pointer-events: auto;
  animation: gf-toast-in 0.45s var(--ease-spring) both;
}

.toast.is-leaving {
  animation: gf-toast-out 0.25s ease forwards;
}

/* Keep clear of the back-to-top button */
body:has(.back-to-top.is-visible) .toast-region {
  bottom: 78px;
}

.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background-color: currentColor;
  color: var(--primary-text);
  -webkit-mask: var(--toast-icon) center / contain no-repeat;
  mask: var(--toast-icon) center / contain no-repeat;
}

.toast-body { flex: 1; min-width: 0; font-size: var(--text-sm); }
.toast-title { display: block; margin-bottom: 2px; color: var(--text-strong); font-weight: 600; }
.toast-text { margin: 0; color: var(--text-muted); }
.toast .btn-close { width: 26px; height: 26px; margin: -3px 0; }

.toast-success { --toast-icon: var(--gf-icon-success); }
.toast-warning { --toast-icon: var(--gf-icon-warning); }
.toast-danger  { --toast-icon: var(--gf-icon-danger); }
.toast-info    { --toast-icon: var(--gf-icon-info); }
.toast-success .toast-icon { color: var(--success); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-danger .toast-icon  { color: var(--danger); }
.toast-info .toast-icon    { color: var(--info); }

/* Cookie / consent banner (shown by framework.js) */
.cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(420px, calc(100vw - 40px));
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: var(--surface);
  box-shadow: var(--shadow-xl);
  color: var(--text);
  font-size: var(--text-sm);
  animation: gf-toast-in 0.5s var(--ease-out) both;
}

.cookie-banner p { margin: 0; color: var(--text-muted); }


/* =====================================================================
   15. OVERLAYS — modal (<dialog>), dropdown (popover), tooltip
   ===================================================================== */

.modal {
  width: min(var(--modal-width, 560px), calc(100% - 32px));
  max-height: min(85dvh, 800px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xl);
  overflow: auto;
  overscroll-behavior: contain;
}

.modal::backdrop {
  background-color: rgb(6 8 14 / 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal[open] { animation: gf-modal-in 0.35s var(--ease-out); }
.modal[open]::backdrop { animation: gf-fade-in 0.3s ease; }
.modal.is-closing { animation: gf-modal-out 0.2s ease forwards; }
.modal.is-closing::backdrop { animation: gf-fade-out 0.2s ease forwards; }

html:has(.modal[open]) { overflow: hidden; }

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 0;
}

.modal-header :is(h2, h3, h4) {
  margin: 0;
  font-size: var(--text-xl);
}

.modal-body {
  padding: 14px 24px 24px;
  color: var(--text-muted);
}

.modal-body > :last-child { margin-bottom: 0; }

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background-color: var(--bg-subtle);
}

/* Side sheet variant */
.modal-side {
  width: min(420px, 100%);
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  border-width: 0 0 0 1px;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.modal-side[open] { animation: gf-sheet-in 0.4s var(--ease-out); }
.modal-side.is-closing { animation: gf-sheet-out 0.25s ease forwards; }

/* Dropdown menu using the native Popover API:
   <button popovertarget="menu1">Open</button>
   <div id="menu1" popover class="dropdown-menu">...</div>          */
.dropdown-menu {
  min-width: 220px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.dropdown-menu[popover] {
  inset: auto;
  margin-top: 8px;
  position-area: bottom span-right;
  position-try-fallbacks: flip-block, flip-inline;
}

.dropdown-menu[popover]:popover-open {
  animation: gf-pop-in 0.18s var(--ease-out);
}

.dropdown-item,
.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.dropdown-item:hover,
.dropdown-menu a:hover {
  background-color: var(--surface-2);
  color: var(--text-strong);
}

.dropdown-item .icon,
.dropdown-menu a .icon {
  color: var(--text-subtle);
  font-size: 18px;
}

.dropdown-item small,
.dropdown-menu a small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}

.dropdown-label {
  padding: 8px 12px 4px;
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.dropdown-divider {
  height: 1px;
  margin: 6px -6px;
  background-color: var(--border);
}

/* CSS-only tooltip: <button data-tooltip="Hello">...</button> */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: var(--z-dropdown);
  width: max-content;
  max-width: 240px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 0.15s;
}

[data-tooltip-pos="bottom"]::after {
  top: calc(100% + 8px);
  bottom: auto;
  transform: translate(-50%, -4px);
}


/* =====================================================================
   16. ACCORDION (<details>) & TABS
   ===================================================================== */

.accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  transition: border-color var(--duration) ease, box-shadow var(--duration) ease;
}

.accordion-item[open] {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.accordion-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  color: var(--text-strong);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  border-radius: inherit;
}

.accordion-item > summary::-webkit-details-marker {
  display: none;
}

.accordion-item > summary::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: var(--text-muted);
  -webkit-mask: var(--gf-icon-chevron) center / contain no-repeat;
  mask: var(--gf-icon-chevron) center / contain no-repeat;
  transition: transform var(--duration) var(--ease-out);
}

.accordion-item[open] > summary::after {
  transform: rotate(180deg);
}

.accordion-content {
  padding: 0 20px 20px;
  color: var(--text-muted);
}

.accordion-content > :last-child { margin-bottom: 0; }

/* Divider-only variant */
.accordion-flush { gap: 0; }

.accordion-flush .accordion-item {
  border-width: 0 0 1px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.accordion-flush .accordion-item > summary { padding-inline: 0; }
.accordion-flush .accordion-content { padding-inline: 0; }

/* Smooth open/close where supported (Chrome/Edge today, others soon) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

@supports selector(::details-content) {
  .accordion-item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.35s var(--ease-out), content-visibility 0.35s allow-discrete;
  }

  .accordion-item[open]::details-content {
    block-size: auto;
  }
}

/* Tabs (behaviour in framework.js → data-tabs) */
.tab-list {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface-2);
  scrollbar-width: none;
}

.tab {
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.tab:hover { color: var(--text-strong); }

.tab[aria-selected="true"] {
  background-color: var(--surface);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
}

.tab-panel {
  padding-top: var(--space-6);
}

.tab-panel:not([hidden]) {
  animation: gf-fade-up 0.4s var(--ease-out);
}

.tabs-underline .tab-list {
  display: flex;
  gap: 0;
  padding: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  background: none;
}

.tabs-underline .tab {
  margin-bottom: -1px;
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.tabs-underline .tab[aria-selected="true"] {
  border-bottom-color: var(--primary);
  background: none;
  color: var(--primary-text);
  box-shadow: none;
}


/* =====================================================================
   17. DATA DISPLAY — avatars, progress, skeleton, table, timeline, stats
   ===================================================================== */

/* Avatars */
.avatar {
  --size: 40px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border-radius: 50%;
  background-image: var(--gradient);
  color: #ffffff;
  font-size: calc(var(--size) * 0.38);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-xs { --size: 24px; }
.avatar-sm { --size: 32px; }
.avatar-lg { --size: 56px; }
.avatar-xl { --size: 80px; }
.avatar-2xl { --size: 120px; }
.avatar-square { border-radius: var(--radius-md); }

.avatar-group {
  display: inline-flex;
  align-items: center;
}

.avatar-group > .avatar {
  box-shadow: 0 0 0 3px var(--bg);
}

.avatar-group > .avatar + .avatar {
  margin-left: calc(var(--size) * -0.28);
}

/* Progress */
.progress {
  height: var(--progress-height, 8px);
  overflow: hidden;
  border-radius: var(--radius-full);
  background-color: var(--surface-3);
}

.progress-bar {
  display: block;
  width: var(--value, 50%);
  height: 100%;
  border-radius: inherit;
  background-color: var(--primary);
  transition: width 0.8s var(--ease-out);
}

.progress-gradient .progress-bar { background-image: var(--gradient); }
.progress-success .progress-bar  { background-color: var(--success-solid); }
.progress-danger .progress-bar   { background-color: var(--danger-solid); }

.progress-striped .progress-bar {
  background-image: linear-gradient(45deg, rgb(255 255 255 / 0.2) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / 0.2) 50%, rgb(255 255 255 / 0.2) 75%, transparent 75%);
  background-size: 16px 16px;
  animation: gf-stripes 1s linear infinite;
}

/* Spinner */
.spinner {
  display: inline-block;
  width: var(--size, 24px);
  height: var(--size, 24px);
  border: 3px solid var(--surface-3);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: gf-spin 0.8s linear infinite;
}

/* Skeleton loaders */
.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: gf-shimmer 1.4s ease-in-out infinite;
}

.skeleton-text { height: 12px; margin-bottom: 10px; }
.skeleton-title { height: 20px; width: 60%; margin-bottom: 14px; }
.skeleton-circle { width: var(--size, 44px); height: var(--size, 44px); border-radius: 50%; }

/* Check list */
.list-check {
  display: grid;
  gap: 10px;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.list-check > li {
  position: relative;
  padding-left: 30px;
}

.list-check > li::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--primary-soft);
}

.list-check > li::after {
  content: "";
  position: absolute;
  top: calc(0.15em + 5px);
  left: 5px;
  width: 10px;
  height: 10px;
  background-color: var(--primary-text);
  -webkit-mask: var(--gf-icon-check) center / contain no-repeat;
  mask: var(--gf-icon-check) center / contain no-repeat;
}

.list-check > li.is-off {
  color: var(--text-subtle);
  text-decoration: line-through;
}

.list-check > li.is-off::before { background-color: var(--surface-2); }
.list-check > li.is-off::after  { background-color: var(--text-subtle); -webkit-mask-image: var(--gf-icon-x); mask-image: var(--gf-icon-x); }

/* Stats */
.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-value {
  color: var(--text-strong);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.9375rem;
}

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--success);
  font-size: 0.8125rem;
  font-weight: 600;
}

.stat-trend.is-down { color: var(--danger); }

/* Table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
}

.table th {
  background-color: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.table td {
  border-top: 1px solid var(--border);
}

.table-striped tbody tr:nth-child(even) { background-color: var(--bg-subtle); }
.table-hover tbody tr { transition: background-color var(--duration-fast) ease; }
.table-hover tbody tr:hover { background-color: var(--surface-2); }

/* Timeline */
.timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline > li {
  position: relative;
  padding: 0 0 var(--space-8) 34px;
}

.timeline > li:last-child { padding-bottom: 0; }

.timeline > li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  z-index: 1;
  width: 14px;
  height: 14px;
  border: 3px solid var(--primary);
  border-radius: 50%;
  background-color: var(--bg);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.timeline > li::after {
  content: "";
  position: absolute;
  top: 1.2em;
  bottom: -0.3em;
  left: 6px;
  width: 2px;
  background-color: var(--border);
}

.timeline > li:last-child::after { display: none; }

.timeline-date {
  display: block;
  margin-bottom: 4px;
  color: var(--primary-text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.timeline-title {
  margin-bottom: 4px;
  font-size: var(--text-lg);
}

.timeline > li p { color: var(--text-muted); }

/* Numbered steps ("How it works") */
.steps {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: gf-step;
}

.step {
  position: relative;
  counter-increment: gf-step;
}

.step::before {
  content: counter(gf-step);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--primary-border);
  border-radius: 50%;
  background-color: var(--surface);
  color: var(--primary-text);
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--primary-soft);
}

.step h3,
.step h4 { margin-bottom: 0.35em; font-size: var(--text-lg); }
.step p { color: var(--text-muted); }

.steps-connected .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 64px;
  width: calc(100% - 64px);
  border-top: 2px dashed var(--border-strong);
}


/* =====================================================================
   18. BREADCRUMBS & PAGINATION
   ===================================================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--text-subtle);
}

.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-strong); }
.breadcrumb [aria-current="page"] { color: var(--text-strong); font-weight: 500; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination a,
.pagination span {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.pagination a:hover {
  border-color: var(--border-strong);
  background-color: var(--surface-2);
}

.pagination [aria-current="page"] {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--primary-contrast);
}


/* =====================================================================
   19. LANDING SECTIONS — hero, headers, logos, pricing, quotes, CTA,
       mockups & image placeholders
   ===================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  overflow: clip;
}

.hero-title {
  margin-bottom: var(--space-6);
  font-size: var(--text-6xl);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: var(--tracking-tighter);
}

.hero .lead {
  max-width: 62ch;
  margin-bottom: var(--space-8);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-note {
  margin-top: var(--space-5);
  color: var(--text-subtle);
  font-size: var(--text-sm);
}

.hero-center { text-align: center; }
.hero-center .lead { margin-inline: auto; }
.hero-center .hero-actions { justify-content: center; }

.hero-visual {
  position: relative;
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
}

/* Section heading block */
.section-header {
  max-width: 680px;
  margin: 0 auto clamp(2.5rem, 2rem + 2vw, 3.5rem);
  text-align: center;
}

.section-header .lead { margin: 0 auto; }
.section-header-left { margin-left: 0; text-align: left; }
.section-header-left .lead { margin-left: 0; }

.section-title {
  font-size: var(--text-4xl);
  letter-spacing: -0.035em;
}

/* Logo cloud */
.logo-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 48px;
}

.logo-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-subtle);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  transition: color var(--duration) ease;
}

.logo-item:hover { color: var(--text-strong); }

/* Infinite marquee: duplicate the track and hide the copy with aria-hidden */
.marquee {
  --gap: 48px;
  --duration: 30s;
  display: flex;
  gap: var(--gap);
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: gf-marquee var(--duration) linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-reverse .marquee-track { animation-direction: reverse; }
.marquee-fast { --duration: 15s; }
.marquee-slow { --duration: 50s; }

/* Feature blocks */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature h3,
.feature h4 { margin: 0; font-size: var(--text-lg); }
.feature p { margin: 0; color: var(--text-muted); }

/* Pricing */
.price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: var(--space-4) 0;
}

.price-amount {
  color: var(--text-strong);
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.price-period {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* CSS-only monthly / yearly switch:
   wrap the cards in .pricing, add radios with value="monthly|yearly",
   then mark content with .when-monthly / .when-yearly */
.pricing:has(input[value="yearly"]:checked) .when-monthly,
.pricing:not(:has(input[value="yearly"]:checked)) .when-yearly {
  display: none;
}

/* Testimonials */
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonial blockquote,
.testimonial-quote {
  margin: 0;
  color: var(--text-strong);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.testimonial-author strong {
  display: block;
  color: var(--text-strong);
  font-size: 0.9375rem;
}

.testimonial-author span {
  display: block;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.rating {
  display: inline-flex;
  gap: 2px;
  color: #f59e0b;
}

.quote-xl {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Gradient call-to-action banner */
.cta-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 2rem + 4vw, 5rem) clamp(1.5rem, 1rem + 4vw, 5rem);
  border-radius: var(--radius-2xl);
  background-image: var(--gradient);
  color: rgb(255 255 255 / 0.88);
  text-align: center;
}

.cta-banner :is(h1, h2, h3) { color: #ffffff; }
.cta-banner .lead { color: rgb(255 255 255 / 0.85); margin-inline: auto; max-width: 56ch; }

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}

/* Browser window mockup */
.mockup-browser {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: var(--surface);
  box-shadow: var(--shadow-xl);
}

.mockup-browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background-color: var(--bg-subtle);
}

.mockup-browser-bar::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-right: 34px;
  border-radius: 50%;
  background-color: #ff5f57;
  box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840;
}

.mockup-url {
  flex: 1;
  max-width: 380px;
  margin: 0 auto;
  padding: 4px 12px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--surface-2);
  color: var(--text-subtle);
  font-size: 12px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mockup-browser-body {
  padding: clamp(14px, 2vw, 24px);
}

/* Phone mockup */
.mockup-phone {
  position: relative;
  width: min(var(--phone-width, 280px), 100%);
  aspect-ratio: 9 / 19;
  padding: 11px;
  border-radius: 46px;
  background-color: #0b0b0e;
  box-shadow: var(--shadow-xl), inset 0 0 0 2px #2b2b33;
}

.mockup-phone::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 2;
  width: 32%;
  height: 24px;
  border-radius: 20px;
  background-color: #000000;
  transform: translateX(-50%);
}

.mockup-phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 36px;
  background-color: var(--bg);
}

/* Image placeholders (no image files needed) */
.ph {
  --ph-a: var(--brand);
  --ph-b: var(--brand-2);
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgb(255 255 255 / 0.35), transparent 42%),
    radial-gradient(circle at 85% 90%, rgb(0 0 0 / 0.22), transparent 50%),
    linear-gradient(135deg, var(--ph-a), var(--ph-b));
  color: rgb(255 255 255 / 0.9);
  font-size: 32px;
  transition: transform 0.6s var(--ease-out);
}

.ph-sunset { --ph-a: #f97316; --ph-b: #db2777; }
.ph-ocean  { --ph-a: #0ea5e9; --ph-b: #4f46e5; }
.ph-forest { --ph-a: #10b981; --ph-b: #0f766e; }
.ph-grape  { --ph-a: #8b5cf6; --ph-b: #ec4899; }
.ph-night  { --ph-a: #1e293b; --ph-b: #4338ca; }
.ph-sand   { --ph-a: #fbbf24; --ph-b: #f97316; }
.ph-mint   { --ph-a: #2dd4bf; --ph-b: #3b82f6; }
.ph-berry  { --ph-a: #be185d; --ph-b: #7c3aed; }

.ph-subtle {
  background: radial-gradient(var(--border-strong) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--surface-2);
  color: var(--text-subtle);
}


/* =====================================================================
   20. EFFECTS & BACKGROUNDS
   ===================================================================== */

/* Pattern backgrounds (use ::before) — fade out towards the bottom */
.bg-grid,
.bg-dots,
.bg-glow,
.bg-noise {
  position: relative;
  isolation: isolate;
}

.bg-grid::before,
.bg-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 100%);
}

.bg-grid::before {
  opacity: 0.75;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: var(--pattern-size, 56px) var(--pattern-size, 56px);
}

.bg-dots::before {
  background-image: radial-gradient(var(--border-strong) 1.2px, transparent 1.6px);
  background-size: var(--pattern-size, 22px) var(--pattern-size, 22px);
}

/* Soft brand glow (uses ::after, combine with .bg-grid / .bg-dots) */
.bg-glow::after {
  content: "";
  position: absolute;
  inset: -10% -10% auto;
  z-index: -1;
  height: 90%;
  pointer-events: none;
  background:
    radial-gradient(38% 50% at 30% 30%, color-mix(in oklab, var(--brand) 30%, transparent), transparent 70%),
    radial-gradient(34% 45% at 72% 22%, color-mix(in oklab, var(--brand-2) 22%, transparent), transparent 70%);
  filter: blur(24px);
}

/* Full mesh-gradient background */
.bg-mesh {
  background:
    radial-gradient(at 15% 10%, color-mix(in oklab, var(--brand) 22%, transparent) 0, transparent 50%),
    radial-gradient(at 85% 5%, color-mix(in oklab, var(--brand-2) 18%, transparent) 0, transparent 45%),
    radial-gradient(at 60% 100%, color-mix(in oklab, var(--brand) 14%, transparent) 0, transparent 50%),
    var(--bg);
}

/* Film-grain texture (uses ::after, don't combine with .bg-glow) */
.bg-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.glass {
  border: 1px solid var(--border-glass);
  background-color: var(--surface-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
}

.glow { box-shadow: var(--shadow-glow); }

.border-gradient {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box;
}

/* Rotating conic border */
@property --gf-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.border-animated {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--gf-angle), var(--brand), var(--brand-2), transparent 35%, transparent 65%, var(--brand)) border-box;
  animation: gf-rotate-angle 4s linear infinite;
}

/* Hover effects */
.hover-lift {
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-scale {
  transition: transform var(--duration) var(--ease-out);
}

.hover-scale:hover { transform: scale(1.03); }

.hover-glow {
  transition: box-shadow var(--duration) ease, border-color var(--duration) ease;
}

.hover-glow:hover {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-glow);
}

.hover-shine {
  position: relative;
  overflow: hidden;
}

.hover-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.8s var(--ease-out);
}

.hover-shine:hover::after { transform: translateX(100%); }

.link-underline {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.35s var(--ease-out);
}

.link-underline:hover {
  background-size: 100% 1.5px;
  text-decoration: none;
}

/* Spotlight that follows the cursor (position set by framework.js) */
.spotlight {
  position: relative;
  isolation: isolate;          /* glow paints above the background, below the content */
}

.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--brand) 16%, transparent), transparent 45%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.spotlight:hover::before { opacity: 1; }

/* Keyframe helpers */
.animate-float    { animation: gf-float 6s var(--ease-in-out) infinite; }
.animate-pulse    { animation: gf-pulse 2s ease-in-out infinite; }
.animate-spin     { animation: gf-spin 1s linear infinite; }
.animate-bounce   { animation: gf-bounce 1.2s var(--ease-in-out) infinite; }
.animate-fade-in  { animation: gf-fade-in 0.8s var(--ease-out) both; animation-delay: var(--delay, 0s); }
.animate-fade-up  { animation: gf-fade-up 0.8s var(--ease-out) both; animation-delay: var(--delay, 0s); }

.animate-gradient {
  background-size: 200% 200%;
  animation: gf-gradient-pan 6s ease infinite;
}

.text-gradient.animate-gradient {
  background-image: linear-gradient(90deg, var(--primary-text), var(--accent-text), var(--primary-text));
}


/* =====================================================================
   21. MOTION & SCROLL ANIMATIONS
   ===================================================================== */

/* Reveal on scroll (framework.js adds .is-visible):
   data-reveal="up | down | left | right | zoom | fade"
   Stagger children: data-reveal-stagger="80" on the parent */
html.js [data-reveal] {
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

html.js [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(28px);
}

html.js [data-reveal="down"]:not(.is-visible)  { transform: translateY(-28px); }
html.js [data-reveal="left"]:not(.is-visible)  { transform: translateX(-40px); }
html.js [data-reveal="right"]:not(.is-visible) { transform: translateX(40px); }
html.js [data-reveal="zoom"]:not(.is-visible)  { transform: scale(0.92); }
html.js [data-reveal="fade"]:not(.is-visible)  { transform: none; }

/* Safety net: if framework.js never loads, show content anyway */
html.js:not(.gf-ready) [data-reveal] {
  animation: gf-reveal-failsafe 0.6s ease 2.5s forwards;
}

/* Pure-CSS scroll-driven animations (progressive enhancement) */
@supports (animation-timeline: view()) {
  .scroll-fade {
    animation: gf-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  .scroll-scale {
    animation: gf-scale-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  .scroll-parallax {
    animation: gf-parallax linear both;
    animation-timeline: view();
  }
}

/* Reading progress bar: <div class="scroll-progress"></div> */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-header) + 1);
  height: 3px;
  background-image: var(--gradient);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: gf-progress linear both;
    animation-timeline: scroll(root);
  }
}

/* Back-to-top button */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background-color: var(--surface);
  color: var(--text-strong);
  font-size: 20px;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--duration) ease, transform var(--duration) var(--ease-out), visibility var(--duration), background-color var(--duration-fast) ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover { background-color: var(--surface-2); }

/* Countdown (framework.js → data-countdown="2027-01-01T09:00:00") */
.countdown {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
}

.countdown-value {
  color: var(--text-strong);
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Smooth cross-page transitions (Chrome / Edge / Safari 18+) */
@view-transition {
  navigation: auto;
}

/* Circular reveal used by the theme toggle (framework.js) */
html.theme-transition::view-transition-old(root),
html.theme-transition::view-transition-new(root) {
  mix-blend-mode: normal;
}

html.theme-transition::view-transition-old(root) {
  animation: none;
}

html.theme-transition::view-transition-new(root) {
  animation: gf-theme-reveal 0.6s var(--ease-in-out);
}

/* Keyframes */
@keyframes gf-spin          { to { transform: rotate(360deg); } }
@keyframes gf-fade-in       { from { opacity: 0; } }
@keyframes gf-fade-out      { to { opacity: 0; } }
@keyframes gf-fade-up       { from { opacity: 0; transform: translateY(24px); } }
@keyframes gf-scale-in      { from { opacity: 0; transform: scale(0.9); } }
@keyframes gf-slide-in      { from { opacity: 0; transform: translateX(16px); } }
@keyframes gf-pop-in        { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes gf-modal-in      { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
@keyframes gf-modal-out     { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes gf-sheet-in      { from { transform: translateX(100%); } }
@keyframes gf-sheet-out     { to { transform: translateX(100%); } }
@keyframes gf-toast-in      { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes gf-toast-out     { to { opacity: 0; transform: translateX(24px); } }
@keyframes gf-dismiss       { to { opacity: 0; transform: scale(0.98); } }
@keyframes gf-shimmer       { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes gf-stripes       { to { background-position: 16px 0; } }
@keyframes gf-ping          { 75%, 100% { transform: scale(2.4); opacity: 0; } }
@keyframes gf-float         { 50% { transform: translateY(-12px); } }
@keyframes gf-pulse         { 50% { opacity: 0.55; } }
@keyframes gf-bounce        { 50% { transform: translateY(-8px); } }
@keyframes gf-marquee       { to { transform: translateX(calc(-100% - var(--gap))); } }
@keyframes gf-gradient-pan  { 50% { background-position: 100% 50%; } }
@keyframes gf-rotate-angle  { to { --gf-angle: 360deg; } }
@keyframes gf-progress      { to { transform: scaleX(1); } }
@keyframes gf-parallax      { from { transform: translateY(var(--parallax, 60px)); } to { transform: translateY(calc(var(--parallax, 60px) * -1)); } }
@keyframes gf-reveal-failsafe { to { opacity: 1; transform: none; } }

@keyframes gf-theme-reveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
  to   { clip-path: circle(var(--vt-r, 150%) at var(--vt-x, 50%) var(--vt-y, 0)); }
}


/* =====================================================================
   22. FOOTER — dark by default; add .theme-light for a light footer
   ===================================================================== */

.site-footer {
  width: 100%;
  color-scheme: dark;
  border-top: 1px solid var(--border);
  background-color: var(--footer-bg);
  color: var(--text);
}

.footer-top {
  padding: 64px 0 48px;
}

.site-footer a:not(.btn) {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.site-footer a:not(.btn):hover {
  color: var(--text-strong);
}

.site-footer h4,
.footer-title {
  margin: 0 0 16px;
  color: var(--text-strong);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.9375rem;
}

.social-icons {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.social-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.social-icon:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  background-color: var(--surface-2);
  color: var(--text-strong);
}

.social-icon img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.footer-bottom {
  padding: 20px 0;
  border-top: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: 13px;
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}


/* =====================================================================
   23. UTILITIES
   ===================================================================== */

/* Theme scope (placed late so it beats component defaults) */
.theme-light { color-scheme: light; }
.theme-dark  { color-scheme: dark; }

/* Text alignment (v6) */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Aspect ratios */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-16-9   { aspect-ratio: 16 / 9; }
.aspect-4-3    { aspect-ratio: 4 / 3; }
.aspect-3-2    { aspect-ratio: 3 / 2; }
.aspect-21-9   { aspect-ratio: 21 / 9; }
.aspect-3-4    { aspect-ratio: 3 / 4; }

/* Font sizes */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }
.text-6xl  { font-size: var(--text-6xl); }

/* Text colors */
.text-strong  { color: var(--text-strong); }
.text-body    { color: var(--text); }
.text-muted   { color: var(--text-muted); }
.text-subtle  { color: var(--text-subtle); }
.text-primary { color: var(--primary-text); }
.text-accent  { color: var(--accent-text); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.text-info    { color: var(--info); }
.text-white   { color: #ffffff; }

/* Font weight & style */
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.italic       { font-style: italic; }
.uppercase    { text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.mono         { font-family: var(--font-mono); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.nowrap       { white-space: nowrap; }
.balance      { text-wrap: balance; }
.pretty       { text-wrap: pretty; }
.leading-tight { line-height: var(--leading-tight); }
.tracking-tight { letter-spacing: var(--tracking-tight); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* Max widths */
.max-w-prose { max-width: 65ch; }
.max-w-sm    { max-width: 480px; }
.max-w-md    { max-width: 640px; }
.max-w-lg    { max-width: 800px; }
.mx-auto     { margin-inline: auto; }

/* Margin (top / bottom) */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-auto { margin-top: auto; }
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

/* Padding */
.p-0  { padding: 0; }
.p-2  { padding: var(--space-2); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.p-12 { padding: var(--space-12); }

/* Display & flex */
.hidden       { display: none !important; }
.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1 1 0%; min-width: 0; }
.shrink-0     { flex-shrink: 0; }
.items-start  { align-items: start; }
.items-center { align-items: center; }
.items-end    { align-items: end; }
.items-stretch { align-items: stretch; }
.justify-start   { justify-content: start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: end; }
.justify-between { justify-content: space-between; }
.self-start  { align-self: start; }
.self-center { align-self: center; }
.place-center { place-items: center; }

.w-full   { width: 100%; }
.h-full   { height: 100%; }
.relative { position: relative; }

/* Sticks below the header while its column scrolls */
.sticky-top {
  position: sticky;
  top: var(--sticky-offset, 24px);
}
.overflow-hidden { overflow: hidden; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }

/* Surfaces */
.bg-surface   { background-color: var(--surface); }
.bg-surface-2 { background-color: var(--surface-2); }
.bg-subtle    { background-color: var(--bg-subtle); }
.bg-page      { background-color: var(--bg); }
.bg-primary   { background-color: var(--primary); color: var(--primary-contrast); }
.bg-primary-soft { background-color: var(--primary-soft); }
.bg-accent-soft  { background-color: var(--accent-soft); }
.bg-gradient  { background-image: var(--gradient); color: #ffffff; }
.bg-transparent { background: transparent; }

/* Borders, radius, shadows */
.border        { border: 1px solid var(--border); }
.border-top    { border-top: 1px solid var(--border); }
.border-bottom { border-bottom: 1px solid var(--border); }
.border-0      { border: 0; }
.rounded-0    { border-radius: 0; }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }
.shadow-none { box-shadow: none; }
.shadow-xs   { box-shadow: var(--shadow-xs); }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-xl); }
.shadow-glow { box-shadow: var(--shadow-glow); }

/* Divider with text: <div class="divider-text">or</div> */
.divider-text {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: var(--space-6) 0;
  color: var(--text-subtle);
  font-size: var(--text-sm);
}

.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

/* Responsive visibility (v6) — see 24. Responsive */


/* =====================================================================
   24. RESPONSIVE
   ===================================================================== */

/* Tablet only (769px – 1024px): opt-in overrides */
@media (min-width: 769px) and (max-width: 1024px) {
  .t-cols-1 { grid-template-columns: minmax(0, 1fr); }
  .t-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .t-hide   { display: none !important; }

  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > .span-3,
  .bento > .span-4 { grid-column: 1 / -1; }

  .desktop-menu a:not(.btn),
  .nav-link {
    padding: 8px 10px;
    font-size: 14px;
  }
}

/* Desktop only */
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
  .desktopContainer {
    max-width: 100%;
  }

  /* Responsive visibility */
  .hide-mobile { display: none !important; }

  /* Navigation */
  .desktop-menu { display: none; }
  .mobile-menu-btn { display: inline-grid; }

  /* Grid fallbacks to 1 column */
  .cols-2, .cols-3, .cols-4, .cols-5, .cols-6, .cols-12,
  .cols-300-auto, .cols-auto-250, .cols-250-auto, .cols-auto-300,
  .cols-1-2, .cols-2-1, .cols-1-3, .cols-3-1, .cols-2-3, .cols-3-2,
  .bento, .bento-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento { grid-auto-rows: auto; }

  /* Spans become full width, row spans reset */
  .span-2, .span-3, .span-4, .span-5, .span-6, .span-7,
  .span-8, .span-9, .span-10, .span-11, .span-12 {
    grid-column: 1 / -1;
  }

  .row-span-2,
  .row-span-3 {
    grid-row: auto;
  }

  /* Force multi-column overrides */
  .m-cols-1 { grid-template-columns: minmax(0, 1fr); }
  .m-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Order helpers */
  .m-order-first { order: -1; }
  .m-order-last { order: 99; }

  /* Mobile helpers */
  .m-text-center { text-align: center; }
  .m-text-left { text-align: left; }
  .m-justify-center { justify-content: center; }
  .m-w-full { width: 100%; }

  .steps-connected .step::after { display: none; }

  /* Footer adjustments */
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .toast-region {
    inset: auto 12px 12px 12px;
    width: auto;
  }

  .cookie-banner {
    left: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }

  .modal-side {
    width: 100%;
    border-radius: 0;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .input-row { flex-direction: column; }
  .hero-actions > .btn { flex: 1 1 100%; }
  .countdown-item { min-width: 0; flex: 1; }
}


/* =====================================================================
   25. ACCESSIBILITY & REDUCED MOTION
   ===================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* <a class="skip-link" href="#main">Skip to content</a> */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: calc(var(--z-toast) + 1);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background-color: var(--primary);
  color: var(--primary-contrast);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--duration) var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html.js [data-reveal]:not(.is-visible) {
    opacity: 1;
    transform: none;
  }

  .marquee-track {
    animation: none !important;
  }

  .scroll-progress {
    animation: none;
  }
}


/* =====================================================================
   26. FALLBACK — browsers without light-dark() (before 2024) get the
       light theme. Keep these values in sync with section 02 if you
       change the light palette.
   ===================================================================== */

@supports not (color: light-dark(#000, #fff)) {
  :root {
    --bg: #ffffff;
    --bg-subtle: #f7f8fa;
    --surface: #ffffff;
    --surface-2: #f3f4f6;
    --surface-3: #e8eaee;
    --surface-glass: rgb(255 255 255 / 0.72);
    --surface-inverse: #0f1117;
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --border-glass: rgb(255 255 255 / 0.6);
    --footer-bg: #0b0d13;
    --text-strong: #0a0c12;
    --text: #2c313c;
    --text-muted: #5f6878;
    --text-subtle: #8b93a3;
    --text-inverse: #ffffff;
    --success: #15803d;
    --success-soft: #ecfdf3;
    --success-border: #bbf7d0;
    --warning: #b45309;
    --warning-soft: #fffbeb;
    --warning-border: #fde68a;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --danger-border: #fecaca;
    --info: #0369a1;
    --info-soft: #f0f9ff;
    --info-border: #bae6fd;
    --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
    --shadow-sm: 0 1px 3px rgb(15 23 42 / 0.08), 0 1px 2px rgb(15 23 42 / 0.04);
    --shadow-md: 0 6px 16px -4px rgb(15 23 42 / 0.1), 0 2px 4px -2px rgb(15 23 42 / 0.05);
    --shadow-lg: 0 16px 36px -10px rgb(15 23 42 / 0.16), 0 4px 10px -4px rgb(15 23 42 / 0.06);
    --shadow-xl: 0 28px 64px -16px rgb(15 23 42 / 0.25), 0 8px 20px -8px rgb(15 23 42 / 0.08);
  }

  :root,
  [data-accent],
  [style*="--brand"] {
    --primary-hover: color-mix(in oklab, var(--brand), #000 14%);
    --primary-text: color-mix(in oklab, var(--brand), #000 8%);
    --accent-text: color-mix(in oklab, var(--brand-2), #000 8%);
    --gradient-text: linear-gradient(110deg, var(--primary-text), var(--accent-text));
  }

  .site-footer {
    --text-strong: #f5f6f9;
    --text: #cfd4dd;
    --text-muted: #959db0;
    --text-subtle: #697084;
    --border: #23262f;
    --border-strong: #343845;
    --surface-2: #1a1d25;
  }
}