/* ══════════════════════════════════════════
   ALICIA REVIEWS IT — Architectural Edition
   Deep space · Glass · Editorial · 3D depth
   ══════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────── */
:root {
  /* Type scale — pushed large, Big Shoulders Display unlocks extreme weight at scale */
  --text-xs:   clamp(0.7rem,   0.65rem + 0.2vw,  0.8rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.3vw,   1rem);
  --text-base: clamp(1rem,     0.95rem + 0.3vw,  1.15rem);
  --text-lg:   clamp(1.2rem,   1rem + 0.7vw,     1.6rem);
  --text-xl:   clamp(1.6rem,   1.2rem + 1.4vw,   2.5rem);
  --text-2xl:  clamp(2.4rem,   1.2rem + 3.5vw,   5.5rem);
  --text-3xl:  clamp(4rem,     1.5rem + 7vw,     9rem);
  --text-hero: clamp(5.5rem,   2rem + 11vw,      17rem);  /* Big Shoulders 900 — maximum */

  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px;

  /* 2026 motion system — Margiela-verified curves */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);   /* expo ease-out — all major transitions */
  --ease-micro: cubic-bezier(0.4, 0, 0.2, 1);    /* ACW utility — hover/focus */
  --t:          160ms;                             /* micro: color, border, opacity */
  --t-enter:    680ms;                             /* scroll reveal — luxury paced */
  --t-slide:    440ms;                             /* cards, panels */

  /* 2026 Google Font Stack — Big Bold Edition */
  --font-hero:    'Big Shoulders Display', 'Bebas Neue', sans-serif;  /* weight 900 — mega display */
  --font-display: 'Bebas Neue', 'Big Shoulders Display', sans-serif;  /* section stamps */
  --font-sub:     'Syne', sans-serif;                                 /* weight 700-800 subheads */
  --font-body:    'Space Grotesk', 'Inter', sans-serif;               /* weight 400-500 */
  --font-mono:    'JetBrains Mono', monospace;                        /* labels, metadata */
  --font-serif:   'Syne', sans-serif;                                 /* repurposed to Syne */

  --content: 1200px;
}

/* ── LIGHT ICE THEME (default) ────────── */
:root, [data-theme='light'], [data-theme='dark'] {
  --bg:         #f0f4f5;   /* ice white with a whisper of teal */
  --bg-2:       #e8eef0;   /* slightly cooler card bg */
  --bg-3:       #dce6e9;   /* deepest surface layer */

  --glass:      rgba(255,255,255,0.55);
  --glass-2:    rgba(255,255,255,0.72);
  --glass-bdr:  rgba(13,228,204,0.2);
  --glass-blur: blur(28px) saturate(180%);

  /* Light ice — dark charcoal text on ice bg */
  --bdr:        rgba(0,50,60,0.08);
  --bdr-2:      rgba(0,50,60,0.14);

  --text:       #0e1c20;   /* near-black with cool tint */
  --text-muted: #3a6070;   /* medium slate-teal */
  --text-faint: #7aa0ac;   /* light muted teal-grey */

  --teal:       #00bfa5;   /* deeper teal — readable on light */
  --teal-dim:   rgba(0,191,165,0.10);
  --teal-glow:  0 0 40px rgba(0,191,165,0.22);
  --blue:       #0066cc;
  --purple:     #6c35cc;
  --pink:       #e8528a;
  --green:      #00875a;
  --amber:      #c97700;

  --shadow-sm:  0 2px 8px  rgba(0,40,50,0.08);
  --shadow-md:  0 8px 32px rgba(0,40,50,0.12);
  --shadow-lg:  0 20px 64px rgba(0,40,50,0.18);
  --shadow-teal: 0 8px 32px rgba(0,191,165,0.14), 0 2px 8px rgba(0,40,50,0.1);
}
/* prefers-color-scheme override removed — ice is always on */

