/*!
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║  AURORA — Stylesheet                                            ║
 * ║  Copyright (c) 2026 Ashish Shendure. All rights reserved.      ║
 * ║                                                                 ║
 * ║  Author:   Ashish Shendure                                     ║
 * ║  Website:  https://ashishshendure.com                           ║
 * ║  Contact:  ashish.shendure@hotmail.com                          ║
 * ║  LinkedIn: https://linkedin.com/in/ashishshendure               ║
 * ║                                                                 ║
 * ║  This stylesheet and all visual design tokens, layouts, and     ║
 * ║  animations are the intellectual property of Ashish Shendure.   ║
 * ║  Unauthorized copying, modification, or distribution of this    ║
 * ║  file is strictly prohibited without prior written consent.     ║
 * ╚══════════════════════════════════════════════════════════════════╝
 */

/* ===========================================================
   AURORA — shared stylesheet
   Visual DNA carried from flow-state
   =========================================================== */

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

:root {
  --bg: #0c1019;
  --bg-surface: #131a26;
  --bg-elevated: #1a2233;
  --bg-hover: #212b3d;
  --bg-glass: rgba(19,26,38,0.72);
  --text: #e8ecf2;
  --text-secondary: #a0a8b8;
  --text-tertiary: #6b7488;
  --text-muted: #4d566a;
  --accent-coral: #e85a3c;
  --accent-coral-dim: rgba(232,90,60,0.12);
  --accent-coral-glow: rgba(232,90,60,0.06);
  --accent-teal: #1da775;
  --accent-teal-dim: rgba(29,167,117,0.12);
  --accent-teal-glow: rgba(29,167,117,0.06);
  --accent-amber: #efa027;
  --accent-amber-dim: rgba(239,160,39,0.12);
  --accent-amber-glow: rgba(239,160,39,0.06);
  --accent-blue: #3d8de0;
  --accent-blue-dim: rgba(61,141,224,0.12);
  --accent-blue-glow: rgba(61,141,224,0.06);
  --accent-purple: #8178e0;
  --accent-purple-dim: rgba(129,120,224,0.12);
  --accent-purple-glow: rgba(129,120,224,0.06);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', monospace;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1240px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: rgba(29,167,117,0.3); color: var(--text); }

/* Dot grid + cross-hatch texture */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(73,182,159,0.09) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.015) 1px, transparent 0);
  background-size: 20px 20px, 60px 60px;
  background-position: 0 0, 10px 10px;
  transform: translateZ(0);
}
body::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.018; transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
}

/* Ambient drifting bubbles */
.ambient-bubble { position:fixed; border-radius:50%; pointer-events:none; filter: blur(90px); z-index:0; will-change: transform, opacity; transform: translateZ(0); contain: strict; }
.ambient-bubble.b1 { width:480px;height:480px;background:rgba(73,182,159,0.07);top:8%;left:3%;animation: driftB1 26s ease-in-out infinite, pulseGlow1 8s ease-in-out infinite; }
.ambient-bubble.b2 { width:420px;height:420px;background:rgba(129,120,224,0.07);top:46%;right:4%;animation: driftB2 22s ease-in-out infinite, pulseGlow2 10s ease-in-out infinite; }
.ambient-bubble.b3 { width:300px;height:300px;background:rgba(241,104,34,0.05);top:90%;right:30%;animation: driftB3 30s ease-in-out infinite, pulseGlow3 12s ease-in-out infinite; }
.ambient-bubble.b4 { width:260px;height:260px;background:rgba(232,90,60,0.05);top:165%;left:20%;animation: driftB2 35s ease-in-out infinite reverse; }
.ambient-bubble.b5 { width:360px;height:360px;background:rgba(239,160,39,0.045);top:240%;right:10%;animation: driftB1 40s ease-in-out infinite; }
.ambient-bubble.b6 { width:320px;height:320px;background:rgba(61,141,224,0.06);top:320%;left:5%;animation: driftB3 32s ease-in-out infinite; }
@keyframes driftB1 { 0%{transform:translate(0,0)}33%{transform:translate(80px,-30px)}66%{transform:translate(-40px,20px)}100%{transform:translate(0,0)} }
@keyframes driftB2 { 0%{transform:translate(0,0)}33%{transform:translate(-60px,25px)}66%{transform:translate(50px,-15px)}100%{transform:translate(0,0)} }
@keyframes driftB3 { 0%{transform:translate(0,0)}25%{transform:translate(40px,30px)}50%{transform:translate(-30px,-20px)}75%{transform:translate(55px,-10px)}100%{transform:translate(0,0)} }
@keyframes pulseGlow1 { 0%,100%{opacity:1}50%{opacity:0.6} }
@keyframes pulseGlow2 { 0%,100%{opacity:0.8}50%{opacity:1} }
@keyframes pulseGlow3 { 0%,100%{opacity:1}50%{opacity:0.5} }

/* Cursor spotlight */
.cursor-spot {
  position: fixed; width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(73,182,159,0.05) 0%, rgba(7,70,132,0.02) 40%, transparent 80%);
  pointer-events:none; transform: translate(-50%,-50%) translateZ(0); z-index:1; opacity:0;
  transition: opacity 0.6s ease; mix-blend-mode: screen;
  will-change: transform; contain: layout style;
}

/* ================= PAGE TRANSITIONS ================= */
/* NOTE: Avoid transforming <body> — it would create a containing block
   and break position:fixed on the nav. Opacity-only fade. */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  opacity: 1;
  animation: pageFadeIn 0.18s var(--ease) both;
}
body.page-leaving {
  opacity: 0;
  animation: none;
  transition: opacity 0.09s linear;
}

/* ============ Page transition loader ============ */
.page-veil {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(29,167,117,0.06), transparent 65%),
    rgba(12,16,25,0.55);
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  opacity: 0; transition: opacity 0.12s linear;
  display: flex; align-items: center; justify-content: center;
  will-change: opacity;
  contain: layout paint;
}
.page-veil.is-active { opacity: 1; pointer-events: auto; }

.page-loader {
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.09s linear;
  will-change: opacity;
}
.page-veil.is-active .page-loader { opacity: 1; }

/* Glassmorphic loader — soft tinted halo + frosted monogram */
.page-loader__art {
  position: relative; width: 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
}
/* Slowly rotating tinted rainbow halo (very soft, heavy blur) */
.page-loader__art::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(232,90,60,0.16),
    rgba(239,160,39,0.14),
    rgba(29,167,117,0.18),
    rgba(61,141,224,0.16),
    rgba(129,120,224,0.14),
    rgba(232,90,60,0.16));
  filter: blur(18px);
  opacity: 0.85;
  animation: loaderSpin 2.4s linear infinite;
  will-change: transform;
}
/* Subtle hairline ring */
.page-loader__art::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 18px rgba(29,167,117,0.06);
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }

/* Soft pulsing tint rings — very low alpha, expand outward */
.page-loader__art .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid currentColor;
  will-change: transform, opacity;
}
.page-loader__art .ring--1 { color: rgba(232,90,60,0.30); animation: loaderRing 1.4s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.page-loader__art .ring--2 { color: rgba(239,160,39,0.28); animation: loaderRing 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.22s infinite; }
.page-loader__art .ring--3 { color: rgba(29,167,117,0.32); animation: loaderRing 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.44s infinite; }
@keyframes loaderRing {
  0%   { transform: scale(0.7);  opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Frosted glass monogram chip */
.page-loader__monogram {
  position: relative; z-index: 2;
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.12);
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 1.4px;
  color: rgba(255,255,255,0.92);
  animation: loaderPulse 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform, opacity;
}
@keyframes loaderPulse {
  0%,100% { transform: scale(1);    opacity: 0.92; }
  50%     { transform: scale(1.04); opacity: 1;    }
}

.page-loader__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 3px;
  color: var(--accent-teal); text-transform: uppercase; font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
}
.page-loader__label::before, .page-loader__label::after {
  content: ''; width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(29,167,117,0.55), transparent);
}
.page-loader__phrase {
  font-family: var(--font); font-size: clamp(17px, 1.7vw, 21px); font-weight: 300;
  line-height: 1.45; color: var(--text); letter-spacing: -0.01em;
  min-height: 2.9em;
}
.page-loader__phrase .accent { color: var(--accent-amber); font-style: italic; font-weight: 400; }

/* Traveling dots */
.page-loader__dots { display: inline-flex; gap: 6px; margin-top: 2px; }
.page-loader__dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-teal);
  animation: loaderDot 0.55s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform, opacity;
}
.page-loader__dots span:nth-child(2) { background: var(--accent-amber); animation-delay: 0.07s; }
.page-loader__dots span:nth-child(3) { background: var(--accent-coral); animation-delay: 0.14s; }
@keyframes loaderDot {
  0%,80%,100% { transform: scale(0.55); opacity: 0.4; }
  40%         { transform: scale(1.25); opacity: 1; }
}

/* Bottom progress sliver — transform-based (compositor only, no paint) */
.page-loader__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255,255,255,0.04); overflow: hidden;
}
.page-loader__bar::after {
  content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent-teal), var(--accent-amber), transparent);
  animation: loaderBar 0.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  filter: drop-shadow(0 0 4px rgba(29,167,117,0.6));
  will-change: transform;
  transform: translate3d(-100%, 0, 0);
}
@keyframes loaderBar {
  0%   { transform: translate3d(-100%, 0, 0); }
  100% { transform: translate3d(250%, 0, 0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body, body.page-ready, body.page-leaving {
    transition: none; opacity: 1; transform: none;
  }
  .page-veil { display: none; }
}

/* ================= PROJECT AUTH GATE ================= */
/* Hide project content by default until auth — prevents flash of content */
.project-page { visibility: hidden; }
.project-page.is-authed { visibility: visible; }

.auth-gate {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(12,16,25,0.96);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.4s var(--ease);
}
.auth-gate.is-unlocked { opacity: 0; pointer-events: none; }
.auth-gate__card {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  max-width: 380px; width: 100%; padding: 48px 36px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  text-align: center;
}
.auth-gate__icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-tertiary);
}
.auth-gate__icon svg { width: 22px; height: 22px; }
.auth-gate__title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--text-tertiary); font-weight: 500;
}
.auth-gate__input {
  width: 100%; padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  font-family: var(--mono); font-size: 14px; letter-spacing: 1px;
  color: var(--text); outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  text-align: center;
}
.auth-gate__input::placeholder { color: var(--text-tertiary); letter-spacing: 2px; }
.auth-gate__input:focus {
  border-color: rgba(29,167,117,0.5);
  box-shadow: 0 0 20px rgba(29,167,117,0.15);
}
.auth-gate__input.is-error {
  border-color: rgba(232,90,60,0.6);
  box-shadow: 0 0 16px rgba(232,90,60,0.15);
  animation: authShake 0.4s ease;
}
@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.auth-gate__btn {
  width: 100%; padding: 13px 20px;
  background: linear-gradient(135deg, rgba(29,167,117,0.25), rgba(29,167,117,0.12));
  border: 1px solid rgba(29,167,117,0.4);
  border-radius: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text); font-weight: 500;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.auth-gate__btn:hover {
  background: linear-gradient(135deg, rgba(29,167,117,0.35), rgba(29,167,117,0.18));
  box-shadow: 0 0 20px rgba(29,167,117,0.2);
}
.auth-gate__btn:active { transform: scale(0.98); }
.auth-gate__hint {
  font-size: 11px; color: var(--text-tertiary); line-height: 1.5;
  max-width: 28ch;
}
.auth-gate__back {
  font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px;
  color: var(--text-secondary); text-decoration: none;
  padding: 10px 20px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.auth-gate__back:hover {
  color: var(--accent-teal);
  border-color: rgba(29,167,117,0.35);
  background: rgba(29,167,117,0.06);
}

/* Custom cursor — teal dot + lagging ring (desktop, fine pointer only) */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: none; }
  a, button, [role="button"], .cta, .project-card, .img-frame, .stage-tool,
  .principle, .timeline-card, .mosaic__tile, .social-btn, .nav__links a,
  .next-project__title a, .mast-footer a { cursor: none; }
  input, textarea, select, [contenteditable="true"] { cursor: text; }
  /* Restore default cursor inside lightbox/video/auth overlays */
  .lightbox, .lightbox *, .video-lightbox, .video-lightbox *, .auth-gate, .auth-gate * { cursor: default; }
  .lightbox__close, .video-lightbox__close, .auth-gate__btn { cursor: pointer; }
  .auth-gate__input { cursor: text; }

  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%); will-change: transform, opacity;
    mix-blend-mode: difference;
  }
  .cursor-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #1da775;
    box-shadow: 0 0 12px rgba(29,167,117,0.6);
    transition: width 0.18s var(--ease), height 0.18s var(--ease), opacity 0.3s ease, background 0.2s ease;
  }
  .cursor-ring {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1.25px solid rgba(29,167,117,0.55);
    background: rgba(29,167,117,0.04);
    transition: width 0.28s var(--ease), height 0.28s var(--ease),
                border-color 0.25s ease, background 0.25s ease, opacity 0.3s ease;
  }
  /* Interactive-hover state */
  body.cursor-hover .cursor-dot {
    width: 0; height: 0; opacity: 0;
  }
  body.cursor-hover .cursor-ring {
    width: 52px; height: 52px;
    border-color: rgba(239,160,39,0.8);
    background: rgba(239,160,39,0.08);
  }
  /* Pressed */
  body.cursor-down .cursor-ring { width: 22px; height: 22px; border-color: rgba(232,90,60,0.85); background: rgba(232,90,60,0.1); }
  body.cursor-down .cursor-dot { background: #e85a3c; box-shadow: 0 0 14px rgba(232,90,60,0.8); }
  /* Hide when mouse leaves window */
  body.cursor-out .cursor-dot, body.cursor-out .cursor-ring { opacity: 0; }
}

