/* ================================================================
   Manjinder Singh Rooprai — Futuristic Portfolio
   GitHub Pages Static Build
   ================================================================ */

/* ── Google Fonts loaded via HTML link tag ── */

/* ================================================================
   CSS CUSTOM PROPERTIES — Design System
   ================================================================ */
:root {
  /* Core Palette */
  --bg-0: #02040a;
  --bg-1: #060b14;
  --bg-2: #0a1020;
  --bg-3: #0d1628;

  /* Neon Accents */
  --cyan:    #00d4ff;
  --green:   #00ff88;
  --purple:  #b060ff;
  --pink:    #ff3dce;
  --amber:   #ffb830;

  /* Glow variants */
  --cyan-glow:   rgba(0,212,255,0.18);
  --green-glow:  rgba(0,255,136,0.14);
  --purple-glow: rgba(176,96,255,0.16);
  --pink-glow:   rgba(255,61,206,0.14);

  /* Text */
  --text-1: #f0f6ff;
  --text-2: #8baec8;
  --text-3: #4e6a82;

  /* Border */
  --border: rgba(0,212,255,0.12);
  --border-h: rgba(0,212,255,0.38);
  --border-glass: rgba(255,255,255,0.06);

  /* Typography */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Layout */
  --max-w: 1280px;
  --section-py: 110px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Shadows */
  --glow-cyan:   0 0 24px rgba(0,212,255,0.35), 0 0 48px rgba(0,212,255,0.15);
  --glow-green:  0 0 24px rgba(0,255,136,0.35), 0 0 48px rgba(0,255,136,0.15);
  --glow-purple: 0 0 24px rgba(176,96,255,0.35), 0 0 48px rgba(176,96,255,0.15);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;

  /* Transitions */
  --t-fast:   0.15s cubic-bezier(0.4,0,0.2,1);
  --t-base:   0.3s  cubic-bezier(0.4,0,0.2,1);
  --t-slow:   0.6s  cubic-bezier(0.4,0,0.2,1);
  --t-spring: 0.5s  cubic-bezier(0.34,1.56,0.64,1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text-1);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  /* Prevent any children from causing horizontal scroll */
  max-width: 100%;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--cyan), var(--purple));
  border-radius: 3px;
}

::selection { background: rgba(0,212,255,0.22); color: var(--cyan); }

a { color: var(--cyan); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--green); }

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

/* ================================================================
   TYPOGRAPHY
   ================================================================ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-1);
}

h1 { font-size: clamp(2.4rem,6vw,4.5rem); }
h2 { font-size: clamp(2rem,4vw,3rem); }
h3 { font-size: clamp(1.4rem,2.5vw,1.875rem); }
h4 { font-size: clamp(1.1rem,2vw,1.35rem); }
h5 { font-size: 1.1rem; }

p { color: var(--text-2); font-size: 1.0625rem; line-height: 1.8; }

.mono { font-family: var(--font-mono); font-size: 0.875em; }

/* ================================================================
   LAYOUT UTILITIES
   ================================================================ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--section-py) 0;
  position: relative;
}

.section--alt { background: var(--bg-1); }

.section-header { text-align: center; margin-bottom: 68px; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  background: var(--cyan-glow);
  border: 1px solid rgba(0,212,255,0.22);
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.section-title {
  background: linear-gradient(135deg, var(--text-1) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

.section-desc {
  max-width: 600px;
  margin: 0 auto;
  color: var(--text-2);
}

.divider {
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  border-radius: 2px;
  margin: 16px auto;
}

.divider--left { margin-left: 0; }

/* Grids */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

/* Gradient text helpers */
.g-cyan,   .gradient-text-cyan    { background: linear-gradient(135deg,var(--text-1) 0%,var(--cyan) 100%);   -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.g-green,  .gradient-text-green   { background: linear-gradient(135deg,var(--cyan) 0%,var(--green) 100%);    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gradient-text-emerald             { background: linear-gradient(135deg,var(--cyan) 0%,var(--green) 100%);    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.g-full,   .gradient-text-full    { background: linear-gradient(135deg,var(--cyan) 0%,var(--green) 50%,var(--purple) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.g-purple, .gradient-text-purple  { background: linear-gradient(135deg,var(--purple) 0%,var(--cyan) 100%);   -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  /* Prevent orbs from causing horizontal scroll */
  max-width: 100vw;
}
.orb-cyan   { background: rgba(0,212,255,0.10); width:600px; height:600px; }
.orb-green  { background: rgba(0,255,136,0.07); width:500px; height:500px; }
.orb-purple { background: rgba(176,96,255,0.09); width:400px; height:400px; }

/* ================================================================
   GLASSY CARD — Base Component
   ================================================================ */
.glass-card {
  background: rgba(10,18,36,0.65);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-md);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,rgba(255,255,255,0.03) 0%,transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.glass-card > * { position: relative; z-index: 1; }

.glass-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0,212,255,0.28);
  box-shadow: var(--shadow-card), var(--glow-cyan);
}

.glass-card--green:hover   { border-color: rgba(0,255,136,0.28);  box-shadow: var(--shadow-card), var(--glow-green);  }
.glass-card--emerald:hover { border-color: rgba(0,255,136,0.28);  box-shadow: var(--shadow-card), var(--glow-green);  }
.glass-card--purple:hover  { border-color: rgba(176,96,255,0.28); box-shadow: var(--shadow-card), var(--glow-purple); }

/* Holographic top border */
.glass-card--holo::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--green), var(--purple), var(--pink), var(--cyan));
  background-size: 200% 100%;
  animation: holo-slide 4s linear infinite;
}

@keyframes holo-slide {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all var(--t-base);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--cyan), rgba(0,212,255,0.7));
  color: var(--bg-0);
  box-shadow: 0 4px 18px rgba(0,212,255,0.35);
}
.btn-primary:hover {
  box-shadow: var(--glow-cyan), 0 8px 28px rgba(0,212,255,0.45);
  transform: translateY(-2px);
  color: var(--bg-0);
}

.btn-secondary {
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: rgba(0,212,255,0.08);
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan);
  transform: translateY(-2px);
  color: var(--cyan);
}

.btn-ghost {
  background: rgba(255,255,255,0.04);
  color: var(--text-2);
  border: 1px solid var(--border-glass);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text-1);
  border-color: var(--border);
  transform: translateY(-2px);
}

/* ================================================================
   BADGES / TAGS
   ================================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all var(--t-base);
  cursor: default;
  white-space: nowrap;
}

.badge-cyan   { background:rgba(0,212,255,0.08); border:1px solid rgba(0,212,255,0.22); color:var(--cyan); }
.badge-green  { background:rgba(0,255,136,0.06); border:1px solid rgba(0,255,136,0.18); color:var(--green); }
/* Emerald = alias for green */
.badge-emerald { background:rgba(0,255,136,0.06); border:1px solid rgba(0,255,136,0.18); color:var(--green); }
.badge-purple { background:rgba(176,96,255,0.08); border:1px solid rgba(176,96,255,0.22); color:var(--purple); }
.badge-amber  { background:rgba(255,184,48,0.08); border:1px solid rgba(255,184,48,0.22); color:var(--amber); }

