/* ==========================================================================
   NANDINI — Cinematic Night Sky Portfolio  ·  v3
   Night Sky · Purple Butterfly · Stars · Moonlight
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg-primary:#060810;--bg-secondary:#0A0F1A;--bg-tertiary:#0E1525;
  --bg-card:#0B1018;--bg-card-hover:#10182A;
  --text-primary:#FFFFFF;--text-bright:#F5F7FA;--text-secondary:#AEB6C2;--text-muted:#5E6878;
  --accent-blue:#4A8EFF;--accent-violet:#8B5CF6;--accent-cyan:#22D3EE;
  --accent-purple:#7c3aed;--accent-lavender:#c4b5fd;
  --accent-glow:rgba(74,142,255,0.25);
  --border-subtle:rgba(255,255,255,0.04);--border-light:rgba(255,255,255,0.07);
  --border-medium:rgba(255,255,255,0.11);--border-hover:rgba(74,142,255,0.35);
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-heading:'Space Grotesk',sans-serif;--font-mono:'JetBrains Mono','Courier New',monospace;
  --fs-micro:.65rem;--fs-eyebrow:.75rem;--fs-small:.85rem;--fs-body:1rem;
  --fs-subheading:clamp(1.2rem,2vw,1.5rem);--fs-heading:clamp(2.2rem,5.5vw,4.5rem);
  --fs-hero:clamp(3.2rem,9vw,7.5rem);
  --section-pad-y:clamp(80px,12vh,160px);--section-pad-x:clamp(24px,5vw,120px);
  --max-width:1400px;--nav-height:70px;
  --t-fast:.2s cubic-bezier(.4,0,.2,1);--t-base:.4s cubic-bezier(.4,0,.2,1);
  --t-slow:.7s cubic-bezier(.4,0,.2,1);--t-reveal:.8s cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:var(--nav-height)}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);font-weight:400;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}ul,ol{list-style:none}img{max-width:100%;display:block}button{cursor:pointer;font-family:inherit}

::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(139,92,246,0.25);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(139,92,246,0.45)}
::selection{background:rgba(139,92,246,0.3);color:#fff}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;letter-spacing:-0.03em;text-transform:uppercase;line-height:1.05}

/* ── Loading Screen ─────────────────────────────────────────────── */
.loading-screen{position:fixed;inset:0;background:#020408;z-index:9999;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .8s ease,visibility .8s ease;cursor:pointer}
.loading-screen.loaded{opacity:0;visibility:hidden;pointer-events:none}
.loader-content{display:flex;flex-direction:column;align-items:center;gap:12px}
.loader-init{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.5em;color:var(--text-muted);text-transform:uppercase;margin-bottom:20px}
.loader-count{font-family:var(--font-heading);font-size:clamp(5rem,16vw,13rem);font-weight:700;line-height:1;letter-spacing:-.05em;background:linear-gradient(135deg,#fff 0%,var(--accent-blue) 50%,var(--accent-violet) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 40px rgba(139,92,246,0.4))}
.loader-status{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.3em;color:var(--text-secondary);text-transform:uppercase}
.loader-progress{width:clamp(200px,40vw,400px);height:1px;background:rgba(255,255,255,0.04);margin-top:24px;border-radius:2px;overflow:hidden}
.loader-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent-blue),var(--accent-violet));border-radius:2px;transition:width .05s linear;box-shadow:0 0 12px rgba(139,92,246,0.5)}
.loader-system-text{position:absolute;bottom:30px;right:40px;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.25em;color:var(--text-muted);text-transform:uppercase}
.loader-dot{color:#4ade80;animation:pulseDot 2s infinite;font-size:.5rem}

/* ── Canvas / Ambient ───────────────────────────────────────────── */
.particle-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;width:100%;height:100%}
.ambient-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.35;transform:translateZ(0);will-change:transform}
.ambient-orb-1{width:650px;height:650px;top:-10%;right:-5%;background:radial-gradient(circle,rgba(74,142,255,0.1) 0%,transparent 70%);animation:orbFloat1 22s ease-in-out infinite}
.ambient-orb-2{width:550px;height:550px;bottom:8%;left:-10%;background:radial-gradient(circle,rgba(139,92,246,0.1) 0%,transparent 70%);animation:orbFloat2 28s ease-in-out infinite}
.ambient-orb-3{width:420px;height:420px;top:40%;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(124,58,237,0.06) 0%,transparent 70%);animation:orbFloat3 20s ease-in-out infinite}
@keyframes orbFloat1{0%,100%{transform:translate(0,0)}25%{transform:translate(-40px,60px)}50%{transform:translate(30px,-30px)}75%{transform:translate(-20px,40px)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0)}33%{transform:translate(50px,-40px)}66%{transform:translate(-30px,50px)}}
@keyframes orbFloat3{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-60px)}}

.grain-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.02;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:128px 128px}

/* ── Butterfly Layer & Canvas ───────────────────────────────────── */
.butterfly-layer{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.butterfly-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.butterfly{position:absolute;pointer-events:none;width:82px;height:68px;top:0;left:0;opacity:0;transition:opacity 1.2s ease;will-change:transform}
.butterfly.visible{opacity:1}
.butterfly-svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 12px rgba(167,139,250,0.55)) drop-shadow(0 0 24px rgba(139,92,246,0.28))}
.wing-l{transform-origin:60px 46px;animation:flapL 3.2s cubic-bezier(.42,0,.25,1) infinite}
.wing-r{transform-origin:60px 46px;animation:flapR 3.2s cubic-bezier(.42,0,.25,1) infinite;animation-delay:-0.06s}
@keyframes flapL{
  0%,100%{transform:perspective(300px) rotateY(0deg) rotateZ(0deg)}
  8%{transform:perspective(300px) rotateY(56deg) rotateZ(2deg)}
  16%{transform:perspective(300px) rotateY(8deg) rotateZ(-0.5deg)}
  24%{transform:perspective(300px) rotateY(48deg) rotateZ(1.5deg)}
  34%{transform:perspective(300px) rotateY(4deg) rotateZ(0deg)}
  52%{transform:perspective(300px) rotateY(10deg) rotateZ(0.5deg)}
  68%{transform:perspective(300px) rotateY(2deg) rotateZ(0deg)}
  76%{transform:perspective(300px) rotateY(46deg) rotateZ(1.5deg)}
  84%{transform:perspective(300px) rotateY(10deg) rotateZ(0deg)}
  92%{transform:perspective(300px) rotateY(32deg) rotateZ(1deg)}
}
@keyframes flapR{
  0%,100%{transform:perspective(300px) rotateY(0deg) rotateZ(0deg)}
  8%{transform:perspective(300px) rotateY(-54deg) rotateZ(-2deg)}
  16%{transform:perspective(300px) rotateY(-7deg) rotateZ(0.5deg)}
  24%{transform:perspective(300px) rotateY(-46deg) rotateZ(-1.5deg)}
  34%{transform:perspective(300px) rotateY(-3deg) rotateZ(0deg)}
  52%{transform:perspective(300px) rotateY(-9deg) rotateZ(-0.5deg)}
  68%{transform:perspective(300px) rotateY(-2deg) rotateZ(0deg)}
  76%{transform:perspective(300px) rotateY(-44deg) rotateZ(-1.5deg)}
  84%{transform:perspective(300px) rotateY(-9deg) rotateZ(0deg)}
  92%{transform:perspective(300px) rotateY(-30deg) rotateZ(-1deg)}
}

/* Butterfly glow aura — delicate moonlight reflection */
.butterfly::after{content:'';position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,0.22) 0%,rgba(139,92,246,0.08) 45%,transparent 70%);pointer-events:none;filter:blur(8px);transition:opacity .6s ease,transform .6s ease;opacity:0.85}
.butterfly.butterfly-glow::after{inset:-18px;background:radial-gradient(circle,rgba(196,181,253,0.35) 0%,rgba(167,139,250,0.16) 45%,transparent 75%);filter:blur(10px);opacity:1}
.butterfly.brand-glow::after{inset:-20px;background:radial-gradient(circle,rgba(196,181,253,0.32) 0%,rgba(139,92,246,0.14) 50%,transparent 75%);filter:blur(10px)}

/* ── Shooting Stars ─────────────────────────────────────────────── */
.shooting-stars-container{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.shooting-star{position:absolute;width:80px;height:1px;background:linear-gradient(90deg,rgba(196,181,253,0.7),rgba(255,255,255,0.4),transparent);border-radius:2px;opacity:0;animation:shoot 1.2s ease-out forwards}
@keyframes shoot{0%{transform:translateX(0) scaleX(0.3);opacity:0}10%{opacity:1;transform:translateX(40px) scaleX(1)}100%{transform:translateX(350px) scaleX(0.6);opacity:0}}

/* ── Scroll Progress ────────────────────────────────────────────── */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0%;z-index:10000;pointer-events:none;background:linear-gradient(90deg,var(--accent-blue),var(--accent-violet),var(--accent-lavender));box-shadow:0 0 10px rgba(139,92,246,0.5),0 0 30px rgba(74,142,255,0.15);transition:width .05s linear}

