/* ============================================================================
   ALBA SALES CORPORATION — Design System
   Premium Navy + Electric Blue · High-end Industrial
   Type: Clash Display (display) · Satoshi (body) · JetBrains Mono (technical)
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — navy spine */
  --navy-950: #060A14;
  --navy-900: #0A1124;
  --navy-850: #0E1730;
  --navy-800: #122046;
  --navy-700: #1B2B57;
  --navy-600: #25386B;

  /* Electric blue — accent */
  --blue-700: #1D4ED8;
  --blue-600: #2563EB;
  --blue-500: #3B82F6;
  --blue-400: #38BDF8;
  --blue-300: #7DD3FC;
  --glow: #4DA3FF;

  /* Premium metallic accent (used sparingly) */
  --gold-500: #C9A24B;
  --gold-400: #E2C277;

  /* Amber "electron" accent — echoes the Alba logo dots */
  --amber-500: #F59E0B;
  --amber-600: #F97316;
  --electron: #F5A623;

  /* Neutrals */
  --ink-900: #0B1220;
  --ink-700: #1E293B;
  --ink-600: #334155;
  --ink-500: #475569;
  --ink-400: #64748B;
  --ink-300: #94A3B8;
  --line: #E3E8F0;
  --line-soft: #EEF2F7;
  --surface: #FFFFFF;
  --surface-2: #F6F8FC;
  --surface-3: #EFF3F9;
  --bg: #F8FAFC;

  /* Semantic */
  --primary: var(--navy-900);
  --accent: var(--blue-600);
  --accent-strong: var(--blue-700);
  --success: #16A34A;
  --danger: #DC2626;
  --on-dark: #EAF1FB;
  --on-dark-soft: #9FB2D0;

  /* Typography */
  --font-display: "Clash Display", "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-eyebrow: 0.78rem;
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.65;

  /* Spacing scale (8pt) */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* Radii */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

  /* Shadows — soft, layered, premium */
  --sh-xs: 0 1px 2px rgba(15,23,42,.06);
  --sh-sm: 0 2px 8px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh-md: 0 10px 30px -12px rgba(15,23,42,.18), 0 4px 12px -6px rgba(15,23,42,.10);
  --sh-lg: 0 30px 60px -20px rgba(13,26,64,.30), 0 12px 28px -14px rgba(13,26,64,.18);
  --sh-blue: 0 18px 40px -16px rgba(37,99,235,.45);
  --sh-ring: 0 0 0 1px rgba(15,23,42,.06);

  /* Layout */
  --container: 1240px;
  --container-wide: 1440px;
  --nav-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 520ms;

  --z-nav: 100; --z-drawer: 200; --z-fab: 150; --z-overlay: 190; --z-toast: 300;
}

/* ----------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Native cross-document page transitions. Chromium-based browsers cross-fade
   the outgoing and incoming page automatically on same-origin navigation;
   every other browser ignores this at-rule entirely and just navigates as
   normal, so there is no fallback to write or dependency to load. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .32s;
  animation-timing-function: var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--ink-700);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; }
:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; border-radius: 4px; }

::selection { background: var(--blue-600); color: #fff; }

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.h-display { font-size: clamp(2.6rem, 6vw, 5rem); line-height: var(--lh-tight); letter-spacing: -0.018em; word-spacing: 0.04em; font-weight: 600; }
h1, .h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.018em; word-spacing: 0.04em; }
h2, .h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); letter-spacing: -0.025em; }
h3, .h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4, .h4 { font-size: 1.12rem; }
p { color: var(--ink-600); }
strong { color: var(--ink-900); font-weight: 600; }

.lead { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.6; color: var(--ink-500); font-weight: 400; }
.muted { color: var(--ink-400); }
.balance { text-wrap: balance; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1.5px; background: linear-gradient(90deg, var(--accent), transparent);
  display: inline-block;
}
.eyebrow.is-light { color: var(--blue-300); }
.eyebrow.is-light::before { background: linear-gradient(90deg, var(--blue-400), transparent); }
.eyebrow.center::before { display: none; }

.text-gradient {
  background: linear-gradient(100deg, var(--blue-400) 0%, #fff 45%, var(--blue-300) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.accent-ink { color: var(--accent-strong); }

/* ----------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-head { max-width: 680px; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head p { margin-top: 1rem; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

/* Section dividers */
.divider-line { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* ----------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --b-bg: var(--navy-900); --b-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  padding: .92rem 1.6rem; border-radius: var(--r-pill);
  background: var(--b-bg); color: var(--b-fg);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
  white-space: nowrap; line-height: 1;
}
.btn svg { width: 18px; height: 18px; transition: transform var(--t-base) var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { --b-bg: var(--accent); --b-fg: #fff; box-shadow: var(--sh-blue); }
.btn--primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--blue-700), var(--blue-500) 45%, var(--blue-400));
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.btn--primary:hover::before { opacity: 1; }
.btn--primary:hover { box-shadow: 0 22px 48px -14px rgba(37,99,235,.6); }
.btn--primary:hover svg { transform: translateX(3px); }

