/* ============================================================
   style.css — Anuradha Dulal Portfolio
   Sections:
     1.  Design Tokens  — dark (default) + light overrides
     2.  Reset & Base
     3.  Smooth Theme Transition
     4.  Utility Classes
     5.  Custom Cursor
     6.  Background Effects (Noise + Orbs)
     7.  Layout Helpers
     8.  Glass Effect
     9.  Typography System
    10.  Scroll Reveal Animations
    11.  Buttons
    12.  Theme Toggle Button  ← NEW
    13.  Navbar
    14.  Mobile Drawer
    15.  Hero Section
    16.  About Section
    17.  Skills Section
    18.  Projects Section
    19.  Career Section
    20.  Contact Section
    21.  Footer
    22.  Responsive Breakpoints
   ============================================================ */


/* ── 1. Design Tokens ──────────────────────────────────────── */

/* 🌙 DARK THEME — default (:root) */
:root {
  /* Backgrounds */
  --bg:         #0d0f14;
  --bg-alt:     #12151c;

  /* Glass surfaces */
  --surface:    rgba(255, 255, 255, 0.04);
  --surface-hi: rgba(255, 255, 255, 0.07);

  /* Borders */
  --border:     rgba(255, 255, 255, 0.08);
  --border-hi:  rgba(255, 255, 255, 0.16);

  /* Brand colours */
  --rose:       #e8907a;
  --rose-light: #f2b5a3;
  --rose-dark:  #c8614a;
  --gold:       #d4a85a;
  --sage:       #7fa98c;

  /* Text */
  --text:       #f0ece6;
  --text-2:     #a09990;
  --text-3:     #665e57;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  /* Shape */
  --radius:    16px;
  --radius-lg: 24px;

  /* Motion */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.4s;

  /* Navbar stuck background — used as a variable so light mode can override */
  --nav-stuck-bg: rgba(13, 15, 20, 0.80);

  /* Drawer background */
  --drawer-bg: rgba(13, 15, 20, 0.96);
}

/* ☀️ LIGHT THEME — applied when body has class "light" */
body.light {
  --bg:         #f7f7fb;
  --bg-alt:     #ffffff;

  --surface:    rgba(0, 0, 0, 0.04);
  --surface-hi: rgba(0, 0, 0, 0.06);

  --border:     rgba(0, 0, 0, 0.08);
  --border-hi:  rgba(0, 0, 0, 0.15);

  --rose:       #7c3aed;
  --rose-light: #a78bfa;
  --rose-dark:  #5b21b6;

  --text:       #1a1a1a;
  --text-2:     #555555;
  --text-3:     #888888;

  /* Override navbar/drawer backgrounds for light mode */
  --nav-stuck-bg: rgba(247, 247, 251, 0.88);
  --drawer-bg:    rgba(247, 247, 251, 0.97);
}


/* ── 2. Reset & Base ───────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  font-size:       16px;
}

body {
  font-family: var(--font-body);
  background:  var(--bg);
  color:       var(--text);
  line-height: 1.75;
  overflow-x:  hidden;
  cursor:      none; /* replaced by custom cursor */
}

a      { color: inherit; text-decoration: none; }
img    { max-width: 100%; display: block; }
button { cursor: none; }


/* ── 3. Smooth Theme Transition ────────────────────────────── */
/*
   Applied to body and key surfaces so switching themes feels
   like a gentle fade rather than an instant snap.
   Only background / color / border properties are transitioned
   to avoid accidentally slowing down hover effects or animations.
*/
body,
body * {
  transition:
    background-color 0.35s var(--ease),
    color            0.35s var(--ease),
    border-color     0.35s var(--ease),
    box-shadow       0.35s var(--ease);
}

/*
   Carve out elements that have their own intentional transitions
   so the global rule above doesn't interfere with them.
*/
.btn,
.sr, .sr-left, .sr-right,
.bar-fill,
.avatar-wrap, .avatar-inner,
.orb,
.scroll-track::after,
.hero-badge,
.hero-name,
.hero-desc,
.hero-actions,
.hero-card-wrap,
.chip {
  transition: unset;
}

/* Re-apply their original transitions after the unset */
.btn {
  transition:
    transform    var(--duration) var(--ease),
    box-shadow   var(--duration) var(--ease),
    background-color 0.35s var(--ease),
    color            0.35s var(--ease),
    border-color     0.35s var(--ease);
}