/* ── Custom Cursor ──────────────────────────────────────────────── */
.custom-cursor,.custom-cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);display:none}
.custom-cursor{width:5px;height:5px;background:var(--accent-violet);box-shadow:0 0 8px rgba(139,92,246,0.5)}
.custom-cursor-ring{width:36px;height:36px;border:1.5px solid rgba(139,92,246,0.3);transition:width var(--t-base),height var(--t-base),border-color var(--t-base),background var(--t-base)}
.custom-cursor-ring.hover{width:56px;height:56px;border-color:rgba(139,92,246,0.5);background:rgba(139,92,246,0.04)}
.custom-cursor-ring.text-mode{width:80px;height:80px;border-color:rgba(139,92,246,0.4);background:rgba(10,15,25,0.85)}
.cursor-text{position:fixed;pointer-events:none;z-index:9999;font-family:var(--font-mono);font-size:.55rem;font-weight:600;letter-spacing:.15em;color:var(--accent-violet);text-transform:uppercase;opacity:0;transition:opacity var(--t-fast);transform:translate(-50%,-50%)}
.cursor-text.visible{opacity:1}
@media(pointer:fine){.custom-cursor,.custom-cursor-ring{display:block}body{cursor:none}a,button,input,textarea{cursor:none}}

/* ── Navbar ─────────────────────────────────────────────────────── */
.navbar{position:fixed;top:0;left:0;width:100%;height:var(--nav-height);z-index:1000;display:flex;justify-content:space-between;align-items:center;padding:0 var(--section-pad-x);background:rgba(6,8,16,0.5);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);animation:slideDown .6s ease 2.8s both}
.navbar.scrolled{background:rgba(6,8,16,0.88);border-bottom-color:rgba(139,92,246,0.08);box-shadow:0 1px 30px rgba(0,0,0,0.4)}
.nav-logo{font-family:var(--font-heading);font-size:1.15rem;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-link{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--text-secondary);transition:color var(--t-fast);position:relative}
.nav-link::after{content:'';position:absolute;bottom:-4px;left:50%;width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent-blue),var(--accent-violet));transition:width var(--t-base),left var(--t-base)}
.nav-link:hover,.nav-link.active{color:var(--text-primary)}
.nav-link.active::after{width:100%;left:0}
.nav-cta{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--text-primary);border:1px solid rgba(139,92,246,0.25);padding:8px 22px;border-radius:6px;transition:all var(--t-fast);position:relative;overflow:hidden}
.nav-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(139,92,246,0.08),rgba(74,142,255,0.04));opacity:0;transition:opacity var(--t-fast)}
.nav-cta:hover{border-color:rgba(139,92,246,0.5);box-shadow:0 0 20px rgba(139,92,246,0.12)}.nav-cta:hover::before{opacity:1}

.hamburger{display:none;background:none;border:none;width:28px;height:20px;position:relative;z-index:1001}
.hamburger span{display:block;width:100%;height:1.5px;background:var(--text-primary);position:absolute;left:0;transition:all var(--t-fast)}
.hamburger span:nth-child(1){top:0}.hamburger span:nth-child(2){top:50%;transform:translateY(-50%)}.hamburger span:nth-child(3){bottom:0}
.navbar.nav-open .hamburger span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}.navbar.nav-open .hamburger span:nth-child(2){opacity:0}.navbar.nav-open .hamburger span:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}

.mobile-menu{position:fixed;inset:0;background:rgba(4,5,10,0.98);z-index:999;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease}
.mobile-menu.active{opacity:1;visibility:visible}
.mobile-menu-links{display:flex;flex-direction:column;align-items:center;gap:28px}
.mobile-link{font-family:var(--font-heading);font-size:clamp(1.6rem,5vw,2.4rem);font-weight:700;color:var(--text-primary);text-transform:uppercase;letter-spacing:-.02em;opacity:0;transform:translateY(20px);transition:opacity .4s ease,transform .4s ease,color var(--t-fast)}
.mobile-menu.active .mobile-link{opacity:1;transform:translateY(0)}
.mobile-menu.active .mobile-link:nth-child(1){transition-delay:.1s}.mobile-menu.active .mobile-link:nth-child(2){transition-delay:.15s}.mobile-menu.active .mobile-link:nth-child(3){transition-delay:.2s}.mobile-menu.active .mobile-link:nth-child(4){transition-delay:.25s}.mobile-menu.active .mobile-link:nth-child(5){transition-delay:.3s}.mobile-menu.active .mobile-link:nth-child(6){transition-delay:.35s}.mobile-menu.active .mobile-link:nth-child(7){transition-delay:.4s}
.mobile-link:hover{color:var(--accent-violet)}

/* ── Section Base ───────────────────────────────────────────────── */
.section{padding:var(--section-pad-y) var(--section-pad-x);max-width:var(--max-width);margin:0 auto;position:relative;z-index:5}
.section-header{margin-bottom:60px}
.section-eyebrow{display:block;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:400;letter-spacing:.25em;color:var(--accent-violet);text-transform:uppercase;margin-bottom:16px;opacity:.7}
.section-title{font-size:var(--fs-heading);line-height:1;color:var(--text-primary)}
.section+.section::before{content:'';display:block;width:80%;max-width:600px;height:1px;margin:0 auto clamp(60px,8vh,120px);background:linear-gradient(90deg,transparent,rgba(139,92,246,0.12),rgba(74,142,255,0.08),transparent)}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero{min-height:100vh;padding-top:calc(var(--nav-height) + 40px);position:relative;overflow:hidden;z-index:5}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-glow{position:absolute;top:15%;right:5%;width:700px;height:700px;background:radial-gradient(circle,rgba(139,92,246,0.1) 0%,rgba(74,142,255,0.04) 40%,transparent 70%);filter:blur(80px);animation:floatSlow 12s ease-in-out infinite}
.hero-glow-secondary{position:absolute;bottom:5%;left:15%;width:500px;height:500px;background:radial-gradient(circle,rgba(124,58,237,0.06) 0%,transparent 70%);filter:blur(100px);animation:floatSlow 15s ease-in-out infinite reverse}
.hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.12;filter:blur(1px);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center;max-width:var(--max-width);margin:0 auto;min-height:calc(100vh - var(--nav-height) - 40px)}
.hero-content{display:flex;flex-direction:column;padding-right:20px}
.hero-eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.3em;color:var(--text-secondary);text-transform:uppercase;margin-bottom:24px}
.eyebrow-slash{color:var(--accent-violet);margin-right:8px}
.hero-title{font-size:var(--fs-hero);line-height:.92;margin-bottom:28px;letter-spacing:-.04em}
.hero-title-line{display:block;font-size:.42em;letter-spacing:.08em;color:var(--text-secondary);font-weight:500;margin-bottom:8px}
.hero-title-name{display:block;background:linear-gradient(135deg,#ffffff 25%,var(--accent-lavender) 55%,var(--accent-violet) 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:nameShimmer 6s ease-in-out infinite;transition:filter var(--t-base)}
.hero-title-name:hover{filter:drop-shadow(0 0 24px rgba(139,92,246,0.5))}
@keyframes nameShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-subtitle{font-size:clamp(.95rem,1.2vw,1.1rem);color:var(--text-secondary);max-width:480px;line-height:1.7;margin-bottom:36px}
.hero-capabilities{display:flex;gap:0;margin-bottom:40px}
.capability{padding:0 24px;border-left:1px solid rgba(139,92,246,0.15)}
.capability:first-child{padding-left:0;border-left:none}
.capability-label{display:block;font-family:var(--font-heading);font-size:.8rem;font-weight:700;letter-spacing:.08em;color:var(--text-primary);margin-bottom:4px;text-transform:uppercase}
.capability-value{display:block;font-size:var(--fs-small);color:var(--text-secondary)}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 32px;font-family:var(--font-body);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:6px;text-decoration:none;border:none;position:relative;overflow:hidden;transition:all var(--t-fast)}
.btn-primary{background:linear-gradient(135deg,#fff,#e8edf5);color:#0a0e14;box-shadow:0 4px 20px rgba(255,255,255,0.08)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(139,92,246,0.2),0 0 40px rgba(255,255,255,0.06)}
.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid rgba(139,92,246,0.25)}
.btn-secondary:hover{border-color:rgba(139,92,246,0.5);transform:translateY(-2px);box-shadow:0 0 20px rgba(139,92,246,0.1);background:rgba(139,92,246,0.04)}
.btn::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);transition:left .5s ease}.btn:hover::after{left:100%}
.magnetic{transition:transform var(--t-fast)}