.btn--dark { --b-bg: var(--navy-900); --b-fg: #fff; }
.btn--dark:hover { box-shadow: var(--sh-lg); }

.btn--ghost { --b-bg: transparent; --b-fg: var(--ink-900); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }

.btn--light { --b-bg: #fff; --b-fg: var(--navy-900); box-shadow: var(--sh-md); }
.btn--light:hover { box-shadow: var(--sh-lg); }

.btn--outline-light { --b-bg: transparent; --b-fg: #fff; border: 1.5px solid rgba(255,255,255,.25); }
.btn--outline-light:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); }

.btn--whatsapp { --b-bg: #25D366; --b-fg: #06381c; }
.btn--whatsapp:hover { box-shadow: 0 18px 38px -14px rgba(37,211,102,.6); }

.btn--lg { padding: 1.08rem 2rem; font-size: 1.04rem; }
.btn--sm { padding: .65rem 1.1rem; font-size: .88rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--accent-strong);
  transition: gap var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.link-arrow svg { width: 17px; height: 17px; transition: transform var(--t-base) var(--ease); }
.link-arrow:hover { gap: .8rem; }
.link-arrow:hover svg { transform: translateX(2px); }

/* ----------------------------------------------------------------------------
   6. CHIPS / BADGES / PILLS
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; padding: .4rem .85rem; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink-600); border: 1px solid var(--line);
}
.chip--accent { background: rgba(37,99,235,.08); color: var(--accent-strong); border-color: rgba(37,99,235,.18); }
.chip--dark { background: rgba(255,255,255,.06); color: var(--on-dark); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.chip svg { width: 14px; height: 14px; }

.pill-glass {
  display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: var(--on-dark); font-size: .85rem; font-weight: 500; backdrop-filter: blur(10px);
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-400); position: relative; }
.pulse-dot::after { content:""; position:absolute; inset:0; border-radius:50%; background: var(--blue-400); animation: pulse-ring 2.2s var(--ease-out) infinite; }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(3.4);opacity:0} }

/* ----------------------------------------------------------------------------
   7. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: var(--z-nav);
  display: flex; align-items: center;
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner { width:100%; max-width: var(--container-wide); margin-inline:auto; padding-inline: clamp(1.1rem,4vw,2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-header.is-scrolled { background: rgba(248,250,252,.82); backdrop-filter: saturate(180%) blur(18px); border-bottom-color: var(--line); box-shadow: var(--sh-sm); }
/* transparent variant over dark hero */
.site-header.on-dark:not(.is-scrolled) { color: #fff; }
.site-header.on-dark:not(.is-scrolled) .nav-link { color: rgba(255,255,255,.82); }
.site-header.on-dark:not(.is-scrolled) .nav-link:hover { color: #fff; }
.site-header.on-dark:not(.is-scrolled) .brand__name { color: #fff; }
.site-header.on-dark:not(.is-scrolled) .brand__tag { color: var(--on-dark-soft); }
.site-header.on-dark:not(.is-scrolled) .btn--ghost { color:#fff; border-color: rgba(255,255,255,.28); }
.site-header.on-dark:not(.is-scrolled) .btn--ghost:hover { background:#fff; color: var(--navy-900); }
.site-header.on-dark:not(.is-scrolled) .nav-toggle span { background:#fff; }

.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand__logo { width: 42px; height: 42px; flex-shrink: 0; }
.brand__text { display:flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; letter-spacing: -.02em; color: var(--ink-900); }
.brand__tag { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-400); margin-top: 3px; }

.nav { display: flex; align-items: center; gap: .3rem; }
.nav-link {
  position: relative; padding: .55rem .85rem; border-radius: var(--r-sm);
  font-weight: 500; font-size: .96rem; color: var(--ink-600);
  transition: color var(--t-fast) var(--ease); display: inline-flex; align-items: center; gap: .35rem;
}
.nav-link:hover { color: var(--ink-900); }
.nav-link.is-active { color: var(--accent-strong); }
.nav-link .caret { width: 14px; height: 14px; transition: transform var(--t-base) var(--ease); opacity: .6; }
.nav-item.has-mega:hover .nav-link .caret { transform: rotate(180deg); }

.nav-actions { display: flex; align-items: center; gap: .7rem; }

/* Mega menu */
.nav-item { position: relative; }
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  width: min(720px, 86vw); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 1.25rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
  z-index: var(--z-nav);
}
.nav-item.has-mega:hover .mega,
.mega:hover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega::before { content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.mega-link { display: flex; gap: .85rem; padding: .7rem .8rem; border-radius: var(--r-md); transition: background var(--t-fast) var(--ease); align-items: flex-start; }
.mega-link:hover { background: var(--surface-2); }
.mega-link .mi { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(140deg, var(--navy-900), var(--navy-700)); display: grid; place-items: center; flex-shrink: 0; }
.mega-link .mi svg { width: 19px; height: 19px; color: var(--blue-400); }
.mega-link h5 { font-family: var(--font-body); font-weight: 600; font-size: .92rem; color: var(--ink-900); margin-bottom: 2px; }
.mega-link p { font-size: .78rem; color: var(--ink-400); line-height: 1.4; }
.mega-foot { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; }
.mega-foot span { font-size: .82rem; color: var(--ink-400); }

/* Hamburger */
.nav-toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink-900); border-radius: 2px; transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--navy-950); color: #fff;
  padding: calc(var(--nav-h) + 1rem) clamp(1.2rem,5vw,2rem) 2rem; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--t-slow) var(--ease-out); overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav a { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; padding: .65rem 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; display:flex; justify-content: space-between; align-items: center; }
.mobile-nav a .num { font-family: var(--font-mono); font-size: .8rem; color: var(--blue-400); opacity: .7; }
.mobile-nav__actions { margin-top: auto; padding-top: 2rem; display: grid; gap: .75rem; }
.mobile-nav__contact { margin-top: 1.5rem; font-family: var(--font-mono); font-size: .82rem; color: var(--on-dark-soft); }
.mobile-nav__contact a { font-family: var(--font-mono); font-size: .9rem; border: none; padding: .2rem 0; color: var(--blue-300); justify-content: flex-start; }

/* ----------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative; padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 7vw, 6rem); overflow: hidden;
  background: radial-gradient(120% 130% at 80% -10%, var(--navy-700) 0%, var(--navy-900) 45%, var(--navy-950) 100%);
  color: #fff;
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__grid-overlay {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(125,170,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(125,170,255,.05) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 75%);
}
.hero__orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.hero__orb--1 { width: 480px; height: 480px; background: radial-gradient(circle, var(--blue-600), transparent 70%); top: -140px; right: -80px; }
.hero__orb--2 { width: 360px; height: 360px; background: radial-gradient(circle, #1e3a8a, transparent 70%); bottom: -160px; left: -100px; opacity: .5; }
.hero__inner { position: relative; }
.hero h1 { color: #fff; }
.hero .lead { color: var(--on-dark-soft); max-width: 540px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin-top: 3rem; }

/* ----------------------------------------------------------------------------
   9. STATS / COUNTERS
   -------------------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: .25rem; }
.stat__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.02em; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.stat__num .unit { color: var(--accent); }
.stat__label { font-size: .85rem; color: var(--ink-400); font-weight: 500; }
.stat.on-dark .stat__num { color: #fff; }
.stat.on-dark .stat__num .unit { color: var(--blue-400); }
.stat.on-dark .stat__label { color: var(--on-dark-soft); }

.stat-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.stat-strip {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
  border-radius: var(--r-xl); padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem,4vw,3.5rem);
  box-shadow: var(--sh-lg); position: relative; overflow: hidden;
}
.stat-strip::after { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(125,170,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(125,170,255,.05) 1px, transparent 1px); background-size: 44px 44px; opacity:.6; pointer-events:none; }
.stat-strip .stat-bar { position: relative; }
.stat-strip .stat__num { color: #fff; }
.stat-strip .stat__num .unit { color: var(--blue-400); }
.stat-strip .stat__label { color: var(--on-dark-soft); }
.stat-strip .stat { position: relative; padding-left: 1.4rem; }
.stat-strip .stat::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px; background: linear-gradient(var(--blue-400), transparent); border-radius:2px; }

/* ----------------------------------------------------------------------------
   10. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.5vw, 1.9rem); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: rgba(37,99,235,.22); }

/* Category card */
.cat-card { display: flex; flex-direction: column; min-height: 280px; cursor: pointer; }
.cat-card__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(140deg, var(--navy-900), var(--navy-700)); margin-bottom: 1.2rem; box-shadow: var(--sh-md); transition: transform var(--t-base) var(--ease); position: relative; }
.cat-card__icon svg { width: 26px; height: 26px; color: var(--blue-400); }
.cat-card:hover .cat-card__icon { transform: scale(1.06) rotate(-3deg); }
.cat-card h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.cat-card p { font-size: .92rem; color: var(--ink-500); flex-grow: 1; }
.cat-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1rem 0 1.1rem; }
.cat-card__tags span { font-size: .72rem; font-weight: 500; color: var(--ink-400); background: var(--surface-2); padding: .25rem .6rem; border-radius: var(--r-pill); border: 1px solid var(--line-soft); }
.cat-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.cat-card__num { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-300); letter-spacing: .1em; }
.cat-card::after { content:""; position:absolute; left:0; top:0; height:3px; width:0; background: linear-gradient(90deg, var(--blue-600), var(--blue-400)); transition: width var(--t-slow) var(--ease); }
.cat-card:hover::after { width: 100%; }

/* Feature card */
.feature { padding: 1.6rem; }
.feature__icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.14); margin-bottom: 1.1rem; }
.feature__icon svg { width: 23px; height: 23px; color: var(--accent-strong); }
.feature h4 { margin-bottom: .5rem; }
.feature p { font-size: .92rem; }

/* Product card */
.prod-card { display: flex; flex-direction: column; }
.prod-card__media { aspect-ratio: 4/3; border-radius: var(--r-md); overflow: hidden; margin-bottom: 1.1rem; position: relative; background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); }
.prod-card__media .ph-graphic { position: absolute; inset: 0; }
.prod-card__badge { position: absolute; top: .7rem; left: .7rem; z-index: 2; }
.prod-card h4 { font-size: 1.05rem; margin-bottom: .35rem; }
.prod-card p { font-size: .86rem; color: var(--ink-500); margin-bottom: 1rem; flex-grow: 1; }
.prod-card__specs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.prod-card__specs span { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-500); background: var(--surface-2); padding: .22rem .5rem; border-radius: 6px; border: 1px solid var(--line-soft); }
.prod-card__foot { display: flex; gap: .5rem; align-items: center; margin-top: auto; }

/* Blog card */
.blog-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.blog-card__media { aspect-ratio: 16/10; position: relative; overflow: hidden; }
.blog-card__media .ph-graphic { position: absolute; inset: 0; transition: transform var(--t-slow) var(--ease); }
.blog-card:hover .blog-card__media .ph-graphic { transform: scale(1.06); }
.blog-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex-grow: 1; }
.blog-card__meta { display: flex; gap: .8rem; align-items: center; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-400); margin-bottom: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.blog-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }
.blog-card h4 { font-size: 1.12rem; line-height: 1.3; margin-bottom: .5rem; }
.blog-card p { font-size: .88rem; color: var(--ink-500); flex-grow: 1; margin-bottom: 1rem; }

/* ----------------------------------------------------------------------------
   11. PLACEHOLDER GRAPHICS (premium SVG/gradient visuals)
   -------------------------------------------------------------------------- */
.ph-graphic { width: 100%; height: 100%; display: grid; place-items: center; position: relative; overflow: hidden; background: linear-gradient(140deg, var(--navy-800), var(--navy-950)); }
.ph-graphic.is-light { background: linear-gradient(140deg, #DCE6F5, #EEF3FB); }
.ph-graphic__pattern { position:absolute; inset:0; background-image: radial-gradient(circle at 1px 1px, rgba(125,170,255,.18) 1px, transparent 0); background-size: 22px 22px; opacity:.6; }
.ph-graphic__glow { position:absolute; width:60%; height:60%; border-radius:50%; filter: blur(40px); background: radial-gradient(circle, rgba(56,189,248,.5), transparent 70%); }
.ph-graphic svg.ph-icon { width: 38%; max-width: 88px; color: rgba(173,206,255,.85); position: relative; z-index: 2; }
.ph-graphic.is-light svg.ph-icon { color: rgba(37,99,235,.5); }

/* ----------------------------------------------------------------------------
   12. SPLIT / IMAGE BLOCKS
   -------------------------------------------------------------------------- */
.media-frame { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); position: relative; aspect-ratio: 5/4; }
.media-frame .ph-graphic svg.ph-icon { max-width: 130px; }
.media-frame__tag { position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 3; }
.floating-card {
  position: absolute; background: var(--surface); border-radius: var(--r-lg); padding: 1rem 1.2rem;
  box-shadow: var(--sh-lg); border: 1px solid var(--line); display: flex; gap: .8rem; align-items: center;
}
.floating-card .fc-ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(37,99,235,.1); display: grid; place-items: center; flex-shrink: 0; }
.floating-card .fc-ic svg { width: 20px; height: 20px; color: var(--accent-strong); }
.floating-card .fc-num { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink-900); line-height: 1; }
.floating-card .fc-label { font-size: .74rem; color: var(--ink-400); }