.sr, .sr-left, .sr-right {
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.bar-fill {
  transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.chip {
  transition:
    background-color var(--duration),
    border-color     var(--duration),
    color            var(--duration);
}


/* ── 4. Utility Classes ────────────────────────────────────── */

.container {
  width:    min(1160px, 92%);
  margin:   0 auto;
  position: relative;
  z-index:  2;
}

section { padding: 120px 0; }

.section-line {
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

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

.section-header .rule {
  margin: 20px auto 0;
}


/* ── 5. Custom Cursor ──────────────────────────────────────── */

#cursor-dot,
#cursor-ring {
  position:       fixed;
  border-radius:  50%;
  pointer-events: none;
  z-index:        9999;
  transform:      translate(-50%, -50%);
  transition:     opacity 0.3s;
}

#cursor-dot {
  width:      6px;
  height:     6px;
  background: var(--rose);
  top:  0;
  left: 0;
}

#cursor-ring {
  width:        36px;
  height:       36px;
  border:       1.5px solid rgba(232, 144, 122, 0.5);
  top:  0;
  left: 0;
  transition: width 0.25s, height 0.25s, border-color 0.25s;
}

.cursor-grow #cursor-ring {
  width:        56px;
  height:       56px;
  border-color: var(--rose);
}


/* ── 6. Background Effects ─────────────────────────────────── */

body::before {
  content:          '';
  position:         fixed;
  inset:            0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity:          0.025;
  pointer-events:   none;
  z-index:          1;
  /* Exclude from the global theme transition */
  transition:       none;
}

/* Dim the noise slightly in light mode so it's less noticeable */
body.light::before { opacity: 0.015; }

.orb {
  position:       fixed;
  border-radius:  50%;
  filter:         blur(120px);
  pointer-events: none;
  z-index:        0;
  animation:      orbFloat 18s ease-in-out infinite;
  transition:     none; /* orbs must not be affected by theme transition */
}

.orb-1 {
  width:           600px;
  height:          600px;
  top:             -200px;
  right:           -150px;
  background:      radial-gradient(circle, rgba(232, 144, 122, 0.12), transparent 70%);
  animation-delay: 0s;
}

.orb-2 {
  width:           500px;
  height:          500px;
  bottom:          -150px;
  left:            -100px;
  background:      radial-gradient(circle, rgba(127, 169, 140, 0.10), transparent 70%);
  animation-delay: -6s;
}

.orb-3 {
  width:           400px;
  height:          400px;
  top:             40%;
  left:            40%;
  background:      radial-gradient(circle, rgba(212, 168, 90, 0.07), transparent 70%);
  animation-delay: -12s;
}

/* Tone orbs down in light mode */
body.light .orb-1 { background: radial-gradient(circle, rgba(124, 58, 237, 0.08), transparent 70%); }
body.light .orb-2 { background: radial-gradient(circle, rgba(91,  63, 248, 0.06), transparent 70%); }
body.light .orb-3 { background: radial-gradient(circle, rgba(212, 168, 90, 0.05), transparent 70%); }

@keyframes orbFloat {
  0%, 100% { transform: translate(0,     0)    scale(1);    }
  33%       { transform: translate(30px, -40px) scale(1.05); }
  66%       { transform: translate(-20px, 30px) scale(0.95); }
}


/* ── 7. Glass Effect ───────────────────────────────────────── */

.glass {
  background:             var(--surface);
  border:                 1px solid var(--border);
  backdrop-filter:        blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius:          var(--radius-lg);
}

.glass-hi {
  background:             var(--surface-hi);
  border:                 1px solid var(--border-hi);
  backdrop-filter:        blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-radius:          var(--radius-lg);
}


/* ── 8. Typography System ──────────────────────────────────── */

.label {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-size:      0.7rem;
  font-weight:    600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--rose);
  margin-bottom:  14px;
}

.label::before {
  content:    '';
  display:    block;
  width:      20px;
  height:     1px;
  background: var(--rose);
}

.heading {
  font-family:   var(--font-display);
  font-size:     clamp(2rem, 4vw, 3.2rem);
  font-weight:   400;
  line-height:   1.15;
  color:         var(--text);
  margin-bottom: 16px;
}

.heading em {
  font-style: italic;
  color:      var(--rose);
}