/* ── BASE RESET ──────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth; scroll-padding-top: 76px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body {
  min-height: 100dvh; font-family: var(--font-body);
  font-size: var(--text-base); color: var(--text);
  background: var(--bg); overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
h1,h2,h3,h4 { text-wrap: balance; line-height: 1.1; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(13,228,204,0.2); color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── GRADIENT TEXT ───────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--teal) 0%, var(--blue) 50%, var(--purple) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── NAV ─────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: var(--sp-4) var(--sp-6);
  background: rgba(6,9,15,0.75);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom: 1px solid var(--bdr);
  transition: padding var(--t) var(--ease), border-color var(--t);
}
[data-theme='light'] .nav { background: rgba(242,246,255,0.82); }

.nav-inner {
  max-width: var(--content); margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-6);
}

.nav-logo {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-shrink: 0;
}

.nav-wordmark {
  font-family: var(--font-hero);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--text);
  text-transform: uppercase;
}
.nav-wordmark em { font-style: normal; color: var(--teal); }

.nav-links {
  display: flex; gap: var(--sp-8); margin-left: var(--sp-6);
}
.nav-links a {
  font-family: var(--font-sub);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--t) var(--ease-micro);
}
.nav-links a:hover { color: var(--teal); }

.nav-end { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }

/* Concrete-stamp CTA — no gradient, no pill */
.nav-cta {
  font-family: var(--font-sub);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-5);
  border-radius: 0;
  background: #d4d0c8;
  color: #111110;
  border: none;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  transition: color var(--t) linear;
}
.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms var(--ease);
  z-index: 0;
}
.nav-cta:hover::after { transform: scaleX(1); }
.nav-cta:hover { color: #111110; transform: none; }
.nav-cta > * { position: relative; z-index: 1; }

.nav-theme {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); border: 1px solid var(--bdr-2);
  transition: all var(--t);
}
.nav-theme:hover { color: var(--teal); border-color: var(--teal); background: var(--teal-dim); }

/* ── HERO ─────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 76px; overflow: hidden;
}

#hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

.hero-content {
  position: relative; z-index: 3;
  max-width: var(--content); margin: 0 auto;
  padding: var(--sp-20) var(--sp-6) var(--sp-16);
  display: grid; grid-template-columns: 1fr 420px; gap: var(--sp-16); align-items: center;
  width: 100%;
}

/* Eyebrow */
.hero-eyebrow {
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--teal); letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: var(--sp-6);
}
.eyebrow-line {
  display: inline-block; width: 40px; height: 1px;
  background: linear-gradient(to right, var(--teal), transparent);
  flex-shrink: 0;
}

/* ══ HERO TITLE — Big Shoulders Display 900 ══ */
.hero-title {
  font-family: var(--font-hero);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ht-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(13,228,204,0.55);
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.ht-kicker::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: rgba(13,228,204,0.5);
  flex-shrink: 0;
}
.ht-big {
  font-family: var(--font-hero);
  font-weight: 900;
  font-size: var(--text-hero);
  line-height: 0.83;
  letter-spacing: -0.03em;
  color: #0e1c20;                /* dark on ice */
  display: block;
  text-shadow:
    2px 2px 0 rgba(0,40,50,0.12),
    0 0 80px rgba(0,191,165,0.05);
}
.ht-accent {
  font-family: var(--font-hero);
  font-weight: 900;
  font-size: var(--text-3xl);
  line-height: 0.95;
  letter-spacing: 0.06em;
  display: block;
  -webkit-text-stroke: 1px rgba(0,191,165,0.7);
  color: transparent;
  margin-top: var(--sp-3);
}

.hero-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: rgba(212,208,200,0.5);
  line-height: 1.65;
  max-width: 46ch;
  margin-bottom: var(--sp-10);
}

.hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-10); }

