/* ════════════════════════════════════════════════════════════════
   OVASYS DESIGN SYSTEM  ·  v1.0
   ────────────────────────────────────────────────────────────────
   TABLE OF CONTENTS
   01 · Design Tokens
   02 · Reset
   03 · Base / Global
   04 · Typography Scale
   05 · Layout & Containers
   06 · Grid Utilities
   07 · Spacing Utilities
   08 · Button Components
   09 · Card Components
   10 · Badges & Tags
   11 · Eyebrow Pattern
   12 · Quote Blocks
   13 · Section Patterns
   14 · Dividers
   15 · Animations & Transitions
   ════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════
   01 · DESIGN TOKENS
   ══════════════════════════════════════════════ */
:root {

  /* ── Color: Backgrounds ── */
  --color-bg:           #191919;   /* page background */
  --color-surface:      #1d1d1d;   /* card surface */
  --color-surface-2:    #1f1f1f;   /* elevated surface, nav */
  --color-surface-3:    #242424;   /* hover state */

  /* ── Color: Borders ── */
  --color-border:       rgba(255, 255, 255, 0.13);  /* standard border */
  --color-border-s:     rgba(255, 255, 255, 0.05);  /* subtle border */
  --color-border-xs:    rgba(255, 255, 255, 0.04);  /* ghost border */

  /* ── Color: Text ── */
  --color-white:        #ffffff;
  --color-text:         rgba(255, 255, 255, 0.70);  /* primary body text */
  --color-text-muted:   rgba(255, 255, 255, 0.55);  /* secondary text */
  --color-text-faint:   rgba(255, 255, 255, 0.30);  /* placeholder / disabled */
  --color-text-ghost:   rgba(255, 255, 255, 0.20);  /* decorative only */
  --color-text-light:   #dadada;                     /* light body copy */

  /* ── Color: Accent ── */
  --color-accent:       #BAA3FD;                     /* primary accent (purple) */
  --color-accent-dim:   rgba(186, 163, 253, 0.12);  /* accent fill/glow */
  --color-accent-hover: rgba(186, 163, 253, 0.80);  /* accent on hover */

  /* ── Semantic aliases (use these in components) ── */
  --bg:           var(--color-bg);
  --surface:      var(--color-surface-2);
  --border:       var(--color-border);
  --border-s:     var(--color-border-s);
  --muted:        var(--color-text-muted);
  --text:         var(--color-text);
  --dadada:       var(--color-text-light);
  --white:        var(--color-white);
  --accent:       var(--color-accent);
  --accent-dim:   var(--color-accent-dim);

  /* ── Typography: Families ── */
  --font-display: 'Glegoo', serif;           /* headlines, big numbers */
  --font-body:    'Unbounded', sans-serif;   /* body, labels, buttons */
  --font-label:   'Unbounded', sans-serif;   /* uppercase tags */
  --font-mono:    'Geist Mono', 'Courier New', monospace; /* code, inline labels */

  /* ── Typography: Scale ── */
  --text-2xs:   10px;
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   20px;
  --text-3xl:   24px;
  --text-4xl:   32px;
  --text-5xl:   40px;
  --text-6xl:   clamp(40px, 5vw, 60px);
  --text-7xl:   clamp(48px, 6vw, 72px);
  --text-8xl:   clamp(48px, 7vw, 90px);

  /* ── Typography: Weight ── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Typography: Tracking ── */
  --tracking-tight:   -0.06em;
  --tracking-snug:    -0.04em;
  --tracking-normal:   0em;
  --tracking-wide:     0.02em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.10em;

  /* ── Spacing Scale ── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-9:    36px;
  --space-10:   40px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;

  /* ── Layout ── */
  --max:  1280px;   /* max content width */
  --pad:  clamp(24px, 6.25vw, 80px);   /* horizontal page padding */
  --row:  clamp(80px, 10vw, 140px);    /* section vertical rhythm */

  /* ── Radius Scale ── */
  --r-xs:  6px;
  --r-sm:  8px;
  --r:     16px;     /* default card radius */
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm:
    0 0 3.4px rgba(0, 0, 0, 0.25);
  --shadow-md:
    0 0 5.6px rgba(0, 0, 0, 0.25),
    0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg:
    0 0 12px rgba(0, 0, 0, 0.3),
    0 4px 24px rgba(0, 0, 0, 0.2);
  --shadow-inset-light:
    inset 1.4px 1.4px 0 rgba(255, 255, 255, 0.08),
    inset -1.4px -1.4px 0 rgba(255, 255, 255, 0.03);
  --shadow-inset-sm:
    inset 0.833px 0.833px 0 rgba(255, 255, 255, 0.08),
    inset -0.833px -0.833px 0 rgba(255, 255, 255, 0.03);

  /* ── Transitions ── */
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   400ms;
  --duration-xslow:  750ms;

  /* ── Z-Index Scale ── */
  --z-base:     0;
  --z-raised:   1;
  --z-overlay:  10;
  --z-nav:      100;
  --z-modal:    200;
}