.subheading {
  font-size:   1rem;
  color:       var(--text-2);
  max-width:   520px;
  line-height: 1.8;
}

.rule {
  width:      40px;
  height:     1px;
  background: linear-gradient(90deg, var(--rose), var(--sage));
  margin:     20px 0 48px;
  border:     none;
}


/* ── 9. Scroll Reveal Animations ───────────────────────────── */

.sr,
.sr-left,
.sr-right {
  opacity: 0;
  /* transition declared in section 3 to avoid conflicts */
}

.sr      { transform: translateY(40px);  }
.sr-left { transform: translateX(-40px); }
.sr-right{ transform: translateX(40px);  }

.sr.up,
.sr-left.up,
.sr-right.up {
  opacity:   1;
  transform: translate(0, 0);
}

.sr-d1 { transition-delay: 0.1s; }
.sr-d2 { transition-delay: 0.2s; }
.sr-d3 { transition-delay: 0.3s; }


/* ── 10. Buttons ────────────────────────────────────────────── */

.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  padding:        14px 32px;
  border-radius:  100px;
  font-family:    var(--font-body);
  font-size:      0.88rem;
  font-weight:    500;
  letter-spacing: 0.04em;
  cursor:         none;
  border:         none;
  position:       relative;
  overflow:       hidden;
}

.btn::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(255, 255, 255, 0.08);
  opacity:    0;
  transition: opacity 0.3s;
}

.btn:hover::after { opacity:   1; }
.btn:hover        { transform: translateY(-3px); }

.btn-primary {
  background:  linear-gradient(135deg, var(--rose), var(--rose-dark));
  color:       #fff;
  box-shadow:  0 8px 32px rgba(232, 144, 122, 0.3);
}

.btn-primary:hover { box-shadow: 0 16px 48px rgba(232, 144, 122, 0.45); }

.btn-ghost {
  background: var(--surface);
  color:      var(--text);
  border:     1px solid var(--border-hi);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.btn-ghost:hover {
  border-color: var(--rose);
  color:        var(--rose);
}


/* ── 11. Theme Toggle Button ────────────────────────────────── */
/*
   Sits in the navbar between the "Hire Me" CTA and the hamburger.
   Shows the OPPOSITE of the current theme (so in dark mode it shows 🌙,
   hinting "click to go light", and vice-versa).
*/
.theme-toggle {
  /* Reset button defaults */
  background:  none;
  border:      1px solid var(--border-hi);
  cursor:      none;
  font-size:   1.1rem;
  line-height: 1;

  /* Layout */
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   50%;
  padding:         0;
  flex-shrink:     0;

  /* Theming */
  color:      var(--text-2);

  /* Hover animation — intentionally NOT covered by the global transition */
  transition:
    background-color var(--duration) var(--ease),
    border-color     var(--duration) var(--ease),
    transform        var(--duration) var(--ease),
    box-shadow       var(--duration) var(--ease);
}

.theme-toggle:hover {
  background-color: var(--rose);
  border-color:     var(--rose);
  color:            #fff;
  transform:        rotate(20deg) scale(1.1);
  box-shadow:       0 4px 16px rgba(232, 144, 122, 0.40);
}

/* Slightly tighter on mobile */
@media (max-width: 640px) {
  .theme-toggle {
    width:     34px;
    height:    34px;
    font-size: 1rem;
  }
}


/* ── 12. Navbar ─────────────────────────────────────────────── */

#nav {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  z-index:    100;
  padding:    22px 0;
  /* Only transition the layout properties, not color
     (color is handled by the global theme transition) */
  transition: padding var(--duration), box-shadow var(--duration);
}

#nav.stuck {
  padding:                 14px 0;
  background:              var(--nav-stuck-bg);   /* ← uses the CSS variable */
  backdrop-filter:         blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:              0 1px 0 var(--border);
}

.nav-wrap {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
}

.nav-logo {
  font-family:    var(--font-display);
  font-size:      1.4rem;
  font-weight:    400;
  letter-spacing: 0.02em;
  color:          var(--text);
}

.nav-logo span {
  color:      var(--rose);
  font-style: italic;
}

.nav-links {
  display:     flex;
  list-style:  none;
  gap:         40px;
  align-items: center;
}

.nav-links a {
  font-size:      0.78rem;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-2);
  position:       relative;
}