/* ══ CTA BUTTONS — concrete stamp, no gradient, no pill ══ */
.btn-arch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-sub);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: var(--sp-4) var(--sp-10);
  background: #d4d0c8;
  color: #111110;
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  transition: color var(--t) linear;
  cursor: pointer;
}
.btn-arch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--ease);
  z-index: 0;
}
.btn-arch:hover::after { transform: scaleX(1); }
.btn-arch:hover { color: #111110; transform: none; box-shadow: none; }
.btn-arch > * { position: relative; z-index: 1; }

.btn-ghost-arch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(212,208,200,0.4);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(212,208,200,0.15);
  padding: 0 0 3px 0;
  border-radius: 0;
  transition: color var(--t) linear, border-color var(--t) linear;
}
.btn-ghost-arch:hover {
  color: #d4d0c8;
  border-bottom-color: var(--teal);
}
/* duplicate removed */

/* Social lines */
.hero-socials { display: flex; flex-direction: column; gap: var(--sp-2); }
.social-line {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--text-xs); font-family: var(--font-mono);
  color: var(--text-faint); letter-spacing: 0.06em;
  transition: color var(--t);
}
.social-line:hover { color: var(--text-muted); }
.social-line.teal { color: rgba(13,228,204,0.5); }
.social-line.teal:hover { color: var(--teal); }
.social-line.pink { color: rgba(244,114,182,0.5); }
.social-line.pink:hover { color: var(--pink); }
.sl-icon {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  padding: 2px 6px; border-radius: 3px;
  background: var(--glass); border: 1px solid var(--bdr);
}

/* Profile architectural card */
.profile-arch {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bdr);
  border-radius: var(--radius-2xl);
  padding: var(--sp-10) var(--sp-8);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: pa-float 7s var(--ease) infinite;
  will-change: transform;
  position: relative;
  overflow: hidden;
}

/* Architectural grid overlay on card */
.profile-arch::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(13,228,204,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,228,204,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* Glowing top edge */
.profile-arch::after {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(to right, transparent, var(--teal), var(--blue), transparent);
  opacity: 0.6;
}

@keyframes pa-float {
  0%,100% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }
  25%     { transform: translateY(-10px) rotateX(1.5deg) rotateY(0.5deg); }
  75%     { transform: translateY(-5px) rotateX(-1deg) rotateY(-0.5deg); }
}

.pa-ring {
  width: 96px; height: 96px; border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, var(--teal), var(--blue), var(--purple));
  position: relative; z-index: 1;
}
.pa-avatar {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.pa-name {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; letter-spacing: 0.02em; color: var(--text);
  position: relative; z-index: 1;
}
.pa-role {
  font-size: var(--text-xs); font-family: var(--font-mono);
  color: var(--teal); letter-spacing: 0.1em; text-align: center;
  position: relative; z-index: 1;
}
.pa-divider {
  width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, var(--glass-bdr), transparent);
  position: relative; z-index: 1;
}

.pa-stats { display: flex; gap: var(--sp-6); position: relative; z-index: 1; }
.pa-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ps-num {
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: 700; color: var(--text); letter-spacing: -0.01em;
}
.ps-label { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 0.06em; }

.pa-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: 600; color: var(--teal);
  background: var(--teal-dim); border: 1px solid rgba(13,228,204,0.22);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full);
  position: relative; z-index: 1; letter-spacing: 0.02em;
}

/* Scroll cue */
.hero-scroll-cue {
  position: absolute; bottom: var(--sp-8); left: 50%;
  transform: translateX(-50%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  color: var(--text-faint); font-size: var(--text-xs);
  font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.hsc-line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--teal), transparent);
  animation: hsc-pulse 2.2s var(--ease) infinite;
}
@keyframes hsc-pulse {
  0%,100% { transform: scaleY(1); opacity: 0.5; }
  50%     { transform: scaleY(1.15); opacity: 1; }
}

/* ── LANES ───────────────────────────────── */
.lane { padding: clamp(var(--sp-12), 8vw, var(--sp-24)) var(--sp-6); background: var(--bg); }
.lane-offset { background: var(--bg-2); }

.lane-inner { max-width: var(--content); margin: 0 auto; }