.badge-cyan:hover   { background:rgba(0,212,255,0.15); border-color:rgba(0,212,255,0.5); box-shadow:0 0 12px rgba(0,212,255,0.2); }
.badge-green:hover  { background:rgba(0,255,136,0.12); border-color:rgba(0,255,136,0.4); box-shadow:0 0 12px rgba(0,255,136,0.2); }
.badge-emerald:hover { background:rgba(0,255,136,0.12); border-color:rgba(0,255,136,0.4); box-shadow:0 0 12px rgba(0,255,136,0.2); }
.badge-purple:hover { background:rgba(176,96,255,0.15); border-color:rgba(176,96,255,0.5); box-shadow:0 0 12px rgba(176,96,255,0.2); }

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeInUp     { from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft   { from{opacity:0;transform:translateX(-36px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeInRight  { from{opacity:0;transform:translateX(36px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulse-glow   { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} }
@keyframes float        { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes rotate-slow  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes shimmer      { 0%{background-position:-1000px 0} 100%{background-position:1000px 0} }
@keyframes blink-cursor { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes glitch-1 {
  0%,100% { clip-path: inset(0 0 100% 0); }
  5%  { clip-path: inset(20% 0 60% 0); transform: translate(-4px,2px); }
  10% { clip-path: inset(0 0 100% 0); }
}
@keyframes glitch-2 {
  0%,100% { clip-path: inset(100% 0 0 0); }
  5%  { clip-path: inset(40% 0 30% 0); transform: translate(4px,-2px); }
  10% { clip-path: inset(100% 0 0 0); }
}
@keyframes data-stream {
  0%   { opacity: 0; transform: translateY(-20px); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(20px); }
}
@keyframes hex-spin {
  from { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.05); }
  to   { transform: rotate(360deg) scale(1); }
}

/* Scroll-reveal */
.reveal       { opacity:0; transform:translateY(40px); transition:opacity .7s ease,transform .7s ease; }
.reveal-left  { opacity:0; transform:translateX(-40px); transition:opacity .7s ease,transform .7s ease; }
.reveal-right { opacity:0; transform:translateX(40px);  transition:opacity .7s ease,transform .7s ease; }
.reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity:1; transform:none; }

.delay-1 { transition-delay:.10s; }
.delay-2 { transition-delay:.20s; }
.delay-3 { transition-delay:.30s; }
.delay-4 { transition-delay:.40s; }
.delay-5 { transition-delay:.50s; }
.delay-6 { transition-delay:.60s; }

/* ================================================================
   SITE HEADER
   ================================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 72px;
  background: rgba(2,4,10,0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  /* iOS safe area for notch/Dynamic Island */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.site-header.is-scrolled {
  background: rgba(2,4,10,0.92);
  border-bottom-color: var(--border);
  box-shadow: 0 4px 32px rgba(0,0,0,0.4);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-1);
}

.site-header__logo-text { display:flex; flex-direction:column; line-height:1.2; }

.site-header__logo-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-1);
}

.site-header__logo-role {
  font-size: 0.62rem;
  color: var(--cyan);
  letter-spacing: .07em;
  font-family: var(--font-mono);
}

.site-nav__list { display:flex; align-items:center; gap:4px; }

.site-nav__link {
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
  white-space: nowrap;
}

.site-nav__link:hover, .site-nav__link.is-active {
  color: var(--text-1);
  background: rgba(255,255,255,0.05);
}

.site-nav__link--cta {
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.22);
  color: var(--cyan);
  margin-left: 8px;
}

.site-nav__link--cta:hover {
  background: rgba(0,212,255,0.15);
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan);
  color: var(--cyan);
}

.site-header__menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.site-header__menu-toggle-bar {
  display: block;
  width: 24px; height: 2px;
  background: var(--text-1);
  border-radius: 2px;
  transition: all var(--t-base);
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(2) { opacity:0; }
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-toggle-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.site-header__progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--green), var(--purple));
  background-size: 200% 100%;
  animation: holo-slide 3s linear infinite;
  transition: width 0.1s linear;
}

/* ================================================================
   HERO SECTION
   ================================================================ */
.hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* iOS Safari: use small viewport height to avoid address bar overlap */
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 72px;
}

/* Animated grid background */
.hero-section__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* Scanline overlay */
.hero-section__scanline {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,212,255,0.012) 2px,
    rgba(0,212,255,0.012) 4px
  );
  pointer-events: none;
}

#particles-canvas { position:absolute; inset:0; z-index:0; }

.hero-section__orb { position:absolute; }
.hero-section__orb--1 { top:-200px; right:-100px; }
.hero-section__orb--2 { bottom:-100px; left:-200px; }
.hero-section__orb--3 { top:30%; left:30%; width:300px; height:300px; }

.hero-section__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 80px;
}

.hero-section__content { display:flex; flex-direction:column; gap:28px; }

/* Status badge */
.hero-section__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(0,212,255,0.05);
  border: 1px solid rgba(0,212,255,0.22);
  border-radius: 100px;
  color: var(--cyan);
  font-size: .8125rem;
  font-family: var(--font-mono);
  width: fit-content;
}

.hero-section__label-dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse-glow 2s ease-in-out infinite;
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--green);
}

/* Headline */
.hero-section__headline {
  font-size: clamp(2.2rem,5vw,3.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text-1);
  position: relative;
}

/* Glitch effect on name */
.hero-section__headline .glitch {
  position: relative;
  display: inline-block;
}
.hero-section__headline .glitch::before,
.hero-section__headline .glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.hero-section__headline .glitch::before {
  color: var(--pink);
  animation: glitch-1 6s infinite;
  mix-blend-mode: screen;
}
.hero-section__headline .glitch::after {
  color: var(--cyan);
  animation: glitch-2 6s infinite;
  mix-blend-mode: screen;
}

.hero-section__headline-sep { color: var(--text-3); margin: 0 8px; }

/* Typed tagline */
.hero-section__tagline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--text-2);
  font-family: var(--font-mono);
}
.hero-section__tagline-prefix { color: var(--green); }
#typed-tagline { color: var(--text-1); }
.hero-section__cursor { color: var(--cyan); animation: blink-cursor 1s step-end infinite; }

/* Subtext */
.hero-section__subtext {
  font-size: 1.0625rem;
  color: var(--text-2);
  line-height: 1.8;
  max-width: 520px;
}
.hero-section__highlight { color: var(--cyan); font-weight: 600; }

/* Stats */
.hero-section__stats {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background: rgba(10,18,36,0.7);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-wrap: wrap;
}

.hero-section__stat { display:flex; flex-direction:column; align-items:center; text-align:center; flex:1; padding:0 16px; }

.hero-section__stat-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.hero-section__stat-label {
  font-size: 0.675rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 4px;
  white-space: nowrap;
}

.hero-section__stat-divider { width:1px; height:40px; background:var(--border-glass); flex-shrink:0; }

.hero-section__cta { display:flex; gap:16px; flex-wrap:wrap; }

.hero-section__socials { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.hero-section__social-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-3);
  font-size: .875rem;
  transition: color var(--t-fast);
}
.hero-section__social-link:hover { color: var(--cyan); }
.hero-section__social-sep { color: var(--text-3); font-size: .75rem; }

/* Scroll indicator */
.hero-section__scroll-indicator {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 1;
  animation: float 3s ease-in-out infinite;
}
.hero-section__scroll-text { font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); font-family:var(--font-mono); }
.hero-section__scroll-arrow { color:var(--cyan); opacity:.6; }
.hero-section__scroll-dot { animation:float 1.5s ease-in-out infinite; }

/* Hero Visual — Infographic */
.hero-section__visual { display:flex; justify-content:center; align-items:center; }

.hero-infographic {
  position: relative;
  width: 420px; height: 420px;
}

/* Hex background decoration */
.hero-infographic__hex-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.06;
  animation: hex-spin 30s linear infinite;
}

.hero-infographic__hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}