.nav-links a::after {
  content:    '';
  position:   absolute;
  bottom:     -4px;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--rose);
  transition: width var(--duration) var(--ease);
}

.nav-links a:hover         { color: var(--text); }
.nav-links a:hover::after  { width: 100%; }

.nav-cta {
  padding:        9px 22px;
  border-radius:  100px;
  background:     transparent;
  border:         1px solid var(--border-hi);
  color:          var(--rose);
  font-family:    var(--font-body);
  font-size:      0.78rem;
  font-weight:    500;
  letter-spacing: 0.06em;
}

.nav-cta:hover {
  background:   var(--rose);
  color:        #fff;
  border-color: var(--rose);
}

.ham {
  display:        none;
  flex-direction: column;
  gap:            6px;
  background:     none;
  border:         none;
  padding:        4px;
  cursor:         pointer;
}

.ham-line {
  display:          block;
  width:            26px;
  height:           1.5px;
  background:       var(--text);
  border-radius:    2px;
  transition:       var(--duration) var(--ease);
  transform-origin: center;
}

.ham.open .ham-line:nth-child(1) { transform: translateY(7.5px) rotate(45deg);   }
.ham.open .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham.open .ham-line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }


/* ── 13. Mobile Drawer ──────────────────────────────────────── */

.drawer {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         99;
  background:      var(--drawer-bg);   /* ← uses the CSS variable */
  backdrop-filter: blur(24px);
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             36px;
}

.drawer.open { display: flex; }

.drawer a {
  font-family: var(--font-display);
  font-size:   2.4rem;
  font-weight: 400;
  color:       var(--text-2);
  transition:  color 0.3s;
}

.drawer a:hover { color: var(--rose); }


/* ── 14. Hero Section ───────────────────────────────────────── */

#hero {
  min-height:     100svh;
  display:        flex;
  align-items:    center;
  padding-top:    100px;
  padding-bottom: 80px;
  position:       relative;
  overflow:       hidden;
}

.hero-watermark {
  position:       absolute;
  right:          -2%;
  bottom:         -8%;
  font-family:    var(--font-display);
  font-size:      clamp(140px, 22vw, 260px);
  font-weight:    700;
  line-height:    0.85;
  color:          rgba(255, 255, 255, 0.018);
  user-select:    none;
  pointer-events: none;
  letter-spacing: -0.02em;
  white-space:    nowrap;
}

/* Adjust watermark opacity for light mode */
body.light .hero-watermark {
  color: rgba(0, 0, 0, 0.04);
}

.hero-grid {
  display:               grid;
  grid-template-columns: 1fr 420px;
  gap:                   60px;
  align-items:           center;
}

.hero-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  background:     rgba(232, 144, 122, 0.10);
  border:         1px solid rgba(232, 144, 122, 0.25);
  color:          var(--rose-light);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding:        7px 18px;
  border-radius:  100px;
  margin-bottom:  24px;
  animation:      fadeDown 0.7s var(--ease) both;
}

.hero-badge .dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--rose);
  animation:     pulse 2s ease infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

.hero-name {
  font-family:    var(--font-display);
  font-size:      clamp(3.2rem, 7vw, 6rem);
  font-weight:    400;
  line-height:    1.0;
  letter-spacing: -0.02em;
  margin-bottom:  22px;
  animation:      fadeDown 0.7s 0.08s var(--ease) both;
}

.hero-name .line2 {
  display:    block;
  font-style: italic;
  color:      var(--rose);
  font-size:  clamp(3.6rem, 7.5vw, 6.5rem);
}

.hero-desc {
  font-size:     1.02rem;
  color:         var(--text-2);
  max-width:     460px;
  line-height:   1.85;
  margin-bottom: 40px;
  animation:     fadeDown 0.7s 0.16s var(--ease) both;
}

.hero-actions {
  display:   flex;
  gap:       16px;
  flex-wrap: wrap;
  animation: fadeDown 0.7s 0.24s var(--ease) both;
}

.hero-card-wrap { animation: fadeLeft 0.8s 0.2s var(--ease) both; }

.hero-card {
  padding:    40px 36px;
  position:   relative;
  overflow:   hidden;
  text-align: center;
}

.hero-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg,
    rgba(232, 144, 122, 0.12) 0%,
    rgba(127, 169, 140, 0.08) 100%
  );
  pointer-events: none;
}

