/* Base typography & resets */
:root {
  --font-heading: 'HelveticaNowDisplay-Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'HelveticaNowDisplayW01-Rg', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
* {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}
body { background: #000; color: white; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; font-weight: inherit; }

/* ---------- Light "Hero-matched" UI ----------
   Cream card surfaces + flat invert pills, to echo the Hero's editorial feel. */
.card-light {
  background: linear-gradient(180deg, #f4f1ea 0%, #ece8df 100%);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 18px 40px rgba(60,52,40,0.10),
    0 40px 80px rgba(60,52,40,0.08);
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: #ffffff;
  color: #0a0a0a;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 9999px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.pill:hover { background: #0a0a0a; color: #ffffff; border-color: #0a0a0a; }
.pill-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: transparent;
  color: #0a0a0a;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 9999px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.pill-ghost:hover { background: #0a0a0a; color: #ffffff; border-color: #0a0a0a; }
/* Light chip (tech tags) */
.chip-light {
  display: inline-flex;
  align-items: center;
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.7);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 9999px;
}

/* Polished-pearl CTA — used on primary white buttons so they feel like a
   material object rather than a flat white block sitting on stone. */
.cta-pearl {
  background:
    linear-gradient(180deg, #ffffff 0%, #f3f1ee 55%, #d9d6d2 100%) !important;
  color: #0a0a0e !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1.5px 0 rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(0,0,0,0.04),
    0 8px 22px rgba(0,0,0,0.45),
    0 1px 0 rgba(255,255,255,0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.cta-pearl:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1.5px 0 rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(0,0,0,0.04),
    0 12px 28px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Glass surface used for things sitting on the stone (browser mockup,
   testimonial-style frames). Same DNA as .liquid-glass but warmer for stone. */
.glass-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 50%, rgba(0,0,0,0.18) 100%);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    inset 0 1.2px 0 rgba(255,255,255,0.22),
    inset 0 -16px 36px rgba(0,0,0,0.3),
    0 18px 40px rgba(0,0,0,0.5),
    0 42px 90px rgba(0,0,0,0.55);
  overflow: hidden;
  isolation: isolate;
}
.glass-panel::before {
  /* Refractive edge */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.16) 25%,
    rgba(255,255,255,0.04) 55%,
    rgba(255,255,255,0.02) 75%,
    rgba(255,255,255,0.22) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
}

/* ---------- Stone backdrops ----------
   Three different stones used across the page for visual rhythm:
   - .stone-grey-marble  → lighter, premium feel (How I Work)
   - .stone-concrete     → matte, neutral, anthracite (Works)
   - .stone-black-marble → dark drama (Stack, Contact)
   All inherit common ambient overlays from .ambient. */
.ambient {
  position: relative;
  isolation: isolate;
  background-color: #0d0e12;
  background-size: 420px 420px;
  background-position: center top;
  background-repeat: repeat;
  background-attachment: fixed;
}
.ambient::before {
  /* Common uniform darkening — no top/bottom fade so adjacent sections blend seamlessly */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.32);
  pointer-events: none;
  z-index: 0;
}
.ambient::after {
  /* Soft directional sheen — warm top-left, cool bottom-right */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 10% 12%, rgba(255, 215, 175, 0.06), transparent 70%),
    radial-gradient(ellipse 50% 40% at 92% 92%, rgba(170, 190, 255, 0.05), transparent 70%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
.ambient > * { position: relative; z-index: 1; }

/* Variant 1: grey marble — premium, lighter */
.stone-grey-marble {
  background-image: url("assets/marble-grey.jpg");
  background-color: #14161a;
}
.stone-grey-marble::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.8) 100%);
}

/* Variant 2: anthracite concrete — matte, neutral */
.stone-concrete {
  background-image: url("assets/concrete-anthracite.jpg");
  background-color: #16181b;
  background-size: 520px 520px;
}
.stone-concrete::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.4) 12%, rgba(0,0,0,0.4) 68%, rgba(0,0,0,0.78) 86%, rgba(8,9,12,0.96) 100%);
}

/* Variant 3: black marble — dark drama */
.stone-black-marble {
  background-image: url("assets/marble-black.jpg");
  background-color: #08090c;
}
.stone-black-marble::before {
  background: rgba(0,0,0,0.3);
}
}

/* Big decorative chapter numeral — OFF (kept class as no-op for safety) */
.chapter-numeral { display: none; }

/* Variant 4: light warm marble — bridges the light Hero. Dark cards pop on it. */
.stone-light {
  position: relative;
  isolation: isolate;
  background-image: url("assets/marble-grey.jpg");
  background-color: #d9d5cc;
  background-size: 460px 460px;
  background-position: center top;
  background-repeat: repeat;
}
.stone-light::before {
  /* Strong light wash so the marble reads as warm off-white */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(231,227,219,0.82) 0%, rgba(226,222,213,0.7) 12%, rgba(226,222,213,0.7) 84%, rgba(216,211,201,0.86) 100%);
}
.stone-light::after {
  /* Subtle warm sheen */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 12% 8%, rgba(255,251,243,0.55), transparent 70%),
    radial-gradient(ellipse 55% 45% at 90% 95%, rgba(255,246,232,0.4), transparent 70%);
  mix-blend-mode: screen;
}