.hero-infographic__hub-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,212,255,0.2);
  animation: rotate-slow linear infinite;
}

.hero-infographic__hub-ring--outer { width:110px; height:110px; animation-duration:20s; border-color:rgba(0,212,255,0.15); }
.hero-infographic__hub-ring--inner { width:85px; height:85px; animation-duration:12s; animation-direction:reverse; border-color:rgba(0,255,136,0.2); }

.hero-infographic__hub-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  background: rgba(10,18,36,0.9);
  border: 1px solid rgba(0,212,255,0.4);
  border-radius: 50%;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  gap: 2px;
  box-shadow: var(--glow-cyan), inset 0 0 20px rgba(0,212,255,0.08);
}

.hero-infographic__node {
  position: absolute;
  width: 56px; height: 56px;
  background: rgba(10,18,36,0.85);
  border: 1px solid rgba(0,255,136,0.28);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 600;
  color: var(--green);
  backdrop-filter: blur(10px);
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  animation: float 4s ease-in-out infinite;
}

.hero-infographic__node:hover {
  border-color: var(--green);
  box-shadow: var(--glow-green);
}

.hero-infographic__node--1 { top:10px;  left:50%; transform:translateX(-50%); animation-delay:0s; }
.hero-infographic__node--2 { top:25%;   right:10px; animation-delay:.5s; }
.hero-infographic__node--3 { bottom:25%; right:10px; animation-delay:1s; }
.hero-infographic__node--4 { bottom:10px; left:50%; transform:translateX(-50%); animation-delay:1.5s; }
.hero-infographic__node--5 { bottom:25%; left:10px; animation-delay:2s; }
.hero-infographic__node--6 { top:25%;   left:10px; animation-delay:2.5s; }

.hero-infographic__connections { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-infographic__line { stroke:rgba(0,212,255,0.1); stroke-width:1; stroke-dasharray:4 4; }

.hero-infographic__badge {
  position: absolute;
  animation: float 5s ease-in-out infinite;
}

.hero-infographic__badge--1 { top:-10px;  left:-20px; animation-delay:.3s; }
.hero-infographic__badge--2 { top:20px;   right:-30px; animation-delay:1.2s; }
.hero-infographic__badge--3 { bottom:80px; right:-40px; animation-delay:.8s; }
.hero-infographic__badge--4 { bottom:-10px; left:20px; animation-delay:2s; }
.hero-infographic__badge--5 { bottom:60px; left:-30px; animation-delay:1.5s; }

/* ================================================================
   ABOUT SECTION
   ================================================================ */
.about-section { background: var(--bg-0); overflow:hidden; }
.about-section__orb--1 { position:absolute; top:-100px; right:-100px; pointer-events:none; z-index:0; }

.about-section__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
  position: relative; z-index: 1;
}

.about-card {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  position: sticky;
  top: 90px;
}

.about-card__avatar { position:relative; width:120px; height:120px; margin:0 auto; }

.about-card__avatar-ring {
  position: absolute; inset:-4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--cyan), var(--green), var(--purple), var(--pink), var(--cyan));
  animation: rotate-slow 6s linear infinite;
  z-index: 0;
}
.about-card__avatar-ring::before {
  content: '';
  position: absolute; inset:3px;
  background: var(--bg-1);
  border-radius: 50%;
}

.about-card__avatar-inner {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  background: linear-gradient(135deg,rgba(0,212,255,0.12),rgba(0,255,136,0.08));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.04);
}

.about-card__initials {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-card__avatar-status {
  position: absolute;
  bottom:6px; right:6px;
  width:16px; height:16px;
  background: var(--green);
  border-radius: 50%;
  border: 2px solid var(--bg-1);
  z-index: 2;
  animation: pulse-glow 2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--green);
}

.about-card__identity { display:flex; flex-direction:column; gap:4px; }
.about-card__name { font-size:1.25rem; font-weight:700; color:var(--text-1); }
.about-card__title { font-size:.9375rem; font-weight:600; }
.about-card__company { font-size:.75rem; color:var(--text-3); font-family:var(--font-mono); }

.about-card__meta { display:flex; flex-direction:column; gap:10px; text-align:left; }
.about-card__meta-item { display:flex; align-items:center; gap:10px; font-size:.875rem; color:var(--text-2); }
.about-card__meta-item svg { color:var(--cyan); flex-shrink:0; }
.about-card__meta-link { color:var(--text-2); transition:color var(--t-fast); display:flex; align-items:center; gap:4px; }
.about-card__meta-link:hover { color:var(--cyan); }