/* Portrait */
.hero-portrait-wrapper{display:flex;flex-direction:column;align-items:center;position:relative}
.hero-portrait-container{position:relative;width:100%;max-width:420px;border-radius:20px;overflow:hidden;transition:transform var(--t-base)}
.portrait-glow{position:absolute;inset:-60px;z-index:-1;background:radial-gradient(ellipse at center,rgba(139,92,246,0.16) 0%,rgba(74,142,255,0.06) 40%,transparent 65%);filter:blur(50px);animation:floatSlow 8s ease-in-out infinite}
.hero-portrait{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:20px;position:relative;z-index:1}
.portrait-frame{position:absolute;inset:0;border:1px solid rgba(139,92,246,0.1);border-radius:20px;z-index:2;pointer-events:none;transition:border-color var(--t-base),box-shadow var(--t-base)}
.hero-portrait-container:hover .portrait-frame{border-color:rgba(139,92,246,0.2);box-shadow:inset 0 0 40px rgba(139,92,246,0.05)}
.hero-status{display:flex;align-items:center;gap:10px;margin-top:20px;background:rgba(139,92,246,0.04);border:1px solid rgba(139,92,246,0.1);border-radius:100px;padding:8px 20px}
.status-dot{width:8px;height:8px;background:#4ade80;border-radius:50%;animation:pulseDot 2s infinite;flex-shrink:0}
.status-text{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.2em;color:var(--text-secondary);text-transform:uppercase}
.hero-year{position:absolute;bottom:-10px;right:-10px;font-family:var(--font-heading);font-size:clamp(3rem,6vw,5rem);font-weight:700;background:linear-gradient(135deg,rgba(139,92,246,0.06),rgba(74,142,255,0.03));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;letter-spacing:-.04em;pointer-events:none}
.scroll-indicator{position:absolute;bottom:40px;left:var(--section-pad-x);display:flex;align-items:center;gap:14px;z-index:6}
.scroll-text{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.3em;color:var(--text-muted);text-transform:uppercase}
.scroll-arrow{color:var(--accent-violet);opacity:.5;animation:scrollBounce 2s ease-in-out infinite}.scroll-arrow svg{display:block}

/* ── About ──────────────────────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
.about-statement{font-family:var(--font-heading);font-size:clamp(1.8rem,3.5vw,3rem);line-height:1.15;letter-spacing:-.03em;color:var(--text-primary);border:none;padding:0;background:linear-gradient(135deg,#fff 60%,var(--accent-lavender));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.about-text{color:var(--text-secondary);line-height:1.8;font-size:clamp(.95rem,1.1vw,1.05rem);margin-bottom:20px}.about-text:last-child{margin-bottom:0}

/* ── Skills Workspace (What I Work With) ────────────────────────── */
.skills-workspace-section{position:relative;background:var(--bg-primary);overflow:hidden}
.workspace-container{position:relative;width:100%;max-width:var(--max-width);margin:0 auto}

/* Header & Decorative corner metadata */
.workspace-header{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;margin-bottom:56px}
.workspace-corner-labels{position:absolute;top:0;left:0;display:flex;gap:14px;font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.25em;color:rgba(174,182,194,0.45);text-transform:uppercase;pointer-events:none}
.workspace-corner-quote{position:absolute;top:0;right:0;display:flex;flex-direction:column;gap:3px;text-align:right;font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.22em;color:rgba(174,182,194,0.45);text-transform:uppercase;pointer-events:none}
.workspace-eyebrow{display:block;width:fit-content;margin:0 auto 16px;font-size:0.75rem;letter-spacing:0.35em;text-align:center}
.workspace-title{display:block;width:fit-content;font-family:var(--font-heading);font-weight:700;font-size:clamp(2.4rem,4.5vw,3.8rem);line-height:1.1;letter-spacing:-0.02em;margin:0 auto 12px;padding:0 4px;background:linear-gradient(135deg,#ffffff 40%,var(--accent-lavender) 80%,var(--accent-violet) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase;text-align:center}
.workspace-subtitle{display:block;width:fit-content;font-family:var(--font-mono);font-size:clamp(0.72rem,0.95vw,0.85rem);letter-spacing:0.2em;color:var(--text-secondary);text-transform:uppercase;max-width:650px;margin:0 auto;text-align:center}

/* 2x2 Grid Layout & Card Interactivity */
.workspace-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-bottom:52px}
.workspace-grid:hover .workspace-card:not(:hover){opacity:0.62;filter:brightness(0.9);transform:scale(0.995)}

.workspace-card{background:linear-gradient(145deg,rgba(11,16,28,0.7) 0%,rgba(6,10,18,0.85) 100%);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:clamp(26px,2.8vw,38px);display:grid;grid-template-columns:1.05fr 1fr;gap:24px;position:relative;overflow:hidden;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 45px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.05);transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base),opacity var(--t-base),filter var(--t-base)}
.workspace-card::before{content:'';position:absolute;inset:0;border-radius:20px;background:radial-gradient(550px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(139,92,246,0.08),transparent 60%);opacity:0;transition:opacity var(--t-base);pointer-events:none}
.workspace-card:hover{transform:translateY(-5px);border-color:rgba(139,92,246,0.35);box-shadow:0 24px 60px rgba(0,0,0,0.6),0 0 35px rgba(139,92,246,0.1),inset 0 1px 0 rgba(196,181,253,0.2)}
.workspace-card:hover::before{opacity:1}