.avatar-wrap {
  width:         130px;
  height:        130px;
  margin:        0 auto 24px;
  border-radius: 50%;
  background:    linear-gradient(135deg, var(--rose), var(--sage));
  padding:       2px;
  animation:     spin 12s linear infinite;
  /* Exclude from theme transition */
  transition: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

.avatar-inner {
  width:           100%;
  height:          100%;
  border-radius:   50%;
  background:      var(--bg-alt);
  display:         flex;
  align-items:     center;
  justify-content: center;
  animation:       spin 12s linear infinite reverse;
  overflow:        hidden;
  transition:      none;
}

.avatar-img {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: 50%;
}

.hero-card-name {
  font-family:   var(--font-display);
  font-size:     1.4rem;
  font-weight:   400;
  margin-bottom: 4px;
}

.hero-card-role {
  font-size:      0.78rem;
  color:          var(--text-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom:  28px;
}

.chip-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
}

.chip {
  background:    rgba(255, 255, 255, 0.05);
  border:        1px solid var(--border);
  border-radius: 10px;
  padding:       10px 12px;
  font-size:     0.76rem;
  font-weight:   500;
  color:         var(--text-2);
  display:       flex;
  align-items:   center;
  gap:           7px;
}

/* In light mode chips need a slightly darker base to read well */
body.light .chip {
  background: rgba(0, 0, 0, 0.04);
}

.chip:hover {
  background:   rgba(232, 144, 122, 0.10);
  border-color: rgba(232, 144, 122, 0.30);
  color:        var(--rose-light);
}

.chip i {
  color:     var(--rose);
  font-size: 0.8rem;
}

.avail {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  margin-top:      24px;
  font-size:       0.76rem;
  color:           var(--text-3);
  letter-spacing:  0.06em;
  text-transform:  uppercase;
}

.avail-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #4ade80;
  box-shadow:    0 0 8px rgba(74, 222, 128, 0.6);
  animation:     pulse 2s ease infinite;
}

.scroll-cue {
  position:       absolute;
  bottom:         36px;
  left:           50%;
  transform:      translateX(-50%);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  color:          var(--text-3);
  font-size:      0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation:      fadeDown 0.8s 0.5s both;
}

.scroll-track {
  width:    1px;
  height:   50px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}

.scroll-track::after {
  content:    '';
  position:   absolute;
  top:        -50px;
  left:       0;
  width:      1px;
  height:     50px;
  background: linear-gradient(transparent, var(--rose));
  animation:  scrollDrop 2s ease infinite;
  transition: none;
}

@keyframes scrollDrop { to { top: 100px; } }

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0);     }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0);    }
}


/* ── 15. About Section ──────────────────────────────────────── */

#about {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}

.about-grid {
  display:               grid;
  grid-template-columns: 1fr 1.3fr;
  gap:                   80px;
  align-items:           center;
}

.about-left { position: relative; }

.big-quote {
  position:       absolute;
  top:            -40px;
  left:           -20px;
  font-family:    var(--font-display);
  font-size:      200px;
  line-height:    1;
  color:          rgba(232, 144, 122, 0.06);
  font-weight:    700;
  pointer-events: none;
  user-select:    none;
}

.about-img-card {
  padding:  36px;
  position: relative;
  overflow: hidden;
}

.about-img-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg,
    rgba(232, 144, 122, 0.08),
    rgba(127, 169, 140, 0.06)
  );
  pointer-events: none;
}

.about-monogram {
  font-family:   var(--font-display);
  font-size:     5.5rem;
  font-weight:   400;
  color:         var(--rose);
  line-height:   1;
  margin-bottom: 12px;
}

.about-name {
  font-family:   var(--font-display);
  font-size:     1.5rem;
  font-weight:   400;
  margin-bottom: 4px;
}