/* ----------------------------------------------------------------------------
   13. MARQUEE (brands)
   -------------------------------------------------------------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: clamp(2rem, 5vw, 4rem); width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 44s; }
@keyframes marquee { to { transform: translateX(-50%); } }
.brand-logo { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink-400); white-space: nowrap; opacity: .8; transition: color var(--t-base), opacity var(--t-base); }
.brand-logo:hover { color: var(--ink-900); opacity: 1; }
.brand-logo svg { width: 22px; height: 22px; color: var(--ink-300); }
.brand-logo.on-dark { color: var(--on-dark-soft); }
.brand-logo.on-dark:hover { color: #fff; }

/* ----------------------------------------------------------------------------
   14. PROCESS / STEPS
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: 1.2rem; counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; padding: 1.5rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: box-shadow var(--t-base), transform var(--t-base); }
.step:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.step__num { counter-increment: step; width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(140deg, var(--navy-900), var(--navy-700)); color: var(--blue-400); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; }
.step__num::before { content: "0" counter(step); }
.step h4 { margin-bottom: .35rem; }
.step p { font-size: .9rem; }

/* ----------------------------------------------------------------------------
   15. FORMS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }
.field label { font-size: .85rem; font-weight: 600; color: var(--ink-700); }
.field label .req { color: var(--danger); }
.field .hint { font-size: .76rem; color: var(--ink-400); }
.input, .select, .textarea {
  font: inherit; font-size: .96rem; width: 100%; padding: .85rem 1rem; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-900);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); min-height: 50px;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.textarea { min-height: 130px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px; padding-right: 2.6rem; cursor: pointer; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.input.is-error, .textarea.is-error, .select.is-error { border-color: var(--danger); }
.field-error { font-size: .78rem; color: var(--danger); display: none; align-items: center; gap: .3rem; }
.field-error.show { display: flex; }

/* Checkbox cards */
.check-card { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.check-card:hover { border-color: var(--blue-300); }
.check-card input { margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; }
.check-card.is-checked { border-color: var(--accent); background: rgba(37,99,235,.04); }
.check-card span.t { font-weight: 600; font-size: .9rem; color: var(--ink-900); }
.check-card span.d { font-size: .78rem; color: var(--ink-400); display: block; }

/* ----------------------------------------------------------------------------
   16. QUOTE DRAWER + FAB
   -------------------------------------------------------------------------- */
.fab-stack { position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: clamp(1rem, 3vw, 1.8rem); z-index: var(--z-fab);
  display: flex; flex-direction: column; gap: 12px; align-items: center; }
.fab { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--sh-lg); transition: transform var(--t-base) var(--ease-out); position: relative; }
.fab:hover { transform: scale(1.08) translateY(-2px); }
.fab svg { width: 26px; height: 26px; }
.fab--whatsapp { background: #25D366; color: #fff; }
.fab--whatsapp::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: fab-pulse 2.4s var(--ease-out) infinite; }
@keyframes fab-pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)} 100%{box-shadow:0 0 0 18px rgba(37,211,102,0)} }
.fab--quote { background: var(--navy-900); color: #fff; width: 56px; height: 56px; border-radius: 50%; padding: 0; }
.fab--quote .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fab--quote .count { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--blue-500); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); transform: scale(0); transition: transform var(--t-base) var(--ease-out); }
.fab--quote .count.show { transform: scale(1); }
.fab-tooltip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--navy-900); color:#fff; padding: .45rem .8rem; border-radius: var(--r-sm); font-size: .8rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t-fast); box-shadow: var(--sh-md); }
.fab:hover .fab-tooltip { opacity: 1; }

.drawer-overlay { position: fixed; inset: 0; background: rgba(6,10,20,.55); backdrop-filter: blur(4px); z-index: var(--z-overlay); opacity: 0; visibility: hidden; transition: opacity var(--t-base), visibility var(--t-base); }
.drawer-overlay.is-open { opacity: 1; visibility: visible; }
.quote-drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 100%); background: var(--surface);
  z-index: var(--z-drawer); display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out); box-shadow: -20px 0 60px rgba(6,10,20,.25);
}
.quote-drawer.is-open { transform: translateX(0); }
.quote-drawer__head { padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.quote-drawer__head h3 { font-size: 1.2rem; }
.quote-drawer__head .sub { font-size: .82rem; color: var(--ink-400); }
.drawer-close { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); transition: background var(--t-fast); }
.drawer-close:hover { background: var(--surface-3); }
.drawer-close svg { width: 20px; height: 20px; color: var(--ink-600); }
.quote-drawer__body { flex-grow: 1; overflow-y: auto; padding: 1.2rem 1.5rem; }
.quote-item { display: flex; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.quote-item__ic { width: 46px; height: 46px; border-radius: 11px; background: linear-gradient(140deg, var(--navy-800), var(--navy-950)); display: grid; place-items: center; flex-shrink: 0; }
.quote-item__ic svg { width: 22px; height: 22px; color: var(--blue-400); }
.quote-item__info { flex-grow: 1; min-width: 0; }
.quote-item__info h5 { font-size: .92rem; font-weight: 600; color: var(--ink-900); margin-bottom: 2px; }
.quote-item__info span { font-size: .76rem; color: var(--ink-400); }
.quote-item__rm { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-400); transition: color var(--t-fast), background var(--t-fast); flex-shrink: 0; }
.quote-item__rm:hover { color: var(--danger); background: rgba(220,38,38,.07); }
.quote-item__rm svg { width: 18px; height: 18px; }
.quote-drawer__foot { padding: 1.3rem 1.5rem; border-top: 1px solid var(--line); display: grid; gap: .7rem; }
.quote-empty { text-align: center; padding: 3rem 1rem; color: var(--ink-400); }
.quote-empty svg { width: 56px; height: 56px; color: var(--line); margin: 0 auto 1rem; }
.quote-empty h4 { color: var(--ink-700); margin-bottom: .4rem; }
.quote-empty p { font-size: .88rem; }

/* ----------------------------------------------------------------------------
   17. ADD-TO-QUOTE BUTTON STATES
   -------------------------------------------------------------------------- */