/* @author Ashish Shendure | ashishshendure.com */
/* ================= TYPOGRAPHY ================= */
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
h1 { font-size: clamp(56px, 8vw, 104px); letter-spacing: -0.04em; font-weight: 300; }
h2 { font-size: clamp(32px, 4.2vw, 56px); letter-spacing: -0.025em; font-weight: 400; }
h3 { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.02em; }
h4 { font-size: clamp(16px, 1.4vw, 20px); letter-spacing: -0.01em; font-weight: 500; }
p  { color: var(--text-secondary); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.7; font-weight: 300; }
a  { color: inherit; text-decoration: none; transition: color 0.25s var(--ease); }
em { font-style: normal; color: var(--accent-teal); }
strong { color: var(--text); font-weight: 500; }

.mono { font-family: var(--mono); }
.label {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 3px;
  color: var(--text-secondary); font-weight: 400; margin-bottom: 18px;
  display: inline-flex; align-items:center; gap:10px;
}
.label::before { content:''; width:20px; height:1px; background: var(--text-tertiary); display:inline-block; }

/* ================= LAYOUT ================= */
.wrap { position: relative; z-index: 2; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 48px; }
section { position: relative; padding: 140px 0; }
.section-glow::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, var(--glow, rgba(73,182,159,0.04)), transparent 60%);
  z-index:-1;
}

/* @author Ashish Shendure | https://ashishshendure.com | © 2026 */
/* ================= NAV ================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 18px 48px;
  display: flex; justify-content: space-between; align-items: center;
  /* Apple-glass: tinted opacity over light blur for consistency */
  background: rgba(12,16,25,0.58);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: padding 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  isolation: isolate;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Top edge inner reflection — frosted glass highlight */
.nav::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 5%,
    rgba(255,255,255,0.06) 20%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.06) 80%,
    transparent 95%);
  z-index: 3; pointer-events: none;
}
/* Soft inner glow — subtle refraction */
.nav > * { position: relative; z-index: 2; }
.nav .nav__glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(60% 120% at 18% 0%, rgba(255,255,255,0.025), transparent 60%),
    radial-gradient(50% 120% at 82% 100%, rgba(255,255,255,0.015), transparent 60%);
  opacity: calc(0.3 + var(--nav-tint, 0) * 0.7);
  transition: opacity 0.4s var(--ease);
}
/* Bottom hairline — fades from transparent to colored on scroll */
.nav::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232,90,60,0.25) 18%,
    rgba(239,160,39,0.3) 38%,
    rgba(29,167,117,0.35) 58%,
    rgba(61,141,224,0.3) 78%,
    transparent 100%);
  opacity: var(--nav-tint, 0);
  z-index: 3;
  transition: opacity 0.4s var(--ease);
}
/* Scrolled: fills in, subtle color tint */
.nav.scrolled {
  padding: 11px 48px;
  background:
    linear-gradient(135deg,
      rgba(232,90,60,  calc(var(--nav-tint, 0) * 0.02)) 0%,
      rgba(239,160,39, calc(var(--nav-tint, 0) * 0.015)) 35%,
      rgba(29,167,117, calc(var(--nav-tint, 0) * 0.02)) 65%,
      rgba(129,120,224,calc(var(--nav-tint, 0) * 0.015)) 100%),
    rgba(12,16,25,0.7);
  border-bottom-color: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 16px rgba(0,0,0,0.18);
}
/* Scroll progress sliver across the very bottom */
.nav__progress {
  position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: linear-gradient(90deg, var(--accent-coral), var(--accent-amber), var(--accent-teal), var(--accent-blue));
  box-shadow: 0 0 8px rgba(29,167,117,0.5);
  z-index: 4; transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

.nav__brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 1.4px;
  color: var(--text); text-transform: uppercase; font-weight: 500;
  position: relative; padding: 6px 0;
}
.nav__brand::before {
  content: 'AS';
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 1px; font-weight: 600;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.1);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  position: relative; overflow: hidden;
}
/* Iridescent conic shimmer rotates inside the badge via overflow:hidden on ::before */
@keyframes navBadgeShimmer {
  to { --nav-shimmer: 360deg; }
}
.nav__brand::before {
  background:
    conic-gradient(
      from var(--nav-shimmer, 0deg),
      rgba(232,90,60,0.14),
      rgba(239,160,39,0.12),
      rgba(29,167,117,0.16),
      rgba(61,141,224,0.14),
      rgba(129,120,224,0.12),
      rgba(232,90,60,0.14)),
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  animation: navBadgeShimmer 4s linear infinite;
}
@property --nav-shimmer {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.nav__brand:hover::before {
  transform: rotate(-6deg) scale(1.05);
  box-shadow:
    0 6px 20px rgba(0,0,0,0.25),
    0 0 18px rgba(29,167,117,0.25),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.12);
}
.nav__brand .pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-teal);
  box-shadow: 0 0 10px rgba(29,167,117,0.7);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:0.55; transform:scale(0.92)}50%{opacity:1; transform:scale(1)} }

.nav__links {
  display: flex; gap: 4px; font-size: 12.5px; font-family: var(--mono);
  letter-spacing: 1px; text-transform: uppercase;
  padding: 5px; border-radius: 999px;
  background: rgba(12,16,25,0.62);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    0 4px 16px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.nav__links a {
  color: var(--text-secondary); position: relative;
  padding: 7px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color 0.25s ease, background 0.25s ease;
}
.nav__links a::before {
  content: counter(navItem, decimal-leading-zero);
  font-size: 9px; letter-spacing: 1.4px; font-weight: 500;
  color: var(--text-tertiary); opacity: 0.7;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.nav__links { counter-reset: navItem; }
.nav__links a { counter-increment: navItem; }
.nav__links a:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.nav__links a:hover::before { color: var(--accent-teal); opacity: 1; }
/* Active page (inline style sets color to var(--text)) or JS-applied .nav-active */
.nav__links a[style*="--text"],
.nav__links a.nav-active {
  color: var(--text) !important;
  background: linear-gradient(135deg, rgba(29,167,117,0.14), rgba(29,167,117,0.04));
  border: 1px solid rgba(29,167,117,0.3);
  padding: 6px 13px;
  box-shadow: 0 0 14px rgba(29,167,117,0.12);
}
.nav__links a[style*="--text"]::before,
.nav__links a.nav-active::before { color: var(--accent-teal); opacity: 1; }

@media (max-width: 680px) {
  .nav { padding: 14px 20px; }
  .nav.scrolled { padding: 10px 20px; }
  .nav__brand { font-size: 11px; gap: 10px; }
  .nav__brand::before { width: 26px; height: 26px; font-size: 10px; }
}

/* Sticky back button (project pages) */
.back-btn {
  position: fixed; top: 88px; left: 40px; z-index: 40;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px;
  background: rgba(19,26,38,0.8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  color: var(--text-secondary);
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
  transform: translateZ(0); will-change: transform;
}
.back-btn:hover { background: rgba(29,167,117,0.08); border-color: rgba(29,167,117,0.3); color: var(--accent-teal); transform: translateX(-2px); }
.back-btn svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.back-btn:hover svg { transform: translateX(-2px); }

/* ================= HERO ================= */
.hero { min-height: 100vh; padding: 200px 0 120px; display: flex; align-items: center; position: relative; }
.hero__kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent-teal); margin-bottom: 28px; display:flex; align-items:center; gap: 12px;
}
.hero__kicker::before { content:''; width:36px; height:1px; background: var(--accent-teal); }
.hero h1 {
  margin-bottom: 36px;
  background: linear-gradient(180deg, #fff 0%, #a8b0c2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  max-width: 18ch;
}
.hero h1 .accent { color: var(--accent-coral); -webkit-text-fill-color: var(--accent-coral); }

/* Iridescent shimmer text — Safari-compatible */
.iridescent {
  background: linear-gradient(
    90deg,
    var(--accent-teal),
    var(--accent-blue),
    var(--accent-purple),
    var(--accent-teal),
    var(--accent-blue),
    var(--accent-purple),
    var(--accent-teal)
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.05em;
  display: inline;
  -webkit-animation: iri-shift 8s linear infinite;
  animation: iri-shift 8s linear infinite;
}
@-webkit-keyframes iri-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}
@keyframes iri-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}

/* Sparkle — text-shadow glow on hover (works inside background-clip:text parents) */
.sparkle-hover {
  cursor: default;
  -webkit-transition: text-shadow 0.4s ease;
  transition: text-shadow 0.4s ease;
}
.sparkle-hover:hover {
  -webkit-animation: sparkleGlow 2.4s ease-in-out infinite;
  animation: sparkleGlow 2.4s ease-in-out infinite;
}
@-webkit-keyframes sparkleGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(29,167,117,0.7), 0 0 18px rgba(29,167,117,0.4); }
  33%      { text-shadow: 0 0 8px rgba(61,141,224,0.7), 0 0 18px rgba(61,141,224,0.4); }
  66%      { text-shadow: 0 0 8px rgba(129,120,224,0.7), 0 0 18px rgba(129,120,224,0.4); }
}
@keyframes sparkleGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(29,167,117,0.7), 0 0 18px rgba(29,167,117,0.4); }
  33%      { text-shadow: 0 0 8px rgba(61,141,224,0.7), 0 0 18px rgba(61,141,224,0.4); }
  66%      { text-shadow: 0 0 8px rgba(129,120,224,0.7), 0 0 18px rgba(129,120,224,0.4); }
}