.about-sub {
  font-size:      0.8rem;
  color:          var(--text-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom:  32px;
}

.stat-row {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
}

.stat-box {
  background:    rgba(255, 255, 255, 0.04);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       18px 12px;
  text-align:    center;
}

body.light .stat-box { background: rgba(0, 0, 0, 0.03); }

.stat-box:hover {
  background:   rgba(232, 144, 122, 0.08);
  border-color: rgba(232, 144, 122, 0.20);
}

.stat-n {
  font-family: var(--font-display);
  font-size:   2rem;
  font-weight: 400;
  color:       var(--rose);
}

.stat-l {
  font-size:      0.68rem;
  color:          var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top:     4px;
}

.about-body p {
  font-size:     0.97rem;
  color:         var(--text-2);
  line-height:   1.9;
  margin-bottom: 18px;
}

.about-body p strong {
  color:       var(--text);
  font-weight: 500;
}

.interest-wrap {
  display:    flex;
  flex-wrap:  wrap;
  gap:        10px;
  margin-top: 32px;
}

.interest {
  background:     rgba(255, 255, 255, 0.04);
  border:         1px solid var(--border);
  border-radius:  100px;
  padding:        7px 18px;
  font-size:      0.78rem;
  color:          var(--text-2);
  letter-spacing: 0.04em;
}

body.light .interest { background: rgba(0, 0, 0, 0.04); }

.interest:hover {
  background:   rgba(232, 144, 122, 0.10);
  border-color: rgba(232, 144, 122, 0.30);
  color:        var(--rose-light);
}


/* ── 16. Skills Section ─────────────────────────────────────── */

#skills { background: var(--bg); }

.skills-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
}

.skill-card {
  padding:    32px 28px;
  position:   relative;
  overflow:   hidden;
}

.skill-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(232, 144, 122, 0.06) 0%, transparent 60%);
  opacity:    0;
  transition: opacity var(--duration);
  pointer-events: none;
}

.skill-card:hover {
  transform:  translateY(-8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.skill-card:hover::before { opacity: 1; }

.skill-card-icon {
  width:           44px;
  height:          44px;
  border-radius:   12px;
  background:      rgba(232, 144, 122, 0.10);
  border:          1px solid rgba(232, 144, 122, 0.20);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--rose);
  font-size:       1rem;
  margin-bottom:   20px;
}

.skill-card-title {
  font-family:   var(--font-display);
  font-size:     1.15rem;
  font-weight:   400;
  margin-bottom: 24px;
}

.skill-item { margin-bottom: 16px; }
.skill-item:last-child { margin-bottom: 0; }

.skill-meta {
  display:         flex;
  justify-content: space-between;
  margin-bottom:   7px;
}

.skill-name-text {
  font-size:   0.83rem;
  font-weight: 500;
  color:       var(--text-2);
}

.skill-pct-text {
  font-size:   0.75rem;
  color:       var(--text-3);
  font-weight: 500;
}

.bar-track {
  height:        3px;
  background:    rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow:      hidden;
}

body.light .bar-track { background: rgba(0, 0, 0, 0.08); }

.bar-fill {
  height:        100%;
  border-radius: 10px;
  width:         0;
  background:    linear-gradient(90deg, var(--rose), var(--gold));
}


/* ── 17. Projects Section ───────────────────────────────────── */

#projects {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}

.projects-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  margin-bottom:   64px;
  flex-wrap:       wrap;
  gap:             20px;
}

.projects-header .subheading { max-width: 400px; }

.projects-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   24px;
}

.project-card {
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
}

.project-card:hover {
  transform:  translateY(-10px);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
}