/* Page-wide grain — extremely subtle, breaks up gradient banding */
.page-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  mix-blend-mode: overlay;
  opacity: 0.1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hero-fade-up {
  opacity: 0;
  animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 3D Glass Card Section — same soapstone backdrop, with subtle grid + vignette */
.section {
  position: relative;
  min-height: 100vh;
  padding: 4vh 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background-color: #14161a;
  background-image: url("assets/marble-grey.jpg");
  background-size: 480px 480px;
  background-position: center top;
  background-repeat: repeat;
}
.section::before {
  /* Faint architectural grid — etched into the stone */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 145px 145px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.section::after {
  /* Center spotlight + edge vignette so cards pop */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
  z-index: 0;
}

.container { position: relative; z-index: 2; max-width: 1100px; width: 100%; margin: 0 auto; }

.header { margin-bottom: 24px; }
.header h1 { font-size: 38px; line-height: 1.1; letter-spacing: -1px; margin-bottom: 14px; font-weight: 600; }
.header p { font-size: 14px; line-height: 1.45; color: rgba(235,240,255,0.65); margin-bottom: 24px; max-width: 440px; }
.header p:last-child { margin-bottom: 0; }

.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  perspective: 1200px; transform-style: preserve-3d;
}

.card {
  position: relative; height: 300px; border-radius: 42px; padding: 24px;
  overflow: hidden; isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 50%, rgba(0,0,0,0.18) 100%);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.22),
    inset 0 -18px 38px rgba(0,0,0,0.35),
    inset 0 0 28px rgba(255,255,255,0.025),
    0 2px 1px rgba(255,255,255,0.06),
    0 18px 25px rgba(0,0,0,0.32),
    0 42px 85px rgba(0,0,0,0.65);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.card::before {
  /* Subtle refractive edge — bright top, dimmer bottom (no color) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 25%,
    rgba(255,255,255,0.04) 55%,
    rgba(255,255,255,0.02) 75%,
    rgba(255,255,255,0.22) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  z-index: 5; pointer-events: none;
}
.card::after {
  /* Soft floor shadow */
  content: ""; position: absolute; left: -8%; right: -8%; bottom: -32px;
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%);
  filter: blur(18px);
  opacity: 0.9; z-index: 1;
}

.glass {
  position: absolute; inset: 0; border-radius: inherit; z-index: 2;
  background:
    /* Top-left specular highlight — like glass catching light */
    linear-gradient(125deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 22%, transparent 45%),
    /* Faint inner glow at bottom */
    radial-gradient(ellipse 80% 40% at 50% 105%, rgba(255,255,255,0.06), transparent 60%),
    /* Even body wash */
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 45%, rgba(255,255,255,0.025));
  pointer-events: none;
}
.glass::before {
  /* Crisp top edge highlight */
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  opacity: 0.5;
}
.glass::after {
  /* Slight inner darkening to give body */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.05));
}

.depth {
  position: absolute; inset: auto 18px -18px 18px; height: 38px; border-radius: 0 0 42px 42px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.55));
  filter: blur(16px); opacity: 0.6; z-index: 0; pointer-events: none;
}

.card-content { position: relative; z-index: 6; display: flex; flex-direction: column; height: 100%; }

.icon-box {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 32px;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)),
    rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 8px 22px rgba(0,0,0,0.4);
}
.icon-box svg { width: 24px; height: 24px; stroke: rgba(255,255,255,0.95); stroke-width: 1.6; fill: none; }

.card h2 { font-size: 24px; line-height: 1; letter-spacing: -0.8px; margin-bottom: 13px; font-weight: 500; color: rgba(255,255,255,0.96); }
.card p  { font-size: 15px; line-height: 1.4; color: rgba(235,240,255,0.65); max-width: 280px; margin-bottom: 18px; font-weight: 300; }
.card a  { color: white; font-size: 14px; font-weight: 500; text-decoration: none; margin-top: auto; }

.card:hover {
  transform: rotateX(3deg) rotateY(-3deg) translateY(-8px) translateZ(28px);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.26),
    inset 0 -22px 42px rgba(0,0,0,0.4),
    inset 0 0 34px rgba(255,255,255,0.035),
    0 3px 1px rgba(255,255,255,0.08),
    0 28px 35px rgba(0,0,0,0.42),
    0 60px 110px rgba(0,0,0,0.75);
}

/* All three card themes are now the same neutral liquid glass —
   theme classes retained as no-ops so JSX doesn't break. */
.orange, .blue, .green { /* intentionally neutral */ }

.features { margin-top: 24px; display: flex; gap: 34px; color: rgba(235,240,255,0.65); font-size: 14px; }
.feature  { display: flex; align-items: center; gap: 8px; position: relative; }
.feature:not(:last-child)::after {
  content: ""; position: absolute; right: -17px; top: 50%;
  transform: translateY(-50%); height: 12px; width: 1px;
  background: rgba(255,255,255,0.15);
}

@media (max-width: 950px) {
  .section { padding: 80px 24px; }
  .cards { grid-template-columns: 1fr; max-width: 430px; }
  .features { flex-wrap: wrap; }
}