.atq { transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.atq.is-added { background: var(--success); color: #fff; border-color: var(--success); }
.atq.is-added svg.ic-plus { display: none; }
.atq .ic-check { display: none; }
.atq.is-added .ic-check { display: block; }

/* ----------------------------------------------------------------------------
   18. TESTIMONIAL / TRUST
   -------------------------------------------------------------------------- */
.quote-block { background: linear-gradient(135deg, var(--navy-900), var(--navy-800)); border-radius: var(--r-2xl); padding: clamp(2rem,5vw,4rem); color: #fff; position: relative; overflow: hidden; }
.quote-block__mark { font-family: var(--font-display); font-size: 8rem; line-height: .6; color: var(--blue-500); opacity: .25; position: absolute; top: 1.5rem; left: 2rem; }
.quote-block blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 3vw, 2rem); line-height: 1.35; letter-spacing: -.02em; position: relative; max-width: 880px; }
.quote-block__author { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.quote-block__author .av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(140deg, var(--blue-500), var(--blue-700)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1.1rem; }
.quote-block__author .nm { font-weight: 600; }
.quote-block__author .rl { font-size: .85rem; color: var(--on-dark-soft); }

/* ----------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-950); color: var(--on-dark); padding-top: clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.site-footer::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(125,170,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(125,170,255,.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 70%); -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000, transparent 70%); }
.footer-cta { position: relative; background: linear-gradient(120deg, var(--blue-700), var(--blue-500)); border-radius: var(--r-2xl); padding: clamp(2.2rem,5vw,3.5rem); text-align: center; margin-bottom: clamp(3rem,6vw,4.5rem); overflow: hidden; }
.footer-cta::after { content:""; position:absolute; inset:0; pointer-events: none; background: radial-gradient(60% 120% at 50% 0%, rgba(255,255,255,.25), transparent 60%); }
.footer-cta h2 { color: #fff; position: relative; }
.footer-cta p { color: rgba(255,255,255,.85); position: relative; max-width: 540px; margin: 1rem auto 0; }
.footer-cta__btns { position: relative; display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.footer-grid { position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer-col h5 { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-400); margin-bottom: 1.2rem; }
.footer-col ul li { margin-bottom: .65rem; }
.footer-col a { color: var(--on-dark-soft); font-size: .92rem; transition: color var(--t-fast); }
.footer-col a:hover { color: #fff; }
.footer-brand p { color: var(--on-dark-soft); font-size: .9rem; margin: 1rem 0 1.4rem; max-width: 300px; }
.footer-contact-item { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; font-size: .9rem; color: var(--on-dark-soft); }
.footer-contact-item svg { width: 18px; height: 18px; color: var(--blue-400); flex-shrink: 0; margin-top: 2px; }
.footer-social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.footer-social a { width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.footer-social a:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); transform: translateY(-2px); }
.footer-social svg { width: 19px; height: 19px; color: var(--on-dark); }
.footer-bottom { position: relative; border-top: 1px solid rgba(255,255,255,.08); padding: 1.6rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer-bottom p { font-size: .84rem; color: var(--on-dark-soft); }
.footer-bottom .legal { display: flex; gap: 1.4rem; }
.footer-bottom .legal a { font-size: .84rem; color: var(--on-dark-soft); }
.footer-bottom .legal a:hover { color: #fff; }

/* ----------------------------------------------------------------------------
   20. PAGE HEADER (inner pages)
   -------------------------------------------------------------------------- */
.page-hero { position: relative; padding-top: calc(var(--nav-h) + clamp(2.5rem,5vw,4rem)); padding-bottom: clamp(2.5rem,5vw,4rem); background: radial-gradient(120% 130% at 85% -20%, var(--navy-700), var(--navy-900) 50%, var(--navy-950)); color: #fff; overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.page-hero h1 { color: #fff; }
.page-hero .lead { color: var(--on-dark-soft); max-width: 620px; }
.breadcrumb { display: flex; gap: .5rem; align-items: center; font-family: var(--font-mono); font-size: .78rem; color: var(--on-dark-soft); margin-bottom: 1.4rem; }
.breadcrumb a { color: var(--on-dark-soft); transition: color var(--t-fast); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb svg { width: 14px; height: 14px; opacity: .5; }
.breadcrumb .current { color: var(--blue-300); }

/* ----------------------------------------------------------------------------
   21. TOAST
   -------------------------------------------------------------------------- */
.toast-wrap { position: fixed; bottom: clamp(1rem,3vw,1.8rem); left: 50%; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: .6rem; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: .7rem; background: var(--navy-900); color: #fff; padding: .85rem 1.2rem; border-radius: var(--r-pill); box-shadow: var(--sh-lg); font-size: .9rem; font-weight: 500; transform: translateY(20px); opacity: 0; transition: transform var(--t-base) var(--ease-out), opacity var(--t-base); border: 1px solid rgba(255,255,255,.1); }
.toast.show { transform: translateY(0); opacity: 1; }
.toast svg { width: 18px; height: 18px; color: var(--blue-400); flex-shrink: 0; }
.toast.is-success svg { color: #4ADE80; }

/* ----------------------------------------------------------------------------
   22. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.accordion { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.acc-item { border-bottom: 1px solid var(--line-soft); }
.acc-item:last-child { border-bottom: none; }
.acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 1.5rem; text-align: left; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--ink-900); transition: background var(--t-fast); }
.acc-head:hover { background: var(--surface-2); }
.acc-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; flex-shrink: 0; transition: transform var(--t-base) var(--ease), background var(--t-base); }
.acc-icon svg { width: 17px; height: 17px; color: var(--ink-600); transition: transform var(--t-base) var(--ease); }
.acc-item.is-open .acc-icon { background: var(--accent); }
.acc-item.is-open .acc-icon svg { color: #fff; transform: rotate(45deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height var(--t-slow) var(--ease); }
.acc-body__inner { padding: 0 1.5rem 1.4rem; color: var(--ink-500); font-size: .95rem; }

/* ----------------------------------------------------------------------------
   23. SCROLL REVEAL ANIMATIONS
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: opacity, transform; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="fade"] { transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .40s; }

.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--blue-600), var(--blue-400)); width: 0; z-index: calc(var(--z-nav) + 1); transition: width .1s linear; box-shadow: 0 0 12px rgba(56,189,248,.6); }

/* ----------------------------------------------------------------------------
   24. UTILITIES
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem} .mt-4{margin-top:2rem} .mt-5{margin-top:3rem}
.mb-0{margin-bottom:0}
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-1{gap:.5rem} .gap-2{gap:1rem} .gap-3{gap:1.5rem}
.flex-wrap { flex-wrap: wrap; }
.w-full { width: 100%; }
.bg-surface { background: var(--surface); }
.bg-soft { background: var(--surface-2); }
.bg-dark { background: var(--navy-950); color: var(--on-dark); }
.relative { position: relative; }
.hidden { display: none; }
.list-check li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; color: var(--ink-600); font-size: .95rem; }
.list-check li svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.list-check.on-dark li { color: var(--on-dark-soft); }
.list-check.on-dark li svg { color: var(--blue-400); }

/* ----------------------------------------------------------------------------
   25. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split.split--rev .split__media { order: -1; }
}
@media (max-width: 880px) {
  .nav, .nav-actions .btn--ghost, .nav-actions .btn:not(.nav-cta) { display: none; }
  .nav-toggle { display: flex; }
  .nav-actions { gap: .5rem; }
  .mega { display: none; }
  .stat-bar { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root { --nav-h: 66px; }
  .nav-cta { display: none; }
  .brand__tag { display: none; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .stat-bar { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero__meta { gap: 1.2rem 1.8rem; }
  .quote-block__mark { font-size: 5rem; left: 1rem; }
}
@media (max-width: 400px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* ----------------------------------------------------------------------------
   26. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; }
  .hero__orb { display: none; }
}

/* Print */
@media print { .site-header, .fab-stack, .quote-drawer, .drawer-overlay, .footer-cta { display: none !important; } }

/* ============================================================================
   27. IMAGERY, LOGO CHIP, BRAND WALL, TRUST BAR, GALLERY  (v2 additions)
   ========================================================================== */

/* --- Real logo chip (keeps the original Alba logo crisp on any background) - */
.brand__logo-chip { width: auto; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 11px; padding: 5px 9px; box-shadow: var(--sh-sm); border: 1px solid rgba(255,255,255,.5); flex-shrink: 0; }
.brand__logo-chip img { height: 100%; width: auto; display: block; }
.site-header.is-scrolled .brand__logo-chip { box-shadow: var(--sh-xs); border-color: var(--line); }
.footer-brand .brand__logo-chip { height: 46px; }

/* --- Image helpers --- */
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.kenburns { animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1) translate(0,0); } to { transform: scale(1.12) translate(-1.5%, -1.5%); } }
@media (prefers-reduced-motion: reduce){ .kenburns { animation: none; } }

/* --- Hero photo layer (behind the animated orbit) --- */
.hero__photo { position: absolute; inset: 0; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; opacity: .28; mix-blend-mode: luminosity; }
.hero__photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,17,36,.55) 0%, rgba(10,17,36,.7) 60%, var(--navy-950) 100%),
              radial-gradient(120% 130% at 80% -10%, rgba(37,99,235,.35), transparent 55%); }

/* --- Media frame with real photo --- */
.media-frame img.frame-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-frame .frame-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,17,36,.55)); z-index: 2; }

/* --- Category card with photo background --- */
.cat-card--img { color: #fff; border: none; min-height: 300px; justify-content: flex-end; }
.cat-card--img .cat-card__bg { position: absolute; inset: 0; z-index: 0; }
.cat-card--img .cat-card__bg img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.cat-card--img:hover .cat-card__bg img { transform: scale(1.07); }
.cat-card--img .cat-card__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,17,36,.25) 0%, rgba(10,17,36,.78) 62%, rgba(6,10,20,.94) 100%); }
.cat-card--img > * { position: relative; z-index: 2; }
.cat-card--img h3 { color: #fff; }
.cat-card--img p { color: rgba(234,241,251,.82); }
.cat-card--img .cat-card__tags span { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: rgba(234,241,251,.9); }
.cat-card--img .cat-card__num { color: rgba(159,178,208,.8); }
.cat-card--img .cat-card__icon { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); box-shadow: none; }
.cat-card--img .cat-card__icon svg { color: var(--amber-400, #F5A623); }

/* --- Principal brand wall (real logos) --- */
.brand-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.brand-tile { flex: 1 1 150px; max-width: 190px; aspect-ratio: 16/9; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  display: grid; place-items: center; align-content: center; padding: 1rem 1.2rem; transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); }
.brand-tile:hover { border-color: rgba(37,99,235,.25); box-shadow: var(--sh-md); transform: translateY(-3px); }
.brand-tile img { max-height: 56px; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter var(--t-base), opacity var(--t-base); }
.brand-tile:hover img { filter: grayscale(0); opacity: 1; }
.brand-tile .brand-fallback { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--ink-400); letter-spacing: -.01em; }