/* Lane header */
.lane-head {
  display: flex; align-items: center; gap: var(--sp-5);
  padding-bottom: var(--sp-8); margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--bdr);
  position: relative;
}
/* Teal accent line under header */
.lane-head::after {
  content: ''; position: absolute; bottom: -1px; left: 0; width: 60px; height: 1px;
  background: linear-gradient(to right, var(--teal), transparent);
}

.lh-index {
  font-family: var(--font-hero);
  font-weight: 900;
  font-size: clamp(5rem, 10vw, 12rem);
  color: transparent;
  line-height: 1;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  user-select: none;
  -webkit-text-stroke: 1px rgba(0,50,60,0.07);
}

.lh-title {
  font-family: var(--font-hero);
  font-weight: 900;
  font-size: clamp(3.2rem, 5.5vw, 7.5rem);
  color: #0e1c20;
  letter-spacing: -0.02em;
  line-height: 0.88;
  text-transform: uppercase;
}
.lh-sub {
  font-family: var(--font-sub);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-muted);
  margin-top: var(--sp-3);
  letter-spacing: 0.05em;
}

.lh-all {
  margin-left: auto; font-size: var(--text-sm); font-weight: 600;
  color: var(--text-muted); letter-spacing: 0.02em;
  transition: color var(--t); white-space: nowrap;
}
.lh-all:hover { color: var(--text); }
.lh-all-teal { color: var(--teal); }
.lh-all-teal:hover { color: #5ef5e5; }

/* ── PRODUCT GRID ────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

/* ── PRODUCT CARD ────────────────────────── */
.p-card {
  display: flex; flex-direction: column;
  background: var(--glass); border: 1px solid var(--glass-bdr);
  border-radius: var(--radius-xl);
  overflow: hidden;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
}

.p-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
}

.p-card:hover {
  transform: translateY(-10px) perspective(600px) rotateX(2deg);
  box-shadow: var(--shadow-teal);
  border-color: rgba(13,228,204,0.28);
}

.p-card-featured {
  border-color: rgba(13,228,204,0.22);
  background: var(--glass-2);
}

.p-card-tech { border-color: rgba(13,228,204,0.18); }
.p-card-tech:hover {
  border-color: rgba(13,228,204,0.4);
  box-shadow: 0 12px 48px rgba(13,228,204,0.22), 0 4px 16px rgba(0,0,0,0.5);
}

/* Card visual */
.pc-visual {
  height: 220px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.pc-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 560ms var(--ease);
}
.p-card:hover .pc-visual img {
  transform: scale(1.04);
}
/* Subtle gradient scrim over image for text legibility */
.pc-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(236,244,246,0.65) 100%);
  pointer-events: none;
}
.beauty-v { background: #f0e8ec; }
.home-v   { background: #e8f0ee; }
.tech-v   { background: #0e1c28; }  /* keep tech dark for contrast */
.pc-icon-wrap { display: none; }  /* hidden — images replace icons */

.pc-badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  font-size: 0.62rem; font-weight: 700; font-family: var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-muted); z-index: 2;
}
.pc-badge-feat { background: linear-gradient(135deg, var(--teal), var(--blue)); color: #06090f; border: none; }
.pc-badge-ops  { background: linear-gradient(135deg, rgba(13,228,204,0.2), rgba(10,124,248,0.2)); color: var(--teal); border-color: rgba(13,228,204,0.3); }

/* Card body */
.pc-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }

.pc-cat {
  font-size: var(--text-xs); font-family: var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
}
.pc-title {
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: 600; color: var(--text); line-height: 1.2;
}
.pc-quote {
  font-size: var(--text-xs); color: var(--text-muted);
  font-style: italic; font-family: var(--font-serif);
  line-height: 1.55; flex: 1;
}
.pc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); }
.pc-stars { color: var(--amber); font-size: 0.72rem; letter-spacing: 0.04em; }

