/* ==========================================
   Krishna Giri — Strategic Marketing Manager
   Premium • Minimal • Professional • Modern • Editorial
   Palette: Navy #071A33 / #0B2A4A / White / #F5F8FC / #EAF3FA / Accent #2F80ED
   ========================================== */

:root {
  --navy: #071A33;
  --navy-light: #0B2A4A;
  --white: #FFFFFF;
  --light-bg: #F5F8FC;
  --light-blue: #EAF3FA;
  --accent-blue: #2F80ED;
  --accent-blue-hover: #1E6BD6;
  --accent: #2F80ED;
  --accent-hover: #1E6BD6;
  --amber: #F59E0B;
  /* aliases for compatibility */
  --accent: #2F80ED;
  --accent-hover: #1E6BD6;

  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 5rem;

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

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --shadow-sm: 0 1px 2px 0 rgb(7 26 51 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(7 26 51 / 0.10);
  --shadow-lg: 0 20px 40px -16px rgb(7 26 51 / 0.18);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--gray-900);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--accent-blue); color: var(--white); }

/* ---------- layout ---------- */
.container { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 var(--space-6); }
.section { padding: var(--space-20) 0; }
.section-sm { padding: var(--space-12) 0; }
.section-lg { padding: var(--space-24) 0; }
.section-xl { padding: var(--space-32) 0; }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 800; line-height: 1.05; color: var(--navy); letter-spacing: -0.03em; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }
.lead { font-size: var(--text-lg); color: var(--gray-600); line-height: 1.8; }
.section-dark .lead { color: rgba(255,255,255,0.78); }
p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }
.section-tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--accent-blue); margin-bottom: var(--space-4);
}
.section-dark .section-tag { color: #8FBDF5; }
.section-header { max-width: 46rem; margin-bottom: var(--space-12); }
.section-header.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-title { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: var(--space-4); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-8); font-size: var(--text-sm); font-weight: 700;
  letter-spacing: 0.04em; border-radius: var(--radius-md);
  transition: transform 0.25s var(--ease), background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  white-space: nowrap; border: 2px solid transparent;
}
.btn:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 3px; }
.btn-primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-light); border-color: var(--navy-light); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: var(--white); transform: translateY(-2px); }
.btn-accent { background: var(--accent-blue); border-color: var(--accent-blue); color: var(--white); }
.btn-accent:hover { background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-light { background: transparent; border-color: var(--white); color: var(--white); }
.btn-light:hover { background: var(--white); color: var(--navy); transform: translateY(-2px); }
.btn-lg { padding: var(--space-5) var(--space-10); font-size: var(--text-base); }

/* ---------- nav ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
  transition: box-shadow 0.25s ease;
}
.header.scrolled { box-shadow: var(--shadow-sm); }
.nav { max-width: 80rem; margin: 0 auto; padding: var(--space-4) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.nav-logo { font-size: var(--text-lg); font-weight: 800; color: var(--navy); letter-spacing: 0.06em; }
.nav-links { display: flex; align-items: center; gap: var(--space-8); list-style: none; }
.nav-links a { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; color: var(--gray-700); position: relative; padding: var(--space-1) 0; }
.nav-links a:hover { color: var(--navy); }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0; background: var(--accent-blue); transition: width 0.25s var(--ease); }
.nav-links a:hover::after { width: 100%; }
.nav-actions { display: none; align-items: center; gap: var(--space-2); }
.theme-toggle-mobile { display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); background: var(--bg-soft);
  transition: all 0.25s ease; }
.theme-toggle-mobile:hover { border-color: var(--accent-blue); color: var(--accent-blue); transform: translateY(-1px); }
.theme-toggle-mobile svg { width: 18px; height: 18px; }
html[data-theme="light"] .theme-toggle-mobile .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle-mobile .icon-moon { display: none; }
@media (max-width: 64rem) {
  .nav-actions { display: flex; }
  .theme-toggle-mobile { display: inline-flex; }
}
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--space-2); }
.nav-toggle span { width: 24px; height: 2px; background: var(--navy); transition: transform 0.3s var(--ease), opacity 0.3s ease; }
@media (max-width: 64rem) {
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(20rem, 85vw);
    background: var(--white); flex-direction: column; align-items: flex-start;
    padding: var(--space-20) var(--space-6); gap: var(--space-6);
    transform: translateX(105%); transition: transform 0.32s var(--ease);
    box-shadow: var(--shadow-lg); z-index: 99;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: var(--text-base); }
  .nav-toggle { display: flex; z-index: 101; }
  .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
}

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; padding-top: 6rem; position: relative; overflow: hidden; background: var(--white); }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--light-bg) 0%, var(--white) 65%); z-index: 0; }
.hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-12); align-items: center; max-width: 80rem; margin: 0 auto; padding: var(--space-12) var(--space-6); width: 100%; }
.hero-eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.22em; color: var(--accent-blue); margin-bottom: var(--space-5); }
.hero-title { font-size: clamp(2.8rem, 7vw, 5.2rem); margin-bottom: var(--space-6); }
.hero-title span { display: block; overflow: hidden; }
.hero-title span > i { display: block; font-style: normal; animation: lineUp 0.9s var(--ease) both; }
.hero-title .line-2 > i { animation-delay: 0.12s; }
.hero-title .line-3 > i { animation-delay: 0.24s; }
.hero-tagline { font-size: var(--text-lg); color: var(--gray-600); max-width: 42ch; margin-bottom: var(--space-8); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--gray-500); font-size: var(--text-sm); margin-bottom: var(--space-8); }
.meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gray-300); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero-image { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/5; background: var(--light-blue); box-shadow: var(--shadow-lg); }
.hero-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 0.8s var(--ease); }
.hero-image:hover img { transform: scale(1.06); }
.hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,26,51,0.25) 100%); pointer-events: none; }
.hero-scroll { position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%); color: var(--gray-400); animation: bob 2.2s ease-in-out infinite; }
@keyframes lineUp { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: translateY(0); } }
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }
@media (max-width: 72rem) {
  .hero-content { grid-template-columns: 1fr; text-align: left; }
  .hero-image { max-width: 30rem; }
}

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.about-values { display: grid; gap: var(--space-6); margin-top: var(--space-10); }
.value { border-top: 1px solid var(--gray-200); padding-top: var(--space-5); }
.value-title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.value-desc { color: var(--gray-600); margin: 0; }
@media (max-width: 64rem) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- stats ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); text-align: left; }
.stat-number { display: block; font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: var(--space-2); }
.stat-label { font-size: var(--text-sm); opacity: 0.82; line-height: 1.5; }
@media (max-width: 64rem) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .stats-grid { grid-template-columns: 1fr; } }

/* ---------- experience timeline ---------- */
.timeline { position: relative; max-width: 56rem; }
.timeline::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--gray-200); }
.timeline-item { position: relative; padding: 0 0 var(--space-8) var(--space-12); }
.timeline-dot { position: absolute; left: 0; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 3px solid var(--navy); }
.timeline-card { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: var(--space-6); transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.timeline-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #3B82F6, #8B5CF6, #22D3EE, #F59E0B); background-size: 200% 100%; transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.timeline-card:hover { border-color: var(--accent-blue); box-shadow: 0 0 0 1px var(--accent-blue), var(--shadow-md); transform: translateY(-3px); }
.timeline-card:hover::before { transform: scaleX(1); }
.timeline-item.open .timeline-dot { border-color: var(--accent-blue); animation: dotPulse 0.6s cubic-bezier(0.16,1,0.3,1); }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(47,128,237,0.55); } 100% { box-shadow: 0 0 0 14px rgba(47,128,237,0); } }
.timeline-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-4); }
.timeline-role { font-size: var(--text-xl); font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.timeline-period { margin-left: auto; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-blue); background: var(--light-blue); padding: var(--space-1) var(--space-3); border-radius: 999px; white-space: nowrap; }
.timeline-org { color: var(--gray-600); font-weight: 600; margin: var(--space-1) 0 var(--space-2); }
.timeline-loc { color: var(--gray-500); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.timeline-detail { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; border-top: 1px solid transparent; padding-top: 0; color: var(--gray-700); transition: grid-template-rows 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease, margin-top 0.4s ease, padding-top 0.4s ease, border-color 0.4s ease; }
.timeline-detail > ul { overflow: hidden; min-height: 0; }
.timeline-item.open .timeline-detail { grid-template-rows: 1fr; opacity: 1; margin-top: var(--space-4); border-top-color: var(--gray-200); padding-top: var(--space-4); }
.timeline-detail ul { margin: 0 0 0 var(--space-5); display: grid; gap: var(--space-2); }
.timeline-detail ul li { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.timeline-item.open .timeline-detail ul li { opacity: 1; transform: none; }
.timeline-item.open .timeline-detail ul li:nth-child(1) { transition-delay: 0.08s; }
.timeline-item.open .timeline-detail ul li:nth-child(2) { transition-delay: 0.14s; }
.timeline-item.open .timeline-detail ul li:nth-child(3) { transition-delay: 0.2s; }
.timeline-item.open .timeline-detail ul li:nth-child(4) { transition-delay: 0.26s; }
.timeline-item.open .timeline-detail ul li:nth-child(5) { transition-delay: 0.32s; }
.timeline-item.open .timeline-detail ul li:nth-child(6) { transition-delay: 0.38s; }
.timeline-item.open .timeline-detail ul li:nth-child(7) { transition-delay: 0.44s; }
.timeline-toggle { margin-top: var(--space-4); font-size: var(--text-sm); font-weight: 700; color: var(--accent-blue); display: inline-flex; align-items: center; gap: var(--space-2); }
.timeline-toggle:hover { color: var(--accent-blue-hover); }
.timeline-toggle .chev { transition: transform 0.25s var(--ease); }
.timeline-item.open .timeline-toggle .chev { transform: rotate(180deg); }

/* ---------- expertise ---------- */
.expertise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--gray-200); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; }
.expertise-item { background: var(--white); padding: var(--space-8); display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; transition: background 0.25s ease; position: relative; }
.expertise-item:hover .exp-title { color: #071A33; }
.expertise-item:hover .exp-desc { color: #3D4F63; }
.exp-num { font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.14em; color: var(--accent-blue); border: 1px solid currentColor; border-radius: 999px; padding: var(--space-1) var(--space-3); white-space: nowrap; transition: transform 0.25s var(--ease); }
.expertise-item:hover .exp-num { transform: translateX(4px); }
.exp-title { font-size: var(--text-xl); margin-bottom: var(--space-2); transition: transform 0.25s var(--ease); }
.expertise-item:hover .exp-title { transform: translateX(4px); }
.exp-desc { color: var(--gray-600); font-size: var(--text-base); margin: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.35s var(--ease), opacity 0.3s ease, margin 0.3s ease; }
.expertise-item:hover .exp-desc, .expertise-item:focus-within .exp-desc { max-height: 12rem; opacity: 1; margin-top: var(--space-2); }
@media (max-width: 64rem) { .expertise-grid { grid-template-columns: 1fr; } }

/* ---------- events ---------- */
.event-content { max-width: 52rem; }
.event-content .section-title { color: var(--white); }
.event-tags { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.event-tag { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; color: var(--white); border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; padding: var(--space-2) var(--space-5); }

/* ---------- education ---------- */
.education-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.education-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: var(--space-8); transition: box-shadow 0.25s ease, transform 0.25s var(--ease); }
.education-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.education-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--light-blue); color: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); }
.education-degree { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.education-institution { font-weight: 700; color: var(--gray-700); }
.education-detail { color: var(--gray-600); }
.education-period { display: inline-block; margin-top: var(--space-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-blue); }
@media (max-width: 64rem) { .education-grid { grid-template-columns: 1fr; } }

/* ---------- linkedin / final cta ---------- */
.linkedin-cta, .final-cta { text-align: left; max-width: 56rem; }
.final-cta-title { font-size: clamp(2.8rem, 7vw, 5.5rem); color: var(--white); margin-bottom: var(--space-6); }
.final-cta-text { color: rgba(255,255,255,0.78); font-size: var(--text-lg); max-width: 44ch; margin-bottom: var(--space-8); }
.final-cta-buttons { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
.contact-methods { margin: var(--space-8) 0; display: grid; gap: var(--space-6); }
.method-label { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400); margin-bottom: var(--space-1); }
.method-value { color: var(--gray-800); font-weight: 600; }
.method-value a:hover { color: var(--accent-blue); }
.social-links { display: flex; gap: var(--space-3); }
.social-link { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray-200); border-radius: var(--radius-md); color: var(--gray-600); transition: all 0.2s ease; }
.social-link:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.contact-form { background: var(--light-bg); padding: var(--space-8); border-radius: var(--radius-lg); border: 1px solid var(--gray-200); }
.form-group { margin-bottom: var(--space-5); }
.form-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--gray-700); margin-bottom: var(--space-2); }
.form-input, .form-textarea, .form-select { width: 100%; padding: var(--space-3) var(--space-4); font-size: var(--text-base); color: var(--gray-900); background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius-md); }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(47,128,237,0.15); }
.form-textarea { min-height: 130px; resize: vertical; }
.form-note { text-align: center; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--gray-500); }
@media (max-width: 72rem) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.footer { background: var(--navy); color: var(--gray-300); padding: var(--space-12) 0; }
.footer-content { max-width: 80rem; margin: 0 auto; padding: 0 var(--space-6); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.footer-logo { font-size: var(--text-lg); font-weight: 800; color: var(--white); letter-spacing: 0.06em; }
.footer-links { display: flex; gap: var(--space-6); list-style: none; flex-wrap: wrap; }
.footer-links a { font-size: var(--text-sm); color: var(--gray-400); }
.footer-links a:hover { color: var(--white); }
.footer-copyright { font-size: var(--text-xs); color: var(--gray-500); width: 100%; margin-top: var(--space-4); }
@media (max-width: 48rem) { .footer-content { flex-direction: column; text-align: center; justify-content: center; } }

/* ---------- modal: hidden by default (critical fix) ---------- */
.modal { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(7,26,51,0.62); align-items: center; justify-content: center; padding: var(--space-6); overflow-y: auto; }
.modal.open { display: flex; }
.modal-content { background: var(--white); border-radius: var(--radius-lg); max-width: 56rem; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.modal-close { position: absolute; top: var(--space-4); right: var(--space-4); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--gray-500); z-index: 2; background: var(--white); }
.modal-close:hover { background: var(--gray-100); color: var(--navy); }
.modal-body { padding: var(--space-8); overflow-y: auto; max-height: 78vh; }
.modal-image { width: 100%; height: 22rem; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-6); }