/* Card Left Column (Information & Tags) */
.card-content-col{display:flex;flex-direction:column;justify-content:space-between;height:100%;z-index:2}
.card-header-block{margin-bottom:18px}
.card-num-wrap{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.card-number{font-family:var(--font-heading);font-size:1.6rem;font-weight:700;color:var(--accent-lavender);opacity:0.9;line-height:1}
.card-num-line{height:1px;width:32px;background:linear-gradient(90deg,rgba(139,92,246,0.6),transparent)}
.card-title{font-size:clamp(1.15rem,1.4vw,1.4rem);letter-spacing:-0.02em;color:var(--text-primary);margin-bottom:8px;line-height:1.2}
.card-desc{font-size:0.84rem;line-height:1.55;color:var(--text-secondary)}

.card-pills-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.workspace-pill{display:inline-flex;align-items:center;padding:5px 12px;border-radius:100px;font-size:0.72rem;font-weight:500;font-family:var(--font-body);color:var(--text-secondary);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);transition:all var(--t-fast);white-space:nowrap}
.workspace-pill:hover{background:rgba(139,92,246,0.12);border-color:rgba(139,92,246,0.4);color:#ffffff;transform:translateY(-1px)}

.workspace-card-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:0.75rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-lavender);align-self:flex-start;padding:6px 0;position:relative;transition:all var(--t-fast);text-decoration:none}
.workspace-card-btn::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:linear-gradient(90deg,var(--accent-violet),var(--accent-blue));transition:width var(--t-base)}
.workspace-card-btn:hover{color:#ffffff;transform:translateX(3px)}
.workspace-card-btn:hover::after{width:100%}
.btn-arrow{transition:transform var(--t-fast)}
.workspace-card-btn:hover .btn-arrow{transform:translateX(4px)}

/* Card Right Column (Interactive Visual Workspace Previews) */
.card-preview-col{display:flex;align-items:center;justify-content:center;position:relative;min-height:280px;z-index:1}

/* ── PREVIEW 01: Writing Minimalist Dark Glass Editor ───────────── */
.writing-preview-window{width:100%;height:100%;min-height:280px;background:rgba(7,11,20,0.85);border:1px solid rgba(139,92,246,0.22);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 12px 30px rgba(0,0,0,0.4)}
.preview-window-topbar{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:rgba(12,18,32,0.9);border-bottom:1px solid rgba(255,255,255,0.06)}
.window-dots{display:flex;gap:6px}
.dot{width:8px;height:8px;border-radius:50%}
.dot-r{background:#ef4444;opacity:0.8}
.dot-y{background:#f59e0b;opacity:0.8}
.dot-g{background:#10b981;opacity:0.8}
.preview-filename{font-family:var(--font-mono);font-size:0.65rem;color:var(--text-muted);letter-spacing:0.06em}
.writing-window-body{padding:18px 18px 0;flex-grow:1;display:flex;flex-direction:column;position:relative}
.writing-prose-intro{font-family:var(--font-mono);font-size:0.68rem;color:var(--accent-violet);opacity:0.85;margin-bottom:10px;letter-spacing:0.04em}
.writing-prose-quote{font-family:'Space Grotesk',serif,sans-serif;font-size:clamp(0.95rem,1.2vw,1.15rem);font-weight:500;line-height:1.4;color:#f8fafc;font-style:italic;position:relative;z-index:2}
.typing-cursor{color:var(--accent-blue);animation:blinkCursor 1s step-end infinite;margin-left:2px;font-style:normal;font-weight:700}
.writing-decor-wrap{position:absolute;bottom:0;left:0;right:0;height:80px;pointer-events:none;overflow:hidden}
.mountain-silhouette{position:absolute;bottom:0;left:0;width:100%;height:55px;object-fit:cover;opacity:0.75}
.quill-icon-wrap{position:absolute;right:14px;bottom:8px;z-index:2;opacity:0.6;transition:transform var(--t-base),opacity var(--t-base)}
.workspace-card:hover .quill-icon-wrap{opacity:0.95;transform:rotate(-6deg) scale(1.08)}
.writing-window-footer{padding:8px 14px;background:rgba(5,8,15,0.95);border-top:1px solid rgba(255,255,255,0.04);display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-mono);font-size:0.6rem;color:var(--text-muted);letter-spacing:0.18em;text-transform:uppercase}
.footer-slash{color:var(--accent-violet);opacity:0.5}

/* ── PREVIEW 02: Data Spreadsheet & Mini Analytics Dashboard ──── */
.data-sheet-window{width:100%;background:rgba(7,12,22,0.92);border:1px solid rgba(34,197,94,0.22);border-radius:14px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,0.45);display:flex;flex-direction:column}
.sheet-titlebar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(12,20,34,0.95);border-bottom:1px solid rgba(255,255,255,0.06)}
.excel-badge{width:18px;height:18px;background:#107c41;color:#fff;font-family:var(--font-heading);font-size:0.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:4px;box-shadow:0 2px 6px rgba(16,124,65,0.4)}
.sheet-formula-bar{display:flex;align-items:center;gap:8px;flex-grow:1;background:rgba(5,9,16,0.85);border:1px solid rgba(255,255,255,0.07);border-radius:4px;padding:2px 8px}
.fx-label{font-family:var(--font-mono);font-size:0.65rem;font-style:italic;color:var(--accent-lavender)}
.fx-formula{font-family:var(--font-mono);font-size:0.66rem;color:#4ade80;letter-spacing:0.02em}
.mini-table-wrap{padding:8px 10px;overflow-x:auto}
.mini-sheet-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:0.64rem;text-align:left}
.mini-sheet-table th,.mini-sheet-table td{padding:3px 6px;border:1px solid rgba(255,255,255,0.04)}
.mini-sheet-table thead tr:first-child th{background:rgba(12,18,32,0.6);color:var(--text-muted);font-size:0.58rem;text-align:center}
.mini-sheet-table tr.subhead-row th{background:rgba(16,24,42,0.75);color:var(--text-secondary);font-size:0.59rem;font-weight:600;text-transform:uppercase}
.mini-sheet-table .row-num{color:var(--text-muted);width:20px;text-align:center;font-size:0.58rem;background:rgba(12,18,32,0.4)}
.mini-sheet-table .col-fx{width:20px;color:var(--accent-lavender)}
.mini-sheet-table .cell-name{color:#f1f5f9;font-weight:500}
.mini-sheet-table .cell-num{color:var(--text-secondary);text-align:right}
.mini-sheet-table .cell-sales{color:#38bdf8;font-weight:600;text-align:right}
.sheet-charts-row{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center;padding:8px 10px;background:rgba(6,9,16,0.95);border-top:1px solid rgba(255,255,255,0.05)}
.mini-barchart{display:flex;align-items:flex-end;gap:4px;height:34px;padding:3px 5px;background:rgba(12,18,32,0.6);border-radius:5px;border:1px solid rgba(255,255,255,0.04)}
.bar-col{width:5px;border-radius:2px 2px 0 0;background:linear-gradient(to top,#3b82f6,#38bdf8)}
.b-1{height:45%}.b-2{height:70%}.b-3{height:35%}.b-4{height:90%;background:linear-gradient(to top,#8b5cf6,#c084fc)}.b-5{height:60%}
.mini-donutchart{display:flex;align-items:center;justify-content:center}
.mini-kpi-card{display:flex;justify-content:space-around;background:rgba(12,18,32,0.7);border:1px solid rgba(56,189,248,0.18);border-radius:5px;padding:4px 8px}
.kpi-group{display:flex;flex-direction:column}
.kpi-label{font-family:var(--font-mono);font-size:0.52rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em}
.kpi-val{font-family:var(--font-mono);font-size:0.72rem;font-weight:700;color:#38bdf8}

/* ── PREVIEW 03: 3D Stacked Documents & Presentation Mockup ───── */
.docs-stack-wrapper{position:relative;width:100%;height:250px;display:flex;align-items:center;justify-content:center;perspective:1000px}
.stack-sheet{position:absolute;border-radius:12px;transition:transform var(--t-base),box-shadow var(--t-base)}
.sheet-back{width:80%;height:185px;background:linear-gradient(135deg,rgba(88,28,135,0.3) 0%,rgba(12,18,32,0.85) 100%);border:1px solid rgba(168,85,247,0.22);transform:translateY(-22px) translateX(22px) rotate(5deg);box-shadow:0 10px 24px rgba(0,0,0,0.4);z-index:1}
.sheet-mid{width:85%;height:195px;background:linear-gradient(145deg,rgba(24,32,47,0.95),rgba(12,18,32,0.98));border:1px solid rgba(249,115,22,0.3);transform:translateY(-10px) translateX(10px) rotate(2deg);box-shadow:0 14px 28px rgba(0,0,0,0.5);z-index:2;padding:14px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.slide-label{font-family:var(--font-mono);font-size:0.56rem;color:#fb923c;text-transform:uppercase;letter-spacing:0.12em;font-weight:600}
.slide-title{font-family:var(--font-heading);font-size:0.9rem;font-weight:700;color:#f8fafc;line-height:1.25;margin-top:4px}
.slide-num{font-family:var(--font-mono);font-size:0.6rem;color:var(--text-muted);align-self:flex-end}
.sheet-front{width:88%;height:210px;background:linear-gradient(145deg,rgba(13,20,35,0.98),rgba(8,12,22,0.98));border:1px solid rgba(59,130,246,0.32);transform:translateY(6px) translateX(-6px) rotate(-2deg);box-shadow:0 20px 42px rgba(0,0,0,0.6);z-index:3;padding:16px 18px;display:flex;flex-direction:column;position:relative}
.workspace-card:hover .sheet-front{transform:translateY(2px) translateX(-10px) rotate(-3.5deg);box-shadow:0 26px 50px rgba(0,0,0,0.7)}
.workspace-card:hover .sheet-mid{transform:translateY(-14px) translateX(14px) rotate(4deg)}
.workspace-card:hover .sheet-back{transform:translateY(-28px) translateX(28px) rotate(7.5deg)}
.report-header{margin-bottom:10px}
.report-title{display:inline-block;font-family:var(--font-heading);font-size:0.8rem;font-weight:700;color:#60a5fa;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:2px}
.report-sub{font-family:var(--font-body);font-size:0.68rem;color:var(--text-secondary);line-height:1.25}
.report-img-placeholder{height:46px;border-radius:5px;overflow:hidden;margin-bottom:10px;border:1px solid rgba(255,255,255,0.06)}
.report-img-gradient{width:100%;height:100%;background:linear-gradient(135deg,rgba(59,130,246,0.25) 0%,rgba(139,92,246,0.2) 50%,rgba(24,32,47,0.6) 100%)}
.report-lines{display:flex;flex-direction:column;gap:4px}
.r-line{height:3px;border-radius:2px;background:rgba(255,255,255,0.12)}
.l-1{width:90%}.l-2{width:75%}.l-3{width:82%}.l-4{width:50%}
.sheet-badge-icon{position:absolute;width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:0.7rem;font-weight:700;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,0.35)}
.sheet-badge-icon.blue{bottom:12px;right:12px;background:#2b579a}
.sheet-badge-icon.orange{bottom:12px;right:12px;background:#d24726}
.sheet-badge-icon.purple{top:10px;right:10px;background:#7c3aed}

/* ── PREVIEW 04: Futuristic Code Terminal & Dev Tools Dock ─────── */
.tech-terminal-window{width:100%;background:rgba(6,10,18,0.92);border:1px solid rgba(139,92,246,0.28);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 30px rgba(0,0,0,0.5)}
.terminal-topbar{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:rgba(12,18,32,0.95);border-bottom:1px solid rgba(255,255,255,0.05)}
.terminal-filename{font-family:var(--font-mono);font-size:0.65rem;color:#c4b5fd;letter-spacing:0.04em}
.terminal-right-tags{display:flex;gap:7px;font-family:var(--font-mono);font-size:0.52rem;color:var(--text-muted);letter-spacing:0.12em;text-transform:uppercase}
.terminal-body{padding:14px 16px;font-family:var(--font-mono);font-size:0.72rem;line-height:1.6}
.terminal-code{margin:0;font-family:inherit;font-size:inherit;color:#e2e8f0;white-space:pre-wrap}
.c-prompt{color:#38bdf8;font-weight:700;margin-right:4px}
.c-var{color:#a78bfa}
.c-op{color:#f43f5e}
.c-func{color:#60a5fa}
.c-kw{color:#f472b6;font-weight:600}
.c-comment{color:#64748b;font-style:italic;display:block;margin-top:8px}
.terminal-tools-dock{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 12px;background:rgba(4,7,13,0.95);border-top:1px solid rgba(255,255,255,0.04)}
.tool-tile{width:32px;height:32px;border-radius:7px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all var(--t-fast)}
.tool-tile:hover{background:rgba(139,92,246,0.15);border-color:rgba(139,92,246,0.45);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(139,92,246,0.2)}

/* ── Workspace Bottom Decorative Bar ────────────────────────────── */
.workspace-bottom-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0 0;border-top:1px solid rgba(255,255,255,0.06);font-family:var(--font-mono)}
.bottom-bar-left,.bottom-bar-right{display:flex;align-items:center;gap:10px;color:rgba(174,182,194,0.5);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;line-height:1.4}
.bar-sym{color:var(--accent-violet);font-size:0.85rem;font-weight:700}
.bottom-bar-center{display:flex;align-items:center;gap:14px;flex-grow:1;max-width:560px;margin:0 auto}
.bar-line{flex-grow:1;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,0.3),transparent)}
.bottom-statement-wrap{display:flex;align-items:center;gap:8px;white-space:nowrap}
.bar-star{color:var(--accent-lavender);font-size:0.75rem;animation:pulseStar 2.4s ease-in-out infinite}
.bottom-statement-text{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--text-bright);font-weight:500}

/* Animations */
@keyframes blinkCursor{0%,100%{opacity:1}50%{opacity:0}}
@keyframes pulseStar{0%,100%{transform:scale(1);opacity:0.75}50%{transform:scale(1.25);opacity:1;filter:drop-shadow(0 0 6px rgba(196,181,253,0.8))}}

/* Responsive Breakpoints for Workspace */
@media (max-width: 1100px){
  .workspace-card{grid-template-columns:1fr;gap:24px}
  .workspace-corner-labels,.workspace-corner-quote{display:none}
}
@media (max-width: 850px){
  .workspace-grid{grid-template-columns:1fr;gap:24px}
  .workspace-bottom-bar{flex-direction:column;text-align:center;gap:14px}
  .bottom-bar-left,.bottom-bar-right{justify-content:center}
}
@media (max-width: 640px){
  .workspace-card{padding:22px 18px}
  .card-preview-col{min-height:auto}
  .sheet-charts-row{grid-template-columns:1fr;gap:8px}
  .mini-barchart{justify-content:center}
  .mini-donutchart{display:none}
  .docs-stack-wrapper{height:220px}
}

/* ── My Toolkit ──────────────────────────────────────────────────── */
.toolkit-section{position:relative;background:var(--bg-primary);overflow:hidden}
.toolkit-container{position:relative;width:100%;max-width:var(--max-width);margin:0 auto}

/* Header & Decorative corner metadata */
.toolkit-header{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;margin-bottom:52px}
.toolkit-corner-labels{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:4px;text-align:left;font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.25em;color:rgba(174,182,194,0.45);text-transform:uppercase;pointer-events:none}
.toolkit-corner-quote{position:absolute;top:0;right:0;display:flex;flex-direction:column;gap:4px;text-align:right;font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.2em;color:rgba(174,182,194,0.45);pointer-events:none}
.toolkit-eyebrow{display:block;width:fit-content;margin:0 auto 14px;font-size:0.75rem;letter-spacing:0.35em;text-align:center}
.toolkit-title{display:block;width:fit-content;font-family:var(--font-heading);font-weight:700;font-size:clamp(2.4rem,4.5vw,3.8rem);line-height:1.1;letter-spacing:-0.02em;margin:0 auto 12px;padding:0 4px;background:linear-gradient(135deg,#ffffff 40%,var(--accent-lavender) 80%,var(--accent-violet) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase;text-align:center}
.toolkit-subtitle{display:block;width:fit-content;font-family:var(--font-mono);font-size:clamp(0.72rem,0.95vw,0.85rem);letter-spacing:0.25em;color:var(--accent-lavender);text-transform:uppercase;margin:0 auto 12px;text-align:center}
.toolkit-statement{display:block;width:fit-content;font-family:var(--font-body);font-size:clamp(0.85rem,1.05vw,0.95rem);color:var(--text-secondary);max-width:620px;margin:0 auto;font-style:italic;text-align:center}

/* 3x2 Grid Layout */
.toolkit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px}
.toolkit-grid:hover .toolkit-panel:not(:hover){opacity:0.65;filter:brightness(0.92);transform:scale(0.995)}

/* Category Panels */
.toolkit-panel{background:linear-gradient(145deg,rgba(11,16,28,0.7) 0%,rgba(6,10,18,0.85) 100%);border:1px solid rgba(255,255,255,0.08);border-radius:18px;padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 16px 36px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.05);transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base),opacity var(--t-base),filter var(--t-base)}
.toolkit-panel::before{content:'';position:absolute;inset:0;border-radius:18px;background:radial-gradient(450px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(139,92,246,0.08),transparent 60%);opacity:0;transition:opacity var(--t-base);pointer-events:none}
.toolkit-panel:hover{transform:translateY(-4px);border-color:rgba(139,92,246,0.35);box-shadow:0 22px 55px rgba(0,0,0,0.55),0 0 32px rgba(139,92,246,0.1),inset 0 1px 0 rgba(196,181,253,0.2)}
.toolkit-panel:hover::before{opacity:1}

/* Panel Header */
.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:20px}
.panel-meta{flex-grow:1}
.panel-num-wrap{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.panel-number{font-family:var(--font-heading);font-size:1.4rem;font-weight:700;color:var(--accent-lavender);opacity:0.9;line-height:1}
.panel-num-line{height:1px;width:28px;background:linear-gradient(90deg,rgba(139,92,246,0.6),transparent)}
.panel-title{font-size:clamp(1.05rem,1.25vw,1.22rem);letter-spacing:-0.01em;color:var(--text-primary);margin-bottom:6px;line-height:1.2}
.panel-desc{font-size:0.78rem;line-height:1.5;color:var(--text-secondary)}

.panel-badge-decor{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;color:rgba(174,182,194,0.55);font-family:var(--font-mono);font-size:0.52rem;letter-spacing:0.14em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.panel-badge-decor .badge-icon{color:var(--accent-lavender);opacity:0.85;margin-bottom:2px}

/* Panel Tool Tiles Grid */
.panel-tools-grid{display:grid;gap:10px;margin-bottom:22px}
.panel-tools-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.panel-tools-grid.cols-4{grid-template-columns:repeat(4,1fr)}

/* Tool Card */
.tool-card{background:rgba(15,23,42,0.45);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:all var(--t-fast);position:relative;overflow:hidden;cursor:default}
.tool-card:hover,.tool-card:focus-visible{background:rgba(22,33,60,0.7);border-color:rgba(139,92,246,0.45);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.4),0 0 16px rgba(139,92,246,0.18);outline:none}
.tool-icon-wrap{margin-bottom:8px;display:flex;align-items:center;justify-content:center;height:38px;width:38px;transition:transform var(--t-fast),filter var(--t-fast)}
.tool-icon-img{width:32px;height:32px;max-width:34px;max-height:34px;object-fit:contain;display:block}
.tool-card:hover .tool-icon-wrap{transform:scale(1.1);filter:drop-shadow(0 0 10px rgba(196,181,253,0.4))}
.tool-name{font-family:var(--font-heading);font-size:0.78rem;font-weight:600;color:#ffffff;margin-bottom:6px;line-height:1.2}
.tool-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;width:100%}
.tool-features li{font-family:var(--font-body);font-size:0.6rem;color:var(--text-secondary);line-height:1.3;transition:color var(--t-fast)}
.tool-card:hover .tool-features li{color:#f1f5f9}

/* Panel Footer Action */
.panel-footer{border-top:1px solid rgba(255,255,255,0.05);padding-top:14px;display:flex;align-items:center;justify-content:flex-start}
.panel-action-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-lavender);position:relative;transition:all var(--t-fast);text-decoration:none;padding:2px 0}
.panel-action-btn::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:linear-gradient(90deg,var(--accent-violet),var(--accent-blue));transition:width var(--t-base)}
.panel-action-btn:hover{color:#ffffff;transform:translateX(3px)}
.panel-action-btn:hover::after{width:100%}
.panel-action-btn:hover .btn-arrow{transform:translateX(4px)}

/* Toolkit Bottom Bar */
.toolkit-bottom-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:28px 0 0;border-top:1px solid rgba(255,255,255,0.06);font-family:var(--font-mono);position:relative}
.toolkit-bottom-left{color:rgba(174,182,194,0.5);font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;line-height:1.5}
.toolkit-bottom-center{display:flex;flex-direction:column;align-items:center;gap:6px;flex-grow:1;max-width:480px;margin:0 auto;text-align:center}
.toolkit-bottom-mountains{width:200px;height:32px;opacity:0.65;margin-bottom:-4px}
.toolkit-statement-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.toolkit-tag-line{font-size:0.58rem;letter-spacing:0.28em;color:var(--accent-lavender);opacity:0.8;text-transform:uppercase}
.toolkit-clearer-me{font-size:0.7rem;letter-spacing:0.22em;color:#ffffff;font-weight:600;text-transform:uppercase}
.toolkit-bottom-right{text-align:right}
.toolkit-brand-name{font-family:var(--font-heading);font-size:0.85rem;font-weight:700;letter-spacing:0.18em;color:rgba(255,255,255,0.7);text-transform:uppercase}

/* Responsive Media Queries for Toolkit */
@media (max-width: 1100px){
  .toolkit-grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .toolkit-corner-labels,.toolkit-corner-quote{display:none}
}
@media (max-width: 800px){
  .toolkit-grid{grid-template-columns:1fr;gap:20px}
  .panel-tools-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .toolkit-bottom-bar{flex-direction:column;align-items:center;text-align:center;gap:16px}
  .toolkit-bottom-left,.toolkit-bottom-right{text-align:center}
}
@media (max-width: 580px){
  .panel-tools-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .panel-header{flex-direction:column;gap:10px}
  .panel-badge-decor{align-items:flex-start;text-align:left}
  .toolkit-panel{padding:20px 16px}
}

/* ── Projects ───────────────────────────────────────────────────── */
.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.project-card{background:var(--bg-card);border-radius:16px;padding:clamp(28px,3vw,44px);border:1px solid var(--border-subtle);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:all var(--t-base)}
.project-card::before{content:'';position:absolute;inset:0;border-radius:16px;background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(139,92,246,0.06),transparent 50%);opacity:0;transition:opacity var(--t-base);pointer-events:none}
.project-card:hover{border-color:rgba(139,92,246,0.18);transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,0.4),0 0 30px rgba(139,92,246,0.04)}.project-card:hover::before{opacity:1}
.project-number{font-family:var(--font-heading);font-size:clamp(2.5rem,4vw,3.5rem);font-weight:700;color:rgba(139,92,246,0.06);line-height:1;margin-bottom:16px;transition:color var(--t-base),text-shadow var(--t-base)}
.project-card:hover .project-number{color:rgba(139,92,246,0.2);text-shadow:0 0 30px rgba(139,92,246,0.1)}
.project-title{font-size:clamp(1.1rem,1.5vw,1.35rem);margin-bottom:14px;letter-spacing:0em}
.project-description{color:var(--text-secondary);font-size:var(--fs-small);line-height:1.7;margin-bottom:24px;flex-grow:1}
.project-tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.project-tool{font-size:.7rem;padding:5px 14px;border:1px solid var(--border-light);border-radius:100px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;transition:all var(--t-fast)}
.project-card:hover .project-tool{border-color:rgba(139,92,246,0.18);color:var(--text-bright)}
.project-link{font-size:.8rem;font-weight:600;color:var(--accent-violet);text-transform:uppercase;letter-spacing:.1em;align-self:flex-start;position:relative;transition:all var(--t-fast)}
.project-link::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:linear-gradient(90deg,var(--accent-violet),var(--accent-blue));transition:width var(--t-base)}
.project-link:hover{transform:translateX(4px)}.project-link:hover::after{width:100%}

/* ── Timeline ───────────────────────────────────────────────────── */
.timeline{position:relative;padding-left:48px}
.timeline-line{position:absolute;top:0;left:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--border-light),transparent);overflow:visible}
.timeline-item{position:relative;margin-bottom:64px;padding-left:8px}.timeline-item:last-child{margin-bottom:0}
.timeline-dot{position:absolute;top:12px;left:-52px;width:12px;height:12px;border-radius:50%;background:var(--bg-primary);border:2px solid var(--text-muted);transition:all var(--t-base)}
.timeline-item.active .timeline-dot{border-color:var(--accent-violet);box-shadow:0 0 14px rgba(139,92,246,0.45);background:rgba(139,92,246,0.15)}
.timeline-year{font-family:var(--font-heading);font-size:clamp(2rem,3.5vw,2.8rem);font-weight:700;color:var(--text-primary);margin-bottom:8px;line-height:1}
.timeline-title{font-size:1.15rem;font-weight:600;margin-bottom:6px;text-transform:none;letter-spacing:0}
.timeline-place{font-size:var(--fs-small);color:var(--text-secondary);margin-bottom:12px;font-style:italic}
.timeline-desc{color:var(--text-secondary);line-height:1.7;max-width:560px;font-size:var(--fs-small)}

/* ── Certifications ─────────────────────────────────────────────── */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.cert-card{background:var(--bg-card);border-radius:14px;border:1px solid var(--border-subtle);padding:clamp(24px,2.5vw,36px);display:flex;flex-direction:column;transition:all var(--t-base);position:relative;overflow:hidden}
.cert-card::before{content:'';position:absolute;inset:0;background:radial-gradient(400px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(139,92,246,0.06),transparent 50%);opacity:0;transition:opacity var(--t-base)}
.cert-card:hover{border-color:rgba(139,92,246,0.18);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.3),0 0 20px rgba(139,92,246,0.04)}.cert-card:hover::before{opacity:1}
.cert-issuer{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.2em;color:var(--accent-violet);text-transform:uppercase;margin-bottom:14px;opacity:.7}
.cert-title{font-family:var(--font-body);font-size:clamp(1rem,1.2vw,1.15rem);font-weight:600;color:var(--text-primary);text-transform:none;letter-spacing:0;line-height:1.4;margin-bottom:20px;flex-grow:1}
.cert-view-btn{background:none;border:none;font-family:var(--font-body);font-size:.78rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.12em;align-self:flex-start;padding:0;position:relative;transition:color var(--t-fast);text-decoration:none;cursor:pointer}
.cert-view-btn::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:linear-gradient(90deg,var(--accent-violet),var(--accent-blue));transition:width var(--t-base)}.cert-view-btn:hover{color:var(--accent-violet)}.cert-view-btn:hover::after{width:100%}
.cert-unavailable{opacity:.4;cursor:not-allowed}.cert-unavailable:hover{color:var(--text-secondary)}.cert-unavailable:hover::after{width:0}

/* Cert Modal */
.cert-modal{position:fixed;inset:0;z-index:2000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity var(--t-base),visibility var(--t-base)}
.cert-modal.active{opacity:1;visibility:visible}
.cert-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.cert-modal-content{position:relative;background:var(--bg-card);border:1px solid rgba(139,92,246,0.15);border-radius:24px;padding:clamp(32px,4vw,60px);max-width:520px;width:90%;text-align:center;transform:scale(.92) translateY(24px);transition:transform var(--t-base);box-shadow:0 32px 80px rgba(0,0,0,0.5),0 0 40px rgba(139,92,246,0.08)}
.cert-modal.active .cert-modal-content{transform:scale(1) translateY(0)}
.cert-modal-close{position:absolute;top:16px;right:20px;background:none;border:none;color:var(--text-secondary);font-size:1.8rem;line-height:1;transition:color var(--t-fast)}.cert-modal-close:hover{color:var(--text-primary)}
.cert-modal-badge{margin-bottom:24px}.cert-modal-badge svg{margin:0 auto}
.cert-modal-issuer{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.25em;color:var(--accent-violet);text-transform:uppercase;margin-bottom:12px}
.cert-modal-title{font-family:var(--font-body);font-size:clamp(1.2rem,2vw,1.6rem);font-weight:600;color:var(--text-primary);text-transform:none;letter-spacing:0;line-height:1.35;margin-bottom:28px}
.cert-modal-holder{display:flex;flex-direction:column;gap:6px;margin-bottom:28px}
.cert-modal-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.3em;color:var(--text-muted);text-transform:uppercase}
.cert-modal-name{font-family:var(--font-heading);font-size:1.3rem;font-weight:700;color:var(--text-primary)}
.cert-modal-footer{padding-top:20px;border-top:1px solid var(--border-subtle)}
.cert-modal-verified{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.2em;color:#4ade80;text-transform:uppercase}

/* ── Education ──────────────────────────────────────────────────── */
.education-content{max-width:600px}
.education-school{font-size:clamp(1.4rem,2.5vw,2rem);margin-bottom:14px;letter-spacing:0em}
.education-details{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--text-secondary);font-size:var(--fs-small);margin-bottom:24px}
.education-divider{color:var(--text-muted)}
.education-cgpa{display:flex;align-items:baseline;gap:12px}
.cgpa-label{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.3em;color:var(--text-secondary);text-transform:uppercase}
.cgpa-value{font-family:var(--font-heading);font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1;background:linear-gradient(135deg,#fff,var(--accent-lavender));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── Languages ──────────────────────────────────────────────────── */
.languages-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.language-item{padding:24px 0;border-top:1px solid var(--border-subtle);transition:border-color var(--t-base)}.language-item:hover{border-top-color:rgba(139,92,246,0.2)}
.language-name{font-size:1.1rem;font-weight:600;margin-bottom:6px;text-transform:none;letter-spacing:0}
.language-level{font-size:var(--fs-small);color:var(--text-secondary)}

/* ── Brand Statement ────────────────────────────────────────────── */
.brand-section{min-height:100vh;padding:clamp(100px,16vh,200px) var(--section-pad-x);display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;text-align:center}

/* Star canvas — fills the brand section */
.brand-star-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Central atmospheric glow behind text */
.brand-glow-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(650px,80vw);height:min(500px,60vh);background:radial-gradient(ellipse at center,rgba(139,92,246,0.14) 0%,rgba(124,58,237,0.07) 30%,rgba(74,142,255,0.03) 55%,transparent 80%);filter:blur(50px);pointer-events:none;z-index:1;opacity:0;transition:opacity 1.5s ease}
.brand-glow-secondary{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(400px,60vw);height:min(320px,40vh);background:radial-gradient(ellipse at center,rgba(167,139,250,0.1) 0%,rgba(139,92,246,0.04) 45%,transparent 75%);filter:blur(35px);pointer-events:none;z-index:1;opacity:0;transition:opacity 1.8s ease 0.3s}

/* Luminous edge gradients — faint atmospheric light at section boundaries */
.brand-edge-glow{position:absolute;pointer-events:none;z-index:1;opacity:0;transition:opacity 2s ease 0.5s}
.brand-edge-top{top:0;left:10%;right:10%;height:120px;background:radial-gradient(ellipse at center top,rgba(139,92,246,0.06) 0%,transparent 70%)}
.brand-edge-bottom{bottom:0;left:10%;right:10%;height:120px;background:radial-gradient(ellipse at center bottom,rgba(139,92,246,0.05) 0%,transparent 70%)}
.brand-edge-left{top:15%;bottom:15%;left:0;width:100px;background:radial-gradient(ellipse at left center,rgba(124,58,237,0.05) 0%,transparent 70%)}
.brand-edge-right{top:15%;bottom:15%;right:0;width:100px;background:radial-gradient(ellipse at right center,rgba(124,58,237,0.05) 0%,transparent 70%)}

/* Centered content wrapper */
.brand-content-centered{position:relative;z-index:5;max-width:900px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.brand-statement{font-size:clamp(2.4rem,5.5vw,4.8rem);line-height:1.15;margin-bottom:48px;letter-spacing:-.03em;font-weight:700;text-align:center}
.brand-line{display:block;background:linear-gradient(135deg,#FFFFFF 30%,#E0E7FF 60%,#C4B5FD 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px;filter:drop-shadow(0 2px 30px rgba(139,92,246,0.22))}
.brand-words{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(18px,3vw,42px);font-family:var(--font-body);font-size:var(--fs-small);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.25em}
.brand-words span{opacity:.8;transition:color var(--t-fast),opacity var(--t-fast)}
.brand-words span:hover{color:var(--accent-lavender);opacity:1}

/* Visible state — toggled by JS on scroll intersection */
.brand-section.brand-visible .brand-glow-center{opacity:1}
.brand-section.brand-visible .brand-glow-secondary{opacity:1}
.brand-section.brand-visible .brand-edge-glow{opacity:1}


/* ── Contact ────────────────────────────────────────────────────── */
.contact-title{font-size:clamp(2.5rem,6vw,5rem) !important}
.contact-subtitle{font-size:clamp(1rem,1.3vw,1.15rem);color:var(--text-secondary);margin-bottom:60px;max-width:500px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px)}
.contact-info{display:flex;flex-direction:column;gap:32px}
.contact-item{display:flex;flex-direction:column;gap:6px}
.contact-label{font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.3em;color:var(--text-muted);text-transform:uppercase}
.contact-value{font-size:1.05rem;color:var(--text-primary);transition:color var(--t-fast)}.contact-value:hover{color:var(--accent-violet)}
.contact-form{display:flex;flex-direction:column;gap:28px}
.form-group{display:flex;flex-direction:column;gap:8px;position:relative}
.form-label{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.3em;color:var(--text-secondary);text-transform:uppercase;transition:color var(--t-fast)}
.form-input{background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.08);padding:14px 0;color:var(--text-primary);font-size:1rem;font-family:var(--font-body);width:100%;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.form-input:focus{border-bottom-color:var(--accent-violet);box-shadow:0 2px 12px rgba(139,92,246,0.1)}
.form-group:focus-within .form-label{color:var(--accent-violet)}
.form-input.error{border-bottom-color:#ef4444}
.form-textarea{min-height:100px;resize:vertical}
.form-submit{align-self:flex-start;margin-top:8px}

/* ── Footer ─────────────────────────────────────────────────────── */
.footer{padding:40px var(--section-pad-x);border-top:1px solid var(--border-subtle);max-width:var(--max-width);margin:0 auto;position:relative;z-index:5}
.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.footer-left{display:flex;align-items:center;gap:20px}
.footer-logo{font-family:var(--font-heading);font-size:1rem;font-weight:700;color:var(--text-primary)}
.footer-tagline{font-size:var(--fs-small);color:var(--text-secondary)}
.footer-right{display:flex;align-items:center;gap:32px}
.footer-links{display:flex;gap:20px}
.footer-link{font-size:var(--fs-small);color:var(--text-secondary);transition:color var(--t-fast)}.footer-link:hover{color:var(--accent-violet)}
.footer-year{font-size:var(--fs-small);color:var(--text-muted)}

/* ── Toast ──────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:32px;right:32px;background:linear-gradient(135deg,rgba(139,92,246,0.92),rgba(74,142,255,0.85));color:#fff;padding:14px 28px;border-radius:10px;font-size:var(--fs-small);font-weight:600;letter-spacing:.05em;box-shadow:0 8px 32px rgba(139,92,246,0.3);z-index:3000;opacity:0;visibility:hidden;transform:translateY(16px);transition:all var(--t-base)}
.toast.active{opacity:1;visibility:visible;transform:translateY(0)}

/* ── Scroll Reveal ──────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(36px);transition:opacity var(--t-reveal),transform var(--t-reveal)}
.reveal-left{opacity:0;transform:translateX(-36px);transition:opacity var(--t-reveal),transform var(--t-reveal)}
.reveal-right{opacity:0;transform:translateX(36px);transition:opacity var(--t-reveal),transform var(--t-reveal)}
.reveal.active,.reveal-left.active,.reveal-right.active{opacity:1;transform:translate(0,0)}
.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}.delay-4{transition-delay:.4s}.delay-5{transition-delay:.5s}.delay-6{transition-delay:.6s}
.text-reveal-char{display:inline-block;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}.text-reveal-char.visible{opacity:1;transform:translateY(0)}

/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
@keyframes scrollBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ── Reduced Motion ─────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal,.reveal-left,.reveal-right{opacity:1;transform:none}.particle-canvas,.ambient-bg,.shooting-stars-container{display:none}
  .butterfly{opacity:0.6 !important}.wing-l,.wing-r{animation:none !important}
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:48px;text-align:center}
  .hero-content{align-items:center;padding-right:0;order:1}.hero-portrait-wrapper{order:0}
  .hero-subtitle{margin-left:auto;margin-right:auto}.hero-capabilities{justify-content:center}.hero-buttons{justify-content:center}
  .hero-year{right:10px;bottom:10px}.scroll-indicator{display:none}
  .about-grid{grid-template-columns:1fr}.expertise-block{grid-template-columns:80px 1fr}.expertise-list{grid-column:2}
  .contact-grid{grid-template-columns:1fr}.languages-grid{grid-template-columns:repeat(2,1fr)}
  .butterfly{width:68px;height:56px}
}
@media(max-width:768px){
  .nav-links,.nav-cta{display:none}.hamburger{display:block}
  .section{padding:clamp(56px,8vh,100px) clamp(20px,5vw,40px)}
  .projects-grid{grid-template-columns:1fr}.expertise-block{grid-template-columns:1fr;gap:16px;padding:32px 16px}.expertise-number{font-size:2.5rem}
  .cert-grid{grid-template-columns:1fr}
  .footer-content{flex-direction:column;text-align:center}.footer-left,.footer-right{flex-direction:column;gap:12px}
  .ambient-orb{opacity:.18}.butterfly{width:56px;height:46px}
  .brand-section{min-height:80vh;padding:clamp(60px,10vh,120px) clamp(20px,5vw,40px)}
  .brand-glow-center{width:85vw;height:50vh;filter:blur(40px)}
  .brand-edge-left,.brand-edge-right{width:60px}
}
@media(max-width:480px){
  :root{--fs-heading:clamp(1.8rem,8vw,2.8rem);--fs-hero:clamp(2.4rem,12vw,4rem)}
  .hero-capabilities{flex-direction:column;gap:16px}.capability{border-left:none;border-top:1px solid rgba(139,92,246,.1);padding:16px 0 0 0}.capability:first-child{border-top:none;padding-top:0}
  .hero-buttons{flex-direction:column;width:100%}.btn{width:100%;text-align:center}
  .languages-grid{grid-template-columns:1fr}.timeline{padding-left:28px}.timeline-dot{left:-32px}
  .butterfly{width:44px;height:36px}
}

/* ══════════════════════════════════════════════════════════════════
   SECTION BACKGROUND IMAGES — text overlaps the image
   ══════════════════════════════════════════════════════════════════ */
.has-bg-image{position:relative;overflow:hidden}
.section-bg-image{position:absolute;inset:0;z-index:0;pointer-events:none}
.section-bg-img{width:100%;height:100%;object-fit:cover;opacity:0.1;filter:blur(0.5px);transition:opacity 1s ease,filter 1s ease}
/* Dark overlay via pseudo-element to keep text readable */
.section-bg-image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--bg-primary) 0%,rgba(6,8,16,0.65) 30%,rgba(6,8,16,0.65) 70%,var(--bg-primary) 100%);z-index:1}
/* Ensure all section content stays above the background image */
.has-bg-image .section-header,
.has-bg-image .about-grid,
.has-bg-image .timeline,
.has-bg-image .contact-subtitle,
.has-bg-image .contact-grid{position:relative;z-index:2}

/* About: slightly more visible workspace image */
.about-section.has-bg-image .section-bg-img{opacity:0.14}
.about-section.has-bg-image .section-bg-image::after{background:linear-gradient(180deg,var(--bg-primary) 0%,rgba(6,8,16,0.55) 35%,rgba(6,8,16,0.6) 65%,var(--bg-primary) 100%)}

/* Journey: landscape shows through more on top half */
.timeline-section.has-bg-image .section-bg-img{opacity:0.12;object-position:center 30%}
.timeline-section.has-bg-image .section-bg-image::after{background:linear-gradient(180deg,rgba(6,8,16,0.3) 0%,rgba(6,8,16,0.7) 40%,var(--bg-primary) 100%)}

/* Contact: city lights bokeh visible through dark overlay */
.contact-section.has-bg-image .section-bg-img{opacity:0.18}
.contact-section.has-bg-image .section-bg-image::after{background:linear-gradient(180deg,var(--bg-primary) 0%,rgba(6,8,16,0.45) 25%,rgba(6,8,16,0.55) 75%,var(--bg-primary) 100%)}

/* ══════════════════════════════════════════════════════════════════
   PROJECT CARD IMAGES — text overlaps bottom of image
   ══════════════════════════════════════════════════════════════════ */
.project-image{position:relative;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;margin-bottom:20px}
.project-img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.4,0,.2,1),filter .7s ease;filter:brightness(0.7) saturate(0.85)}
.project-img-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(11,16,24,0.5) 60%,var(--bg-card) 100%);pointer-events:none;transition:background .5s ease}

/* Hover effects: zoom + brighter + violet glow */
.project-card:hover .project-img{transform:scale(1.06);filter:brightness(0.85) saturate(1)}
.project-card:hover .project-img-overlay{background:linear-gradient(180deg,rgba(139,92,246,0.04) 0%,rgba(11,16,24,0.4) 50%,var(--bg-card) 100%)}

/* Project number floats over the image bottom */
.project-card .project-number{position:relative;margin-top:-36px;z-index:2}

/* ══════════════════════════════════════════════════════════════════
   IMAGE REVEAL ANIMATION — blur → clear, scale down, fade in
   ══════════════════════════════════════════════════════════════════ */
.img-reveal{opacity:0;transform:scale(1.04);filter:blur(6px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1)}
.img-reveal.active{opacity:1;transform:scale(1);filter:blur(0)}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE IMAGES
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .project-image{aspect-ratio:16/9}
  .section-bg-img{opacity:0.08 !important}
  .project-card .project-number{margin-top:-28px}
}
@media(max-width:480px){
  .project-image{aspect-ratio:3/2}
  .project-card .project-number{margin-top:-24px}
}

/* ══════════════════════════════════════════════════════════════════
   RECRUITER MODE — Fast Briefing Overlay & Constellation
   ══════════════════════════════════════════════════════════════════ */
.btn-recruiter {
  background: rgba(139, 92, 246, 0.12);
  color: #ffffff;
  border: 1px solid rgba(139, 92, 246, 0.45);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.15), inset 0 0 12px rgba(139, 92, 246, 0.08);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-decoration: none;
}
.btn-recruiter:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: rgba(167, 139, 250, 0.8);
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4), inset 0 0 20px rgba(139, 92, 246, 0.15);
  transform: translateY(-2px);
  color: #ffffff;
}

.recruiter-modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
  padding: clamp(16px, 3vh, 32px);
}
.recruiter-modal.active {
  opacity: 1;
  visibility: visible;
}
.recruiter-overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 12, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.recruiter-panel {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, rgba(11, 16, 26, 0.98) 0%, rgba(14, 20, 32, 0.98) 100%);
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 20px;
  width: 100%;
  max-width: 1200px;
  max-height: min(92vh, 880px);
  overflow-y: auto;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 60px rgba(139, 92, 246, 0.12);
  display: flex;
  flex-direction: column;
  transform: scale(0.96) translateY(18px);
  transition: transform var(--t-base);
}
.recruiter-modal.active .recruiter-panel {
  transform: scale(1) translateY(0);
}

.recruiter-header {
  padding: 20px clamp(20px, 3.5vw, 36px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.recruiter-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.recruiter-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.25em;
  color: var(--accent-violet);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.recruiter-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: pulseDot 2s infinite;
}
.recruiter-subtitle {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.recruiter-close-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.15em;
  padding: 8px 16px;
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  gap: 8px;
}
.recruiter-close-btn:hover {
  color: #ffffff;
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.1);
  transform: translateY(-1px);
}

.recruiter-grid {
  display: grid;
  grid-template-columns: 300px 1.35fr 280px;
  gap: 22px;
  padding: clamp(18px, 3vw, 32px);
  align-items: start;
}

/* Left Column */
.recruiter-col-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.recruiter-profile-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.recruiter-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.25em;
  color: var(--accent-violet);
  text-transform: uppercase;
}
.recruiter-name {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  background: linear-gradient(135deg, #ffffff 40%, #c4b5fd 80%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.recruiter-intro-text {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.65;
}
.recruiter-grounded-box {
  background: rgba(139, 92, 246, 0.05);
  border-left: 2px solid var(--accent-violet);
  border-radius: 4px;
  padding: 12px 14px;
  font-size: var(--fs-micro);
  color: var(--accent-lavender);
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.recruiter-grounded-main {
  font-weight: 500;
}
.recruiter-tagline-sub {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Proof of Work Block */
.recruiter-proof-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.proof-box-title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  color: var(--accent-violet);
  text-transform: uppercase;
}
.proof-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.proof-list li {
  font-size: 0.76rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
.proof-check {
  color: #4ade80;
  font-weight: bold;
  font-size: 0.85rem;
}

/* Featured Writing Card */
.recruiter-featured-writing {
  background: rgba(11, 16, 26, 0.65);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: all var(--t-base);
}
.recruiter-featured-writing:hover {
  border-color: rgba(139, 92, 246, 0.45);
  background: rgba(16, 24, 40, 0.8);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 16px rgba(139, 92, 246, 0.12);
  transform: translateY(-2px);
}
.featured-writing-thumb {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.featured-writing-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-writing-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.featured-writing-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--accent-violet);
  text-transform: uppercase;
}
.featured-writing-title {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.featured-writing-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-writing-link {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--accent-lavender);
  text-decoration: none;
  margin-top: 2px;
  font-weight: 600;
  transition: color var(--t-fast);
}
.featured-writing-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Center Column — Constellation */
.recruiter-col-center {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  align-items: center;
}
.constellation-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.constellation-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.constellation-desc {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* Constellation Stage & SVG Overlay */
.constellation-stage {
  position: relative;
  width: 100%;
  max-width: 490px;
  margin: 0 auto;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.constellation-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.constellation-line {
  stroke: rgba(168, 85, 247, 0.22);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  transition: stroke var(--t-base), stroke-width var(--t-base), filter var(--t-base);
}
.constellation-line.active-line {
  stroke: rgba(216, 180, 254, 0.95);
  stroke-width: 2;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.9));
}

/* Center Glowing Star Core */
.constellation-center-point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.constellation-star-flare {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.8) 0%, rgba(168, 85, 247, 0.3) 40%, transparent 70%);
  animation: starFlarePulse 3s ease-in-out infinite alternate;
}
.constellation-star-core {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 12px 3px #c084fc, 0 0 24px 6px rgba(168, 85, 247, 0.5);
}
@keyframes starFlarePulse {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 1; }
}