.about-card__quick-stats { display:flex; justify-content:space-around; padding:16px 0; border-top:1px solid var(--border-glass); border-bottom:1px solid var(--border-glass); }
.about-card__quick-stat { display:flex; flex-direction:column; align-items:center; gap:4px; }
.about-card__quick-stat-value { font-family:var(--font-display); font-size:1.5rem; font-weight:800; line-height:1; }
.about-card__quick-stat-label { font-size:.625rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.about-card__cta { width:100%; justify-content:center; }

.about-section__content { display:flex; flex-direction:column; gap:40px; }
.about-section__summary { display:flex; flex-direction:column; gap:16px; }
.about-section__summary-text { color:var(--text-2); line-height:1.9; font-size:1.0625rem; }
.about-section__summary-text strong { color:var(--text-1); font-weight:600; }

.about-section__strengths-title, .about-section__stack-title {
  font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:16px;
}

.about-section__strengths-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

.strength-card { padding:20px; display:flex; flex-direction:column; gap:10px; }
.strength-card__icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.strength-card__icon--cyan   { background:rgba(0,212,255,0.1); color:var(--cyan); }
.strength-card__icon--green  { background:rgba(0,255,136,0.08); color:var(--green); }
.strength-card__icon--purple { background:rgba(176,96,255,0.1); color:var(--purple); }
.strength-card__title { font-size:.9375rem; font-weight:600; color:var(--text-1); }
.strength-card__desc { font-size:.8125rem; color:var(--text-3); line-height:1.6; }

.about-section__stack-badges { display:flex; flex-wrap:wrap; gap:8px; }

/* ================================================================
   EXPERIENCE SECTION
   ================================================================ */
.experience-section { background:var(--bg-1); overflow:hidden; }
.experience-section__orb--1 { position:absolute; top:0; right:-150px; pointer-events:none; z-index:0; }
.experience-section__orb--2 { position:absolute; bottom:0; left:-100px; pointer-events:none; z-index:0; }

.timeline { position:relative; display:flex; flex-direction:column; padding-left:48px; }
.timeline__track { position:absolute; left:16px; top:24px; bottom:24px; width:2px; background:var(--border-glass); border-radius:1px; }
.timeline__track-fill { width:100%; height:0%; background:linear-gradient(to bottom,var(--cyan),var(--green)); border-radius:1px; transition:height .5s ease; }
.timeline__item { position:relative; padding-bottom:48px; display:flex; }
.timeline__item:last-child { padding-bottom:0; }

.timeline__dot { position:absolute; left:-40px; top:28px; width:16px; height:16px; border-radius:50%; border:2px solid; background:var(--bg-1); z-index:2; flex-shrink:0; }
.timeline__dot--cyan    { border-color:var(--cyan); }
.timeline__dot--green   { border-color:var(--green); }
.timeline__dot--purple  { border-color:var(--purple); }
.timeline__dot-pulse { position:absolute; inset:-4px; border-radius:50%; border:1px solid currentColor; opacity:.4; animation:pulse-glow 2s ease-in-out infinite; }

.exp-card { width:100%; padding:28px 32px; display:flex; flex-direction:column; gap:20px; }
.exp-card__header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.exp-card__header-main { display:flex; flex-direction:column; gap:8px; flex:1; }

.exp-card__period-badge { display:inline-flex; align-items:center; gap:6px; color:var(--text-3); font-size:.8125rem; }
.exp-card__current-badge { background:var(--green); color:var(--bg-0); font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:2px 8px; border-radius:100px; margin-left:4px; }

.exp-card__role { font-size:1.25rem; font-weight:700; color:var(--text-1); line-height:1.3; }
.exp-card__department { font-size:.875rem; font-weight:400; color:var(--text-3); }
.exp-card__org { display:flex; align-items:center; gap:8px; font-size:1rem; }
.exp-card__company { color:var(--text-2); font-weight:500; }
.exp-card__org-sep { color:var(--text-3); font-weight:300; }
.exp-card__client { font-weight:700; font-size:1.0625rem; }
.exp-card__project { display:flex; align-items:center; gap:8px; font-size:.875rem; }
.exp-card__project-label { color:var(--text-3); font-family:var(--font-mono); }
.exp-card__project-name { color:var(--text-1); font-weight:500; }
.exp-card__location { display:flex; align-items:center; gap:6px; font-size:.8125rem; color:var(--text-3); }

.exp-card__metrics { display:flex; gap:24px; flex-wrap:wrap; flex-shrink:0; }
.exp-card__metric { display:flex; flex-direction:column; align-items:center; text-align:center; min-width:80px; }
.exp-card__metric-value { font-family:var(--font-display); font-size:1.5rem; font-weight:800; line-height:1; }
.exp-card__metric-label { font-size:.625rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; white-space:nowrap; }

.exp-card__tags { display:flex; flex-wrap:wrap; gap:8px; }

.exp-card__summary { font-size:.9375rem; color:var(--text-3); line-height:1.7; font-style:italic; padding:12px 16px; border-left:2px solid var(--border); background:rgba(255,255,255,0.02); border-radius:0 var(--r-sm) var(--r-sm) 0; }

.exp-card__highlights { display:flex; flex-direction:column; gap:10px; }
.exp-card__highlight { display:flex; align-items:flex-start; gap:10px; font-size:.9375rem; color:var(--text-2); line-height:1.7; }
.exp-card__highlight-icon { color:var(--cyan); flex-shrink:0; margin-top:4px; }
.exp-card__highlight strong { color:var(--text-1); font-weight:600; }

/* ================================================================
   GENAI SECTION
   ================================================================ */
.genai-section { position:relative; overflow:hidden; max-width:100%; }
.genai-section__orb--1 { position:absolute; top:-100px; right:-100px; pointer-events:none; z-index:0; }
.genai-section__orb--2 { position:absolute; bottom:-100px; left:-100px; pointer-events:none; z-index:0; }
.genai-section__neural-bg {
  position:absolute; inset:0;
  opacity:.025;
  background-image: radial-gradient(circle, var(--purple) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events:none; z-index:0;
}
.genai-section > .container { position:relative; z-index:1; }

.genai-section__feature { margin-bottom:64px; }
.genai-feature-card { padding:40px; position:relative; overflow:hidden; }
.genai-feature-card__badge { margin-bottom:24px; }
.genai-feature-card__content { display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; }
.genai-feature-card__text { display:flex; flex-direction:column; gap:16px; }
.genai-feature-card__title { font-size:clamp(1.75rem,3vw,2.5rem); font-weight:800; }
.genai-feature-card__subtitle { color:var(--text-3); font-size:.875rem; font-family:var(--font-mono); }
.genai-feature-card__desc { color:var(--text-2); line-height:1.8; font-size:1rem; }
.genai-feature-card__desc strong { color:var(--text-1); font-weight:600; }
.genai-feature-card__tech { display:flex; flex-wrap:wrap; gap:8px; }

.genai-feature-card__metrics { display:grid; grid-template-columns:1fr 1fr; gap:24px; min-width:280px; }
.genai-metric { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.genai-metric__ring { position:relative; width:80px; height:80px; }
.genai-metric__ring svg { width:80px; height:80px; }
.genai-metric__ring-value { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1rem; font-weight:800; }
.genai-metric__value-large { font-family:var(--font-display); font-size:2rem; font-weight:800; line-height:1; }
.genai-metric__label { font-size:.6875rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; max-width:100px; }

.genai-section__tools { margin-bottom:64px; }
.genai-section__tools-title, .genai-section__capabilities-title { font-size:1.375rem; font-weight:700; color:var(--text-1); margin-bottom:32px; }
.genai-tools-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.genai-tool-group { padding:24px 20px; display:flex; flex-direction:column; gap:16px; }
.genai-tool-group__title { font-size:.875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.genai-tool-group__list { display:flex; flex-direction:column; gap:10px; }
.genai-tool-group__item { display:flex; align-items:flex-start; gap:10px; }
.genai-tool-group__item-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; margin-top:6px; opacity:.6; }
.genai-tool-group__item-content { display:flex; flex-direction:column; gap:2px; }
.genai-tool-group__item-name { font-size:.875rem; color:var(--text-1); font-weight:500; }
.genai-tool-group__item-note { font-size:.6875rem; color:var(--text-3); font-family:var(--font-mono); }

.genai-capabilities-list { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.genai-capability { padding:24px; display:flex; flex-direction:column; gap:12px; }
.genai-capability__icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.genai-capability__icon--cyan   { background:rgba(0,212,255,0.1); color:var(--cyan); }
.genai-capability__icon--green  { background:rgba(0,255,136,0.08); color:var(--green); }
.genai-capability__icon--purple { background:rgba(176,96,255,0.1); color:var(--purple); }
.genai-capability__title { font-size:1rem; font-weight:600; color:var(--text-1); }
.genai-capability__desc { font-size:.875rem; color:var(--text-3); line-height:1.7; }

/* ================================================================
   COMPETENCIES SECTION
   ================================================================ */
.competencies-section { background:var(--bg-0); overflow:hidden; }
.competencies-section__orb--1 { position:absolute; top:-50px; left:-100px; pointer-events:none; z-index:0; }
.competencies-section__orb--2 { position:absolute; bottom:-50px; right:-100px; pointer-events:none; z-index:0; }
.competencies-section > .container { position:relative; z-index:1; }
.competencies-section__sub-title { font-size:1.25rem; font-weight:700; color:var(--text-1); margin-bottom:24px; }

.competencies-section__proficiency { margin-bottom:64px; }
.proficiency-list { display:flex; flex-direction:column; gap:16px; max-width:640px; }
.proficiency-item__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.proficiency-item__name { font-weight:500; color:var(--text-1); font-family:var(--font-mono); font-size:.875rem; }
.proficiency-item__meta { display:flex; align-items:center; gap:12px; }
.proficiency-item__years { font-size:.75rem; color:var(--text-3); font-family:var(--font-mono); }
.proficiency-item__pct { font-family:var(--font-mono); font-size:.875rem; font-weight:700; min-width:36px; text-align:right; }
.proficiency-item__track { height:6px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; }
.proficiency-item__fill { height:100%; width:0%; border-radius:3px; transition:width 1.2s cubic-bezier(0.4,0,0.2,1); }
.proficiency-item__fill--cyan    { background:linear-gradient(90deg,var(--cyan),rgba(0,212,255,0.4)); }
.proficiency-item__fill--green   { background:linear-gradient(90deg,var(--green),rgba(0,255,136,0.4)); }
.proficiency-item__fill--emerald { background:linear-gradient(90deg,var(--green),rgba(0,255,136,0.4)); }
.proficiency-item__fill--purple  { background:linear-gradient(90deg,var(--purple),rgba(176,96,255,0.4)); }

.competencies-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:48px; }
.competency-card { padding:24px 20px; display:flex; flex-direction:column; gap:16px; }
.competency-card__header { display:flex; align-items:center; gap:12px; }
.competency-card__icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.competency-card__icon--cyan    { background:rgba(0,212,255,0.1); color:var(--cyan); }
.competency-card__icon--green   { background:rgba(0,255,136,0.08); color:var(--green); }
.competency-card__icon--emerald { background:rgba(0,255,136,0.08); color:var(--green); }
.competency-card__icon--purple  { background:rgba(176,96,255,0.1); color:var(--purple); }
.competency-card__title { font-size:.9375rem; font-weight:700; }
.competency-card__badges { display:flex; flex-wrap:wrap; gap:6px; }

.comp-highlights-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.comp-highlight { padding:28px 24px; text-align:center; display:flex; flex-direction:column; gap:8px; }
.comp-highlight__value { font-family:var(--font-display); font-size:2.5rem; font-weight:900; line-height:1; }
.comp-highlight__label { font-size:.875rem; font-weight:600; color:var(--text-1); }
.comp-highlight__desc { font-size:.8125rem; color:var(--text-3); line-height:1.6; }

/* ================================================================
   CERTIFICATIONS SECTION
   ================================================================ */
.certifications-section { background:var(--bg-1); overflow:hidden; }
.certifications-section__orb--1 { position:absolute; top:-50px; right:-100px; pointer-events:none; z-index:0; }
.certifications-section > .container { position:relative; z-index:1; }
.certifications-section__certs, .certifications-section__awards { margin-bottom:64px; }
.certifications-section__sub-title { display:flex; align-items:center; gap:10px; font-size:1.25rem; font-weight:700; color:var(--text-1); margin-bottom:28px; }

.certs-featured { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:24px; }
.cert-card--featured { padding:28px 24px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden; text-align:center; }
.cert-card__badge { font-size:2.5rem; line-height:1; }
.cert-card__content { display:flex; flex-direction:column; gap:8px; }
.cert-card__issuer { font-size:.6875rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-mono); }
.cert-card__title { font-size:1.0625rem; font-weight:700; }
.cert-card__subtitle { font-size:.875rem; color:var(--text-2); }
.cert-card__date { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:.8125rem; color:var(--text-3); margin-top:4px; }
.cert-card__verified { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:.75rem; color:var(--green); font-weight:600; margin-top:auto; }

.certs-list { padding:8px 0; display:flex; flex-direction:column; }
.cert-list-item { display:flex; align-items:center; gap:16px; padding:14px 24px; border-bottom:1px solid var(--border-glass); transition:background var(--t-fast); }
.cert-list-item:last-child { border-bottom:none; }
.cert-list-item:hover { background:rgba(255,255,255,0.02); }
.cert-list-item__badge { font-size:1.25rem; flex-shrink:0; }
.cert-list-item__content { flex:1; display:flex; flex-direction:column; gap:2px; }
.cert-list-item__title { font-size:.9375rem; font-weight:500; color:var(--text-1); }
.cert-list-item__subtitle { font-size:.8125rem; color:var(--text-3); }
.cert-list-item__meta { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.cert-list-item__issuer { font-size:.75rem; color:var(--text-3); font-family:var(--font-mono); }

.awards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:32px; }
.award-card { padding:24px; display:flex; flex-direction:column; gap:12px; }
.award-card__header { display:flex; justify-content:space-between; align-items:flex-start; }
.award-card__tier { font-size:1.25rem; }
.award-card__tier--platinum { color:#e5e4e2; filter:drop-shadow(0 0 6px rgba(229,228,226,0.5)); }
.award-card__tier--gold     { color:#fbbf24; filter:drop-shadow(0 0 6px rgba(251,191,36,0.4)); }
.award-card__tier--silver   { color:#94a3b8; filter:drop-shadow(0 0 4px rgba(148,163,184,0.3)); }
.award-card__date-org { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.award-card__date { font-size:.75rem; color:var(--text-3); font-family:var(--font-mono); }
.award-card__title { font-size:1rem; font-weight:700; }
.award-card__desc { font-size:.8125rem; color:var(--text-3); line-height:1.6; }

.awards-summary { display:flex; justify-content:space-around; align-items:center; padding:24px 32px; }
.awards-summary__item { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.awards-summary__count { font-family:var(--font-display); font-size:2.5rem; font-weight:900; line-height:1; }
.awards-summary__label { font-size:.75rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; }
.awards-summary__divider { width:1px; height:48px; background:var(--border-glass); }

/* ================================================================
   EDUCATION SECTION
   ================================================================ */
.education-section { background:var(--bg-0); }
.education-section__orb { position:absolute; top:-50px; left:-100px; pointer-events:none; z-index:0; }
.education-section > .container { position:relative; z-index:1; }
.education-section__content { display:flex; flex-direction:column; gap:32px; max-width:800px; margin:0 auto; }

.education-card { padding:36px 32px; display:flex; gap:28px; }
.education-card__left { display:flex; flex-direction:column; align-items:center; }
.education-card__icon { width:56px; height:56px; background:rgba(0,212,255,0.1); color:var(--cyan); border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.education-card__timeline { display:flex; flex-direction:column; align-items:center; flex:1; margin-top:12px; }
.education-card__timeline-dot { width:8px; height:8px; background:var(--cyan); border-radius:50%; box-shadow:0 0 8px var(--cyan); }
.education-card__timeline-line { flex:1; width:1px; background:linear-gradient(to bottom,var(--cyan),transparent); min-height:40px; }
.education-card__content { flex:1; display:flex; flex-direction:column; gap:12px; }
.education-card__header { display:flex; justify-content:space-between; align-items:center; }
.education-card__period { display:flex; align-items:center; gap:6px; font-size:.8125rem; color:var(--text-3); }
.education-card__degree { font-size:1.5rem; font-weight:700; }
.education-card__field { font-size:1.0625rem; color:var(--text-2); font-weight:500; }
.education-card__institution { display:flex; flex-direction:column; gap:4px; }
.education-card__institution-name { font-size:1rem; color:var(--text-1); font-weight:600; }
.education-card__institution-location { display:flex; align-items:center; gap:6px; font-size:.875rem; color:var(--text-3); }
.education-card__highlights { display:flex; flex-direction:column; gap:8px; padding:16px; background:rgba(255,255,255,0.02); border-radius:var(--r-sm); }
.education-card__highlight { display:flex; align-items:flex-start; gap:8px; font-size:.875rem; color:var(--text-2); }
.education-card__highlight svg { color:var(--green); flex-shrink:0; margin-top:2px; }
.education-card__tags { display:flex; flex-wrap:wrap; gap:8px; }

.education-section__continuous { padding:32px; display:flex; align-items:center; gap:24px; }
.education-section__continuous-icon { width:56px; height:56px; background:linear-gradient(135deg,rgba(0,212,255,0.15),rgba(0,255,136,0.1)); border-radius:14px; display:flex; align-items:center; justify-content:center; color:var(--cyan); flex-shrink:0; }
.education-section__continuous-content { flex:1; display:flex; flex-direction:column; gap:12px; }
.education-section__continuous-title { font-size:1.125rem; font-weight:700; }
.education-section__continuous-desc { font-size:.9375rem; color:var(--text-2); line-height:1.7; }
.education-section__continuous-desc strong { color:var(--text-1); }

/* ================================================================
   CONTACT SECTION
   ================================================================ */
.contact-section { background:var(--bg-1); position:relative; overflow:hidden; max-width:100%; }
.contact-section__orb--1 { position:absolute; top:0; right:-100px; pointer-events:none; z-index:0; }
.contact-section__orb--2 { position:absolute; bottom:0; left:-100px; pointer-events:none; z-index:0; }
.contact-section > .container { position:relative; z-index:1; }
.contact-section__grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }

.contact-info__availability { display:inline-flex; align-items:center; gap:10px; padding:10px 16px; background:rgba(0,255,136,0.05); border:1px solid rgba(0,255,136,0.2); border-radius:100px; font-size:.875rem; color:var(--green); margin-bottom:28px; }
.contact-info__availability-dot { width:8px; height:8px; background:var(--green); border-radius:50%; animation:pulse-glow 2s ease-in-out infinite; flex-shrink:0; box-shadow:0 0 8px var(--green); }

.contact-info__methods { display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.contact-method { display:flex; align-items:center; gap:16px; padding:16px 20px; text-decoration:none; color:var(--text-1); transition:all var(--t-base); }
.contact-method:hover { transform:translateX(4px); color:var(--text-1); }
.contact-method--static { cursor:default; }
.contact-method--static:hover { transform:none; }
.contact-method__icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-method__icon--cyan   { background:rgba(0,212,255,0.1); color:var(--cyan); }
.contact-method__icon--green  { background:rgba(0,255,136,0.08); color:var(--green); }
.contact-method__icon--purple { background:rgba(176,96,255,0.1); color:var(--purple); }
.contact-method__content { flex:1; display:flex; flex-direction:column; gap:2px; }
.contact-method__label { font-size:.6875rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-mono); }
.contact-method__value { font-size:.9375rem; color:var(--text-1); font-weight:500; }
.contact-method__arrow { color:var(--text-3); flex-shrink:0; }

.contact-info__offer { padding:24px; }
.contact-info__offer-title { font-size:.875rem; font-weight:600; color:var(--text-1); margin-bottom:16px; }
.contact-info__offer-list { display:flex; flex-direction:column; gap:12px; }
.contact-info__offer-item { display:flex; align-items:flex-start; gap:12px; font-size:.875rem; color:var(--text-2); line-height:1.6; }
.contact-info__offer-icon { color:var(--cyan); flex-shrink:0; margin-top:2px; }

.contact-form-card { padding:36px 32px; }
.contact-form-card__header { margin-bottom:28px; }
.contact-form-card__title { font-size:1.375rem; font-weight:700; color:var(--text-1); margin-bottom:4px; }
.contact-form-card__subtitle { font-size:.875rem; color:var(--text-3); }

.contact-form__status { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--r-sm); font-size:.9375rem; margin-bottom:20px; }
.contact-form__status--success { background:rgba(0,255,136,0.08); border:1px solid rgba(0,255,136,0.2); color:var(--green); }
.contact-form__status--error   { background:rgba(239,68,68,0.08);  border:1px solid rgba(239,68,68,0.2);  color:#ef4444; }

.contact-form { display:flex; flex-direction:column; gap:20px; }
.contact-form__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form__field { display:flex; flex-direction:column; gap:8px; }
.contact-form__label { font-size:.8125rem; font-weight:500; color:var(--text-2); }
.contact-form__required { color:var(--cyan); }
.contact-form__input-wrapper { position:relative; }
.contact-form__input {
  width:100%; padding:12px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--r-sm);
  color:var(--text-1);
  font-family:var(--font-body);
  font-size:.9375rem;
  outline:none;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  resize:none;
}
.contact-form__input::placeholder { color:var(--text-3); }
.contact-form__input:focus { border-color:rgba(0,212,255,0.5); background:rgba(0,212,255,0.03); box-shadow:0 0 0 3px rgba(0,212,255,0.08); }
.contact-form__input.is-invalid { border-color:rgba(239,68,68,0.5); }
.contact-form__textarea { min-height:120px; }
.contact-form__error { font-size:.75rem; color:#ef4444; min-height:16px; }
.contact-form__submit { width:100%; justify-content:center; padding:16px; font-size:1rem; }
.contact-form__spinner { width:18px; height:18px; animation:rotate-slow .8s linear infinite; }

/* ================================================================
   SITE FOOTER
   ================================================================ */
.site-footer { background:var(--bg-0); padding-top:80px; }
.site-footer__separator { height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); margin-bottom:64px; }

.site-footer__grid { display:grid; grid-template-columns:2fr 1fr 1.5fr 1.5fr; gap:48px; padding-bottom:48px; border-bottom:1px solid var(--border-glass); }

.site-footer__logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text-1); margin-bottom:16px; }
.site-footer__logo-text { display:flex; flex-direction:column; gap:2px; }
.site-footer__logo-name { font-family:var(--font-display); font-size:1.0625rem; font-weight:700; }
.site-footer__logo-title { font-size:.6875rem; color:var(--cyan); letter-spacing:.05em; font-family:var(--font-mono); }
.site-footer__brand-desc { font-size:.875rem; color:var(--text-3); line-height:1.7; margin-bottom:24px; }
.site-footer__socials { display:flex; gap:12px; }
.site-footer__social-link { width:40px; height:40px; background:rgba(255,255,255,0.04); border:1px solid var(--border-glass); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--text-3); text-decoration:none; transition:all var(--t-base); }
.site-footer__social-link:hover { background:rgba(0,212,255,0.08); border-color:rgba(0,212,255,0.3); color:var(--cyan); box-shadow:var(--glow-cyan); }

.site-footer__col-title { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--text-1); margin-bottom:20px; }
.site-footer__links { display:flex; flex-direction:column; gap:10px; }
.site-footer__link { font-size:.875rem; color:var(--text-3); text-decoration:none; transition:color var(--t-fast); }
.site-footer__link:hover { color:var(--cyan); }
.site-footer__tech-badges { display:flex; flex-wrap:wrap; gap:6px; }
.site-footer__contact-list { display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.site-footer__contact-item { display:flex; align-items:center; gap:8px; font-size:.875rem; color:var(--text-3); }
.site-footer__contact-item svg { color:var(--cyan); flex-shrink:0; }

.site-footer__status { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; background:rgba(0,255,136,0.05); border:1px solid rgba(0,255,136,0.15); border-radius:100px; font-size:.75rem; color:var(--green); }
.site-footer__status-dot { width:6px; height:6px; background:var(--green); border-radius:50%; animation:pulse-glow 2s ease-in-out infinite; box-shadow:0 0 6px var(--green); }

.site-footer__bottom { display:flex; justify-content:space-between; align-items:center; padding:20px 0 24px; }
.site-footer__copyright { font-size:.875rem; color:var(--text-3); }
.site-footer__bottom-right { display:flex; align-items:center; gap:20px; }
.site-footer__stack { font-size:.75rem; color:var(--text-3); font-family:var(--font-mono); }
.site-footer__back-to-top { width:36px; height:36px; background:rgba(255,255,255,0.04); border:1px solid var(--border-glass); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-3); text-decoration:none; transition:all var(--t-base); }
.site-footer__back-to-top:hover { background:rgba(0,212,255,0.08); border-color:rgba(0,212,255,0.3); color:var(--cyan); }

/* ================================================================
   RESPONSIVE — TABLET ≤1024px
   ================================================================ */
@media (max-width:1024px) {
  :root { --section-py: 80px; }

  /* ── Mobile navigation: show hamburger, hide inline nav ── */
  .site-header__logo-role { display:none; }
  .site-header__menu-toggle { display:flex; }

  .site-nav {
    position:fixed; top:72px; left:0; right:0;
    background:rgba(2,4,10,0.97);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--border);
    transform:translateY(-100%); opacity:0;
    pointer-events:none;
    transition:transform var(--t-base), opacity var(--t-base);
    z-index:999;
    max-height:calc(100svh - 72px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .site-nav.is-open { transform:translateY(0); opacity:1; pointer-events:all; }
  .site-nav__list { flex-direction:column; gap:0; padding:16px 0; }
  .site-nav__link { width:100%; padding:14px 24px; border-radius:0; font-size:1rem; }
  .site-nav__link--resume { margin:4px 16px; width:calc(100% - 32px); border-radius:var(--r-sm); justify-content:center; }
  .site-nav__link--cta { margin:8px 16px 0; width:calc(100% - 32px); justify-content:center; border-radius:var(--r-sm); }

  /* ── Layout adjustments ── */
  .hero-section__container { grid-template-columns:1fr; gap:48px; text-align:center; }
  .hero-section__content { align-items:center; }
  .hero-section__subtext { text-align:left; }
  .hero-section__visual { display:none; }
  .about-section__grid { grid-template-columns:1fr; }
  .about-card { position:static; max-width:400px; margin:0 auto; }
  .genai-tools-grid { grid-template-columns:repeat(2,1fr); }
  .genai-capabilities-list { grid-template-columns:repeat(2,1fr); }
  .genai-feature-card__content { grid-template-columns:1fr; }
  .genai-feature-card__metrics { grid-template-columns:repeat(4,1fr); }
  .competencies-grid { grid-template-columns:repeat(2,1fr); }
  .comp-highlights-grid { grid-template-columns:repeat(2,1fr); }
  .certs-featured { grid-template-columns:repeat(2,1fr); }
  .awards-grid { grid-template-columns:repeat(2,1fr); }
  .site-footer__grid { grid-template-columns:1fr 1fr; gap:32px; }
  .contact-section__grid { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
}

/* ================================================================
   RESPONSIVE — MOBILE ≤768px
   ================================================================ */
@media (max-width:768px) {
  :root { --section-py: 64px; }
  
  /* Hide scroll indicator on mobile to prevent overlap with buttons */
  .hero-section__scroll-indicator {
    display: none !important;
  }
  .container { padding:0 16px; }

  .hero-section__headline { font-size:clamp(1.8rem,7vw,2.8rem); }
  .hero-section__stats { flex-direction:column; gap:16px; }
  .hero-section__stat-divider { display:none; }
  .hero-section__stat { flex-direction:row; justify-content:space-between; width:100%; }
  .hero-section__cta { flex-direction:column; }
  .hero-section__cta .btn { width:100%; justify-content:center; }
  .hero-section__socials { justify-content:center; }

  .timeline { padding-left:28px; }
  .timeline__dot { left:-24px; }
  .exp-card { padding:20px; }
  .exp-card__header { flex-direction:column; }
  .exp-card__metrics { gap:16px; flex-wrap:wrap; }
  .exp-card__metric { min-width:60px; }

  .genai-tools-grid { grid-template-columns:1fr; }
  .genai-capabilities-list { grid-template-columns:1fr; }
  .genai-feature-card__metrics { grid-template-columns:repeat(2,1fr); }

  .certs-featured { grid-template-columns:1fr; }
  .awards-grid { grid-template-columns:1fr; }
  .awards-summary { flex-wrap:wrap; gap:24px; }
  .awards-summary__divider { display:none; }

  .about-section__strengths-grid { grid-template-columns:1fr; }
  .about-card { max-width:100%; }
  .contact-form__row { grid-template-columns:1fr; }
  .education-section__continuous { flex-direction:column; text-align:center; }
  .education-card { flex-direction:column; }
  .education-card__header { flex-direction:column; gap:8px; align-items:flex-start; }
  .site-footer__grid { grid-template-columns:1fr; gap:32px; }
  .site-footer__bottom { flex-direction:column; gap:16px; text-align:center; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .section-header { margin-bottom:40px; }
  .digital-art-section__highlights { grid-template-columns:1fr; }
  .verse-quote { padding:1.5rem 1.5rem 1.5rem 2.5rem; }
  .verse-quote__text { font-size:1rem; }
  .contact-direct-card { padding:2rem 1.5rem; }
}

@media (max-width:480px) {
  :root { --section-py: 48px; }
  .container { padding:0 16px; }

  /* ── Prevent any element from causing horizontal overflow ── */
  .hero-section,
  .hero-section__container,
  .hero-section__content,
  .hero-section__stats { max-width:100%; overflow:hidden; }

  .hero-section__headline {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem);
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .hero-section__label { font-size:.6875rem; white-space:normal; text-align:center; max-width:100%; }
  .hero-section__subtext { max-width:100%; word-break:break-word; }
  .hero-section__tagline { flex-wrap:wrap; font-size:.875rem; max-width:100%; }

  /* Stats: 2-col grid but constrained */
  .hero-section__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 12px;
    box-sizing: border-box;
    width: 100%;
  }
  .hero-section__stat { flex-direction:column; text-align:center; padding:0 4px; }
  .hero-section__stat-value { font-size:1.35rem; }
  .hero-section__stat-label { font-size:.6rem; white-space:normal; letter-spacing:.04em; }

  /* Hero CTA buttons */
  .hero-section__cta .btn { padding:12px 20px; font-size:.875rem; }

  .competencies-grid { grid-template-columns:1fr; }
  .comp-highlights-grid { grid-template-columns:1fr 1fr; }
  .genai-feature-card { padding:24px 16px; }
  .genai-feature-card__metrics { grid-template-columns:repeat(2,1fr); }
  .genai-feature-card__content { gap:24px; }
  .about-card { padding:24px 16px; }
  .exp-card { padding:16px; }
  .exp-card__header { gap:12px; }
  .site-footer__grid { gap:24px; }
  .section-label { font-size:.65rem; padding:5px 12px; }
  .proficiency-list { max-width:100%; }

  /* Prevent any table/pre/code from causing overflow */
  pre, table { overflow-x:auto; }
  * { max-width:100%; }
  img, video, iframe { max-width:100% !important; }
}

/* ================================================================
   iOS SAFARI — SPECIFIC OVERRIDES
   ================================================================ */
@supports (-webkit-touch-callout: none) {
  /* Fix momentum scrolling on iOS */
  html { -webkit-overflow-scrolling: touch; }

  /* Fix 100vh on iOS Safari (includes address bar in measurement) */
  .hero-section {
    min-height: -webkit-fill-available;
  }

  /* Prevent text inflation on iOS */
  body { -webkit-text-size-adjust: 100%; }

  /* Fix backdrop-filter on older iOS */
  .glass-card,
  .site-header,
  .site-nav {
    -webkit-backdrop-filter: blur(22px);
  }
}

/* ================================================================
   EXTRA FUTURISTIC FLAIR
   ================================================================ */

/* Neon text glow on headings */
.neon-text {
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0,212,255,0.6), 0 0 30px rgba(0,212,255,0.3), 0 0 60px rgba(0,212,255,0.1);
}

/* Holographic card shine */
.holo-shine {
  position: relative;
  overflow: hidden;
}
.holo-shine::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(0,212,255,0.04) 50%,
    rgba(176,96,255,0.04) 55%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.8s ease;
  pointer-events: none;
  z-index: 2;
}
.holo-shine:hover::before { transform: translateX(100%); }

/* Data counter animation target */
[data-count] { font-variant-numeric: tabular-nums; }

/* Futuristic terminal tag */
.terminal-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--green);
  padding: 4px 10px;
  background: rgba(0,255,136,0.05);
  border: 1px solid rgba(0,255,136,0.15);
  border-radius: 4px;
}
.terminal-tag::before { content: '> '; opacity: .6; }