/* --- Trust bar (certifications) --- */
.trust-bar { display: flex; flex-wrap: wrap; gap: .8rem 1.8rem; align-items: center; justify-content: center; }
.trust-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--ink-600); }
.trust-item svg { width: 19px; height: 19px; color: var(--success); }
.trust-item.on-dark { color: var(--on-dark); }
.trust-bar.on-dark .trust-item svg { color: var(--amber-500); }
.trust-divider { width: 1px; height: 20px; background: var(--line); }

/* --- Gallery strip --- */
.gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1rem; height: 460px; }
.gallery-grid .g-item { border-radius: var(--r-lg); overflow: hidden; position: relative; }
.gallery-grid .g-item:first-child { grid-row: span 2; }
.gallery-grid .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.gallery-grid .g-item:hover img { transform: scale(1.06); }
/* Caption is real text now, not pixels baked into the photo. */
.gallery-grid .g-item .g-cap { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 2;
  color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: -.01em; line-height: 1.25;
  text-shadow: 0 1px 12px rgba(6,10,20,.55); }
.gallery-grid .g-item:first-child .g-cap { font-size: 1.25rem; }
@media (max-width: 760px) { .gallery-grid .g-item .g-cap { font-size: .85rem; } }
.gallery-grid .g-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6,10,20,.6)); }
@media (max-width: 760px){ .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 140px); height: auto; } .gallery-grid .g-item:first-child { grid-row: span 2; grid-column: span 2; } }

/* --- Video / showcase block --- */
.video-block { position: relative; border-radius: var(--r-2xl); overflow: hidden; min-height: 380px; display: grid; place-items: center; }
.video-block img.vb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-block::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(10,17,36,.85), rgba(10,17,36,.55)); }
.video-block__inner { position: relative; z-index: 2; text-align: center; color: #fff; padding: 2rem; }
.play-btn { width: 84px; height: 84px; border-radius: 50%; background: #fff; display: grid; place-items: center; margin: 0 auto 1.5rem; cursor: pointer; position: relative; transition: transform var(--t-base) var(--ease); }
.play-btn:hover { transform: scale(1.08); }
.play-btn svg { width: 30px; height: 30px; color: var(--navy-900); margin-left: 4px; }
.play-btn::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); animation: fab-pulse 2.4s var(--ease-out) infinite; }
@media (prefers-reduced-motion: reduce){ .play-btn::before { animation: none; } }
.video-block h2 { color: #fff; }
.video-block p { color: var(--on-dark-soft); max-width: 520px; margin: .8rem auto 0; }

/* --- Lightbox --- */
.lightbox { position: fixed; inset: 0; z-index: var(--z-toast); background: rgba(6,10,20,.9); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity var(--t-base), visibility var(--t-base); }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__frame { width: min(1400px, 92vw); aspect-ratio: 16/9; background: #000; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); }
.lightbox__frame iframe, .lightbox__frame video { width: 100%; height: 100%; border: 0; display: block; }
.lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center;
  color: #fff; font-size: 1.6rem; line-height: 1; font-weight: 300; transition: background var(--t-fast); }
.lightbox__close:hover { background: rgba(255,255,255,.22); }
.lightbox__close svg { width: 22px; height: 22px; color: #fff; }
.lightbox__msg { text-align: center; color: #fff; max-width: 420px; }
.lightbox__msg svg { width: 48px; height: 48px; color: var(--blue-400); margin: 0 auto 1rem; }

/* --- Electron accent (amber) --- */
.pulse-dot { background: var(--electron); }
.pulse-dot::after { background: var(--electron); }
.eyebrow.amber { color: var(--amber-600); }
.eyebrow.amber::before { background: linear-gradient(90deg, var(--amber-500), transparent); }

/* ============================================================================
   28. CATALOGUE v3 — product media, category photo cards, brand tiles,
   reviews, product-detail page, brand page, search & filters
   ========================================================================== */

/* --- Category photo card: push icon to top, content to bottom --- */
.cat-card--img .cat-card__icon { margin-bottom: auto; }
.cat-card--img .cat-card__foot { margin-top: 1rem; }

/* --- Product media (real photo on light, or branded fallback) --- */
.prod-media { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden;
  background: #fff; border: 1px solid var(--line-soft); display: block; }
/* Catalogue photos are pre-standardised (square, own padding + studio backdrop),
   so they fill the frame edge-to-edge — adding CSS padding here would nest a
   second, visibly different background inside the card. */
.prod-media .prod-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; padding: 0;
  transition: transform var(--t-slow) var(--ease); background: none; z-index: 2; }
.prod-media .prod-img.cover { object-fit: cover; padding: 0; background: none; }
.prod-card__media:hover .prod-img { transform: scale(1.05); }
.prod-fallback { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  background: linear-gradient(160deg, #ffffff 0%, color-mix(in srgb, var(--pa) 10%, #f2f5fa) 100%); overflow: hidden; }
.prod-fallback .pf-ic { position: relative; z-index: 2; width: 46px; height: 46px; color: color-mix(in srgb, var(--pa) 78%, #334155); }
.prod-fallback .pf-brand { position: relative; z-index: 2; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em;
  color: #fff; background: var(--pa); padding: .28rem .95rem; border-radius: var(--r-pill); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--pa) 55%, transparent); }
.prod-fallback .pf-pattern { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--pa) 20%, transparent) 1px, transparent 0); background-size: 22px 22px; opacity: .4; }

.prod-card__brandtag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); font-weight: 600; margin-bottom: .3rem; display: block; }
.prod-card h4 a { transition: color var(--t-fast); }
.prod-card h4 a:hover { color: var(--accent-strong); }

/* --- Brand tiles: colourful by default, animated highlight on hover --- */
.brand-tile { position: relative; flex-direction: column; gap: .4rem; overflow: hidden; }
.brand-tile img { filter: none; opacity: 1; }               /* override old grayscale */
.brand-tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 120%, color-mix(in srgb, var(--ba, #2563EB) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--t-base) var(--ease); }
.brand-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ba, var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base) var(--ease); }
.brand-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ba, #2563EB) 45%, var(--line)); box-shadow: var(--sh-lg); }
.brand-tile:hover::before { opacity: 1; }
.brand-tile:hover::after { transform: scaleX(1); }
.brand-tile:hover img { transform: scale(1.06); transition: transform var(--t-base) var(--ease); }
.brand-tile__view { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--ba, var(--accent-strong)); opacity: 0; transform: translateY(8px); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.brand-tile__view svg { width: 13px; height: 13px; }
.brand-tile:hover .brand-tile__view { opacity: 1; transform: translateY(0); }
.brand-tile .brand-fallback { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink-800, #1E293B); letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce){ .brand-tile:hover { transform: none; } .brand-tile__view { opacity: 1; transform: none; } }

/* --- Reviews --- */
.review-card { display: flex; flex-direction: column; gap: 1rem; }
.review-stars { display: flex; gap: 2px; }
.review-stars svg { width: 18px; height: 18px; color: var(--amber-500); }
.review-text { color: var(--ink-700); font-size: 1rem; line-height: 1.6; flex-grow: 1; }
.review-author { display: flex; align-items: center; gap: .8rem; }
.review-author .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, var(--blue-500), var(--blue-700)); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.review-author .nm { font-weight: 600; color: var(--ink-900); font-size: .92rem; }
.review-author .rl { font-size: .8rem; color: var(--ink-400); }
.rating-summary { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); white-space: nowrap; }
.rating-summary .big { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--ink-900); line-height: 1; }
.rating-summary .stars { display: inline-flex; gap: 1px; }
.rating-summary .stars svg { width: 16px; height: 16px; color: var(--amber-500); }
.rating-summary .sub { font-size: .85rem; color: var(--ink-400); }

/* --- Search & filter bar --- */
.filter-panel { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.search-box { position: relative; max-width: 420px; }
.search-box svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-400); }
.search-box input { width: 100%; padding: .85rem 1rem .85rem 2.8rem; border-radius: var(--r-pill); border: 1.5px solid var(--line); font: inherit; font-size: .95rem; background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.search-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-chip { padding: .5rem 1rem; border-radius: var(--r-pill); border: 1.5px solid var(--line); font-weight: 600; font-size: .84rem; color: var(--ink-600); background: var(--surface); transition: all var(--t-fast); white-space: nowrap; }
.filter-chip:hover { border-color: var(--blue-300); }
.filter-chip.is-active { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.filter-meta { font-size: .85rem; color: var(--ink-400); }
.no-results { text-align: center; padding: 3rem 1rem; color: var(--ink-400); grid-column: 1 / -1; }
.no-results svg { width: 48px; height: 48px; color: var(--line); margin: 0 auto 1rem; }

/* --- Product detail page --- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px){ .pdp { grid-template-columns: 1fr; } }
.pdp__media { position: sticky; top: calc(var(--nav-h) + 1.5rem); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: #fff; aspect-ratio: 1; box-shadow: var(--sh-md); }
@media (max-width: 900px){ .pdp__media { position: relative; top: 0; aspect-ratio: 4/3; } }
.pdp__media .prod-media { aspect-ratio: 1; height: 100%; border: none; border-radius: 0; }
.pdp__media .prod-img { padding: 0; }
.pdp__brand { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); font-weight: 600; margin-bottom: .6rem; }
.pdp h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: .8rem; }
.pdp__desc { font-size: 1.08rem; color: var(--ink-600); line-height: 1.65; }
.pdp__section { margin-top: 1.8rem; }
.pdp__section h3 { font-size: 1.05rem; margin-bottom: .8rem; }
.pdp__specs { display: flex; flex-wrap: wrap; gap: .5rem; }
.pdp__specs span { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-600); background: var(--surface-2); padding: .4rem .8rem; border-radius: var(--r-sm); border: 1px solid var(--line-soft); }
.pdp__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.pdp__trust { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.6rem; }
.pdp__trust .ti { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink-500); font-weight: 500; }
.pdp__trust .ti svg { width: 18px; height: 18px; color: var(--success); }

/* --- Product options (size / colour / quantity) --- */
.opt-group { margin-top: 1.5rem; }
.opt-group__label { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); margin-bottom: .6rem; display: block; }
.opt-group__label .sel { color: var(--accent-strong); text-transform: none; letter-spacing: 0; margin-left: .4rem; font-weight: 600; }
.opt-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.opt-btn { padding: .55rem 1rem; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); font-weight: 600; font-size: .9rem; color: var(--ink-700); cursor: pointer; transition: all var(--t-fast); display: inline-flex; align-items: center; gap: .45rem; }
.opt-btn:hover { border-color: var(--blue-300); }
.opt-btn.is-active { border-color: var(--accent); background: rgba(37,99,235,.06); color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.opt-btn .swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.qty-stepper button { width: 44px; height: 44px; display: grid; place-items: center; background: var(--surface); color: var(--ink-700); font-size: 1.2rem; transition: background var(--t-fast); }
.qty-stepper button:hover { background: var(--surface-2); }
.qty-stepper button:disabled { color: var(--ink-300); cursor: not-allowed; }
.qty-stepper input { width: 54px; height: 44px; text-align: center; border: none; border-left: 1.5px solid var(--line); border-right: 1.5px solid var(--line); font: inherit; font-weight: 700; font-size: 1rem; color: var(--ink-900); -moz-appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Brand page hero --- */
.brand-hero { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.brand-hero__logo { width: 140px; height: 86px; background: #fff; border-radius: var(--r-md); display: grid; place-items: center; padding: 12px; box-shadow: var(--sh-md); flex-shrink: 0; }
.brand-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-hero__logo .brand-fallback { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink-900); }

/* --- Article (blog post) page --- */
.article-hero { position: relative; padding-top: calc(var(--nav-h) + clamp(2.5rem,5vw,4rem)); padding-bottom: clamp(2.5rem,5vw,4rem); color: #fff; overflow: hidden; background: var(--navy-900); }
.article-hero__bg { position: absolute; inset: 0; }
.article-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.article-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,17,36,.6), rgba(10,17,36,.82) 70%, var(--navy-950)); }
.article-hero__inner { position: relative; max-width: 800px; }
.article-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); margin-top: .8rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; font-family: var(--font-mono); font-size: .78rem; color: var(--on-dark-soft); text-transform: uppercase; letter-spacing: .05em; margin-top: 1.2rem; }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--on-dark-soft); }
.article-wrap { max-width: 760px; margin-inline: auto; }
.article-lead { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.55; color: var(--ink-800, #1e293b); font-weight: 500; letter-spacing: -.01em; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.article-body { font-size: 1.06rem; line-height: 1.75; color: var(--ink-600); }
.article-body h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 2.2rem 0 .9rem; color: var(--ink-900); }
.article-body p { margin-bottom: 1.1rem; }
.article-body ul { margin: 0 0 1.3rem; padding-left: 0; list-style: none; }
.article-body ul li { position: relative; padding-left: 1.7rem; margin-bottom: .7rem; }
.article-body ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
.article-body strong { color: var(--ink-900); font-weight: 600; }
.article-body em { color: var(--ink-700); }
.article-cta { margin-top: 2.5rem; padding: 1.8rem; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.article-cta p { font-weight: 600; color: var(--ink-900); font-size: 1.05rem; }

/* --- Blog card real image --- */
.blog-card__media img.blog-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.blog-card:hover .blog-card__media img.blog-img { transform: scale(1.06); }
.featured__media img.feat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- Mega menu brand strip --- */
.mega-brands { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.mega-brand { font-size: .82rem; font-weight: 600; color: var(--ink-500); padding: .35rem .8rem; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-soft); transition: all var(--t-fast); }
.mega-brand:hover { color: var(--accent-strong); border-color: rgba(37,99,235,.25); background: rgba(37,99,235,.05); }

/* ============================================================================
   29. HERO SHOWCASE — rotating full-bleed category carousel (Phase 1)
   Visual-first: communicates WHAT WE SUPPLY before any company story.
   Hand-rolled crossfade rotator (zero dependencies). Per-category overlay FX
   (seam lines, ripple rings, sparks) were removed after user testing showed
   them reading as generic decoration rather than as motion tied to the
   product. The photo, its Ken Burns zoom and the copy carry the slide now.
   ========================================================================== */

/* --- Stage & crossfade (hand-rolled — no carousel library) ---------------
   Slides are stacked and cross-faded. Only the active slide is interactive
   and exposed to assistive tech; the rest are aria-hidden by the script.
   -------------------------------------------------------------------------- */
.hs__stage { position: absolute; inset: 0; }
.hs__stage:focus-visible { outline: 3px solid var(--blue-400); outline-offset: -4px; border-radius: 4px; }
.hs__slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transition: opacity .9s var(--ease), visibility 0s linear .9s; }
.hs__slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition: opacity .9s var(--ease), visibility 0s; }