/* Diamond Constellation Grid */
.constellation-grid {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
  justify-items: center;
  align-items: center;
}
.constellation-node.node-top {
  grid-column: 1 / 3;
  width: 100%;
  max-width: 245px;
}
.constellation-node.node-left {
  grid-column: 1;
  width: 100%;
  max-width: 205px;
}
.constellation-node.node-right {
  grid-column: 2;
  width: 100%;
  max-width: 205px;
}
.constellation-node.node-bottom {
  grid-column: 1 / 3;
  width: 100%;
  max-width: 260px;
}

.constellation-node {
  background: rgba(11, 16, 26, 0.82);
  border: 1px solid rgba(139, 92, 246, 0.24);
  border-radius: 14px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all var(--t-base);
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.constellation-node:hover {
  transform: translateY(-3px);
  border-color: rgba(168, 85, 247, 0.65);
  background: rgba(18, 26, 44, 0.94);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 28px rgba(168, 85, 247, 0.22);
}
.constellation-node.dimmed {
  opacity: 0.45;
  filter: blur(0.3px);
}

.constellation-node-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-violet);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.2);
  transition: all var(--t-base);
  flex-shrink: 0;
}
.constellation-node:hover .constellation-node-badge {
  background: rgba(168, 85, 247, 0.28);
  border-color: rgba(216, 180, 254, 0.9);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
}