.hero__sub { font-size: clamp(18px, 1.6vw, 24px); color: var(--text-secondary); line-height: 1.55; max-width: 720px; font-weight: 300; margin-bottom: 56px; }
.hero__sub strong { color: var(--text); font-weight: 400; }

.hero__meta { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.05); max-width: 1100px; }
.hero__meta-item { display:flex; flex-direction: column; justify-content: flex-start; gap: 12px; padding: 4px 14px; border-left: 1px solid rgba(255,255,255,0.05); min-height: 80px; }
.hero__meta-item:first-child { border-left: none; padding-left: 0; }
.hero__meta-item:last-child { padding-right: 0; }
.hero__meta-value { font-family: var(--mono); font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; color: var(--text); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.hero__meta-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-tertiary); line-height: 1.4; font-weight: 500; white-space: nowrap; }

.hero__scroll {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: 3px; color: var(--text-tertiary);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: scrollHint 2.8s ease-in-out infinite;
}
.hero__scroll-line { width: 1px; height: 40px; background: linear-gradient(180deg, var(--text-tertiary), transparent); }
@keyframes scrollHint { 0%,100%{opacity:0.35;transform: translate(-50%, 0)}50%{opacity:0.8;transform: translate(-50%, 6px)} }

/* ================= PAUSE ================= */
.pause { padding: 180px 0; text-align: center; }
.pause__quote { font-size: clamp(28px, 3.8vw, 48px); font-weight: 300; line-height: 1.25; letter-spacing: -0.02em; max-width: 900px; margin: 0 auto; color: var(--text); }
.pause__quote em { color: var(--accent-teal); font-style: normal; }
.pause__attr { margin-top: 36px; font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: var(--text-tertiary); text-transform: uppercase; }

/* ================= TRUSTED BY · LOGO MARQUEE ================= */
.marquee-section {
  padding: 80px 0 72px;
  position: relative;
}
.marquee-section::before, .marquee-section::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: min(720px, 70%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.marquee-section::before { top: 0; }
.marquee-section::after  { bottom: 0; }

.marquee-header {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; margin-bottom: 52px;
}
.marquee-label {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 4px; font-weight: 600;
  color: var(--accent-teal); text-transform: uppercase;
}
.marquee-label__line {
  width: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(29,167,117,0.55), transparent);
}
.marquee-sub {
  font-size: 13px; color: var(--text-tertiary); font-weight: 300;
  max-width: 60ch; line-height: 1.5;
}

.marquee {
  position: relative;
  overflow: hidden;
  padding: 40px 0;
  touch-action: pan-x;
  contain: layout paint;
  /* Generous vertical padding so glow has room inside the overflow clip */
  /* Soft fade-out left/right edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.marquee__track {
  display: flex; width: max-content;
  animation: marqueeScroll 42s linear infinite;
  will-change: transform;
}
/* Pause on hover so glow matches the logo under the cursor */
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track:focus-within { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee__group {
  display: flex; align-items: center; gap: 0; flex-shrink: 0;
}
.marquee-logo {
  flex-shrink: 0; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  padding: 12px 52px;
  /* Monochrome white on dark bg, ghosted */
  filter: brightness(0) invert(1);
  opacity: 0.4;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease), filter 0.35s var(--ease);
}
.marquee-logo img, .marquee-logo svg {
  display: block; height: 100%; width: auto;
  pointer-events: none; user-select: none;
  -webkit-user-drag: none;
  object-fit: contain;
}
/* Subtle vertical separator between items */
.marquee-logo::after {
  content: ''; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 32px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.10) 35%,
    rgba(255,255,255,0.10) 65%,
    transparent 100%);
}
/* Negative-box logos: invert only (so dark box becomes light, white icon stays visible) */
.marquee-logo.marquee-logo--neg {
  filter: invert(1) grayscale(1);
  opacity: 0.35;
}
.marquee-logo.marquee-logo--neg:hover {
  filter: invert(1) grayscale(0.4)
    drop-shadow(0 0 14px var(--logo-glow, rgba(29,167,117,0.6)))
    drop-shadow(0 0 32px var(--logo-glow, rgba(29,167,117,0.35)));
  opacity: 0.95;
}

.marquee-logo:hover {
  /* Brighten + brand-colored glow (stronger tint) */
  filter: brightness(0) invert(1)
    drop-shadow(0 0 14px var(--logo-glow, rgba(29,167,117,0.6)))
    drop-shadow(0 0 32px var(--logo-glow, rgba(29,167,117,0.35)));
  opacity: 0.95;
  transform: translateY(-2px);
}
/* Paired logos (acquisition combo) */
.marquee-logo--pair {
  gap: 14px;
}
.marquee-logo__sep {
  display: block; width: 1px; height: 24px; flex-shrink: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.18) 30%,
    rgba(255,255,255,0.18) 70%,
    transparent 100%);
}
/* Dragging state — pause animation + grab cursor */
.marquee.is-dragging { cursor: grabbing; }
.marquee.is-dragging .marquee__track { animation-play-state: paused; }
.marquee { cursor: grab; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}
@media (max-width: 680px) {
  .marquee-section { padding: 56px 0 48px; }
  .marquee-logo { height: 40px; padding: 10px 28px; }
  .marquee-logo::after { height: 24px; }
  .marquee-sub { font-size: 12px; padding: 0 24px; }
}

/* @author Ashish Shendure | Designed and coded by hand */
/* ================= PROJECT CARDS (HOME) ================= */
.work-intro { padding: 60px 0 40px; }
.work-grid { display: grid; gap: 28px; margin-top: 80px; }

.project-card {
  position: relative; display: block;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 56px 64px;
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
  min-height: 420px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
}
/* Accent glow — drifts from right on hover */
.project-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 70% 80% at 85% 50%, var(--card-accent-glow), transparent 70%);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transform: translateX(20px);
}
.project-card:hover::before { opacity: 1; transform: translateX(0); }
/* Top accent line — slides in from left */
.project-card::after {
  content: ''; position: absolute; top: 0; left: 0; height: 2px;
  width: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--card-accent), transparent);
  transition: width 0.5s var(--ease);
}
.project-card:hover::after { width: 100%; }
.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--card-accent-border);
  box-shadow: 0 32px 64px -32px rgba(0,0,0,0.5), 0 0 60px -20px var(--card-accent-glow);
}

.project-card__content { position: relative; z-index: 2; }
.project-card__kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: var(--text-tertiary);
  margin-bottom: 24px; display: flex; align-items: center; gap: 14px;
  white-space: nowrap;
  transition: color 0.4s var(--ease);
}
.project-card:hover .project-card__kicker { color: var(--text-secondary); }
.project-card__num {
  padding: 6px 14px; border-radius: 100px;
  background: var(--card-accent-dim);
  border: 1px solid var(--card-accent-border);
  color: var(--card-accent);
  font-size: 10px; letter-spacing: 2.5px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.project-card:hover .project-card__num {
  transform: scale(1.05);
  box-shadow: 0 0 12px -3px var(--card-accent-glow);
}
.project-card__num .dot {
  width:6px; height:6px; border-radius:50%; background: var(--card-accent);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.project-card:hover .project-card__num .dot {
  transform: scale(1.4);
  box-shadow: 0 0 8px var(--card-accent);
}

.project-card__title {
  font-size: clamp(30px, 3.6vw, 48px); font-weight: 400; letter-spacing: -0.025em; line-height: 1.05;
  margin-bottom: 16px; color: var(--text);
  transition: transform 0.5s var(--ease), color 0.4s var(--ease);
}
.project-card:hover .project-card__title { transform: translateX(6px); color: #fff; }

.project-card__tagline {
  font-size: clamp(15px, 1.1vw, 17px); color: var(--text-secondary); line-height: 1.6; font-weight: 300;
  max-width: 48ch; margin-bottom: 28px;
  transition: opacity 0.4s var(--ease) 0.05s;
}
.project-card:hover .project-card__tagline { opacity: 0.85; }

.project-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.project-card__tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-tertiary);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.project-card:hover .project-card__tag {
  border-color: rgba(255,255,255,0.1);
  color: var(--text-secondary);
}
.project-card:hover .project-card__tag:nth-child(1) { transition-delay: 0.02s; transform: translateY(-1px); }
.project-card:hover .project-card__tag:nth-child(2) { transition-delay: 0.05s; transform: translateY(-1px); }
.project-card:hover .project-card__tag:nth-child(3) { transition-delay: 0.08s; transform: translateY(-1px); }
.project-card:hover .project-card__tag:nth-child(4) { transition-delay: 0.11s; transform: translateY(-1px); }
.project-card__tag.patent {
  background: var(--card-accent-dim);
  border-color: var(--card-accent-border);
  color: var(--card-accent);
  display: inline-flex; align-items: center; gap: 6px;
}
.project-card__tag.patent svg { width: 10px; height: 10px; }

.project-card__cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--card-accent); font-weight: 500; letter-spacing: 0.5px;
  transition: gap 0.4s var(--ease), letter-spacing 0.4s var(--ease);
}
.project-card__cta svg {
  width: 14px; height: 14px;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
  opacity: 0.7;
}
.project-card:hover .project-card__cta { gap: 14px; letter-spacing: 1px; }
.project-card:hover .project-card__cta svg { transform: translateX(6px); opacity: 1; }

/* Visual panel on the card */
.project-card__visual {
  position: relative; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(ellipse at center, var(--card-accent-glow), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,0.02), rgba(0,0,0,0.2));
  border: 1px solid var(--card-accent-border);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.project-card:hover .project-card__visual {
  transform: scale(1.02) translateY(-2px);
  border-color: var(--card-accent);
  box-shadow: 0 16px 40px -16px var(--card-accent-glow);
}
.project-card__visual svg { width: 100%; height: 100%; display: block; }

/* Project card hover overlay */
.project-card__overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  padding: 32px 32px 28px;
  background: rgba(12,16,25,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.project-card:hover .project-card__overlay {
  opacity: 1;
  transform: translateY(0);
}
.overlay__header {
  font-family: var(--mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--card-accent); margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.overlay__grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  margin-bottom: auto;
}
.overlay__item {
  display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: baseline;
}
.overlay__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--card-accent); opacity: 0.7;
}
.overlay__value {
  font-size: 14px; color: var(--text); line-height: 1.45; font-weight: 400;
}
.overlay__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding-top: 20px; margin-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.overlay__stat { text-align: center; }
.overlay__stat-val {
  display: block; font-family: var(--mono); font-size: 22px; font-weight: 600;
  letter-spacing: -0.5px; line-height: 1.2;
}
.overlay__stat-label {
  display: block; margin-top: 4px;
  font-size: 10px; color: var(--text-tertiary); letter-spacing: 0.5px; line-height: 1.35;
}