.pc-btn {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full);
  background: var(--glass); border: 1px solid var(--bdr-2); color: var(--text-muted);
  transition: all var(--t);
}
.pc-btn:hover { color: var(--text); border-color: var(--teal); background: var(--teal-dim); }
.pc-btn-teal { color: var(--teal); border-color: rgba(13,228,204,0.25); }
.pc-btn-teal:hover { background: var(--teal-dim); border-color: var(--teal); color: #5ef5e5; }
.pc-btn-cyber { color: var(--teal); border-color: rgba(13,228,204,0.25); }
.pc-btn-cyber:hover { background: var(--teal-dim); border-color: var(--teal); box-shadow: var(--teal-glow); }

/* ── BLOG / JOURNAL ──────────────────────── */
.blog-section {
  padding: clamp(var(--sp-12), 8vw, var(--sp-24)) var(--sp-6);
  background: var(--bg-3);
  position: relative; overflow: hidden;
}

/* Architectural accent */
.blog-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(13,228,204,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,228,204,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

.blog-inner { max-width: var(--content); margin: 0 auto; position: relative; z-index: 1; }

.blog-head { margin-bottom: var(--sp-12); }
.blog-eyebrow {
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--teal); letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.blog-title {
  font-family: var(--font-hero);
  font-weight: 900;
  font-size: clamp(2.8rem, 5vw, 6.5rem);
  color: #0e1c20;
  letter-spacing: -0.025em;
  line-height: 0.88;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.blog-sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-muted);
  max-width: 52ch;
}

/* Blog grid — asymmetric architectural layout */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: var(--sp-5);
}

.blog-card-feature {
  grid-column: 1 / 3;
}

.blog-card {
  background: var(--glass); border: 1px solid var(--glass-bdr);
  border-radius: var(--radius-xl);
  overflow: hidden;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: flex; flex-direction: column;
  transition: transform 0.38s var(--ease), box-shadow 0.38s var(--ease), border-color 0.25s;
  position: relative;
}

.blog-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.07), transparent);
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md), var(--shadow-teal);
  border-color: rgba(13,228,204,0.25);
}

/* Blog card visuals — each unique */
.bc-visual {
  height: 160px; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: var(--sp-4);
}

.blog-card-feature .bc-visual { height: 220px; }

.blog-v1 { background: linear-gradient(135deg, rgba(244,114,182,0.15) 0%, rgba(168,85,247,0.15) 50%, rgba(8,9,15,0.8) 100%); }
.blog-v2 { background: linear-gradient(135deg, rgba(13,228,204,0.12) 0%, rgba(10,124,248,0.15) 100%); }
.blog-v3 { background: linear-gradient(135deg, rgba(236,72,153,0.12) 0%, rgba(249,115,22,0.12) 100%); }
.blog-v4 { background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(6,182,212,0.12) 100%); }
.blog-v5 { background: linear-gradient(135deg, rgba(10,124,248,0.12) 0%, rgba(139,62,255,0.12) 100%); }

/* Architectural grid inside visual */
.bc-visual::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Diagonal accent line */
.bc-visual::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(135deg, transparent 70%, rgba(13,228,204,0.06) 100%);
  pointer-events: none;
}

.bc-cat-badge {
  position: relative; z-index: 2;
  font-size: 0.62rem; font-weight: 700; font-family: var(--font-mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-muted);
}
.bc-cat-teal  { background: rgba(13,228,204,0.12);  border-color: rgba(13,228,204,0.28);  color: var(--teal); }
.bc-cat-pink  { background: rgba(244,114,182,0.12); border-color: rgba(244,114,182,0.28); color: var(--pink); }
.bc-cat-green { background: rgba(16,185,129,0.12);  border-color: rgba(16,185,129,0.28);  color: var(--green); }

.bc-body { padding: var(--sp-6) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }

.bc-meta { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--text-faint); letter-spacing: 0.06em; }

.bc-title {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 600; color: var(--text); line-height: 1.2;
}
.blog-card-feature .bc-title { font-size: var(--text-xl); }

.bc-excerpt { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.65; flex: 1; }

.bc-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bc-tags span {
  font-size: 0.68rem; font-family: var(--font-mono);
  padding: 2px 8px; border-radius: var(--radius-sm);
  background: var(--glass); border: 1px solid var(--bdr);
  color: var(--text-faint); letter-spacing: 0.04em;
}