.p-thumb {
  height:          200px;
  position:        relative;
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.p-thumb-bg {
  position:   absolute;
  inset:      0;
  transition: transform 0.6s var(--ease);
}

.project-card:hover .p-thumb-bg { transform: scale(1.07); }

.p-thumb-icon {
  font-size:  3.2rem;
  position:   relative;
  z-index:    1;
  opacity:    0.45;
  transition: opacity 0.3s, transform 0.3s;
}

.project-card:hover .p-thumb-icon {
  opacity:   0.70;
  transform: scale(1.1);
}

.p1 .p-thumb-bg { background: linear-gradient(135deg, #2a1a17, #4a2a20); }
.p2 .p-thumb-bg { background: linear-gradient(135deg, #172120, #1e3830); }
.p3 .p-thumb-bg { background: linear-gradient(135deg, #1a1730, #2a2245); }
.p4 .p-thumb-bg { background: linear-gradient(135deg, #261e0d, #3d3018); }

.p-tags {
  position:  absolute;
  bottom:    14px;
  left:      14px;
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
}

.p-tag {
  background:      rgba(13, 15, 20, 0.70);
  border:          1px solid var(--border-hi);
  color:           var(--text-2);
  font-size:       0.67rem;
  font-weight:     500;
  padding:         3px 10px;
  border-radius:   100px;
  letter-spacing:  0.04em;
  backdrop-filter: blur(8px);
}

/* Tags are always dark so they read on dark thumbnails */
.p-tag { color: rgba(255, 255, 255, 0.80); }

.p-body {
  padding:        28px 26px;
  flex:           1;
  display:        flex;
  flex-direction: column;
}

.p-title {
  font-family:   var(--font-display);
  font-size:     1.2rem;
  font-weight:   400;
  margin-bottom: 10px;
}

.p-desc {
  font-size:     0.85rem;
  color:         var(--text-2);
  line-height:   1.75;
  flex:          1;
  margin-bottom: 22px;
}

.p-links { display: flex; gap: 18px; }

.p-link {
  font-size:      0.78rem;
  font-weight:    500;
  color:          var(--text-3);
  display:        flex;
  align-items:    center;
  gap:            6px;
  letter-spacing: 0.04em;
}

.p-link:hover { color: var(--rose); }
.p-link i     { font-size: 0.75rem; }

.p-featured {
  position:       absolute;
  top:            14px;
  right:          14px;
  background:     rgba(232, 144, 122, 0.15);
  border:         1px solid rgba(232, 144, 122, 0.30);
  color:          var(--rose-light);
  font-size:      0.65rem;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding:        4px 10px;
  border-radius:  100px;
}


/* ── 18. Career Section ─────────────────────────────────────── */

#career { background: var(--bg); }

.career-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   40px;
  align-items:           start;
}

.career-main {
  padding:  56px 48px;
  position: relative;
  overflow: hidden;
}

.career-main::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg,
    rgba(232, 144, 122, 0.14) 0%,
    rgba(127, 169, 140, 0.07) 100%
  );
  pointer-events: none;
}

.career-emoji {
  font-size:     2.8rem;
  margin-bottom: 20px;
  display:       block;
}

.career-main .heading   { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.career-main .subheading { font-size: 0.92rem; margin-bottom: 32px; }

.open-to-wrap {
  display:    flex;
  flex-wrap:  wrap;
  gap:        10px;
  margin-top: 28px;
}

.open-tag {
  background:    rgba(255, 255, 255, 0.06);
  border:        1px solid var(--border-hi);
  border-radius: 100px;
  padding:       7px 16px;
  font-size:     0.76rem;
  font-weight:   500;
  color:         var(--text-2);
  display:       flex;
  align-items:   center;
  gap:           6px;
}

body.light .open-tag { background: rgba(0, 0, 0, 0.04); }

.open-tag i {
  color:     var(--rose);
  font-size: 0.75rem;
}

.timeline {
  display:        flex;
  flex-direction: column;
}

.tl-item {
  display:        flex;
  gap:            20px;
  padding-bottom: 36px;
  position:       relative;
}

.tl-item:last-child { padding-bottom: 0; }

.tl-item::after {
  content:    '';
  position:   absolute;
  left:       18px;
  top:        40px;
  bottom:     0;
  width:      1px;
  background: var(--border);
}

.tl-item:last-child::after { display: none; }

.tl-dot {
  width:           36px;
  height:          36px;
  min-width:       36px;
  border-radius:   50%;
  background:      rgba(232, 144, 122, 0.10);
  border:          1px solid rgba(232, 144, 122, 0.25);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--rose);
  font-size:       0.82rem;
  position:        relative;
  z-index:         1;
  flex-shrink:     0;
}

.tl-year {
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--rose);
  margin-bottom:  6px;
}

.tl-heading {
  font-family:   var(--font-display);
  font-size:     1.1rem;
  font-weight:   400;
  margin-bottom: 6px;
}

.tl-text {
  font-size:   0.84rem;
  color:       var(--text-2);
  line-height: 1.7;
}


/* ── 19. Contact Section ────────────────────────────────────── */

#contact {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}

.contact-grid {
  display:               grid;
  grid-template-columns: 1fr 1.2fr;
  gap:                   60px;
  align-items:           start;
}

.contact-left h3 {
  font-family:   var(--font-display);
  font-size:     clamp(1.6rem, 3vw, 2.2rem);
  font-weight:   400;
  line-height:   1.3;
  margin-bottom: 14px;
}

.contact-left p {
  font-size:     0.95rem;
  color:         var(--text-2);
  line-height:   1.8;
  margin-bottom: 40px;
}

.contact-detail-list {
  display:        flex;
  flex-direction: column;
  gap:            18px;
}

.cd-row {
  display:     flex;
  align-items: center;
  gap:         16px;
}

.cd-icon {
  width:           42px;
  height:          42px;
  border-radius:   12px;
  background:      rgba(232, 144, 122, 0.10);
  border:          1px solid rgba(232, 144, 122, 0.20);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--rose);
  font-size:       0.9rem;
  flex-shrink:     0;
}

.cd-text {
  font-size: 0.9rem;
  color:     var(--text-2);
}

.cd-text:hover { color: var(--rose); }

.socials {
  display:    flex;
  gap:        12px;
  margin-top: 32px;
}

.s-btn {
  width:           42px;
  height:          42px;
  border-radius:   50%;
  background:      var(--surface);
  border:          1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-2);
  font-size:       0.9rem;
}

.s-btn:hover {
  background:   var(--rose);
  border-color: var(--rose);
  color:        #fff;
  transform:    translateY(-4px);
}

.contact-form { padding: 36px 32px; }

.form-row { margin-bottom: 20px; }

.form-row label {
  display:        block;
  font-size:      0.7rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--text-3);
  margin-bottom:  8px;
}

.form-ctrl {
  width:         100%;
  padding:       13px 16px;
  /* Dark mode: white-tinted; light mode: black-tinted */
  background:    rgba(255, 255, 255, 0.04);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  font-family:   var(--font-body);
  font-size:     0.9rem;
  color:         var(--text);
  outline:       none;
  resize:        none;
}

/* Override for light mode — white input field */
body.light .form-ctrl {
  background: rgba(0, 0, 0, 0.03);
}

.form-ctrl:focus {
  border-color: var(--rose);
  background:   rgba(232, 144, 122, 0.05);
}

.form-ctrl::placeholder { color: var(--text-3); }

textarea.form-ctrl { min-height: 120px; }

.form-btn {
  width:           100%;
  justify-content: center;
  margin-top:      4px;
}

.toast {
  display:       none;
  background:    rgba(74, 222, 128, 0.10);
  border:        1px solid rgba(74, 222, 128, 0.30);
  color:         #4ade80;
  border-radius: var(--radius);
  padding:       12px 18px;
  font-size:     0.85rem;
  text-align:    center;
  margin-top:    14px;
}


/* ── 20. Footer ─────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--border);
  padding:    36px 0;
  background: var(--bg-alt);
}

.footer-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             16px;
}

.footer-logo {
  font-family: var(--font-display);
  font-size:   1.15rem;
  font-weight: 400;
  color:       var(--text-2);
}

.footer-logo span {
  color:      var(--rose);
  font-style: italic;
}

.footer-copy { font-size: 0.78rem; color: var(--text-3); }

.footer-copy a {
  color:      var(--rose);
  transition: opacity 0.3s;
}

.footer-copy a:hover { opacity: 0.75; }

.footer-socials .s-btn {
  width:     34px;
  height:    34px;
  font-size: 0.8rem;
}


/* ── 21. Responsive Breakpoints ─────────────────────────────── */

/* Tablet — ≤960px */
@media (max-width: 960px) {
  .hero-grid      { grid-template-columns: 1fr; text-align: center; }
  .hero-card-wrap { display: none; }
  .hero-desc      { margin: 0 auto 40px; }
  .hero-actions   { justify-content: center; }

  .about-grid     { grid-template-columns: 1fr; }
  .about-left     { max-width: 400px; margin: 0 auto; }

  .skills-grid    { grid-template-columns: 1fr 1fr; }

  .career-grid    { grid-template-columns: 1fr; }
  .contact-grid   { grid-template-columns: 1fr; }

  .projects-grid  { grid-template-columns: 1fr 1fr; }

  .nav-links      { display: none; }
  .ham            { display: flex; }
  .nav-cta        { display: none; }
}

/* Mobile — ≤640px */
@media (max-width: 640px) {
  section          { padding: 80px 0; }
  .projects-grid   { grid-template-columns: 1fr; }
  .skills-grid     { grid-template-columns: 1fr; }
  .hero-name       { font-size: clamp(2.8rem, 12vw, 4.5rem); }
}

/* Very small — ≤420px: disable custom cursor */
@media (max-width: 420px) {
  body             { cursor: auto; }
  #cursor-dot,
  #cursor-ring     { display: none; }
}