/* Hover-triggered SVG animations */
.pv-node { transition: transform 0.6s var(--ease), opacity 0.6s var(--ease); transform-origin: center; }
.pv-link { stroke-dasharray: 4 4; stroke-dashoffset: 100; opacity: 0.35; transition: stroke-dashoffset 1.4s var(--ease), opacity 0.6s var(--ease); }
.project-card:hover .pv-link { stroke-dashoffset: 0; opacity: 0.9; }
.project-card:hover .pv-node-center { transform: scale(1.15); }
.project-card:hover .pv-pulse { animation: pvPulse 1.6s ease-out infinite; }
@keyframes pvPulse { 0%{transform:scale(1);opacity:0.6}100%{transform:scale(2.2);opacity:0} }
.pv-layer { transition: transform 0.8s var(--ease), opacity 0.6s var(--ease); }
.project-card:hover .pv-layer-1 { transform: translateY(-6px); }
.project-card:hover .pv-layer-2 { transform: translateY(2px); }
.project-card:hover .pv-layer-3 { transform: translateY(10px); }
.pv-draw { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.6s var(--ease) 0.1s; }
.project-card:hover .pv-draw { stroke-dashoffset: 0; }

/* ================= PROJECT PAGE ================= */
.project-page { padding-top: 80px; }

/* Wide header image */
.project-header {
  position: relative;
  padding: 120px 0 80px;
  overflow: hidden;
}
.project-header__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 21/9;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 30% 40%, var(--page-accent-glow), transparent 60%),
    radial-gradient(ellipse at 70% 60%, var(--page-accent-glow), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.02), rgba(0,0,0,0.2));
  border: 1px solid var(--page-accent-border);
  margin-bottom: 80px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.project-header__cover::after {
  content:''; position: absolute; inset:0;
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.02) 49%, rgba(255,255,255,0.02) 51%, transparent 52%);
  background-size: 28px 28px;
  opacity: 0.5;
}
.project-header__cover-label {
  position: relative; z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  color: var(--text-tertiary); text-align: center;
  padding: 12px 28px;
  background: rgba(12,16,25,0.75);
  border-radius: 100px; border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.project-header__cover-label .mark { color: var(--page-accent); }

.project-header__eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--page-accent); margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.project-header__eyebrow::before { content:''; width:36px; height:1px; background: var(--page-accent); flex-shrink: 0; }
.project-header__title {
  font-size: clamp(48px, 6.5vw, 88px); font-weight: 300; letter-spacing: -0.035em; line-height: 1.02;
  margin-bottom: 28px;
  background: linear-gradient(180deg, #fff 0%, #b6bdcc 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  max-width: 20ch;
}
.project-header__lede {
  font-size: clamp(18px, 1.6vw, 24px); color: var(--text-secondary); line-height: 1.5; font-weight: 300;
  max-width: 64ch; margin-bottom: 48px;
}
.project-header__lede strong { color: var(--text); font-weight: 400; }
.project-header__rule { width: 60px; height: 2px; background: var(--page-accent); margin-bottom: 36px; }

/* ================= META GRID (polished) ================= */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 40px;
}
.meta-cell {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
  padding: 28px 28px 26px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  align-items: start;
  transition: background 0.3s var(--ease);
}
.meta-cell:hover { background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); }
.meta-cell__icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--page-accent-dim);
  border: 1px solid var(--page-accent-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--page-accent);
  flex-shrink: 0;
}
.meta-cell__icon svg { width: 16px; height: 16px; }
.meta-cell__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.meta-cell__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-tertiary);
}
.meta-cell__value {
  font-size: 15px; color: var(--text); font-weight: 500; letter-spacing: -0.005em; line-height: 1.35;
}
.meta-cell__sub { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; font-weight: 400; }

/* ================= PATENT CARDS (redesigned) ================= */
.patents-section { margin-top: 48px; }
.patents-heading {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-bottom: 20px;
}
.patents-heading h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.patents-heading__count {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--page-accent); text-transform: uppercase;
}
.patents-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.patent-card {
  position: relative; display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 20px; align-items: center;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--page-accent-dim), rgba(255,255,255,0.01));
  border: 1px solid var(--page-accent-border);
  border-radius: 14px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.patent-card::before {
  content:''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, transparent, var(--page-accent-glow));
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.patent-card:hover { transform: translateY(-2px); border-color: var(--page-accent); box-shadow: 0 20px 40px -20px var(--page-accent-glow); }
.patent-card:hover::before { opacity: 1; }

.patent-card__seal {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--page-accent-dim);
  border: 1px solid var(--page-accent-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--page-accent); flex-shrink: 0;
  position: relative; z-index: 1;
}
.patent-card__seal svg { width: 22px; height: 22px; }
.patent-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; z-index: 1; }
.patent-card__num {
  font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--text);
  letter-spacing: 0.5px; line-height: 1.1;
}
.patent-card__title {
  font-size: 13px; color: var(--text-secondary); line-height: 1.4; font-weight: 400;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.patent-card__meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--page-accent);
  text-transform: uppercase; margin-top: 2px;
}
.patent-card__arrow {
  color: var(--page-accent); opacity: 0.5; flex-shrink: 0; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  position: relative; z-index: 1;
}
.patent-card__arrow svg { width: 16px; height: 16px; }
.patent-card:hover .patent-card__arrow { opacity: 1; transform: translate(3px, -3px); }

/* @copyright 2026 Ashish Shendure. All rights reserved. */
/* ================= STORY BLOCKS ================= */
.story { display: grid; gap: 88px; margin-top: 120px; max-width: 1100px; }
.story-block { display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: start; }
.story-block__kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: var(--text-tertiary); text-transform: uppercase;
  padding-top: 8px;
  position: sticky; top: 110px;
}
.story-block__kicker .step { color: var(--page-accent, var(--accent-teal)); display:block; margin-bottom: 6px; font-size: 12px; }
.story-block h3 { margin-bottom: 22px; color: var(--text); }
.story-block p { margin-bottom: 18px; max-width: 62ch; }
.story-block p:last-child { margin-bottom: 0; }
.story-block ul { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; }
.story-block li { padding-left: 28px; position: relative; color: var(--text-secondary); font-size: 15px; line-height: 1.65; }
.story-block li::before { content:''; position: absolute; left: 0; top: 12px; width: 16px; height: 1px; background: var(--page-accent, var(--accent-teal)); }

/* My Role banner — prominent, never folds */
.my-role {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  margin: 4px 0 28px;
  padding: 16px 22px 16px 24px;
  background: linear-gradient(135deg, var(--page-accent-dim, rgba(29,167,117,0.12)) 0%, rgba(255,255,255,0.012) 100%);
  border: 1px solid var(--page-accent-border, rgba(29,167,117,0.28));
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}
/* Left accent stripe — the prominence mark */
.my-role::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
    var(--page-accent, var(--accent-teal)) 0%,
    var(--page-accent, var(--accent-teal)) 60%,
    transparent 100%);
}
/* Subtle accent glow bleeding from the stripe */
.my-role::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 30% 90% at 0% 50%, var(--page-accent-dim, rgba(29,167,117,0.14)), transparent 60%);
}
/* Label pill — mono, uppercase, never wraps */
.my-role__label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  color: var(--page-accent, var(--accent-teal));
  padding: 8px 14px;
  background: rgba(12,16,25,0.55);
  border: 1px solid var(--page-accent-border, rgba(29,167,117,0.35));
  border-radius: 100px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  align-self: flex-start;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.my-role__label::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--page-accent, var(--accent-teal));
  box-shadow: 0 0 8px var(--page-accent, var(--accent-teal));
  animation: pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.my-role strong { color: var(--text); font-weight: 500; }

/* Mobile: stack label above text */
@media (max-width: 640px) {
  .my-role {
    flex-direction: column; align-items: flex-start;
    gap: 12px; padding: 18px 20px 18px 22px;
    font-size: 14px;
  }
  .my-role__label { align-self: flex-start; }
}

/* Insight cards inline */
.insight-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 32px; }
.insight-card {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 28px 24px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.insight-card:hover { border-color: var(--page-accent, rgba(255,255,255,0.14)); transform: translateY(-2px); }
.insight-card__num { font-family: var(--mono); font-size: 11px; color: var(--page-accent); letter-spacing: 2px; margin-bottom: 12px; }
.insight-card__title { font-size: 16px; font-weight: 500; margin-bottom: 10px; color: var(--text); letter-spacing: -0.01em; }
.insight-card__body { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* Video frame (YouTube thumbnail + play overlay) */
.video-frame {
  position: relative; cursor: pointer; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.video-frame:hover {
  border-color: var(--page-accent-border, rgba(29,167,117,0.3));
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 20px var(--page-accent-glow, rgba(29,167,117,0.12));
}
.video-frame__thumb {
  width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover;
  filter: brightness(0.65) saturate(0.9);
  transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}
.video-frame:hover .video-frame__thumb { filter: brightness(0.78) saturate(1); transform: scale(1.02); }
.video-frame__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.video-frame__play {
  width: 68px; height: 68px;
  transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
}
.video-frame:hover .video-frame__play { transform: scale(1.12); filter: drop-shadow(0 4px 20px rgba(129,120,224,0.5)); }
.video-frame__label { text-align: center; }
.video-frame__title {
  display: block; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6); letter-spacing: -0.01em;
}
.video-frame__duration {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 2.5px;
  color: rgba(255,255,255,0.6); margin-top: 6px; text-transform: uppercase;
}

/* Video lightbox */
.video-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(12,16,25,0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0s 0.32s;
}
.video-lightbox.open { opacity: 1; visibility: visible; transition: opacity 0.32s var(--ease), visibility 0s; }
.video-lightbox__wrap {
  position: relative; width: 90vw; max-width: 1100px;
  aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,0.5), 0 0 40px var(--page-accent-glow, rgba(29,167,117,0.08));
  border: 1px solid rgba(255,255,255,0.08);
  transform: scale(0.95); transition: transform 0.32s var(--ease);
}
.video-lightbox.open .video-lightbox__wrap { transform: scale(1); }
.video-lightbox__wrap iframe { width: 100%; height: 100%; border: 0; }
.video-lightbox__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(12,16,25,0.7); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); transition: background 0.2s ease, transform 0.2s ease;
}
.video-lightbox__close:hover { background: rgba(232,90,60,0.2); border-color: rgba(232,90,60,0.5); transform: rotate(90deg); }
.video-lightbox__close svg { width: 18px; height: 18px; }
.video-lightbox__hint {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--text-tertiary);
  text-transform: uppercase;
}

/* Pull quotes */
.pull-quote {
  position: relative;
  margin: 32px 0; padding: 24px 28px 24px 32px;
  border: none; border-left: 2px solid var(--page-accent, var(--accent-teal));
  background:
    linear-gradient(135deg, var(--page-accent-glow, rgba(29,167,117,0.06)), transparent 70%);
  border-radius: 0 12px 12px 0;
}
.pull-quote p {
  font-size: clamp(16px, 1.4vw, 20px); font-weight: 300;
  line-height: 1.55; color: var(--text);
  font-style: italic; margin: 0;
}
.pull-quote cite {
  display: block; margin-top: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-tertiary); font-style: normal;
}