/* ===== Avatar Photo Styles ===== */
.about-card__avatar-inner--photo {
  padding: 0;
  overflow: hidden;
  background: var(--bg-2);
}

.about-card__avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  display: block;
  filter: drop-shadow(0 0 12px rgba(0,212,255,0.2));
  transition: transform 0.4s ease, filter 0.4s ease;
}

.about-card__avatar-inner--photo:hover .about-card__avatar-photo {
  transform: scale(1.05);
  filter: drop-shadow(0 0 20px rgba(0,212,255,0.4));
}

/* ===== Cursor Trail ===== */
.cursor-trail {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  background: radial-gradient(circle, var(--cyan), transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  mix-blend-mode: screen;
}

/* ===== Resume Download Button ===== */
.btn-resume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid rgba(0, 212, 255, 0.5);
  color: var(--cyan);
  background: rgba(0, 212, 255, 0.06);
  transition: all 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn-resume:hover {
  background: rgba(0, 212, 255, 0.14);
  border-color: var(--cyan);
  color: #fff;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.25);
  transform: translateY(-2px);
}

.btn-resume svg {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.btn-resume:hover svg {
  transform: translateY(2px);
}

/* ===== Nav Resume Link ===== */
.site-nav__link--resume {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1.5px solid rgba(0, 212, 255, 0.4);
  color: var(--cyan) !important;
  background: rgba(0, 212, 255, 0.05);
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.site-nav__link--resume:hover {
  background: rgba(0, 212, 255, 0.12);
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
}

.site-nav__link--resume svg {
  transition: transform 0.2s ease;
}

.site-nav__link--resume:hover svg {
  transform: translateY(2px);
}

/* =========================================================
   DIGITAL ART SECTION
   ========================================================= */
.digital-art-section { position: relative; overflow: hidden; }
.digital-art-section__orb--1 { top: 10%; left: -5%; }
.digital-art-section__orb--2 { bottom: 10%; right: -5%; }
.digital-art-section__desc {
    color: var(--text-2);
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 680px;
    margin: 0 auto 2rem;
    text-align: center;
}
.digital-art-section__cta { text-align: center; }
.digital-art-section__actions { margin-bottom: 3rem; }
.digital-art-section__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(176,96,255,0.15), rgba(255,61,206,0.1));
    border: 1.5px solid rgba(176,96,255,0.5);
    color: var(--purple);
    padding: 14px 32px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    font-size: 1rem;
}
.digital-art-section__btn:hover {
    background: linear-gradient(135deg, rgba(176,96,255,0.28), rgba(255,61,206,0.18));
    border-color: rgba(176,96,255,0.9);
    box-shadow: 0 0 24px rgba(176,96,255,0.3);
    transform: translateY(-2px);
}
.digital-art-section__highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 720px;
    margin: 0 auto;
}