/* ══════════════════════════════════════════════
   02 · RESET
   ══════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}


/* ══════════════════════════════════════════════
   03 · BASE / GLOBAL
   ══════════════════════════════════════════════ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; }

img, video {
  display: block;
  max-width: 100%;
}

/* Line-break helpers */
.br-mobile  { display: none; }
.br-desktop { display: block; }

@media (max-width: 640px) {
  .br-mobile  { display: block; }
  .br-desktop { display: none; }
}


/* ══════════════════════════════════════════════
   04 · TYPOGRAPHY SCALE
   ══════════════════════════════════════════════
   Classes map directly to the token scale above.
   Mix font-family modifiers for display vs body.
   ══════════════════════════════════════════════ */

/* ── Size classes ── */
.type-2xs  { font-size: var(--text-2xs); }
.type-xs   { font-size: var(--text-xs); }
.type-sm   { font-size: var(--text-sm); }
.type-base { font-size: var(--text-base); }
.type-md   { font-size: var(--text-md); }
.type-lg   { font-size: var(--text-lg); }
.type-xl   { font-size: var(--text-xl); }
.type-2xl  { font-size: var(--text-2xl); }
.type-3xl  { font-size: var(--text-3xl); }
.type-4xl  { font-size: var(--text-4xl); }
.type-5xl  { font-size: var(--text-5xl); }
.type-6xl  { font-size: var(--text-6xl); }
.type-7xl  { font-size: var(--text-7xl); }
.type-8xl  { font-size: var(--text-8xl); }

/* ── Weight classes ── */
.type-light    { font-weight: var(--weight-light); }
.type-regular  { font-weight: var(--weight-regular); }
.type-medium   { font-weight: var(--weight-medium); }
.type-semibold { font-weight: var(--weight-semibold); }
.type-bold     { font-weight: var(--weight-bold); }

/* ── Family classes ── */
.type-display { font-family: var(--font-display); }
.type-body    { font-family: var(--font-body); }
.type-mono    { font-family: var(--font-mono); }

/* ── Tracking classes ── */
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-snug    { letter-spacing: var(--tracking-snug); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }

/* ── Colour classes ── */
.text-white   { color: var(--color-white); }
.text-base    { color: var(--color-text); }
.text-muted   { color: var(--color-text-muted); }
.text-faint   { color: var(--color-text-faint); }
.text-light   { color: var(--color-text-light); }
.text-accent  { color: var(--color-accent); }

/* ── Composed semantic styles ── */
/* Hero display headline */
.display-hero {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}

/* Section title */
.display-section {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-bold);
  line-height: 1.0;
  letter-spacing: var(--tracking-snug);
  color: var(--color-white);
}

/* Card / block headline */
.display-card {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: 1.0;
  letter-spacing: var(--tracking-snug);
  color: var(--color-white);
}

/* Subheading */
.heading {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  color: var(--color-white);
}

/* Body copy */
.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: 1.55;
  letter-spacing: var(--tracking-wide);
}

.body {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: 1.6;
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  line-height: 1.55;
  color: var(--color-text);
}

/* Label — uppercase tag */
.label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Mono label */
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: -0.04em;
}


/* ══════════════════════════════════════════════
   05 · LAYOUT & CONTAINERS
   ══════════════════════════════════════════════ */

/* Standard centered container */
.wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Block container (non-flex) */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Full-bleed inner — fills width, respects max */
.wrap-hero {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}


/* ══════════════════════════════════════════════
   06 · GRID UTILITIES
   ══════════════════════════════════════════════ */