/* Stats */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 40px 0; }
.stat-card {
  background: var(--page-accent-dim);
  border: 1px solid var(--page-accent-border);
  border-radius: 12px;
  padding: 28px 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.stat-card:hover { transform: translateY(-3px); border-color: var(--page-accent); }
.stat-card__value { font-family: var(--mono); font-size: clamp(32px, 3.6vw, 44px); font-weight: 300; color: var(--page-accent); line-height: 1; letter-spacing: -0.03em; }
.stat-card__label { font-size: 13px; color: var(--text); line-height: 1.4; font-weight: 500; }
.stat-card__sub { font-size: 10.5px; color: var(--text-tertiary); line-height: 1.45; }

/* Image placeholders */
.img-placeholder {
  width: 100%; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
  border: 1px dashed rgba(255,255,255,0.09);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/9;
  transition: border-color 0.35s var(--ease);
}
.img-placeholder::before {
  content:''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, var(--page-accent-glow, rgba(73,182,159,0.04)), transparent 70%);
}
.img-placeholder::after {
  content:''; position: absolute; inset: 0;
  background-image: linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.025) 49%, rgba(255,255,255,0.025) 51%, transparent 52%);
  background-size: 24px 24px; opacity: 0.5;
}
.img-placeholder__label {
  position: relative; z-index: 2;
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--text-tertiary); text-align: center;
  padding: 10px 24px;
  background: rgba(12,16,25,0.75);
  border-radius: 100px; border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.img-placeholder__label .mark { color: var(--page-accent); }
.img-placeholder.tall { aspect-ratio: 4/5; }
.img-placeholder.wide { aspect-ratio: 21/9; }

/* ============ IMAGE FRAME (never stretches) ============ */
.img-frame {
  width: 100%; border-radius: 14px; overflow: hidden; position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));
  border: 1px solid var(--page-accent-border, rgba(255,255,255,0.07));
  aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.img-frame::before {
  content:''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, var(--page-accent-glow, rgba(73,182,159,0.05)), transparent 70%);
}
.img-frame:hover { border-color: var(--page-accent, rgba(255,255,255,0.14)); transform: translateY(-2px); }
.img-frame img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block; position: relative; z-index: 1;
}
.img-frame.tall { aspect-ratio: 4/5; }
.img-frame.wide { aspect-ratio: 21/9; }
.img-frame.square { aspect-ratio: 1/1; }
.img-frame__zoom {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(12,16,25,0.7); border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.img-frame:hover .img-frame__zoom { opacity: 1; }
.img-frame__zoom svg { width: 14px; height: 14px; }
.img-frame__caption {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; color: var(--text-tertiary);
  background: rgba(12,16,25,0.7); border: 1px solid rgba(255,255,255,0.06);
  padding: 6px 12px; border-radius: 100px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-transform: uppercase;
}

/* Lightbox overlay */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(6,9,16,0.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.32s var(--ease), visibility 0s 0.32s;
  padding: 48px;
}
.lightbox.open { opacity: 1; visibility: visible; transition: opacity 0.32s var(--ease), visibility 0s; }
.lightbox__img {
  max-width: 92vw; max-height: 84vh; width: auto; height: auto;
  object-fit: contain; display: block;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9);
  transform: scale(0.98); transition: transform 0.4s var(--ease);
}
.lightbox.open .lightbox__img { transform: scale(1); }
.lightbox__caption {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; color: var(--text-secondary);
  background: rgba(12,16,25,0.8); border: 1px solid rgba(255,255,255,0.08);
  padding: 8px 18px; border-radius: 100px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  text-transform: uppercase; max-width: 80vw; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lightbox__close {
  position: absolute; top: 28px; right: 28px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: var(--text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.lightbox__close:hover { background: rgba(232,90,60,0.2); border-color: rgba(232,90,60,0.5); transform: rotate(90deg); }
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__hint {
  position: absolute; top: 32px; left: 32px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--text-tertiary);
  text-transform: uppercase;
}

/* ============ ABSTRACT HERO (slide-37 inspired) ============ */
.hero-abstract {
  width: 100%; aspect-ratio: 21/9; border-radius: 20px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 30%, var(--ha-glow-a, rgba(129,120,224,0.14)), transparent 60%),
    radial-gradient(ellipse at 80% 70%, var(--ha-glow-b, rgba(29,167,117,0.1)), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25));
  border: 1px solid var(--ha-border, rgba(255,255,255,0.08));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 80px;
}
.hero-abstract::before {
  content:''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, var(--ha-dot, rgba(255,255,255,0.06)) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 0.5;
}
.hero-abstract svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.ha-label-tl, .ha-label-br {
  position: absolute; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ha-accent); padding: 6px 14px;
  background: rgba(12,16,25,0.7); border: 1px solid var(--ha-border);
  border-radius: 100px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ha-label-tl { top: 20px; left: 20px; }
.ha-label-br { bottom: 20px; right: 20px; color: var(--text-tertiary); }
.hero-abstract .ha-pulse-dot {
  animation: haPulse 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes haPulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.hero-abstract .ha-orbit { animation: haSpin 60s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes haSpin { to { transform: rotate(360deg); } }

/* Confetti + phrase (pipeline click egg) */
.stage-tool { overflow: visible; }
.confetti-dot {
  position: absolute; top: 0; left: 50%;
  border-radius: 50%; pointer-events: none;
  animation: confettiBurst 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 20;
}
@keyframes confettiBurst {
  0%   { transform: translate(var(--cx, 0), var(--cy, 0)) scale(0.4); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--ex, 0), calc(var(--ey, 0) + 24px)) scale(1); opacity: 0; }
}
.egg-phrase {
  position: absolute; top: -12px; left: 50%;
  transform: translate(-50%, -10px);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3px;
  padding: 5px 10px; border-radius: 100px;
  background: rgba(12,16,25,0.92); border: 1px solid rgba(29,167,117,0.3);
  color: var(--accent-teal); white-space: nowrap;
  pointer-events: none; z-index: 30;
  opacity: 0; animation: eggPhrase 1.8s ease-out forwards;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6);
}
@keyframes eggPhrase {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.85); }
  15% { opacity: 1; transform: translate(-50%, -18px) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -24px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(0.95); }
}

/* Heart/coffee footer icons */
.footer-heart, .footer-coffee {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  transition: transform 0.3s var(--ease);
}
.footer-heart svg, .footer-coffee svg { width: 14px; height: 14px; }
.footer-heart { color: var(--accent-coral); }
.footer-heart:hover { color: var(--accent-coral); transform: scale(1.25); animation: heartBeat 0.8s ease-in-out; }
@keyframes heartBeat { 0%,100%{transform:scale(1.25)} 25%{transform:scale(1.45)} 50%{transform:scale(1.15)} 75%{transform:scale(1.4)} }
.footer-coffee { color: var(--accent-amber); }
.footer-coffee:hover { color: var(--accent-amber); transform: rotate(-8deg) scale(1.2); }

.footer-claude { transition: transform 0.3s var(--ease); }
.footer-claude img { transition: transform 0.3s var(--ease), filter 0.3s ease; }
.footer-claude:hover img {
  transform: scale(1.2) rotate(20deg);
  -webkit-animation: claudeSpark 1.4s ease-in-out infinite;
  animation: claudeSpark 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(217,119,87,0.6));
}
@-webkit-keyframes claudeSpark {
  0%, 100% { transform: scale(1.2) rotate(20deg); }
  50%      { transform: scale(1.35) rotate(40deg); }
}
@keyframes claudeSpark {
  0%, 100% { transform: scale(1.2) rotate(20deg); }
  50%      { transform: scale(1.35) rotate(40deg); }
}

/* ============ SOCIAL ROW ============ */
.socials { display: flex; gap: 10px; align-items: center; }
.social-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background 0.28s var(--ease), border-color 0.28s var(--ease), color 0.28s var(--ease), transform 0.28s var(--ease);
}
.social-btn:hover {
  background: var(--sb-bg, rgba(29,167,117,0.14));
  border-color: var(--sb-border, rgba(29,167,117,0.4));
  color: var(--sb-color, var(--accent-teal));
  transform: translateY(-2px);
}
.social-btn svg { width: 16px; height: 16px; }

.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 52px 0 0; }
.split-caption { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--text-tertiary); margin-top: 12px; text-transform: uppercase; }

/* @author Ashish Shendure | ashish.shendure@hotmail.com */
/* ================= ABOUT ================= */
.about { padding: 160px 0; }
.about__intro { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: center; margin-bottom: 120px; }
.about__photo {
  aspect-ratio: 4/5; border-radius: 14px;
  background: linear-gradient(135deg, rgba(129,120,224,0.08), rgba(29,167,117,0.04));
  border: 1px solid rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
}
.about__photo::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(129,120,224,0.15), transparent 60%),
    radial-gradient(circle at 70% 75%, rgba(29,167,117,0.12), transparent 60%);
}
.about__photo::after {
  content: 'PHOTO / PORTRAIT'; position: absolute; inset: auto 0 20px 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--text-tertiary); text-align: center;
}
.about__intro h2 { margin-bottom: 28px; }
.about__bio p { margin-bottom: 18px; max-width: 58ch; }
.about__bio a { color: var(--accent-teal); border-bottom: 1px solid rgba(29,167,117,0.3); }
.about__bio a:hover { border-bottom-color: var(--accent-teal); }

/* Timeline */
/* Section heading: title + subtitle stacked on the left for consistency across sections */
.timeline__heading {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 720px;
}
.timeline__heading > div { display: flex; flex-direction: column; gap: 10px; }
.timeline__heading p {
  max-width: 60ch;
  margin: 0;
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--text-secondary);
  line-height: 1.6;
}
/* Parent grid with 6 explicit row tracks — children align across columns via subgrid */
.timeline-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
/* Vertical connector line — centered with dot column (16px pad + 24px center) */
.timeline-grid::before {
  content: ''; position: absolute;
  left: 40px; top: 16px; bottom: 16px; width: 1px;
  background: linear-gradient(180deg,
    transparent,
    rgba(255,255,255,0.08) 10%,
    rgba(255,255,255,0.08) 90%,
    transparent);
}
.timeline-card {
  display: grid;
  grid-template-columns: 48px 200px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 24px;
  row-gap: 0;
  padding: 28px 16px;
  position: relative;
  transition: background 0.35s var(--ease);
  border-radius: 12px;
}
.timeline-card::before { content: none; }
.timeline-card:hover {
  background: rgba(255,255,255,0.02);
}
.timeline-card + .timeline-card {
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* Col 1: icon dot + phase label — centered on the vertical line */
.timeline-card__kicker {
  grid-column: 1; grid-row: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 2px;
}
.timeline-card__dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--tc-dot-bg, rgba(255,255,255,0.03));
  border: 1.5px solid var(--tc-dot-border, rgba(255,255,255,0.1));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  position: relative; z-index: 2;
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.timeline-card:hover .timeline-card__dot {
  border-color: var(--tc-accent, rgba(255,255,255,0.3));
  box-shadow: 0 0 16px -4px var(--tc-accent, transparent);
}
.timeline-card__kicker-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: 2px;
  color: var(--tc-accent, var(--text-secondary));
  text-transform: uppercase; font-weight: 500;
  display: none;
}
/* Phase badge below the dot */
.timeline-card__kicker-label {
  display: block !important;
  font-family: var(--mono); font-size: 8px; letter-spacing: 2px;
  color: var(--tc-accent, var(--text-tertiary));
  text-transform: uppercase; font-weight: 600;
  text-align: center; margin-top: 8px;
  white-space: nowrap;
}

/* Col 2: left meta column */
.timeline-card__meta {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 2px;
}
.timeline-card__company {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  color: var(--tc-accent, var(--text-secondary));
  letter-spacing: 0.5px; line-height: 1.3;
  text-transform: uppercase;
}
.timeline-card__year {
  font-family: var(--mono);
  font-size: 10px; color: var(--text-tertiary);
  letter-spacing: 1.2px; line-height: 1.3;
}
.timeline-card__sep { display: none; }
.timeline-card__location {
  grid-column: 2; grid-row: 2;
  font-size: 11px; color: var(--text-tertiary);
  display: flex; align-items: center; gap: 6px;
  letter-spacing: 0.2px; padding-top: 6px;
}
.timeline-card__location::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--tc-accent, var(--text-tertiary));
  opacity: 0.55; flex-shrink: 0;
}