.bc-read {
  font-size: var(--text-sm); font-weight: 700;
  color: var(--text-muted); letter-spacing: 0.04em;
  transition: color var(--t), letter-spacing var(--t);
}
.bc-read:hover { color: var(--text); letter-spacing: 0.1em; }
.bc-read-teal  { color: var(--teal); }
.bc-read-teal:hover  { color: #5ef5e5; }
.bc-read-pink  { color: var(--pink); }
.bc-read-green { color: var(--green); }

/* ── ABOUT ───────────────────────────────── */
.about-section {
  padding: clamp(var(--sp-12), 8vw, var(--sp-20)) var(--sp-6);
  background: var(--bg);
  background-image: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(13,228,204,0.04) 0%, transparent 70%);
}

.about-inner { max-width: 880px; margin: 0 auto; }

.about-glass {
  background: var(--glass); border: 1px solid var(--glass-bdr);
  border-radius: var(--radius-2xl);
  padding: var(--sp-12) var(--sp-12);
  display: flex; gap: var(--sp-10); align-items: flex-start;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}

.about-glass::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--teal), transparent);
  opacity: 0.35;
}

.about-glass::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(13,228,204,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,228,204,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}

.ag-left { flex-shrink: 0; position: relative; z-index: 1; }
.ag-avatar {
  width: 72px; height: 72px; border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, var(--teal), var(--blue), var(--purple));
}

.ag-right { position: relative; z-index: 1; }
.ag-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--teal); letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.ag-title {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 700; color: var(--text); margin-bottom: var(--sp-4);
}
.ag-body { font-size: var(--text-base); color: var(--text-muted); line-height: 1.7; max-width: 52ch; }
.ag-body strong { color: var(--teal); font-weight: 600; }
.ag-links {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6);
}
.ag-links a {
  font-size: var(--text-xs); font-family: var(--font-mono);
  color: var(--text-faint); letter-spacing: 0.08em;
  transition: color var(--t);
}
.ag-links a:hover { color: var(--teal); }

/* ── FOOTER ──────────────────────────────── */
.footer {
  padding: var(--sp-12) var(--sp-6);
  background: var(--bg-2); border-top: 1px solid var(--bdr);
}

.footer-inner { max-width: var(--content); margin: 0 auto; }

.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--sp-6); margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--bdr);
}

.ft-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display); font-size: 0.8rem;
  font-weight: 700; letter-spacing: 0.1em;
}
.ft-brand em { font-style: normal; color: var(--teal); }

.footer-nav { display: flex; gap: var(--sp-6); }
.footer-nav a {
  font-size: var(--text-xs); color: var(--text-muted);
  font-family: var(--font-mono); letter-spacing: 0.06em;
  transition: color var(--t);
}
.footer-nav a:hover { color: var(--teal); }

.footer-bottom { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-disclaimer { font-size: var(--text-xs); color: var(--text-faint); max-width: 60ch; }
.footer-copy { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--text-faint); letter-spacing: 0.06em; }

/* ── REVEAL ANIMATIONS ───────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity   var(--t-enter) var(--ease),
    transform var(--t-enter) var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr 340px; gap: var(--sp-10); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-card-feature { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .hero-content { grid-template-columns: 1fr; padding: var(--sp-10) var(--sp-5); }
  .profile-arch { order: -1; }
  .hero-desc { margin-inline: 0; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .nav-links { display: none; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card-feature { grid-column: auto; }
  .about-glass { flex-direction: column; align-items: center; text-align: center; padding: var(--sp-8); }
  .ag-links { justify-content: center; }
  .footer-top { flex-direction: column; gap: var(--sp-5); text-align: center; }
  .footer-nav { flex-wrap: wrap; justify-content: center; }
  .lane-head { flex-wrap: wrap; }
  .lh-all { margin-left: 0; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .hero-title { font-size: clamp(2rem, 10vw, 3rem); }
}

/* ════ SKELETON LOADERS (feed.js) ════ */
@keyframes skel-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.feed-skeleton { pointer-events: none; }
.skel-visual {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 400px 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel-line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.05) 75%
  );
  background-size: 400px 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel-short  { width: 40%; }