/* Creative cards */
.creative-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.creative-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(176,96,255,0.05), transparent 60%);
    pointer-events: none;
}
.creative-card:hover {
    transform: translateY(-4px);
    border-color: rgba(176,96,255,0.5);
    box-shadow: 0 8px 32px rgba(176,96,255,0.15);
}
.creative-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(176,96,255,0.15), rgba(255,61,206,0.1));
    border: 1px solid rgba(176,96,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--purple);
    margin-bottom: 1.25rem;
}
.creative-card__title { font-size: 1.1rem; font-weight: 600; color: var(--text-0); margin-bottom: 0.5rem; }
.creative-card__desc { font-size: 0.9rem; color: var(--text-2); line-height: 1.6; margin-bottom: 1.25rem; }
.creative-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--purple);
    text-decoration: none;
    transition: gap 0.2s ease, opacity 0.2s ease;
}
.creative-card__link:hover { gap: 10px; opacity: 0.85; }

/* =========================================================
   VERSES SECTION
   ========================================================= */
.verses-section { position: relative; overflow: hidden; }
.verses-section__orb--1 { top: 10%; right: -5%; }
.verses-section__orb--2 { bottom: 10%; left: -5%; }
.verses-section__content { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }

.verse-quote {
    position: relative;
    max-width: 700px;
    background: var(--bg-1);
    border: 1px solid rgba(0,212,255,0.2);
    border-left: 4px solid var(--cyan);
    border-radius: 0 16px 16px 0;
    padding: 2rem 2rem 2rem 3rem;
    text-align: left;
}
.verse-quote__mark {
    position: absolute;
    top: -0.5rem;
    left: 1.5rem;
    font-size: 5rem;
    line-height: 1;
    color: var(--cyan);
    opacity: 0.2;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
}
.verse-quote__text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-1);
    font-style: italic;
    margin-bottom: 1rem;
}
.verse-quote__author { font-size: 0.875rem; color: var(--cyan); font-weight: 600; font-family: 'JetBrains Mono', monospace; }