/* Col 3: main content */
.timeline-card__title {
  grid-column: 3; grid-row: 1;
  font-size: 18px; font-weight: 500;
  color: var(--text);
  letter-spacing: -0.015em; line-height: 1.3;
  margin: 0;
  display: flex; align-items: baseline; gap: 14px;
}

/* Chips + bullets flow into row 2 of col 3 */
.timeline-card__chips {
  grid-column: 3; grid-row: 2;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 10px;
  align-content: flex-start;
}
.timeline-card__chip {
  font-size: 10px; padding: 4px 10px; border-radius: 6px;
  background: var(--tc-chip-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--tc-chip-border, rgba(255,255,255,0.07));
  color: var(--tc-accent, var(--text-secondary));
  font-weight: 500; letter-spacing: 0.3px;
  font-family: var(--mono);
}

.timeline-card__bullets {
  grid-column: 3; grid-row: 3;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  padding-top: 12px;
}
.timeline-card__bullet {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.5; padding-left: 0;
  position: relative;
}
.timeline-card__bullet::before {
  content: ''; display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--tc-accent, var(--text-tertiary));
  margin-right: 8px; vertical-align: middle;
  opacity: 0.5;
}

/* ============ MOSAIC TILES — tight packed grid, varying sizes ============ */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 160px;
  gap: 10px;
  margin-top: 40px;
}
.mosaic-tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--m-bg, rgba(255,255,255,0.03));
  border: 1px solid var(--m-border, rgba(255,255,255,0.06));
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
  cursor: default;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 22px 18px;
}
/* Size-aware padding (scaled ~0.76× from original) */
.mosaic-tile[data-size="s"]  { padding: 16px 14px; }
.mosaic-tile[data-size="m"]  { padding: 24px 20px; }
.mosaic-tile[data-size="l"]  { padding: 34px 28px; }
.mosaic-tile[data-size="xl"] { padding: 42px 36px; }
.mosaic-tile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--m-stripe, linear-gradient(90deg, rgba(255,255,255,0.1), transparent));
  z-index: 2;
}
.mosaic-tile::after {
  content:''; position: absolute; inset: 0; pointer-events:none; opacity: 0;
  background: radial-gradient(ellipse at center, var(--m-glow, rgba(73,182,159,0.14)), transparent 70%);
  transition: opacity 0.45s var(--ease);
  z-index: 0;
}
.mosaic-tile:hover { transform: translateY(-4px); border-color: var(--m-accent, rgba(255,255,255,0.2)); box-shadow: 0 20px 40px -24px var(--m-glow, rgba(73,182,159,0.2)); }
.mosaic-tile:hover::after { opacity: 1; }