.skel-long   { width: 85%; }
.skel-med    { width: 60%; }

/* ════ LIVE FEED CARDS ════ */
.feed-card { position: relative; }
.feed-badge-live {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  background: linear-gradient(135deg, #0de4cc, #0a7cf8);
  color: #06090f;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  z-index: 2;
}
.pc-img-wrap {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  margin-bottom: var(--sp-3);
}
.pc-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--sp-3);
  transition: transform 0.4s ease;
}
.p-card:hover .pc-img-wrap img { transform: scale(1.05); }
.feed-price {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: #0de4cc;
  letter-spacing: -0.02em;
}
.feed-savings {
  font-size: 0.72rem;
  color: #10b981;
  margin-left: var(--sp-2);
}
.feed-prime {
  display: inline-block;
  font-size: 0.6rem;
  font-family: var(--font-mono);
  color: #0a7cf8;
  border: 1px solid rgba(10,124,248,0.4);
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: var(--sp-2);
}
.feed-error-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  color: rgba(255,255,255,0.35);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

/* ════ FEED STATUS TICKER ════ */
#feed-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 24px;
  background: rgba(13, 228, 204, 0.06);
  border-bottom: 1px solid rgba(13, 228, 204, 0.12);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  transition: opacity 0.4s;
}
#feed-ticker.ft-hidden { opacity: 0; pointer-events: none; height: 0; padding: 0; overflow: hidden; }
.ft-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #666;
  flex-shrink: 0;
  transition: background 0.3s;
}
.ft-dot.live  { background: #0de4cc; box-shadow: 0 0 8px #0de4cc; animation: pulse-dot 2s infinite; }
.ft-dot.error { background: #f87171; }
.ft-dot.placeholder { background: #a78bfa; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ════ ICE PAPER OVERLAY ════ */
/* Very subtle noise grain — gives ice bg depth, stops it reading flat */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
body > * { position: relative; z-index: 1; }

/* ════ INDUSTRIAL TYPE POLISH ════ */
/* Nav wordmark — Big Shoulders 900 override */
.nav-wordmark {
  font-family: var(--font-hero) !important;
  font-weight: 900 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Hero eyebrow — wide tracking condensed */
.hero-eyebrow {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  letter-spacing: 0.22em !important;
  font-size: var(--text-xs) !important;
}

/* Hero description */
.hero-desc {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
  font-size: var(--text-base) !important;
  color: rgba(200,196,188,0.55) !important;
}

/* Lane head — align giant index number with title */
.lane-head {
  align-items: flex-end !important;
  gap: var(--sp-6) !important;
}

/* Blog section heading */
.blog-head h2,
.blog-head .bh-title {
  font-family: var(--font-hero) !important;
  font-size: clamp(2.5rem, 5vw, 6rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: #c8c4bc !important;
  -webkit-text-stroke: 0px !important;
}

/* About section heading */
.about-glass h2 {
  font-family: var(--font-hero) !important;
  font-weight: 900 !important;
  font-size: clamp(2.8rem, 4.5vw, 6rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 0.88 !important;
  text-transform: uppercase !important;
  color: #0e1c20 !important;
}

/* Product card heading */
.pc-name {
  font-family: var(--font-hero) !important;
  font-weight: 900 !important;
  font-size: clamp(1.1rem, 1.5vw, 1.5rem) !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* Concrete hairline section dividers */
.lane + .lane {
  border-top: 1px solid rgba(200,196,188,0.06);
}

/* Large teal vertical rule — left side of every lane */
.lane-inner {
  position: relative;
}
.lane-inner::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(13,228,204,0.3) 30%, rgba(13,228,204,0.3) 70%, transparent);
  pointer-events: none;
}