.constellation-node-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-transform: uppercase;
}
.constellation-node-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.constellation-pill {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 3px 7px;
  border-radius: 100px;
}
.constellation-node:hover .constellation-pill {
  color: var(--accent-lavender);
  border-color: rgba(139, 92, 246, 0.3);
  background: rgba(139, 92, 246, 0.1);
}
.constellation-node-link-hint {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--accent-violet);
  text-transform: uppercase;
  margin-top: 2px;
}
.constellation-node:hover .constellation-node-link-hint {
  color: #ffffff;
}

.constellation-sub-piece {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  width: 100%;
}
.constellation-sub-title {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.constellation-sub-link {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--accent-lavender);
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.constellation-sub-link:hover {
  color: #ffffff;
}

.constellation-explore-hint {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Right Column — At a Glance & Quick Links */
.recruiter-col-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}
.glance-card {
  background: rgba(11, 16, 26, 0.65);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.glance-title {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  color: var(--accent-violet);
  text-transform: uppercase;
}
.glance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.glance-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.glance-item.glance-link {
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-fast);
}
.glance-item.glance-link:hover {
  transform: translateY(-2px);
  border-color: rgba(168, 85, 247, 0.45);
  background: rgba(139, 92, 246, 0.1);
}
.glance-item.glance-link:hover .glance-num {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(192, 132, 252, 0.6);
}
.glance-item.glance-link:hover .glance-label {
  color: var(--accent-lavender);
}
.glance-num {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  transition: all var(--t-fast);
}
.glance-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  transition: color var(--t-fast);
}