.mosaic-tile__svg {
  position: relative; z-index: 2; margin-bottom: 12px;
  transition: transform 0.6s var(--ease);
  width: 56px; height: 56px;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.mosaic-tile__svg svg { width: 100%; height: 100%; display: block; }
/* Size-aware SVG sizing (scaled ~0.76×) */
.mosaic-tile[data-size="s"]  .mosaic-tile__svg { width: 42px;  height: 42px;  margin-bottom: 10px; }
.mosaic-tile[data-size="m"]  .mosaic-tile__svg { width: 60px;  height: 60px;  margin-bottom: 14px; }
.mosaic-tile[data-size="l"]  .mosaic-tile__svg { width: 92px;  height: 92px;  margin-bottom: 18px; }
.mosaic-tile[data-size="xl"] .mosaic-tile__svg { width: 120px; height: 120px; margin-bottom: 24px; }

.mosaic-tile__title { font-size: 15px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; position: relative; z-index: 2; }
.mosaic-tile[data-size="s"]  .mosaic-tile__title { font-size: 13px; }
.mosaic-tile[data-size="l"]  .mosaic-tile__title { font-size: 19px; }
.mosaic-tile[data-size="xl"] .mosaic-tile__title { font-size: 22px; }

.mosaic-tile__sub { font-size: 10px; color: var(--text-tertiary); margin-top: 5px; letter-spacing: 0.2px; position: relative; z-index: 2; }
.mosaic-tile[data-size="l"]  .mosaic-tile__sub { font-size: 11px; margin-top: 7px; }
.mosaic-tile[data-size="xl"] .mosaic-tile__sub { font-size: 12px; margin-top: 8px; }

/* Witty one-liner overlay — covers full tile, translucent so the animated icon shows through */
.mosaic-tile__line {
  position: absolute; inset: 0;
  padding: 22px 24px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.2px;
  color: var(--text); font-weight: 400;
  line-height: 1.55;
  background: linear-gradient(180deg,
    rgba(12,16,25,0.35) 0%,
    var(--m-stripe-solid, rgba(29,167,117,0.18)) 50%,
    rgba(12,16,25,0.78) 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  display: flex; align-items: center; justify-content: center; text-align: center;
  backdrop-filter: blur(6px) saturate(1.15);
  -webkit-backdrop-filter: blur(6px) saturate(1.15);
  z-index: 4;
  word-break: normal; overflow-wrap: break-word; hyphens: auto;
}
.mosaic-tile__line::before {
  content: '';
  position: absolute; left: 24px; right: 24px; top: 22px;
  height: 1px; background: var(--m-accent, var(--accent-teal));
  opacity: 0.3;
}
.mosaic-tile__line::after {
  content: '';
  position: absolute; left: 24px; right: 24px; bottom: 22px;
  height: 1px; background: var(--m-accent, var(--accent-teal));
  opacity: 0.3;
}
.mosaic-tile__line-text {
  max-width: 44ch;
  font-style: italic;
}
/* Hover text size is uniform across all tiles */

.mosaic-tile:hover .mosaic-tile__line { opacity: 1; transform: translateY(0); }
/* Title + sub fade out — but SVG stays visible and keeps animating behind the overlay */
.mosaic-tile__title, .mosaic-tile__sub { transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.mosaic-tile:hover .mosaic-tile__title, .mosaic-tile:hover .mosaic-tile__sub { opacity: 0; transform: translateY(-8px); }
/* SVG remains visible — the icon becomes a subtle animated watermark behind the quote */
.mosaic-tile__svg { transition: transform 0.5s var(--ease), filter 0.4s var(--ease); }
.mosaic-tile:hover .mosaic-tile__svg { filter: saturate(1.2); }

/* Tile-specific hover animations — smooth, louder, GPU-accelerated */
/* Shared easing: silky cubic-bezier(0.33, 1, 0.68, 1) for pendulum-like motion */

.mosaic-tile[data-anim="nostalgia"]:hover .mosaic-tile__svg {
  animation: tNostalgia 4.2s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}
@keyframes tNostalgia {
  0%   { transform: rotate(-5deg) scale(1) translateY(0); }
  25%  { transform: rotate(0deg)  scale(1.08) translateY(-8px); }
  50%  { transform: rotate(5deg)  scale(1.14) translateY(-4px); }
  75%  { transform: rotate(0deg)  scale(1.08) translateY(4px); }
  100% { transform: rotate(-5deg) scale(1) translateY(0); }
}

.mosaic-tile[data-anim="rise"]:hover .mosaic-tile__svg {
  animation: tRise 3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes tRise {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-14px) scale(1.1); }
}

.mosaic-tile[data-anim="zoom"]:hover .mosaic-tile__svg {
  animation: tZoom 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes tZoom {
  0%,100% { transform: scale(1) rotate(0deg); }
  50%     { transform: scale(1.2) rotate(4deg); }
}

.mosaic-tile[data-anim="sway"]:hover .mosaic-tile__svg {
  animation: tSway 3.6s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  transform-origin: bottom center;
}
@keyframes tSway {
  0%,100% { transform: translateX(0) rotate(0); }
  25%     { transform: translateX(8px) rotate(5deg); }
  50%     { transform: translateX(0) rotate(0); }
  75%     { transform: translateX(-8px) rotate(-5deg); }
}

.mosaic-tile[data-anim="beat"]:hover .mosaic-tile__svg {
  animation: tBeat 1.4s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}
@keyframes tBeat {
  0%,100% { transform: scale(1); }
  18%     { transform: scale(1.22); }
  34%     { transform: scale(0.96); }
  50%     { transform: scale(1.16); }
  66%     { transform: scale(1); }
}

.mosaic-tile[data-anim="blink"]:hover .mosaic-tile__svg {
  animation: tBlink 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes tBlink {
  0%,100% { transform: scale(1); opacity: 1; }
  40%     { transform: scale(1.12); opacity: 0.85; }
  48%     { transform: scale(1.18); opacity: 0.6; }
  56%     { transform: scale(1.12); opacity: 0.85; }
}

.mosaic-tile[data-anim="swing"]:hover .mosaic-tile__svg {
  animation: tSwing 1.8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  transform-origin: top center;
}
@keyframes tSwing {
  0%,100% { transform: rotate(-18deg); }
  50%     { transform: rotate(22deg); }
}

.mosaic-tile[data-anim="glitch"]:hover .mosaic-tile__svg {
  animation: tGlitch 2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
@keyframes tGlitch {
  0%,100% { transform: translate(0,0) scale(1) rotate(0); }
  20%     { transform: translate(-3px, 2px) scale(1.04) rotate(-2deg); }
  40%     { transform: translate(3px, -2px) scale(1.08) rotate(2deg); }
  60%     { transform: translate(-2px, 3px) scale(1.04) rotate(-1deg); }
  80%     { transform: translate(2px, 0) scale(1.02) rotate(1deg); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .mosaic-tile:hover .mosaic-tile__svg { animation: none !important; }
}

/* Mosaic cell positions — PACKED CLUSTER (6 cols × 4 rows = 24 cells, fully filled)
   Visual map:
     MU MU MU IN IN MS
     MU MU MU BA BA CR
     EC EC TE BA BA CR
     PH PH PH PH PH PH                                                                    */
.tile-mumbai     { grid-column: 1 / 4; grid-row: 1 / 3; } /* 3×2 hero — top-left anchor */
.tile-indiana    { grid-column: 4 / 6; grid-row: 1 / 2; } /* 2×1 wide */
.tile-music      { grid-column: 6 / 7; grid-row: 1 / 2; } /* 1×1, top-right corner */
.tile-bayarea    { grid-column: 4 / 6; grid-row: 2 / 4; } /* 2×2, mid-right */
.tile-cricket    { grid-column: 6 / 7; grid-row: 2 / 4; } /* 1×2 tall, right edge */
.tile-eastcoast  { grid-column: 1 / 3; grid-row: 3 / 4; } /* 2×1 */
.tile-tech       { grid-column: 3 / 4; grid-row: 3 / 4; } /* 1×1 */
.tile-photography{ grid-column: 1 / 7; grid-row: 4 / 5; } /* 6×1 full-width strip, bottom */

@media (max-width: 1100px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; }
  .tile-mumbai     { grid-column: 1 / 3; grid-row: 1 / 3; }
  .tile-indiana    { grid-column: 3 / 5; grid-row: 1 / 2; }
  .tile-bayarea    { grid-column: 3 / 5; grid-row: 2 / 4; }
  .tile-music      { grid-column: 1 / 2; grid-row: 3 / 4; }
  .tile-tech       { grid-column: 2 / 3; grid-row: 3 / 4; }
  .tile-eastcoast  { grid-column: 1 / 3; grid-row: 4 / 5; }
  .tile-cricket    { grid-column: 3 / 5; grid-row: 4 / 5; }
  .tile-photography{ grid-column: 1 / 5; grid-row: 5 / 6; }
}
@media (max-width: 640px) {
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: 150px; }
  .tile-mumbai, .tile-indiana, .tile-bayarea, .tile-eastcoast, .tile-cricket, .tile-music, .tile-photography, .tile-tech { grid-column: auto; grid-row: auto; }
}

/* ============ AI PIPELINE FOOTER (home) ============ */
.ai-pipeline {
  position: relative;
  padding: 120px 0 80px;
  border-top: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
}
.ai-pipeline::before {
  content:''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(73,182,159,0.04), transparent 70%);
}
.pipeline-header { text-align: center; margin-bottom: 20px; position: relative; z-index: 1; }
.pipeline-eyebrow { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: var(--accent-teal); margin-bottom: 18px; }
.pipeline-title {
  font-family: var(--font); font-size: clamp(28px, 3.4vw, 44px); font-weight: 300; letter-spacing: -0.02em; color: var(--text); margin-bottom: 10px;
}
.pipeline-title em { color: var(--accent-teal); font-style: normal; }
.pipeline-caption { font-size: 14px; color: var(--text-secondary); max-width: 56ch; margin: 0 auto; font-weight: 300; }

.pipeline {
  display: flex; align-items: center; justify-content: center;
  margin: 48px auto 16px; gap: 14px; max-width: 1240px; position: relative; z-index: 1;
}
.pipeline-stage {
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 12px; border-radius: 14px;
  position: relative; transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pipeline-stage:hover { transform: translateY(-3px); }
/* Arrow connectors */
.pipeline-stage:not(.pipe-hero):not(:last-child)::after {
  content:''; position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 6px solid rgba(255,255,255,0.08);
}

.stage-header {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  width: 100%;
}
.stage-label { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6px; }
.stage-subtitle { font-family: var(--font); font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.88); margin-bottom: 4px; letter-spacing: -0.01em; }
.stage-meta { font-family: var(--mono); font-size: 10px; color: var(--text-tertiary); letter-spacing: 0.5px; }
.stage-core-badge {
  display: inline-block; background: rgba(29,167,117,0.18); border: 1px solid rgba(29,167,117,0.35);
  border-radius: 100px; padding: 2px 8px; margin-left: 8px;
  font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 1.5px; color: var(--accent-teal);
  vertical-align: middle; text-transform: uppercase;
}

.stage-tools { display: flex; flex-wrap: wrap; gap: 18px 14px; justify-content: center; flex: 1; align-content: center; width: 100%; padding: 0 4px; }
.stage-tool { display: flex; flex-direction: column; align-items: center; gap: 0; cursor: default; position: relative; transition: transform 0.3s var(--ease); }
.stage-tool:hover { transform: translateY(-2px); }
.tool-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center; position: relative;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.tool-icon img { width: 18px; height: 18px; flex-shrink: 0; filter: brightness(0) invert(0.7); transition: filter 0.25s var(--ease); }
.tool-icon svg { width: 18px; height: 18px; opacity: 0.72; transition: opacity 0.25s var(--ease); }
.stage-tool:hover .tool-icon {
  background: rgba(var(--brand-rgb, 73,182,159), 0.14);
  border-color: rgba(var(--brand-rgb, 73,182,159), 0.4);
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(var(--brand-rgb, 73,182,159), 0.22);
}
.stage-tool:hover .tool-icon img { filter: none; }
.stage-tool:hover .tool-icon svg { opacity: 1; }
.tool-name {
  margin-top: 8px; font-family: var(--mono); font-size: 9.5px; font-weight: 400;
  color: rgba(255,255,255,0.4); white-space: nowrap; letter-spacing: 0.3px;
  transition: color 0.25s var(--ease);
}
.stage-tool:hover .tool-name { color: rgba(255,255,255,0.78); }
/* Claude Code orb — uses Claude's brand orange (#D97757 = 217,119,87) */
.tool-glow .tool-icon {
  border-color: rgba(217,119,87,0.6) !important;
  background: rgba(217,119,87,0.14) !important;
  box-shadow: 0 0 14px rgba(217,119,87,0.32), 0 0 32px rgba(217,119,87,0.14);
  animation: claudeOrb 2.4s ease-in-out infinite;
}
.tool-glow .tool-name { color: rgba(217,119,87,0.95) !important; font-weight: 500; }
@keyframes claudeOrb {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.07); opacity: 0.7; }
}

.mcp-banner {
  margin: 20px auto 0; padding: 10px 0; max-width: 1240px;
  display: flex; align-items: center; gap: 0;
}
.mcp-banner__line-l, .mcp-banner__line-r {
  flex: 1; height: 1px; min-width: 24px;
}
.mcp-banner__line-l {
  background: linear-gradient(90deg, transparent 0%, rgba(29,167,117,0.3) 100%);
}
.mcp-banner__line-r {
  background: linear-gradient(90deg, rgba(29,167,117,0.3) 0%, transparent 100%);
}
.mcp-banner-label {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 2px;
  color: rgba(29,167,117,0.85); white-space: nowrap;
  padding: 9px 22px;
  border: 1px solid rgba(29,167,117,0.28); border-radius: 100px;
  background: rgba(12,16,25,0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-transform: uppercase;
}
.mcp-banner-label svg { opacity: 0.75; width: 12px; height: 12px; flex-shrink: 0; }
.mcp-banner-label .mcp-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(29,167,117,0.4); opacity: 0.8;
}
.mcp-banner-label .mcp-sub {
  color: rgba(255,255,255,0.55); letter-spacing: 1.5px;
}
.mcp-banner-label .mcp-sub strong {
  color: var(--accent-teal); font-weight: 600; letter-spacing: 1.8px;
}

@media (max-width: 860px) {
  .mcp-banner { flex-direction: column; gap: 10px; }
  .mcp-banner__line-l, .mcp-banner__line-r { display: none; }
  .mcp-banner-label { white-space: normal; text-align: center; line-height: 1.5; padding: 12px 20px; }
}

@media (max-width: 1100px) {
  .pipeline { flex-wrap: wrap; gap: 10px; }
  .pipeline-stage { min-width: calc(50% - 10px); min-height: 260px !important; flex: 1 1 calc(50% - 10px) !important; }
  .pipeline-stage:not(.pipe-hero):not(:last-child)::after { display: none; }
}
@media (max-width: 680px) {
  .pipeline-stage { min-width: 100%; flex: 1 1 100% !important; }
  .mcp-banner-label { font-size: 10px; padding: 6px 14px; letter-spacing: 1.5px; white-space: normal; text-align: center; line-height: 1.3; }
}

/* Icon cards (geography, hobbies) — centered icon on top */
.icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 36px; }
.icon-card {
  position: relative;
  padding: 36px 20px 28px;
  border-radius: 14px;
  background: var(--ic-bg, rgba(255,255,255,0.03));
  border: 1px solid var(--ic-border, rgba(255,255,255,0.06));
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  min-height: 220px;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
  overflow: hidden;
}
.icon-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ic-stripe, linear-gradient(90deg, rgba(255,255,255,0.1), transparent));
}
.icon-card:hover { transform: translateY(-4px); border-color: var(--ic-accent, rgba(255,255,255,0.18)); }
.icon-card__svg { margin-bottom: auto; padding-top: 10px; }
.icon-card__title { font-size: 15px; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.icon-card__sub { font-size: 11px; color: var(--text-tertiary); line-height: 1.45; }

@media (max-width: 1100px) { .icon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .icon-grid { grid-template-columns: 1fr; } }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 80px; }
.pillar {
  padding: 44px 32px; border-radius: 14px; min-height: 240px;
  display: flex; flex-direction: column;
  background: var(--pillar-bg); border: 1px solid var(--pillar-border);
  transition: transform 0.35s var(--ease);
}
.pillar:hover { transform: translateY(-4px); }
.pillar__num { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--pillar-accent); margin-bottom: 16px; }
.pillar__title { font-size: 22px; font-weight: 500; margin-bottom: 12px; letter-spacing: -0.01em; }
.pillar__body { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

/* ================= CTAs ================= */
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 32px;
  background: rgba(29,167,117,0.08);
  border: 1px solid rgba(29,167,117,0.3);
  border-radius: 100px;
  color: var(--accent-teal);
  font-size: 14px; font-weight: 500; letter-spacing: 0.5px;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease);
}
.cta:hover { background: rgba(29,167,117,0.14); border-color: var(--accent-teal); transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(29,167,117,0.3); }
.cta svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.cta:hover svg { transform: translate(2px, -2px); }
.cta--ghost { background: transparent; border-color: rgba(255,255,255,0.12); color: var(--text); }
.cta--ghost:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.28); box-shadow: none; }

.resume-row { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: end; }
.resume-row h2 { max-width: 18ch; }
.resume-row p { margin-top: 20px; max-width: 48ch; }

/* Blog */
.blog { padding: 160px 0; }
.blog__header { display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: end; margin-bottom: 56px; }
.blog__header h2 { max-width: 18ch; }
.blog__header p { margin-top: 16px; max-width: 50ch; }
.blog-post {
  padding: 36px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.blog-post:hover { border-color: rgba(73,182,159,0.3); background: rgba(29,167,117,0.04); transform: translateY(-2px); }
.blog-post__date { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--text-tertiary); margin-bottom: 10px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.blog-post__title { font-size: 22px; font-weight: 500; margin-bottom: 10px; color: var(--text); letter-spacing: -0.01em; }
.blog-post__excerpt { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
.blog-post__arrow { color: var(--accent-teal); font-size: 22px; }
.blog-post__tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 100px; font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; font-weight: 500; text-transform: uppercase; border: 1px solid; line-height: 1; }
.blog-post__tag--substack { background: rgba(255,102,54,0.14); border-color: rgba(255,102,54,0.4); color: #ff8a5c; }
.blog-post__tag--medium { background: rgba(26,137,23,0.14); border-color: rgba(26,137,23,0.45); color: #4cc246; }

/* Contact */
.contact { padding: 180px 0 100px; }
.contact__heading { max-width: 900px; margin-bottom: 64px; }
.contact__heading h2 {
  font-size: clamp(40px, 6vw, 80px); line-height: 1.05; margin-bottom: 24px; font-weight: 300; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #fff, #8a92a4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.contact__heading .accent { color: var(--accent-teal); -webkit-text-fill-color: var(--accent-teal); }
/* Contact hero — two-column with portrait */
.contact-hero {
  display: grid;
  grid-template-columns: 1fr 408px;
  gap: 60px;
  align-items: center;
}
.contact-hero__text { min-width: 0; }
.contact-hero__text .project-header__lede { margin-bottom: 24px; }
.contact-hero__portrait {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(29,167,117,0.08);
}
.contact-hero__portrait.img-frame {
  aspect-ratio: auto;
  background: none;
  border-radius: 18px;
}
.contact-hero__portrait.img-frame::before { display: none; }
.contact-hero__portrait img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.contact-hero__portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}

.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 80px; }
.contact-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.contact-card:hover { transform: translateY(-3px); border-color: rgba(73,182,159,0.3); background: rgba(29,167,117,0.04); }
.contact-card__label { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--text-tertiary); text-transform: uppercase; }
.contact-card__value { font-size: 16px; color: var(--text); font-weight: 500; letter-spacing: -0.01em; }
.contact-card__hint { font-size: 11px; color: var(--text-tertiary); }

/* Project page footer: next-project teaser + small footer */
.next-project {
  margin-top: 120px; padding: 64px 0 40px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.next-project__row { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.next-project__label { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; color: var(--text-tertiary); text-transform: uppercase; margin-bottom: 12px; }
.next-project__title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 400; letter-spacing: -0.02em; color: var(--text); line-height: 1.15; }
.next-project__title a { position: relative; }
.next-project__title a::after { content: ' →'; color: var(--accent-teal); display: inline-block; transition: transform 0.3s var(--ease); }
.next-project__title a:hover::after { transform: translateX(6px); }
.next-project__title a:hover { color: var(--accent-teal); }

/* ============ UNIFIED FOOTER — 3-column balanced ============ */
.mast-footer {
  padding: 56px 0 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--mono);
}
.mast-footer__top {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 60px;
  align-items: start;
  padding-bottom: 32px;
  border-bottom: 1px dashed rgba(255,255,255,0.055);
}
.mast-footer__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mast-footer__col-title {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 3px;
  color: var(--text-tertiary); text-transform: uppercase;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px;
}
.mast-footer__col-title::after {
  content:''; flex: 1; height: 1px; background: rgba(255,255,255,0.05);
}
.mast-footer__brand {
  position: relative;
  display: inline-block;
  font-family: var(--mono); font-size: 13px; letter-spacing: 2.2px;
  font-weight: 500;
  background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue) 60%, var(--accent-purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mast-footer__brand .pulse-dot {
  position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  -webkit-text-fill-color: initial;
}
.mast-footer__role {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px;
  color: var(--text-tertiary); text-transform: uppercase;
}
.mast-footer__detail {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.4px;
  color: var(--text-secondary); font-weight: 400;
  transition: color 0.25s var(--ease); display: inline-block;
}
.mast-footer__detail:hover { color: var(--text); }

.mast-footer__links {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px;
}
.mast-footer__links a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  color: var(--text-secondary); text-transform: uppercase;
  transition: color 0.25s var(--ease);
  position: relative; padding-left: 14px;
}
.mast-footer__links a::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 6px; height: 1px; background: var(--text-muted);
  transition: width 0.3s var(--ease), background 0.3s var(--ease);
}
.mast-footer__links a:hover { color: var(--accent-teal); }
.mast-footer__links a:hover::before { width: 10px; background: var(--accent-teal); }