/* --- Entrance choreography, CSS-only ------------------------------------
   Previously driven by GSAP. Moving it to CSS removes the last reason the
   hero needed a third-party library at all.
   -------------------------------------------------------------------------- */
.hs__title { perspective: 800px; }
.hs__title .w { display: inline-block; opacity: 0; }
.hs__slide.is-active .hs__title .w {
  animation: hs-word .85s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * .055s);
}
@keyframes hs-word {
  from { opacity: 0; transform: translateY(105%) rotateX(-55deg); }
  to   { opacity: 1; transform: none; }
}
.hs__eyebrow, .hs__lead, .hs__meta, .hs__cta { opacity: 0; }
.hs__slide.is-active .hs__eyebrow { animation: hs-rise .6s .16s var(--ease-out) both; }
.hs__slide.is-active .hs__lead    { animation: hs-rise .6s .26s var(--ease-out) both; }
.hs__slide.is-active .hs__meta    { animation: hs-rise .6s .34s var(--ease-out) both; }
.hs__slide.is-active .hs__cta     { animation: hs-rise .6s .42s var(--ease-out) both; }
@keyframes hs-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.hero-showcase {
  position: relative;
  height: min(100svh, 900px);
  min-height: 560px;
  background: var(--navy-950);
  overflow: hidden;
  isolation: isolate;
}
/* --- Slide background: photo + Ken Burns + brand-navy grade --- */
.hs__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hs__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); will-change: transform; }
.hs__slide.is-active .hs__bg img { animation: hs-kenburns 11s var(--ease) forwards; }
@keyframes hs-kenburns { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.16) translate3d(-1.2%,-1%,0); } }
.hs__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6,10,20,.94) 0%, rgba(10,17,36,.86) 38%, rgba(10,17,36,.42) 72%, rgba(10,17,36,.30) 100%),
    linear-gradient(0deg, rgba(6,10,20,.92) 0%, transparent 42%);
}
.hs__grid { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgba(125,170,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(125,170,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 70% at 78% 30%, #000 0%, transparent 76%);
  mask-image: radial-gradient(75% 70% at 78% 30%, #000 0%, transparent 76%);
}

/* --- Layout --- */
.hs__inner { position: relative; z-index: 3; height: 100%; display: flex; align-items: center;
  padding-top: var(--nav-h); padding-bottom: clamp(5rem, 9vh, 6.5rem); }
.hs__content { max-width: 680px; }
.hs__eyebrow { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-mono);
  font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-300); margin-bottom: 1.1rem; }
.hs__eyebrow .idx { color: var(--electron); }
.hs__eyebrow .bar { width: 34px; height: 1.5px; background: linear-gradient(90deg, var(--electron), transparent); }
.hs__title { font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(2.4rem, 6.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.028em; margin-bottom: 1.1rem; }
.hs__title .w { display: inline-block; will-change: transform, opacity; }
.hs__title .accent { color: transparent; background: linear-gradient(100deg, var(--blue-400), #fff 55%, var(--blue-300));
  -webkit-background-clip: text; background-clip: text; }
.hs__lead { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--on-dark-soft); max-width: 46ch; margin-bottom: 1.6rem; }
.hs__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.hs__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- Hero nav: minimal indicators -----------------------------------------
   Replaces the old persistent rail (category names + numbers + progress bars
   + play/pause cluster). That panel read as carousel machinery sitting on top
   of the photography; none of the reference sites do it. The category names
   now live in a dedicated grid further down the page, where they can breathe.

   Desktop shows 8 dots. Below 900px they'd collide with the floating action
   buttons in the bottom-right, so a compact "01 / 08" counter takes over.
   Hit areas stay >=44px tall with >=8px separation per touch guidelines,
   even though the visible dot is only 8px.
   -------------------------------------------------------------------------- */
.hs__nav { position: absolute; left: 0; right: 0; bottom: clamp(1.4rem, 4vh, 2.4rem); z-index: 6; }
.hs__nav-inner { display: flex; align-items: center; gap: .5rem; }

.hs__dots { display: flex; align-items: center; gap: 8px; }
.hs__dot { width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  background: none; border: none; cursor: pointer; }
.hs__dot .d { display: block; width: 8px; height: 8px; border-radius: 99px; position: relative; overflow: hidden;
  background: rgba(255,255,255,.30); transition: width .5s var(--ease-out), background .3s var(--ease); }
.hs__dot:hover .d { background: rgba(255,255,255,.62); }
.hs__dot:focus-visible { outline: 3px solid var(--blue-400); outline-offset: -8px; border-radius: 50%; }
.hs__dot[aria-current="true"] .d { width: 46px; background: rgba(255,255,255,.24); }
.hs__dot[aria-current="true"] .d i { position: absolute; inset: 0; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--blue-400), var(--electron));
  animation: hs-dotfill var(--hs-dur, 6s) linear forwards; }