.grid          { display: grid; gap: 16px; }
.grid-2        { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4        { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* 1/3 + 2/3 split (sidebar + content) */
.grid-split    { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; }

/* Auto responsive — collapse from a minimum column width */
.grid-auto-sm  { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.grid-auto-md  { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

/* Flex row */
.flex-row      { display: flex; align-items: center; gap: 16px; }
.flex-col      { display: flex; flex-direction: column; gap: 16px; }
.flex-wrap     { flex-wrap: wrap; }
.flex-start    { align-items: flex-start; }
.flex-between  { justify-content: space-between; }
.flex-end      { justify-content: flex-end; }

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

@media (max-width: 600px) {
  .grid-2 { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════
   07 · SPACING UTILITIES
   ══════════════════════════════════════════════
   Pattern: .mt-{n}, .mb-{n}, .pt-{n}, .pb-{n}
   Maps to the --space-{n} token.
   ══════════════════════════════════════════════ */

.mt-1  { margin-top:    var(--space-1); }
.mt-2  { margin-top:    var(--space-2); }
.mt-4  { margin-top:    var(--space-4); }
.mt-6  { margin-top:    var(--space-6); }
.mt-8  { margin-top:    var(--space-8); }
.mt-10 { margin-top:    var(--space-10); }
.mt-14 { margin-top:    var(--space-14); }

.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-14 { margin-bottom: var(--space-14); }

.pt-1  { padding-top:    var(--space-1); }
.pt-4  { padding-top:    var(--space-4); }
.pt-6  { padding-top:    var(--space-6); }
.pt-8  { padding-top:    var(--space-8); }
.pt-row { padding-top:   var(--row); }

.pb-1  { padding-bottom: var(--space-1); }
.pb-4  { padding-bottom: var(--space-4); }
.pb-6  { padding-bottom: var(--space-6); }
.pb-8  { padding-bottom: var(--space-8); }
.pb-row { padding-bottom: var(--row); }


/* ══════════════════════════════════════════════
   08 · BUTTON COMPONENTS
   ══════════════════════════════════════════════
   Three core button variants:
   .btn-primary  — white fill (high emphasis)
   .btn-ghost    — dark pill / inset bevel
   .btn-text     — text link with arrow
   All extend .btn for base styles.
   ══════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  outline: none;
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

/* High emphasis — white fill */
.btn-primary {
  background: var(--color-white);
  color: var(--color-bg);
  padding: 14px 28px;
  border-radius: var(--r);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }

/* Medium emphasis — dark pill with bevel inset */
.btn-ghost {
  background: linear-gradient(180deg, #353537 0%, #1f1e1e 100%);
  color: var(--color-white);
  padding: 10px 18px 10px 10px;
  border-radius: 10px;
  gap: 10px;
  box-shadow: var(--shadow-md), var(--shadow-inset-light);
}
.btn-ghost:hover { opacity: 0.85; transform: translateY(-1px); }

/* Small dark button (footer / compact UI) */
.btn-ghost-sm {
  background: linear-gradient(180deg, #353537 0%, #1f1e1e 100%);
  color: var(--color-white);
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  box-shadow: var(--shadow-sm), var(--shadow-inset-sm);
}
.btn-ghost-sm:hover { opacity: 0.80; }

/* Icon-only square (footer social icons) */
.btn-icon {
  background: linear-gradient(180deg, #353537 0%, #1f1e1e 100%);
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm), var(--shadow-inset-sm);
}
.btn-icon:hover { opacity: 0.80; }

/* Low emphasis — text with animated arrow gap */
.btn-text {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  gap: 8px;
  padding: 0;
}
.btn-text:hover { gap: 12px; opacity: 0.8; }

/* Accent text link */
.btn-link {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  text-decoration: none;
  transition: color var(--duration-base);
}
.btn-link:hover { color: var(--color-text); }


/* ══════════════════════════════════════════════
   09 · CARD COMPONENTS
   ══════════════════════════════════════════════
   Base card + modifier variants.
   ══════════════════════════════════════════════ */

/* Base card */
.card {
  background: var(--color-surface);
  border-radius: var(--r);
  overflow: hidden;
}

/* Bordered card — standard for most sections */
.card-bordered {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--r);
  padding: 32px 28px;
}

/* Subtle bordered card — lighter border */
.card-subtle {
  background: var(--color-surface);
  border: 1.1px solid var(--color-border-xs);
  border-radius: 14px;
  overflow: hidden;
}

/* Hover lift — add to any card */
.card-hover {
  transition:
    background var(--duration-slow) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}
.card-hover:hover { background: rgba(255, 255, 255, 0.03); }

/* Hover with accent bottom bar */
.card-accent-bar {
  position: relative;
  overflow: hidden;
}
.card-accent-bar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-spring);
}
.card-accent-bar:hover::after { transform: scaleX(1); }

/* Inner card padding sizes */
.card-pad-sm  { padding: 20px 16px; }
.card-pad     { padding: 32px 28px; }
.card-pad-lg  { padding: 52px 48px; }

/* Card header bar — dark row at top of card */
.card-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--color-bg);
  border-bottom: 1.1px solid var(--color-border-xs);
  padding: 10px 14px;
  height: 42px;
}


/* ══════════════════════════════════════════════
   10 · BADGES & TAGS
   ══════════════════════════════════════════════ */

/* Inline badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* Accent tint */
.badge-accent {
  background: var(--color-accent-dim);
  border-color: transparent;
  color: var(--color-accent);
}

/* Number chip — 01, 02, etc. */
.num-chip {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  color: var(--color-white);
  letter-spacing: -0.03em;
}

/* Step/index label */
.step-label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  color: var(--color-text-muted);
  letter-spacing: -0.02em;
}


/* ══════════════════════════════════════════════
   11 · EYEBROW PATTERN
   ══════════════════════════════════════════════
   The "--- SECTION LABEL" pattern used above
   section titles throughout the site.
   ══════════════════════════════════════════════ */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow::before {
  content: '---';
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wider);
}

.eyebrow .label {
  color: var(--color-accent);
}

/* Mono variant — used in blog/preview labels */
.eyebrow-mono {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  letter-spacing: -0.04em;
}

.eyebrow-mono::before {
  content: '--- ';
  letter-spacing: -0.04em;
}


/* ══════════════════════════════════════════════
   12 · QUOTE BLOCKS
   ══════════════════════════════════════════════ */

/* Standard accent-bordered pullquote */
.blockquote {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  padding-left: 16px;
  border-left: 2px solid var(--color-accent);
  line-height: 1.6;
}

/* Larger pullquote */
.blockquote-lg {
  font-size: var(--text-md);
  line-height: 1.55;
}


/* ══════════════════════════════════════════════
   13 · SECTION PATTERNS
   ══════════════════════════════════════════════ */

/* Page section rhythm */
.section {
  padding: var(--row) 0;
  border-top: 1px solid var(--color-border-s);
}

.section-header {
  margin-bottom: var(--space-14);
}

/* Eyebrow + title combo */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-4);
}