.mast-footer__socials {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.mast-footer__heart-coffee {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px;
  color: var(--text-tertiary); text-transform: uppercase;
  margin-top: 6px;
}

.mast-footer__bottom {
  padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.8px;
  color: var(--text-tertiary); text-transform: uppercase;
}
.mast-footer__bottom a {
  color: var(--text-tertiary); transition: color 0.25s var(--ease);
}
.mast-footer__bottom a:hover { color: var(--text-secondary); }
.mast-footer__bottom .msep {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: 0.5; display: inline-block; margin: 0 8px;
}
.mast-footer__bottom-left, .mast-footer__bottom-right {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.mast-footer__bottom-left .footer-craft { margin-right: 4px; }
.mast-footer__bottom-left .footer-heart,
.mast-footer__bottom-left .footer-coffee {
  margin: 0; padding: 0 1px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mast-footer__bottom-left .footer-heart svg,
.mast-footer__bottom-left .footer-coffee svg {
  width: 18px; height: 18px;
}
.mast-footer__bottom-left .footer-claude {
  margin: 0 0 0 4px;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.mast-footer__bottom-left .footer-claude img {
  width: 18px; height: 18px;
  object-fit: contain;
  vertical-align: middle;
}
.mast-footer__bottom-left .footer-claude .footer-claude-text {
  color: #D97757; letter-spacing: 1.2px;
}

@media (max-width: 960px) {
  .mast-footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .mast-footer__col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .mast-footer__top { grid-template-columns: 1fr; gap: 32px; }
  .mast-footer__col:first-child { grid-column: auto; }
  .mast-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Legacy footer (keeping for any leftover usage) */
footer.site-footer {
  padding: 48px 0 40px; border-top: 1px solid rgba(255,255,255,0.04);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  font-family: var(--mono); font-size: 11px; color: var(--text-tertiary); letter-spacing: 1.5px;
}
footer.site-footer .sep { width:4px; height:4px; border-radius:50%; background: var(--text-tertiary); display:inline-block; margin: 0 10px; opacity: 0.5; }
footer.site-footer .pulse-dot { width:6px; height:6px; border-radius:50%; background: var(--accent-teal); display:inline-block; margin: 0 8px; animation: pulse 2.4s ease-in-out infinite; }
footer.site-footer a { color: var(--text-tertiary); }
footer.site-footer a:hover { color: var(--text); }
.footer-links { display: flex; gap: 18px; }

/* ================= REVEAL ANIMATIONS ================= */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.1s; }
.reveal.d2 { transition-delay: 0.2s; }
.reveal.d3 { transition-delay: 0.3s; }
.reveal.d4 { transition-delay: 0.4s; }

/* @author Ashish Shendure | linkedin.com/in/ashishshendure */
/* ================= RESPONSIVE ================= */
@media (max-width: 1100px) {
  .project-card { grid-template-columns: 1fr; gap: 32px; padding: 44px 36px; min-height: 0; }
  .contact-hero { grid-template-columns: 1fr 280px; gap: 40px; }
  .stats-row, .contact-grid, .pillars { grid-template-columns: repeat(2, 1fr); }
  .timeline-card { grid-template-columns: 48px 1fr; }
  .timeline-card__title { grid-column: 2; }
  .timeline-card__chips { grid-column: 2; }
  .timeline-card__bullets { grid-column: 2; }
  .timeline-card__location { grid-column: 2; grid-row: 3; }
  .timeline-card__meta { grid-column: 2; grid-row: 1; }
  .about__intro { grid-template-columns: 1fr; gap: 48px; }
  .about__intro { margin-bottom: 80px; }
  .hero__meta { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .hero__meta-item:nth-child(4) { border-left: none; padding-left: 0; }
  .hero__meta-item { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.05); }
  .hero__meta-item:nth-child(-n+3) { border-top: none; }
  .resume-row, .blog__header, .next-project__row { grid-template-columns: 1fr; gap: 28px; }
  .story-block { grid-template-columns: 1fr; gap: 18px; }
  .story-block__kicker { position: static; }
  .insight-grid, .split-grid { grid-template-columns: 1fr; }
  .meta-grid { grid-template-columns: repeat(2, 1fr); }
  .patents-grid { grid-template-columns: 1fr; }
  /* Project page inline grids — force stack */
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1.6fr"] { grid-template-columns: 1fr !important; }
  /* Reduce large spacing */
  .work-grid { margin-top: 48px; }
  .project-content { padding: 80px 0 60px; }
  .project-header__cover { margin-bottom: 48px; }
  .story { margin-top: 80px; }
  .work { padding: 80px 0 60px; }
  .next-project { margin-top: 80px; }
}
@media (max-width: 680px) {
  .container { padding: 0 20px; }
  .nav { padding: 16px 20px; }
  .nav.scrolled { padding: 10px 20px; }
  .back-btn { top: 68px; left: 16px; padding: 8px 12px 8px 10px; font-size: 10px; }
  .nav__links { display: none; }
  section, .project-page, .about, .blog, .contact { padding: 80px 0; }
  .pause { padding: 80px 0; }
  .hero { padding: 130px 0 80px; }
  .hero h1 { font-size: clamp(28px, 7vw, 48px); }
  .hero__sub { font-size: 16px; margin-bottom: 36px; }
  .contact-hero { grid-template-columns: 1fr; gap: 32px; }
  .contact-hero__portrait { max-width: 300px; }
  .stats-row, .contact-grid, .pillars { grid-template-columns: 1fr; }
  .timeline-card { grid-template-columns: 36px 1fr; padding: 20px 8px; }
  .timeline-card__dot { width: 28px; height: 28px; }
  .timeline-card__dot svg { width: 12px; height: 12px; }
  .timeline-card__kicker-label { font-size: 7px !important; letter-spacing: 1.5px; }
  .timeline-card__title { grid-column: 2; font-size: 16px; }
  .timeline-card__title::after { font-size: 7px; padding: 2px 8px; }
  .timeline-card__chips { grid-column: 2; }
  .timeline-card__bullets { grid-column: 2; }
  .timeline-card__location { grid-column: 2; grid-row: 3; }
  .timeline-card__meta { grid-column: 2; grid-row: 1; }
  .timeline-grid::before { left: 18px; }
  .blog-post { grid-template-columns: 1fr; }
  .hero__meta { grid-template-columns: 1fr 1fr; gap: 0; }
  .hero__meta-item { padding: 12px 14px; }
  .hero__meta-item:nth-child(odd) { border-left: none; padding-left: 0; }
  .hero__meta-item:nth-child(even) { padding-right: 0; }
  .hero__meta-value { font-size: 20px; }
  .hero__meta-label { font-size: 9px; white-space: normal; }
  .meta-grid { grid-template-columns: 1fr; }
  .patent-card { grid-template-columns: 44px 1fr; padding: 18px 20px; }
  .patent-card__arrow { display: none; }
  .project-header__cover { aspect-ratio: 4/3; }
  /* Project card adjustments */
  .project-card { padding: 32px 24px; }
  .project-card__title { font-size: clamp(24px, 6vw, 36px); }
  .project-card__tagline { font-size: 15px; }
  .project-card__visual { aspect-ratio: 3/2; }
  .project-card__overlay { padding: 20px 18px 16px; }
  .overlay__item { grid-template-columns: 60px 1fr; gap: 8px; }
  .overlay__value { font-size: 12px; }
  .overlay__stat-val { font-size: 18px; }
  /* Project page inline grids — single column on mobile */
  [style*="grid-template-columns: repeat("] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.6fr"] { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* Reduce spacing further */
  .work-grid { margin-top: 36px; }
  .project-content { padding: 60px 0 40px; }
  .project-header__cover { margin-bottom: 36px; }
  .story { margin-top: 60px; }
  .story-block { gap: 12px; }
  .work { padding: 60px 0 40px; }
  .next-project { margin-top: 60px; }
  .about__intro { margin-bottom: 60px; gap: 32px; }
  .contact-grid { margin-bottom: 48px; }
  /* Auth gate */
  .auth-gate__card { max-width: calc(100vw - 48px); }
  /* Footer */
  .mast-footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
  .mast-footer__bottom-left, .mast-footer__bottom-right { justify-content: center; }
  /* MCP banner */
  .mcp-banner-label { font-size: 9px; letter-spacing: 1.5px; white-space: normal; text-align: center; line-height: 1.5; }
  /* About page bio grid */
  .about__bio { grid-template-columns: 1fr !important; gap: 24px !important; }
  /* Principles grid */
  .principles-grid { grid-template-columns: 1fr !important; }
  /* Philosophy illustration */
  .philosophy-arch { padding: 16px; }
  /* Pause quote */
  .pause__quote { font-size: clamp(22px, 5vw, 36px); }
  /* Marquee logos */
  .marquee-logo { height: 28px; }
}
@media (hover: none) { .cursor-spot { display:none; } }

/* ═══════════════════════════════════════════════════════════════
   © 2026 Ashish Shendure | ashishshendure.com
   All rights reserved. Unauthorized reproduction prohibited.
   ═══════════════════════════════════════════════════════════════ */