.verses-section__desc {
    color: var(--text-2);
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 680px;
    text-align: center;
    margin-bottom: 0;
}
.verses-section__cta { text-align: center; }
.verses-section__actions { margin-top: 1.5rem; }
.verses-section__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(0,212,255,0.1), rgba(0,255,136,0.06));
    border: 1.5px solid rgba(0,212,255,0.4);
    color: var(--cyan);
    padding: 14px 32px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    font-size: 1rem;
}
.verses-section__btn:hover {
    background: linear-gradient(135deg, rgba(0,212,255,0.2), rgba(0,255,136,0.12));
    border-color: rgba(0,212,255,0.9);
    box-shadow: 0 0 24px rgba(0,212,255,0.25);
    transform: translateY(-2px);
}
.verses-section__tags { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.verse-tag {
    padding: 6px 16px;
    border-radius: 20px;
    background: rgba(0,212,255,0.07);
    border: 1px solid rgba(0,212,255,0.2);
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.2s ease;
}
.verse-tag:hover { background: rgba(0,212,255,0.14); border-color: rgba(0,212,255,0.5); color: var(--cyan); }

/* =========================================================
   CONTACT – DIRECT EMAIL CARD
   ========================================================= */
.contact-direct-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 2.5rem;
    gap: 1.25rem;
}
.contact-direct-card__icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(0,255,136,0.07));
    border: 1px solid rgba(0,212,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
    margin-bottom: 0.5rem;
}
.contact-direct-card__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-0);
    margin: 0;
}
.contact-direct-card__desc {
    font-size: 0.95rem;
    color: var(--text-2);
    line-height: 1.8;
    max-width: 380px;
    margin: 0;
}
.contact-direct-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(0,255,136,0.07));
    border: 1.5px solid rgba(0,212,255,0.5);
    color: var(--cyan);
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.25s ease;
    word-break: break-all;
}
.contact-direct-card__btn:hover {
    background: linear-gradient(135deg, rgba(0,212,255,0.22), rgba(0,255,136,0.14));
    border-color: var(--cyan);
    box-shadow: 0 0 24px rgba(0,212,255,0.25);
    transform: translateY(-2px);
}
.contact-direct-card__note {
    font-size: 0.85rem;
    color: var(--text-3);
    margin: 0;
}
.contact-direct-card__linkedin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}
.contact-direct-card__linkedin:hover {
    color: var(--cyan);
    border-color: rgba(0,212,255,0.4);
    background: rgba(0,212,255,0.05);
}