.section-eyebrow::before {
  content: '---';
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wider);
}

.section-eyebrow .label { color: var(--color-accent); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-bold);
  line-height: 1.0;
  color: var(--color-white);
  letter-spacing: -0.04em;
}


/* ══════════════════════════════════════════════
   14 · DIVIDERS
   ══════════════════════════════════════════════ */

/* Horizontal rule */
.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

.divider-s {
  width: 100%;
  height: 1px;
  background: var(--color-border-s);
}

/* Vertical rule */
.divider-v {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
}

.divider-v-s {
  width: 1px;
  align-self: stretch;
  background: var(--color-border-s);
}


/* ══════════════════════════════════════════════
   15 · ANIMATIONS & TRANSITIONS
   ══════════════════════════════════════════════ */

/* ── Scroll fade-in — add .fi, then JS adds .on ── */
.fi {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-xslow) var(--ease-spring),
    transform var(--duration-xslow) var(--ease-spring);
}
.fi.on { opacity: 1; transform: none; }

/* Stagger delays for grouped .fi children */
.fi-group > *:nth-child(1) { transition-delay: 0ms; }
.fi-group > *:nth-child(2) { transition-delay: 80ms; }
.fi-group > *:nth-child(3) { transition-delay: 160ms; }
.fi-group > *:nth-child(4) { transition-delay: 240ms; }
.fi-group > *:nth-child(5) { transition-delay: 320ms; }
.fi-group > *:nth-child(6) { transition-delay: 400ms; }

/* ── Hover transitions (apply as modifier) ── */
.hover-lift {
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.hover-lift:hover { opacity: 0.85; transform: translateY(-1px); }

.hover-fade {
  transition: opacity var(--duration-base) var(--ease-out);
}
.hover-fade:hover { opacity: 0.75; }

/* ── Smooth grid accordion (used in blog quick-preview) ── */
.grid-accordion {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-spring);
}
.grid-accordion.open,
.grid-accordion-trigger:hover .grid-accordion {
  grid-template-rows: 1fr;
}
.grid-accordion > * {
  overflow: hidden;
  min-height: 0;
}