/* Selected Projects Section */
.selected-projects-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.selected-projects-title {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  color: var(--accent-violet);
  text-transform: uppercase;
}
.selected-projects-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sel-proj-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  text-decoration: none;
  transition: all var(--t-fast);
}
.sel-proj-chip:hover {
  color: #ffffff;
  border-color: rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.08);
  transform: translateY(-1px);
}
.sel-proj-chip-num {
  color: var(--accent-violet);
  font-weight: 700;
  font-size: 0.65rem;
}

/* Featured WorkSpace.OS Card */
.recruiter-ws-card {
  background: rgba(15, 20, 38, 0.65);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  transition: all var(--t-fast);
  cursor: pointer;
}
.recruiter-ws-card:hover {
  transform: translateY(-2px);
  border-color: rgba(168, 85, 247, 0.55);
  background: rgba(20, 26, 52, 0.85);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(139, 92, 246, 0.25);
}
.recruiter-ws-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.recruiter-ws-title-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}
.recruiter-ws-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-violet);
}
.recruiter-ws-title {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin: 0;
  text-transform: uppercase;
}
.recruiter-ws-badge {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #C4B5FD;
  background: rgba(139, 92, 246, 0.18);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 100px;
  padding: 1px 7px;
}
.recruiter-ws-desc {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}
.recruiter-ws-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: #C4B5FD;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
  transition: color var(--t-fast);
}
.recruiter-ws-card:hover .recruiter-ws-action {
  color: #ffffff;
}