/* ---------- reveal (safe: visible without JS) ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.active { opacity: 1; transform: translateY(0); }
.js .reveal-delay-1 { transition-delay: 0.08s; }
.js .reveal-delay-2 { transition-delay: 0.16s; }
.js .reveal-delay-3 { transition-delay: 0.24s; }
.js .reveal-delay-4 { transition-delay: 0.32s; }

/* ---------- utilities ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); background: var(--navy); color: var(--white); padding: var(--space-3) var(--space-6); font-weight: 600; border-radius: var(--radius-md); z-index: 10000; }
.skip-link:focus { top: var(--space-4); }
*:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   MAJOR VISUAL UPGRADE — themes, display type, decor, hero,
   intro, transitions, cursor, parallax, motion
   ============================================================ */

/* ---------- theme tokens ---------- */
html[data-theme="light"] {
  --bg: #F7FAFC; --bg-soft: #FFFFFF; --bg-tint: #EAF3FA;
  --ink: #071A33; --ink-2: #425466; --ink-3: #6B7C93;
  --line: #E2E8F0; --card: #FFFFFF;
  --glow-a: rgba(47,128,237,0.16); --glow-b: rgba(139,92,246,0.12);
}
html[data-theme="dark"] {
  --bg: #030712; --bg-soft: #08111F; --bg-tint: #0D1726;
  --ink: #F8FAFC; --ink-2: #AFC4D8; --ink-3: #8293A8;
  --line: rgba(175,196,216,0.16); --card: #0D1726;
  --glow-a: rgba(59,130,246,0.28); --glow-b: rgba(139,92,246,0.22);
}
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink-2); transition: background 0.6s ease, color 0.6s ease; }
h1, h2, h3 { color: var(--ink); transition: color 0.6s ease; }
.lead { color: var(--ink-2); }
.header { background: color-mix(in srgb, var(--bg-soft) 88%, transparent); border-bottom: 1px solid var(--line); }
.nav-logo { color: var(--ink); }
.nav-links a { color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.footer { background: #030712; }
.theme-flash { position: fixed; inset: 0; pointer-events: none; z-index: 2000; opacity: 0;
  background: radial-gradient(600px circle at var(--fx,50%) var(--fy,50%), var(--glow-a), transparent 70%); }
.theme-flash.go { animation: flashGo 0.7s ease; }
@keyframes flashGo { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.theme-toggle { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--line);
  border-radius: 999px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.1em; color: var(--ink-2); background: var(--bg-soft); transition: all 0.25s ease; }
.theme-toggle:hover { border-color: var(--accent-blue); color: var(--ink); }
.theme-toggle .dot { width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #8B5CF6); box-shadow: 0 0 12px var(--glow-a); }
html[data-theme="dark"] .theme-toggle .dot { background: linear-gradient(135deg, #22D3EE, #3B82F6); }

/* ---------- display type + decor ---------- */
.font-display, .hero-title, .section-title, .final-cta-title, .stat-number, .exp-num { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; }
.meta-label { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.meta-label .bracket { color: var(--accent-blue); }
.bg-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 60% at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, black 30%, transparent 75%); }
.bg-glow { position: absolute; pointer-events: none; filter: blur(60px); border-radius: 50%; }
#bgCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; }
main, header.header, footer.footer { position: relative; z-index: 1; }
.corner-frame { position: relative; }
.corner-frame::before, .corner-frame::after { content: ''; position: absolute; width: 18px; height: 18px; border: 1px solid var(--accent-blue); opacity: 0.7; }
.corner-frame::before { top: -8px; left: -8px; border-right: none; border-bottom: none; }
.corner-frame::after { bottom: -8px; right: -8px; border-left: none; border-top: none; }

/* ---------- immersive hero ---------- */
.hero-title { font-size: clamp(3.2rem, 9vw, 7.5rem); }
.hero-title .accent-word { background: linear-gradient(100deg, #3B82F6, #8B5CF6 60%, #22D3EE); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-title span > i { display: block; font-style: normal; animation: lineUp 0.9s cubic-bezier(0.16,1,0.3,1) both; }
.hero-title .line-2 > i { animation-delay: 0.12s; }
.hero-title .line-3 > i { animation-delay: 0.24s; }
@keyframes lineUp { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: translateY(0); } }
.hero-visual { position: relative; }
.hero-3d { position: absolute; inset: -8% -12% auto auto; width: min(30rem, 60%); aspect-ratio: 1; pointer-events: none; z-index: 0; }
.orb { position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(34,211,238,0.5), rgba(59,130,246,0.28) 45%, rgba(139,92,246,0.18) 70%, transparent 75%);
  border: 1px solid rgba(147,197,253,0.35);
  box-shadow: 0 0 80px var(--glow-a), inset 0 0 60px rgba(59,130,246,0.18);
  animation: orbSpin 22s linear infinite; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(147,197,253,0.4); animation: orbSpin 30s linear infinite reverse; }
.ring.r2 { inset: 8%; animation-duration: 40s; opacity: 0.7; }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.float-chip { position: absolute; z-index: 3; background: color-mix(in srgb, var(--bg-soft) 82%, transparent);
  backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em;
  box-shadow: var(--shadow-md); animation: floatY 6s ease-in-out infinite; }
.float-chip { transition: opacity 0.2s ease; }
.float-chip.c1 { top: 6%; left: -4%; }
.float-chip.c2 { bottom: 10%; right: -3%; animation-delay: -3s; }
.float-chip b { color: var(--accent-blue); }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- intro + page transition + cursor ---------- */
#introOverlay { position: fixed; inset: 0; z-index: 3000; background: #030712; color: #F8FAFC;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-4);
  transition: opacity 0.5s ease, visibility 0.5s ease; }
#introOverlay.done { opacity: 0; visibility: hidden; }
.intro-name { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: 0.28em; }
.intro-sub { font-size: var(--text-xs); letter-spacing: 0.34em; color: #8FBDF5; }
.intro-line { width: 0; height: 2px; background: linear-gradient(90deg, #3B82F6, #8B5CF6, #22D3EE); animation: introLine 1s cubic-bezier(0.16,1,0.3,1) 0.15s forwards; }
@keyframes introLine { to { width: min(22rem, 60vw); } }
.intro-skip { position: absolute; bottom: var(--space-8); font-size: var(--text-xs); letter-spacing: 0.2em; color: #8293A8; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: var(--space-2) var(--space-5); }
.intro-skip:hover { color: #fff; border-color: #fff; }
#pageTransition { position: fixed; inset: 0; z-index: 2500; pointer-events: none;
  background: linear-gradient(100deg, #071A33, #1D4ED8 55%, #7C3AED); clip-path: inset(0 100% 0 0); }
#pageTransition.sweep { animation: sweep 0.65s cubic-bezier(0.16,1,0.3,1); }
@keyframes sweep { 0% { clip-path: inset(0 100% 0 0); } 45% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
#cursorDot, #cursorRing { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 2600; border-radius: 50%; }
#cursorDot { width: 8px; height: 8px; background: var(--accent-blue); transform: translate(-50%,-50%); }
#cursorRing { width: 34px; height: 34px; border: 1px solid var(--accent-blue); opacity: 0.7; transform: translate(-50%,-50%);
  transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease, background 0.25s ease;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: var(--white); }
#cursorRing.is-hover { width: 56px; height: 56px; opacity: 1; background: rgba(47,128,237,0.16); }
#cursorRing.is-view { width: 76px; height: 76px; background: var(--accent-blue); border-color: var(--accent-blue); opacity: 1; }
#cursorRing.is-view::after { content: 'VIEW'; }
@media (hover: none), (pointer: coarse) { #cursorDot, #cursorRing { display: none; } }

/* ---------- section continuity ---------- */
.glow-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--accent-blue), #8B5CF6, transparent); opacity: 0.55; }

/* ---------- central experience timeline ---------- */
.timeline { max-width: 64rem; }
.timeline::before { left: 50%; transform: translateX(-50%); background: var(--line); }
.timeline-progress { position: absolute; left: 50%; transform: translateX(-50%); top: 8px; width: 2px; height: 0;
  background: linear-gradient(180deg, #3B82F6, #8B5CF6, #22D3EE); box-shadow: 0 0 16px var(--glow-a); }
.timeline-item { position: relative; padding: 0 0 var(--space-8) 0; width: 50%; }
.timeline-item:nth-child(odd of .timeline-item) { padding-right: var(--space-10); text-align: right; }
.timeline-item:nth-child(even of .timeline-item) { margin-left: 50%; padding-left: var(--space-10); }
.timeline-dot { left: auto; }
.timeline-item:nth-child(odd of .timeline-item) .timeline-dot { right: -12px; }
.timeline-item:nth-child(even of .timeline-item) .timeline-dot { left: -12px; }
.timeline-card { text-align: left; }
.timeline-card:hover { transform: translateX(6px); border-color: var(--accent-blue); box-shadow: 0 0 0 1px var(--accent-blue), var(--shadow-md); }
@media (max-width: 64rem) {
  .timeline::before, .timeline-progress { left: 11px; transform: none; }
  .timeline-item, .timeline-item:nth-child(odd of .timeline-item), .timeline-item:nth-child(even of .timeline-item) {
    width: 100%; margin-left: 0; padding: 0 0 var(--space-8) var(--space-12); text-align: left; }
  .timeline-item:nth-child(odd of .timeline-item) .timeline-dot,
  .timeline-item:nth-child(even of .timeline-item) .timeline-dot { left: 0; right: auto; }
}

/* ---------- expertise glow ---------- */
.expertise-grid { gap: 1px; }
.expertise-item { overflow: hidden; position: relative; }
.expertise-item::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #3B82F6, #8B5CF6); transform: scaleY(0); transform-origin: top; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.expertise-item:hover::after { transform: scaleY(1); }
.exp-num { font-size: var(--text-2xl); }

/* ---------- readability ---------- */
p, .value-desc, .timeline-desc, .exp-desc, .education-detail { max-width: 72ch; }
.form-input, .form-textarea, .form-select { font-size: 16px; }

/* ---------- responsive motion ---------- */
@media (max-width: 64rem) {
  .hero-3d, .float-chip, #bgCanvas { display: none; }
  .hero { min-height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-3d, .float-chip, #bgCanvas, #cursorDot, #cursorRing, #introOverlay { display: none !important; }
}

/* ============================================================
   DARK MODE READABILITY + PREMIUM COLOR PLAY (fix pass)
   ============================================================ */
html[data-theme="dark"] {
  --light-bg: #0B1526;
  --light-blue: #10233D;
}
html[data-theme="dark"] .hero-tagline { color: #C4D3E6; }
html[data-theme="dark"] .hero-meta { color: #8FA3BC; }
html[data-theme="dark"] .hero-eyebrow { color: #7DB4FB; }
html[data-theme="dark"] .btn-primary { background: var(--accent-blue); border-color: var(--accent-blue); }
html[data-theme="dark"] .btn-primary:hover { background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); }
html[data-theme="dark"] .btn-secondary { color: #F8FAFC; border-color: rgba(248,250,252,0.45); }
html[data-theme="dark"] .btn-secondary:hover { background: #F8FAFC; color: #071A33; border-color: #F8FAFC; }
html[data-theme="dark"] .timeline-year { color: #F8FAFC; }
html[data-theme="dark"] .section-dark .section-title,
html[data-theme="dark"] .event-content .section-title,
html[data-theme="dark"] .final-cta-title,
html[data-theme="dark"] .linkedin-cta .section-title { color: #FFFFFF; }
html[data-theme="dark"] .nav-links { background: #08111F; }
html[data-theme="dark"] .contact-form { background: #0D1726; border-color: var(--line); }
html[data-theme="dark"] .form-label { color: #C4D3E6; }
html[data-theme="dark"] .form-input, html[data-theme="dark"] .form-textarea, html[data-theme="dark"] .form-select {
  background: #030712; border-color: rgba(175,196,216,0.25); color: #F8FAFC; }
html[data-theme="dark"] .method-value { color: #DCE6F2; }
html[data-theme="dark"] .social-link { border-color: rgba(175,196,216,0.3); color: #AFC4D8; }
html[data-theme="dark"] .about-text p, html[data-theme="dark"] .value-desc { color: #AFC4D8; }
html[data-theme="dark"] .value { border-top-color: var(--line); }
html[data-theme="dark"] .value-title { color: #F8FAFC; }
html[data-theme="dark"] .modal-content { background: #0D1726; }
html[data-theme="dark"] .modal-close { background: #0D1726; }

/* amber used sparingly: stat rule + timeline pills + eyebrow brackets */
.stat { position: relative; padding-top: var(--space-4); }
.stat::before { content: ''; position: absolute; top: 0; left: 0; width: 2.5rem; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #F59E0B, #3B82F6); }
.timeline-period { background: linear-gradient(100deg, rgba(47,128,237,0.16), rgba(139,92,246,0.16)); color: var(--accent-blue); border: 1px solid rgba(47,128,237,0.35); }
html[data-theme="dark"] .timeline-period { color: #9CC3FA; }

/* ---------- hero: watermark, tilt, shine, second orb, beam ---------- */
.hero-watermark { position: absolute; z-index: 0; left: 50%; top: 8%; transform: translateX(-50%);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(6rem, 18vw, 17rem);
  letter-spacing: 0.02em; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(47,128,237,0.16);
  pointer-events: none; user-select: none; white-space: nowrap; }
html[data-theme="dark"] .hero-watermark { -webkit-text-stroke-color: rgba(147,197,253,0.16); }
.hero-visual { perspective: 1200px; }
.hero-tilt { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); transform-style: preserve-3d; will-change: transform; }
.hero-image .shine { position: absolute; inset: -40%; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.28) 50%, transparent 58%);
  transform: translateX(-70%); }
.hero-image:hover .shine { animation: shineSweep 1s cubic-bezier(0.16,1,0.3,1); }
@keyframes shineSweep { to { transform: translateX(70%); } }
.orb.orb2 { inset: 24%; animation-duration: 16s; animation-direction: reverse;
  background: radial-gradient(circle at 65% 65%, rgba(245,158,11,0.22), rgba(139,92,246,0.20) 50%, transparent 72%);
  border-color: rgba(245,158,11,0.25); }
.hero-beam { position: absolute; z-index: 0; top: -12%; bottom: -12%; left: 8%; width: 120px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(34,211,238,0.14) 40%, rgba(59,130,246,0.16) 60%, transparent);
  filter: blur(18px); transform: rotate(12deg); animation: beamSway 9s ease-in-out infinite; }
@keyframes beamSway { 0%,100% { opacity: 0.6; transform: rotate(12deg) translateX(0); } 50% { opacity: 1; transform: rotate(12deg) translateX(26px); } }
.photo-caption { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.photo-caption .tick { flex: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-tilt { transition: none; }
  .hero-image:hover .shine { animation: none; }
  .hero-beam { animation: none; }
}

/* ============================================================
   POSTER HERO — gradient border, rotating badge, marquee
   ============================================================ */
.poster-frame { padding: 10px; background: linear-gradient(135deg, #3B82F6, #8B5CF6 35%, #22D3EE 60%, #F59E0B 100%); }
.poster-frame img { border-radius: calc(var(--radius-xl) - 6px); }
.poster-frame::before, .poster-frame::after { z-index: 4; }
.poster-badge { position: absolute; z-index: 5; top: -44px; right: -30px; width: 118px; height: 118px; }
.poster-badge svg { width: 100%; height: 100%; animation: orbSpin 18s linear infinite; }
.poster-badge text { font-size: 11.5px; font-weight: 800; letter-spacing: 2.6px; fill: var(--navy); font-family: 'Space Grotesk', sans-serif; }
html[data-theme="dark"] .poster-badge text { fill: #F8FAFC; }
.poster-badge-core { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--white);
  width: 52px; height: 52px; margin: auto; border-radius: 50%;
  background: linear-gradient(135deg, #1D4ED8, #7C3AED); box-shadow: 0 10px 30px rgba(29,78,216,0.45); }
.poster-plate { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4);
  background: var(--navy); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-md); position: relative; z-index: 2; }
.poster-plate::before { content: ''; width: 34px; height: 3px; border-radius: 3px; flex: none;
  background: linear-gradient(90deg, #F59E0B, #3B82F6); }
.poster-plate-tag { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.14em; color: #FBBF24; white-space: nowrap; }
.poster-plate-text { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.85); }

/* shimmer sweep on the accent word */
.hero-title .accent-word > i {
  background: linear-gradient(100deg, #3B82F6 20%, #8B5CF6 40%, #22D3EE 50%, #8B5CF6 60%, #3B82F6 80%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmerSlide 5s ease-in-out infinite; animation-delay: 1.4s;
}
@keyframes shimmerSlide { 0% { background-position: 120% 0; } 55%, 100% { background-position: -120% 0; } }

/* marquee strip */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-soft); padding: var(--space-4) 0; position: relative; z-index: 1; }
.marquee-track { display: inline-flex; align-items: center; gap: var(--space-8); white-space: nowrap;
  padding-right: var(--space-8); animation: marqueeScroll 26s linear infinite; will-change: transform; }
.marquee-track span { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: var(--text-lg);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.marquee-track i { font-style: normal; color: var(--accent-blue); font-size: var(--text-base); }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll { to { transform: translateX(-50%); } }

/* scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1500; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #3B82F6, #8B5CF6, #22D3EE, #F59E0B); }

@media (max-width: 64rem) {
  .poster-badge { top: -30px; right: -8px; width: 96px; height: 96px; }
  .marquee-track span { font-size: var(--text-base); }
}
@media (prefers-reduced-motion: reduce) {
  .poster-badge svg, .marquee-track { animation: none !important; }
  .hero-title .accent-word > i { animation: none; }
}

/* ============================================================
   FIX PASS — dark readability, cursor, mobile menu, arrival
   ============================================================ */
/* white cards keep dark ink in every theme */
.expertise-item .exp-title, .education-degree { color: #071A33 !important; }
/* footer socials on navy — rotating gradient ring loop + wave */
.footer .social-links { align-items: center; }
.footer .social-link { position: relative; isolation: isolate;
  border-color: rgba(255,255,255,0.16); color: #AFC4D8; background: rgba(255,255,255,0.05);
  animation: socialFloat 3.6s ease-in-out infinite; }
.footer .social-link:nth-child(2) { animation-delay: 0.3s; }
.footer .social-link:nth-child(3) { animation-delay: 0.6s; }
.footer .social-link:nth-child(4) { animation-delay: 0.9s; }
.footer .social-link:nth-child(5) { animation-delay: 1.2s; }
.footer .social-link::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--aurora-angle, 0deg), #3B82F6, #8B5CF6, #22D3EE, #F59E0B, #3B82F6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.55; animation: edgeSpin 4.5s linear infinite; pointer-events: none; }
.footer .social-link:hover { transform: translateY(-3px) scale(1.08); background: rgba(47,128,237,0.22);
  border-color: transparent; color: #fff; animation-play-state: paused;
  box-shadow: 0 12px 28px -10px rgba(59,130,246,0.6); }
.footer .social-link:hover::before { opacity: 1; }
@keyframes socialFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) {
  .footer .social-link, .footer .social-link::before { animation: none !important; }
}
.exp-desc { max-height: none !important; opacity: 1 !important; margin-top: var(--space-2) !important; }
/* remove the VIEW cursor text */
#cursorRing.is-view { width: 56px; height: 56px; background: rgba(47,128,237,0.16); border-color: var(--accent-blue); opacity: 1; }
#cursorRing.is-view::after { content: none !important; }
/* portrait hover: glow + faster badge instead of cursor text */
.hero-image { transition: box-shadow 0.45s ease; }
.hero-image:hover { box-shadow: 0 30px 70px -18px rgba(29,78,216,0.5); }
.hero-visual:hover .poster-badge svg { animation-duration: 5s; }
.hero-visual:hover .orb { animation-duration: 10s; }
/* light-mode hero background clearly visible */
html[data-theme="light"] .bg-grid { opacity: 0.85; }
html[data-theme="light"] .hero::before { background: linear-gradient(180deg, #EAF3FA 0%, #F7FAFC 45%, #FFFFFF 78%); }
/* mobile menu: links stagger in one by one */
@media (max-width: 64rem) {
  .nav-links.open li { opacity: 0; animation: menuItemIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: 0.07s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.14s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.21s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.28s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.35s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.42s; }
  .nav-links.open li:nth-child(7) { animation-delay: 0.49s; }
}
@keyframes menuItemIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
/* arrival flourish after nav scroll */
.section-arrive .section-title { animation: arrivePop 0.7s cubic-bezier(0.16,1,0.3,1); }
@keyframes arrivePop { 0% { opacity: 0.25; transform: translateY(16px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-links.open li { opacity: 1 !important; animation: none !important; }
  .section-arrive .section-title { animation: none; }
}

/* ============================================================
   FINAL PASS — readability extras, aurora CTA, word cascade
   ============================================================ */
html[data-theme="dark"] .lead { color: #AFC4D8; }
html[data-theme="dark"] .section-tag { color: #7DB4FB; }
html[data-theme="dark"] .photo-caption { color: #8FA3BC; }
html[data-theme="dark"] .hero-scroll { color: #5E7189; }
html[data-theme="dark"] .form-note { color: #8FA3BC; }
html[data-theme="dark"] .footer-copyright { color: #5E7189; }

/* aurora Let's Talk — animated gradient border + glow pulse */
@property --aurora-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.nav .btn-primary { position: relative; isolation: isolate; }
.nav .btn-primary::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--aurora-angle, 0deg), #3B82F6, #8B5CF6, #22D3EE, #F59E0B, #3B82F6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
}
.nav .btn-primary:hover::after { opacity: 1; animation: auroraSpin 3.2s linear infinite; }
.nav .btn-primary:hover { box-shadow: 0 8px 28px -8px rgba(59,130,246,0.55); }
@keyframes auroraSpin { to { --aurora-angle: 360deg; } }

/* ---------- expertise: gradient flow + cross-edge hover (unique) ---------- */
.expertise-item { isolation: isolate; }
.expertise-item::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(59,130,246,0.16) 46%, rgba(139,92,246,0.18) 54%, rgba(34,211,238,0.14) 62%, transparent 74%);
  background-size: 280% 100%; background-position: 130% 0;
  transition: background-position 0.9s cubic-bezier(0.16,1,0.3,1);
}
.expertise-item:hover::before { background-position: -130% 0; }
.expertise-item > * { position: relative; z-index: 1; }
.expertise-item:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -16px rgba(29,78,216,0.4); }
.expertise-item:hover .exp-num {
  background: linear-gradient(100deg, #3B82F6, #8B5CF6 55%, #22D3EE);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  border-color: rgba(47,128,237,0.5);
}
.exp-cross { position: absolute; width: 16px; height: 16px; z-index: 2; pointer-events: none;
  opacity: 0; transform: scale(0.4) rotate(45deg); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1); }
.exp-cross::before, .exp-cross::after { content: ''; position: absolute; background: linear-gradient(90deg, #3B82F6, #8B5CF6); border-radius: 2px; }
.exp-cross::before { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.exp-cross::after { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.exp-cross.tl { top: 10px; left: 10px; }
.exp-cross.tr { top: 10px; right: 10px; }
.exp-cross.bl { bottom: 10px; left: 10px; }
.exp-cross.br { bottom: 10px; right: 10px; }
.expertise-item:hover .exp-cross { opacity: 1; transform: scale(1) rotate(0deg); }
.expertise-item:hover .exp-cross.tr { transition-delay: 0.06s; }
.expertise-item:hover .exp-cross.bl { transition-delay: 0.09s; }
.expertise-item:hover .exp-cross.br { transition-delay: 0.12s; }

/* ============================================================
   HERO readability + header CTA aurora + expertise edge spin
   ============================================================ */
.hero-eyebrow { border: 1px solid rgba(47,128,237,0.35); background: color-mix(in srgb, var(--accent-blue) 8%, transparent);
  padding: var(--space-2) var(--space-4); border-radius: 999px; }
html[data-theme="dark"] .hero-eyebrow { background: rgba(47,128,237,0.14); border-color: rgba(125,180,251,0.4); }
.hero-tagline { color: #3D4F63; font-weight: 500; }
html[data-theme="dark"] .hero-tagline { color: #D7E3F2; }
.hero-meta { color: #51637A; font-weight: 600; }
html[data-theme="dark"] .hero-meta { color: #A9BCD4; }
.hero-meta .meta-dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #3B82F6, #8B5CF6); box-shadow: 0 0 10px rgba(59,130,246,0.7); }

/* header Let's Talk: gradient + aurora ring + glow */
.nav .btn-primary { position: relative;
  background: linear-gradient(100deg, #2F80ED, #6366F1); border-color: transparent; color: #fff;
  box-shadow: 0 8px 22px -8px rgba(47,128,237,0.55); }
.nav .btn-primary:hover { background: linear-gradient(100deg, #1E6BD6, #7C3AED); border-color: transparent; color: #fff;
  transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(99,102,241,0.65); }

/* expertise: spinning conic edge + punchier text */
.exp-desc { color: #3D4F63; }
.expertise-item:hover {
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--aurora-angle, 0deg), #3B82F6, #8B5CF6, #22D3EE, #F59E0B, #3B82F6) border-box;
  animation: edgeSpin 3s linear infinite;
}
@keyframes edgeSpin { to { --aurora-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .expertise-item:hover { animation: none; }
}

/* ============================================================
   PHOTO DECK — 3D fan: front center, left tilt, right tilt
   ============================================================ */
.deck { position: relative; aspect-ratio: 4/5.4; perspective: 1400px; animation: deckIn 1.1s cubic-bezier(0.16,1,0.3,1) 0.35s backwards; }
@keyframes deckIn { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
.deck:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 6px; border-radius: var(--radius-xl); }
.deck .hero-image { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; animation: none; opacity: 1; transform: none; }
.deck .pcard .poster-plate { flex: none; }
.pcard { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform 0.75s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease, filter 0.5s ease;
  transform-style: preserve-3d; will-change: transform; }
.deck .hero-image { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.pcard[data-pos="front"] { transform: translateX(0) rotateY(0deg) scale(1); z-index: 3; opacity: 1; filter: none; }
.pcard[data-pos="front"] .hero-image { box-shadow: 0 34px 70px -22px rgba(7,26,51,0.42); }
.pcard[data-pos="left"] { transform: translateX(-13%) rotateY(6deg) rotate(-3deg) scale(0.9) translateZ(-70px); z-index: 2; opacity: 0.96; filter: brightness(0.88) saturate(0.92); cursor: pointer; }
.pcard[data-pos="right"] { transform: translateX(13%) rotateY(-6deg) rotate(3deg) scale(0.9) translateZ(-70px); z-index: 2; opacity: 0.96; filter: brightness(0.88) saturate(0.92); cursor: pointer; }
.pcard[data-pos="back"] { transform: translateY(5%) scale(0.8); z-index: 1; opacity: 0; pointer-events: none; }
.pcard .poster-plate { flex: none; opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease 0.18s, transform 0.45s cubic-bezier(0.16,1,0.3,1) 0.18s; }
.pcard[data-pos="front"] .poster-plate { opacity: 1; transform: none; }
.plate-violet .poster-plate-tag { color: #C4B5FD; }
.plate-violet::before { background: linear-gradient(90deg, #8B5CF6, #3B82F6); }
.plate-amber .poster-plate-tag { color: #FBBF24; }
.plate-amber::before { background: linear-gradient(90deg, #F59E0B, #22D3EE); }
.deck-nav { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); position: relative; z-index: 4; }
.deck-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink-2); background: var(--bg-soft);
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1); }
.deck-btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
html[data-theme="dark"] .deck-btn:hover { background: var(--accent-blue); border-color: var(--accent-blue); }
.deck-count { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: var(--text-sm);
  letter-spacing: 0.14em; color: var(--ink-2); }
.deck-count b { color: var(--accent-blue); font-size: var(--text-base); }
.deck-dots { display: flex; gap: var(--space-2); }
.deck-dot { width: 26px; height: 4px; border-radius: 4px; background: var(--gray-300); transition: all 0.3s ease; padding: 0; }
html[data-theme="dark"] .deck-dot { background: rgba(175,196,216,0.3); }
.deck-dot.active { width: 40px; background: linear-gradient(90deg, #3B82F6, #8B5CF6); box-shadow: 0 0 10px rgba(59,130,246,0.5); }
.deck-hint { margin-top: var(--space-2); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 64rem) {
  .pcard[data-pos="left"] { transform: translateX(-9%) rotateY(5deg) rotate(-3deg) scale(0.9) translateZ(-60px); }
  .pcard[data-pos="right"] { transform: translateX(9%) rotateY(-5deg) rotate(3deg) scale(0.9) translateZ(-60px); }
}
@media (prefers-reduced-motion: reduce) {
  .pcard { transition: opacity 0.2s ease; }
}

/* word-cascade arrival for section titles */
.section-title .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.section-title .w > i { display: inline-block; font-style: normal; }
.landing-words .section-title .w > i { animation: wordUp 0.65s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes wordUp { from { opacity: 0; transform: translateY(110%) rotate(4deg); } to { opacity: 1; transform: none; } }
.landing-ring { position: relative; }
.landing-ring::before { content: ''; position: absolute; left: 50%; top: -14px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent-blue); transform: translateX(-50%);
  animation: ringDrop 0.9s cubic-bezier(0.16,1,0.3,1); pointer-events: none; }
@keyframes ringDrop {
  0% { opacity: 0; transform: translateX(-50%) scale(0); box-shadow: 0 0 0 0 rgba(47,128,237,0.5); }
  35% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1); box-shadow: 0 0 0 26px rgba(47,128,237,0); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-words .section-title .w > i { animation: none; }
  .landing-ring::before { display: none; }
}

/* ============================================================
   PRODUCTION QA PASS — compat, nav active, form states
   ============================================================ */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
.header { background: rgba(255,255,255,0.92); background: color-mix(in srgb, var(--bg-soft) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-eyebrow { background: rgba(47,128,237,0.08); background: color-mix(in srgb, var(--accent-blue) 8%, transparent); }
.float-chip { background: rgba(255,255,255,0.82); background: color-mix(in srgb, var(--bg-soft) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::after { width: 100%; }
.form-status { margin-top: var(--space-4); font-size: var(--text-sm); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: none; }
.form-status.show { display: block; }
.form-status.success { background: #EAF9F0; color: #0E6B3A; border: 1px solid #B9E5CC; }
.form-status.success a { color: #0E6B3A; font-weight: 700; text-decoration: underline; }
.form-status.error { background: #FDECEC; color: #A12020; border: 1px solid #F3B8B8; }
html[data-theme="dark"] .form-status.success { background: rgba(16,185,129,0.12); color: #6EE7B7; border-color: rgba(110,231,183,0.35); }
html[data-theme="dark"] .form-status.success a { color: #6EE7B7; }
html[data-theme="dark"] .form-status.error { background: rgba(239,68,68,0.12); color: #FCA5A5; border-color: rgba(252,165,165,0.35); }
.field-error { font-size: var(--text-xs); color: #B42323; margin-top: var(--space-1); min-height: 1.1em; }
html[data-theme="dark"] .field-error { color: #FCA5A5; }
.form-input[aria-invalid="true"], .form-textarea[aria-invalid="true"] { border-color: #D92D20; }