.hs__nav.is-paused .hs__dot[aria-current="true"] .d i { animation-play-state: paused; }
@keyframes hs-dotfill { from { width: 0; } to { width: 100%; } }

/* Compact counter — mobile only */
.hs__counter { display: none; align-items: center; gap: .55rem; font-family: var(--font-mono);
  font-size: .74rem; letter-spacing: .1em; color: var(--on-dark-soft); }
.hs__counter .cur { color: #fff; }
.hs__counter .bar { display: block; width: 74px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; }
.hs__counter .bar i { display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-400), var(--electron));
  animation: hs-dotfill var(--hs-dur, 6s) linear forwards; }
.hs__nav.is-paused .hs__counter .bar i { animation-play-state: paused; }

@media (max-width: 900px) {
  .hs__dots { display: none; }
  .hs__counter { display: flex; }
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .hero-showcase { height: min(94svh, 780px); min-height: 600px; }
  .hs__inner { padding-bottom: clamp(5.5rem, 14vh, 7rem); }
  .hs__bg::after { background: linear-gradient(100deg, rgba(6,10,20,.95) 0%, rgba(10,17,36,.80) 55%, rgba(10,17,36,.55) 100%), linear-gradient(0deg, rgba(6,10,20,.95) 0%, transparent 46%); }
}
@media (max-width: 640px) {
  .hs__cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* --- Reduced motion: no autoplay, no Ken Burns --- */
@media (prefers-reduced-motion: reduce) {
  .hs__slide.is-active .hs__bg img { animation: none !important; }
  .hs__dot[aria-current="true"] .d i, .hs__counter .bar i { animation: none; width: 100%; }
  .hs__title .w, .hs__eyebrow, .hs__lead, .hs__meta, .hs__cta {
    opacity: 1 !important; transform: none !important; animation: none !important; }
  .hs__slide { transition: none; }
}

/* ============================================================================
   30. PHASE 2 — sitewide visual expansion + purposeful micro-interactions
   ========================================================================== */

/* ----------------------------------------------------------------------------
   30a. Micro-interactions — every clickable thing should answer to the cursor
   -------------------------------------------------------------------------- */

/* Press feedback: a real, physical "give" on tap/click. */
.btn:active { transform: translateY(0) scale(.975); }
.opt-btn:active, .filter-chip:active { transform: scale(.97); }
.hs__dot:active .d { transform: scale(.86); }
.btn, .opt-btn, .filter-chip { -webkit-tap-highlight-color: transparent; }

/* Nav links: an underline that wipes in from the left. */
.nav-link::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .28rem; height: 2px;
  background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease); opacity: .55;
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active::after { transform: scaleX(1); opacity: 1; background: var(--accent); }
.site-header.on-dark:not(.is-scrolled) .nav-link.is-active::after { background: var(--blue-400); }
.nav-item.has-mega:hover .nav-link::after { transform: scaleX(1); }

/* Cards lift with a softer, springier curve. */
.card { transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.prod-card:hover .prod-media .prod-img { transform: scale(1.06); }
.prod-card:active { transform: translateY(-2px) scale(.995); }

/* Cart drawer: heavier, more deliberate motion + GPU hint. */
.quote-drawer { will-change: transform; transition: transform 560ms cubic-bezier(.32,.72,0,1); }
.drawer-overlay { transition: opacity 400ms var(--ease), visibility 400ms; }
.quote-item { transition: background var(--t-fast) var(--ease); border-radius: var(--r-sm); }
.quote-item:hover { background: var(--surface-2); }

/* Mini-cat / brand tiles / rail get the same tactile treatment. */
.mini-cat:active { transform: translateY(-1px) scale(.985); }
.brand-tile:active { transform: translateY(-2px) scale(.985); }

/* Keyboard users get the same clarity as pointer users. */
.btn:focus-visible, .opt-btn:focus-visible, .filter-chip:focus-visible,
.nav-link:focus-visible {
  outline: 3px solid var(--blue-400); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn:active, .opt-btn:active, .filter-chip:active, .prod-card:active,
  .mini-cat:active, .brand-tile:active { transform: none; }
  .hs__dot:active .d { transform: none; }
  .nav-link::after { transition: none; }
}

/* ----------------------------------------------------------------------------
   30b. Statement band — a full-width visual break for long text stretches
   -------------------------------------------------------------------------- */
.statement {
  position: relative; overflow: hidden; border-radius: var(--r-2xl);
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
  padding: clamp(2rem, 3.6vw, 2.9rem) clamp(1.5rem, 5vw, 4rem);
  color: #fff; isolation: isolate;
}
.statement__bg { position: absolute; inset: 0; z-index: 0; opacity: .22; }
.statement__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Muted ambient loop, layered over the static image rather than replacing it:
   main.js only starts loading/playing it once the band nears the viewport,
   and skips it entirely on narrow viewports and reduced-motion. If it never
   loads (slow connection, autoplay blocked, JS disabled) the image underneath
   is the whole experience, not a broken placeholder. */
/* The <video> itself is never the directly-positioned element — a video's
   own intrinsic aspect ratio fights percentage height when it's absolutely
   positioned against inset:0 directly (computes 0, or falls back to
   aspect-ratio-derived sizing instead of filling the box, in a way a plain
   <img> in the same spot does not). Wrapping it in a plain div that does
   the positioning, with the video just a normal 100% child, sidesteps that
   entirely — the same pattern .statement__bg itself already uses for the img. */
.statement__video-wrap { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.statement__video-wrap.is-ready { opacity: 1; }
.statement__video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px), (prefers-reduced-motion: reduce) { .statement__video-wrap { display: none; } }
.statement::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(rgba(125,170,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(125,170,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 70% at 80% 20%, #000, transparent 75%);
  mask-image: radial-gradient(70% 70% at 80% 20%, #000, transparent 75%);
}
/* Lifts the text children above the background layer. Deliberately excludes
   .statement__bg itself: as a plain wildcard this used to also match the
   background div and silently flip it from position:absolute back to
   relative, which is exactly the bug that made the video/image render as a
   normal-flow block above the text instead of as a full-bleed background. */
.statement > *:not(.statement__bg) { position: relative; z-index: 2; }
/* A label + rule, not a decorative glyph: this text is a standing promise,
   not a customer testimonial, so quotation marks were the wrong metaphor. */
.statement__eyebrow { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-mono);
  font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-300);
  margin-bottom: 1.1rem; }
.statement__eyebrow .bar { width: 34px; height: 1.5px; background: linear-gradient(90deg, var(--electron), transparent); }
.statement blockquote, .statement p.big {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(1.35rem, 3.1vw, 2.15rem); line-height: 1.32; max-width: 24ch; color: #fff;
  padding-left: 1.2rem; border-left: 2px solid var(--electron);
}
.statement .wide { max-width: 46ch; }
.statement__foot { display: flex; align-items: center; gap: 1rem; margin-top: 1.8rem; flex-wrap: wrap; }
.statement__foot .nm { font-weight: 600; color: #fff; }
.statement__foot .rl { font-size: .86rem; color: var(--on-dark-soft); }

/* ----------------------------------------------------------------------------
   30c. Article typography extras — pull-quotes, takeaways, figures, progress
   -------------------------------------------------------------------------- */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: calc(var(--z-nav) + 2);
  background: linear-gradient(90deg, var(--accent), var(--blue-400), var(--electron));
  box-shadow: 0 0 12px rgba(56,189,248,.55); transition: width .1s linear;
}

.article-body blockquote {
  margin: 2rem 0; padding: 1.4rem 0 1.4rem 1.6rem;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.015em;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.4; color: var(--ink-900);
}
.article-body blockquote cite { display: block; margin-top: .7rem; font-family: var(--font-body); font-size: .88rem; font-weight: 500; font-style: normal; color: var(--ink-400); }

.article-figure { margin: 2.2rem 0; }
.article-figure img { width: 100%; border-radius: var(--r-lg); display: block; box-shadow: var(--sh-md); }
.article-figure figcaption { margin-top: .7rem; font-size: .85rem; color: var(--ink-400); font-family: var(--font-mono); letter-spacing: .02em; }

.takeaways {
  margin: 2rem 0; padding: 1.5rem 1.7rem; border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(37,99,235,.06), rgba(56,189,248,.04));
  border: 1px solid rgba(37,99,235,.16);
}
.takeaways h4 { display: flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: .9rem; }
.takeaways h4 svg { width: 16px; height: 16px; }
.takeaways ul { list-style: none; margin: 0; padding: 0; }
.takeaways li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; font-size: .96rem; color: var(--ink-700); }
.takeaways li:last-child { margin-bottom: 0; }
.takeaways li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }

/* ----------------------------------------------------------------------------
   30d. Application strip — turns a list of uses into a scannable visual row
   -------------------------------------------------------------------------- */
.app-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 860px) { .app-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .app-strip { grid-template-columns: 1fr; } }
.app-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: 132px;
  display: flex; align-items: flex-end; padding: 1.1rem 1.2rem; color: #fff;
  background: linear-gradient(140deg, var(--navy-800), var(--navy-950));
  border: 1px solid rgba(255,255,255,.08);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease);
}
.app-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.app-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; transition: transform var(--t-slow) var(--ease), opacity var(--t-base); }
.app-card:hover img { transform: scale(1.08); opacity: .5; }
.app-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,10,20,.92), rgba(10,17,36,.28) 70%, transparent); }
.app-card__label { position: relative; z-index: 2; font-weight: 600; font-size: .98rem; letter-spacing: -.01em; line-height: 1.25; }
.app-card__ic { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; backdrop-filter: blur(6px); }
.app-card__ic svg { width: 17px; height: 17px; color: var(--blue-300); }

/* ----------------------------------------------------------------------------
   30e. Timeline upgrade — a drawn line + visual year badges
   -------------------------------------------------------------------------- */
.timeline--rich { position: relative; }
.timeline--rich .tl-line-fill {
  position: absolute; left: 9px; top: 8px; width: 2px; background: linear-gradient(var(--accent), var(--blue-400));
  height: 0; z-index: 1; border-radius: 2px;
}
/* The line draws itself once the timeline scrolls into view (uses the existing
   [data-reveal].is-visible hook — no extra library needed). */
.timeline--rich.is-visible .tl-line-fill { animation: tl-draw 1.8s var(--ease-out) forwards; }
@keyframes tl-draw { from { height: 0; } to { height: calc(100% - 16px); } }
@media (prefers-reduced-motion: reduce) {
  .timeline--rich.is-visible .tl-line-fill { animation: none; height: calc(100% - 16px); }
}
.timeline--rich .tl-item { display: grid; grid-template-columns: 1fr; gap: .2rem; }
.timeline--rich .tl-dot { z-index: 2; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease); }
.timeline--rich .tl-item:hover .tl-dot { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(37,99,235,.16); }
.timeline--rich .tl-year { display: inline-flex; align-items: center; gap: .45rem; }
.timeline--rich .tl-year::before { content: ""; width: 16px; height: 1.5px; background: var(--accent); opacity: .6; }
.tl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.3rem; margin-top: .5rem;
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease-out), border-color var(--t-base); }
.tl-item:hover .tl-card { box-shadow: var(--sh-md); transform: translateX(4px); border-color: rgba(37,99,235,.22); }
@media (prefers-reduced-motion: reduce) {
  .tl-item:hover .tl-card, .app-card:hover { transform: none; }
  .timeline--rich .tl-item:hover .tl-dot { transform: none; }
}

/* ----------------------------------------------------------------------------
   30f. Split media polish — used on about/category text-heavy sections
   -------------------------------------------------------------------------- */
.media-frame { transition: box-shadow var(--t-base) var(--ease); }
.media-frame:hover { box-shadow: 0 40px 80px -24px rgba(13,26,64,.42), 0 16px 34px -18px rgba(13,26,64,.24); }
.mv-card { position: relative; overflow: hidden; }
.mv-card__glow { position: absolute; width: 240px; height: 240px; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; }

/* ============================================================================
   31. HOMEPAGE VISUAL DENSITY
   ========================================================================== */

/* --- Category tiles ------------------------------------------------------
   All eight categories as photo tiles, one glance, no carousel machinery.
   Photography does the talking; the label sits quietly underneath it.
   -------------------------------------------------------------------------- */
.cat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.7rem, 1.4vw, 1.1rem); }
@media (max-width: 1024px) { .cat-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .cat-tiles { grid-template-columns: repeat(2, 1fr); } }

.cat-tile { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4/5; background: var(--navy-900); isolation: isolate;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease); }
.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter var(--t-base) var(--ease); }
.cat-tile::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6,10,20,.94) 4%, rgba(10,17,36,.55) 42%, rgba(10,17,36,.12) 100%); }
.cat-tile__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.05rem 1.05rem 1.15rem; }
.cat-tile__n { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em;
  color: var(--electron); margin-bottom: .35rem; }
.cat-tile__t { display: block; color: #fff; font-family: var(--font-display); font-weight: 600;
  font-size: 1.02rem; line-height: 1.2; letter-spacing: -.015em; }
.cat-tile__c { display: block; margin-top: .3rem; font-size: .76rem; color: var(--on-dark-soft); }
/* The rule slides out on hover — a small, quiet reward rather than a big effect. */
.cat-tile__rule { position: absolute; left: 1.05rem; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--blue-400), var(--electron)); z-index: 3;
  transition: width var(--t-slow) var(--ease); }
.cat-tile:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.cat-tile:hover img { transform: scale(1.07); }
.cat-tile:hover .cat-tile__rule { width: calc(100% - 2.1rem); }
.cat-tile:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .cat-tile:hover { transform: none; }
  .cat-tile:hover img { transform: none; }
}

/* --- Why Alba: photography instead of a bare panel of icon cards ---------- */
.why-alba { position: relative; overflow: hidden; background: var(--navy-950); isolation: isolate;
  border-radius: var(--r-2xl); padding: clamp(2rem, 4.5vw, 3.5rem); }
.why-alba__bg { position: absolute; inset: 0; z-index: 0; }
.why-alba__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .30; }
.why-alba__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,10,20,.95) 0%, rgba(10,17,36,.88) 46%, rgba(10,17,36,.62) 100%); }
.why-alba .eyebrow { color: var(--blue-300); }
.why-alba .eyebrow::before { background: linear-gradient(90deg, var(--blue-400), transparent); }
.why-alba h2 { color: #fff; }
.why-alba .lead { color: var(--on-dark-soft); }
.why-alba .list-check li { color: var(--on-dark-soft); }
.why-alba .list-check li svg { color: var(--blue-400); }
.why-alba .card.feature { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(8px); }
.why-alba .card.feature h4 { color: #fff; }
.why-alba .card.feature p { color: var(--on-dark-soft); }
.why-alba .card.feature:hover { background: rgba(255,255,255,.09); border-color: rgba(125,170,255,.30); }
.why-alba .feature__icon { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.26); }
.why-alba .feature__icon svg { color: var(--blue-300); }
.why-alba .btn--dark { background: #fff; color: var(--navy-900); }
.why-alba .btn--dark:hover { background: var(--blue-400); color: var(--navy-950); }