.quick-links-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quick-links-title {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  color: var(--accent-violet);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.recruiter-link-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all var(--t-fast);
}
.recruiter-link-btn-content {
  display: flex;
  align-items: center;
  gap: 9px;
}
.recruiter-link-btn-content svg {
  color: var(--accent-violet);
  transition: color var(--t-fast);
}
.recruiter-link-btn:hover {
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.2);
  color: #ffffff;
  transform: translateY(-1px);
}
.recruiter-link-btn:hover .recruiter-link-btn-content svg {
  color: #ffffff;
}
.recruiter-link-btn-arrow {
  color: var(--accent-violet);
  transition: transform var(--t-fast);
}
.recruiter-link-btn:hover .recruiter-link-btn-arrow {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1040px) {
  .recruiter-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media (max-width: 600px) {
  .constellation-stage {
    min-height: auto;
  }
  .constellation-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .constellation-node.node-top,
  .constellation-node.node-left,
  .constellation-node.node-right,
  .constellation-node.node-bottom {
    grid-column: 1;
    max-width: 100%;
  }
  .constellation-center-point {
    display: none;
  }
  .constellation-svg {
    display: none;
  }
  .recruiter-modal {
    padding: 10px;
  }
  .recruiter-panel {
    border-radius: 14px;
    max-height: 95vh;
  }
}