/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * PORTFOLIO STYLESHEET — Professional Design System
 * ═══════════════════════════════════════════════════════════════════════════════
 * 
 * Design System Architecture:
 * - Color Palette: Warm cream base (#f0e8de), orange accent (#e07840)
 * - Typography: Nunito (UI/Body), JetBrains Mono (Code/Technical)
 * - Animation Easing: cubic-bezier(.23, 1, .32, 1) for smooth interactions
 * - Component-Based: Reusable orb, button, card, and animation systems
 * 
 * Responsive Design: Mobile-first approach with breakpoints at 1060px and 600px
 * Accessibility: Semantic HTML, proper color contrast, keyboard navigation support
 */

/* ═══════════════════════════════════════
   BASE RESET & GLOBAL STYLING
═══════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Nunito', sans-serif;
  overflow-x: hidden;
  cursor: none;
  background: #f0e8de;
}

/* All links are clickable */
a {
  cursor: pointer;
}


/* ═══════════════════════════════════════
   CUSTOM CURSOR SYSTEM — Interactive Morphing Pointer
═══════════════════════════════════════
   
   Creates sophisticated custom cursor experience:
   - Main cursor: 14px circle that follows mouse precisely
   - Trail effect: 6px trailing element with lag for smooth motion
   - Pill morph: Expands to 52x22px pill on interactive elements
   - Color: Orange accent #e07840 with multiply blend mode
   - Z-index: 9999/9998 ensures top layer visibility
 */
.cur {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e07840;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    width 0.3s cubic-bezier(.23, 1, .32, 1),
    height 0.3s cubic-bezier(.23, 1, .32, 1),
    border-radius 0.3s,
    background 0.3s;
  box-shadow: 0 2px 8px rgba(224, 120, 64, 0.5);
  mix-blend-mode: multiply;
}

.cur.pill {
  width: 52px;
  height: 22px;
  border-radius: 100px;
}

.cur-trail {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(224, 120, 64, 0.35);
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: left 0.12s, top 0.12s;
}


/* ═══════════════════════════════════════
   CLAY ORB COMPONENT SYSTEM — Reusable Floating Elements
═══════════════════════════════════════
   
   Modular orb system with:
   - Pseudo-elements for 3D depth: ::before (shadow), ::after (highlight)
   - Size variants: xs (18px) through xxl (170px)
   - 8 color themes: Orange, Pink, Green, Blue, Mint, Peach, Lavender, Sky, Cream
   - Radial gradients for realistic 3D sphere appearance
   - Layered shadows for depth and glow effects
   - will-change optimization for smooth animation performance
 */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* 3D clay shading — highlight */
.orb::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.1) 45%,
    transparent 65%
  );
  inset: 0;
}

/* 3D clay shading — shadow */
.orb::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 70% 72%,
    rgba(0, 0, 0, 0.12) 0%,
    transparent 55%
  );
  inset: 0;
}

/* Orb Sizes */
.orb-xs  { width: 18px;  height: 18px; }
.orb-sm  { width: 30px;  height: 30px; }
.orb-md  { width: 50px;  height: 50px; }
.orb-lg  { width: 75px;  height: 75px; }
.orb-xl  { width: 110px; height: 110px; }
.orb-xxl { width: 170px; height: 170px; }

/* Orb Colors */
.orb-orange {
  background: radial-gradient(circle at 35% 30%, #f0b090, #d07040);
  box-shadow: 0 12px 30px rgba(200, 100, 50, 0.3),
    inset -6px -6px 16px rgba(180, 80, 30, 0.2),
    inset 4px 4px 12px rgba(255, 200, 150, 0.4);
}
.orb-pink {
  background: radial-gradient(circle at 35% 30%, #f0b0c8, #d07090);
  box-shadow: 0 12px 30px rgba(200, 100, 140, 0.3),
    inset -6px -6px 16px rgba(180, 60, 100, 0.2),
    inset 4px 4px 12px rgba(255, 180, 200, 0.4);
}
.orb-green {
  background: radial-gradient(circle at 35% 30%, #90d0b0, #3a9a6a);
  box-shadow: 0 12px 30px rgba(60, 150, 100, 0.3),
    inset -6px -6px 16px rgba(30, 120, 70, 0.2),
    inset 4px 4px 12px rgba(150, 230, 180, 0.4);
}
.orb-blue {
  background: radial-gradient(circle at 35% 30%, #98c8e8, #5090c0);
  box-shadow: 0 12px 30px rgba(70, 130, 190, 0.3),
    inset -6px -6px 16px rgba(40, 100, 160, 0.2),
    inset 4px 4px 12px rgba(160, 210, 240, 0.4);
}
.orb-mint {
  background: radial-gradient(circle at 35% 30%, #a0e0c8, #3aaa88);
  box-shadow: 0 12px 30px rgba(50, 160, 130, 0.3),
    inset -6px -6px 16px rgba(30, 130, 100, 0.2),
    inset 4px 4px 12px rgba(160, 240, 210, 0.4);
}
.orb-peach {
  background: radial-gradient(circle at 35% 30%, #f8d0a8, #e0a068);
  box-shadow: 0 12px 30px rgba(220, 150, 80, 0.25),
    inset -6px -6px 16px rgba(190, 110, 50, 0.2),
    inset 4px 4px 12px rgba(255, 220, 170, 0.4);
}
.orb-lavender {
  background: radial-gradient(circle at 35% 30%, #d0b8f0, #9878c8);
  box-shadow: 0 12px 30px rgba(150, 100, 200, 0.3),
    inset -6px -6px 16px rgba(120, 70, 180, 0.2),
    inset 4px 4px 12px rgba(210, 180, 250, 0.4);
}
.orb-sky {
  background: radial-gradient(circle at 35% 30%, #a8d8f8, #4898d0);
  box-shadow: 0 12px 30px rgba(60, 140, 210, 0.3),
    inset -6px -6px 16px rgba(30, 110, 180, 0.2),
    inset 4px 4px 12px rgba(170, 220, 255, 0.4);
}
.orb-cream {
  background: radial-gradient(circle at 35% 30%, #fff8e8, #e8d4b0);
  box-shadow: 0 12px 30px rgba(200, 170, 100, 0.2),
    inset -6px -6px 16px rgba(180, 140, 80, 0.15),
    inset 4px 4px 12px rgba(255, 250, 220, 0.5);
}


/* ═══════════════════════════════════════
   FLOAT ANIMATIONS — 8 Variations
═══════════════════════════════════════ */
@keyframes f1 {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  30%       { transform: translateY(-18px) rotate(8deg) scale(1.05); }
  70%       { transform: translateY(-8px) rotate(-5deg) scale(0.97); }
}
@keyframes f2 {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0); }
  40%       { transform: translateY(-22px) translateX(10px) rotate(-10deg); }
  80%       { transform: translateY(-6px) translateX(-6px) rotate(6deg); }
}
@keyframes f3 {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  50%       { transform: translateY(-28px) scale(1.08) rotate(12deg); }
}
@keyframes f4 {
  0%, 100% { transform: translate(0, 0) rotate(0) scale(1); }
  25%       { transform: translate(12px, -14px) rotate(-8deg) scale(1.04); }
  75%       { transform: translate(-8px, -20px) rotate(6deg) scale(0.96); }
}
@keyframes f5 {
  0%, 100% { transform: translateY(0) rotate(0) scaleX(1); }
  50%       { transform: translateY(-16px) rotate(15deg) scaleX(0.95); }
}
@keyframes f6 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-12px, -18px) scale(1.06); }
  66%       { transform: translate(8px, -10px) scale(0.94); }
}
@keyframes f7 {
  0%, 100% { transform: translateY(0) skew(0, 0) scale(1); }
  50%       { transform: translateY(-20px) skew(3deg, 2deg) scale(1.07); }
}
@keyframes f8 {
  0%, 100% { transform: translate(0, 0) rotate(0) scale(1); }
  20%       { transform: translate(8px, -10px) rotate(-6deg) scale(1.03); }
  60%       { transform: translate(-6px, -24px) rotate(10deg) scale(0.95); }
  80%       { transform: translate(4px, -14px) rotate(-3deg) scale(1.02); }
}

/* Pulse Glow */
@keyframes glow1 {
  0%, 100% { box-shadow: 0 8px 24px rgba(200, 100, 50, 0.25), inset -4px -4px 12px rgba(180, 80, 30, 0.15), inset 3px 3px 8px rgba(255, 200, 150, 0.35); }
  50%       { box-shadow: 0 16px 40px rgba(200, 100, 50, 0.45), inset -4px -4px 12px rgba(180, 80, 30, 0.15), inset 3px 3px 8px rgba(255, 200, 150, 0.35); }
}
@keyframes glow2 {
  0%, 100% { box-shadow: 0 8px 24px rgba(60, 150, 100, 0.2), inset -4px -4px 12px rgba(30, 120, 70, 0.15), inset 3px 3px 8px rgba(150, 230, 180, 0.3); }
  50%       { box-shadow: 0 18px 44px rgba(60, 150, 100, 0.4), inset -4px -4px 12px rgba(30, 120, 70, 0.15), inset 3px 3px 8px rgba(150, 230, 180, 0.3); }
}

/* Spin Wobble */
@keyframes spinWobble {
  0%   { transform: rotate(0) scale(1); }
  25%  { transform: rotate(90deg) scale(1.1) skew(3deg); }
  50%  { transform: rotate(180deg) scale(0.9); }
  75%  { transform: rotate(270deg) scale(1.08) skew(-3deg); }
  100% { transform: rotate(360deg) scale(1); }
}


/* ═══════════════════════════════════════
   PAGE LOADER — Staggered Curtain
═══════════════════════════════════════ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #f0e8de;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}

.page-loader.done {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.loader-orbs {
  display: flex;
  gap: 14px;
}

.lo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  animation: loaderBounce 0.8s ease-in-out infinite;
}
.lo:nth-child(1) { background: radial-gradient(circle at 35% 30%, #f0b090, #d07040); animation-delay: 0s; }
.lo:nth-child(2) { background: radial-gradient(circle at 35% 30%, #90d0b0, #3a9a6a); animation-delay: 0.15s; }
.lo:nth-child(3) { background: radial-gradient(circle at 35% 30%, #a8d8f8, #4898d0); animation-delay: 0.3s; }
.lo:nth-child(4) { background: radial-gradient(circle at 35% 30%, #d0b8f0, #9878c8); animation-delay: 0.45s; }

@keyframes loaderBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.2); }
}


/* ═══════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  padding: 16px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(240, 232, 222, 0.82);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 20px rgba(180, 140, 110, 0.1);
  transition: all 0.4s;
}

.n-logo {
  font-size: 1.15rem;
  font-weight: 900;
  color: #2a5a3a;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: transform 0.4s cubic-bezier(.23, 1, .32, 1);
}
.n-logo:hover { transform: scale(1.08) rotate(-2deg); }

.n-links {
  display: flex;
  gap: 28px;
  list-style: none;
}

.n-links a {
  font-size: 0.9rem;
  font-weight: 700;
  color: #8a7a6a;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.3s;
  position: relative;
  cursor: pointer;
}
.n-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: #e07840;
  border-radius: 1px;
  transition: width 0.3s cubic-bezier(.23, 1, .32, 1);
}
.n-links a:hover { color: #e07840; }
.n-links a:hover::after { width: 100%; }

.n-cta {
  padding: 10px 26px;
  border-radius: 100px;
  background: #2a5a3a;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(42, 90, 58, 0.3);
  transition: all 0.4s cubic-bezier(.23, 1, .32, 1);
  position: relative;
  overflow: hidden;
}
.n-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(-100%) skew(-15deg);
  transition: transform 0.5s cubic-bezier(.23, 1, .32, 1);
}
.n-cta:hover::before { transform: translateX(120%) skew(-15deg); }
.n-cta:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 28px rgba(42, 90, 58, 0.45);
}


/* ═══════════════════════════════════════
   HERO SECTION — Warm Cream
═══════════════════════════════════════ */
#hero {
  min-height: 100vh;
  background: linear-gradient(145deg, #f5ede0 0%, #ede4d6 40%, #f0e8de 70%, #e8e0d4 100%);
  padding: 110px 60px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Ambient background blobs */
.hero-glow1 {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 160, 100, 0.18) 0%, transparent 65%);
  top: -150px;
  right: -120px;
  filter: blur(70px);
  pointer-events: none;
  animation: f3 20s ease-in-out infinite;
}
.hero-glow2 {
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 180, 120, 0.14) 0%, transparent 65%);
  bottom: -80px;
  left: -80px;
  filter: blur(60px);
  pointer-events: none;
  animation: f6 17s ease-in-out infinite 5s;
}

/* Hero entrance animations */
@keyframes fadeUp    { from { opacity: 0; transform: translateY(32px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes fadeLeft  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn   { from { opacity: 0; transform: scale(0.7) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes slideRight{ from { opacity: 0; transform: translateX(60px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes blinkCur  { 50% { opacity: 0; } }

.h-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(180, 140, 110, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  margin-bottom: 26px;
  animation: fadeUp 0.8s cubic-bezier(.23, 1, .32, 1) 0.3s both;
}
.h-tag .dot {
  width: 8px;
  height: 8px;
  background: #2a9a5a;
  border-radius: 50%;
  animation: glow2 2.5s infinite;
}
.h-tag span {
  font-size: 0.74rem;
  font-weight: 800;
  color: #2a5a3a;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.h-name {
  font-size: clamp(3rem, 6vw, 5.2rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
  color: #2a2018;
  animation: fadeUp 0.9s cubic-bezier(.23, 1, .32, 1) 0.45s both;
}
.h-name .accent {
  color: #e07840;
  display: inline-block;
  animation: scaleIn 0.8s cubic-bezier(.23, 1, .32, 1) 0.9s both;
}

.h-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  color: #9a8a7a;
  margin-bottom: 26px;
  animation: fadeUp 0.8s cubic-bezier(.23, 1, .32, 1) 0.6s both;
}
.blink {
  animation: blinkCur 1.2s step-end infinite;
  color: #e07840;
}

.h-desc {
  font-size: 1.1rem;
  line-height: 1.82;
  color: #6a5a4a;
  max-width: 440px;
  margin-bottom: 38px;
  animation: fadeUp 0.8s cubic-bezier(.23, 1, .32, 1) 0.75s both;
}

.h-btns {
  display: flex;
  gap: 14px;
  margin-bottom: 38px;
  animation: fadeUp 0.8s cubic-bezier(.23, 1, .32, 1) 0.9s both;
}

.btn-dark {
  padding: 14px 32px;
  border-radius: 100px;
  background: #2a2018;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(42, 32, 24, 0.25);
  transition: all 0.4s cubic-bezier(.23, 1, .32, 1);
  position: relative;
  overflow: hidden;
  font-family: 'Nunito', sans-serif;
}
.btn-dark::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.btn-dark:hover::before { width: 300px; height: 300px; }
.btn-dark:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 18px 40px rgba(42, 32, 24, 0.32);
}

.btn-soft {
  padding: 14px 32px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.65);
  color: #2a2018;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: none;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(180, 140, 110, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.4s cubic-bezier(.23, 1, .32, 1);
  font-family: 'Nunito', sans-serif;
}
.btn-soft:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 32px rgba(180, 140, 110, 0.2);
}

.h-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  animation: fadeUp 0.8s cubic-bezier(.23, 1, .32, 1) 1.05s both;
}
.pill {
  padding: 7px 16px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 3px 12px rgba(180, 140, 110, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #5a4a3a;
  transition: all 0.3s cubic-bezier(.23, 1, .32, 1);
}
.pill:hover {
  transform: translateY(-3px) scale(1.06);
  background: rgba(255, 255, 255, 0.9);
}

/* Hero Right — Floating Cards */
.hero-right {
  position: relative;
  height: 520px;
  z-index: 2;
  animation: slideRight 1s cubic-bezier(.23, 1, .32, 1) 0.5s both;
}

.hc {
  position: absolute;
  border-radius: 28px;
  padding: 30px 26px;
  box-shadow:
    0 20px 60px rgba(180, 140, 110, 0.16),
    0 4px 16px rgba(180, 140, 110, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.4s cubic-bezier(.23, 1, .32, 1), box-shadow 0.4s;
}
.hc:hover {
  box-shadow: 0 32px 80px rgba(180, 140, 110, 0.22), 0 8px 24px rgba(180, 140, 110, 0.1);
}

.hc-main {
  top: 0; left: 0; right: 50px;
  min-height: 255px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.96);
  animation: fadeUp 0.9s cubic-bezier(.23, 1, .32, 1) 0.7s both;
}
.hc-main:hover { transform: translateY(-6px) rotate(0.5deg); }
.hc-main-t {
  font-size: 1.9rem;
  font-weight: 900;
  color: #2a2018;
  line-height: 1.2;
  margin-bottom: 12px;
}
.hc-main-b {
  font-size: 0.84rem;
  color: #9a8a7a;
  line-height: 1.7;
  margin-bottom: 22px;
}

.hc-green {
  top: 80px; right: 0; left: 90px;
  min-height: 245px;
  z-index: 2;
  transform: rotate(4deg);
  background: linear-gradient(155deg, #2a5a3a 0%, #1a4a2a 100%);
  border: 1px solid rgba(100, 180, 120, 0.3);
  box-shadow: 0 20px 60px rgba(26, 74, 42, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: scaleIn 0.9s cubic-bezier(.23, 1, .32, 1) 0.9s both;
}
.hc-green:hover { transform: rotate(4deg) translateY(-6px) scale(1.02); }
.hc-green-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(180, 230, 180, 0.7);
  margin-bottom: 16px;
}
.hc-green-t {
  font-size: 1rem;
  font-weight: 800;
  color: #c8f0c8;
  margin-bottom: 8px;
  line-height: 1.3;
}
.hc-green-b {
  font-size: 0.78rem;
  color: rgba(200, 240, 200, 0.55);
  line-height: 1.6;
}
.hc-green-dots { display: flex; gap: 7px; margin-top: 20px; }
.gd {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(180, 230, 180, 0.35);
  transition: all 0.3s;
}
.gda {
  width: 24px;
  background: #4aba6a;
  border-radius: 4px;
  animation: glow2 3s infinite;
}

.hc-stats {
  bottom: 0; left: 20px; right: 40px;
  height: 138px;
  z-index: 4;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.96);
  animation: fadeUp 0.9s cubic-bezier(.23, 1, .32, 1) 1.1s both;
}
.hc-stats:hover { transform: translateY(-5px); }
.hcs-lbl {
  font-size: 0.65rem;
  font-weight: 800;
  color: #e07840;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hcs-row { display: flex; justify-content: space-between; align-items: flex-end; }
.hcs-nums { display: flex; gap: 24px; }
.hsv { font-size: 1.5rem; font-weight: 900; color: #2a2018; line-height: 1; }
.hsk { font-size: 0.65rem; color: #9a8a7a; margin-top: 3px; }
.hcs-orb {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #e07840, #c05820);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 8px 20px rgba(224, 120, 64, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: f1 4s ease-in-out infinite;
}

/* Floating mini badges */
.hbadge {
  position: absolute;
  border-radius: 18px;
  padding: 11px 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(180, 140, 110, 0.12);
  transition: all 0.3s;
}
.hbadge:hover { transform: scale(1.08); }
.hb1 { top: -22px; right: 8px;   animation: f2 6s ease-in-out infinite; }
.hb2 { top: 252px;  left: -12px; animation: f4 7s ease-in-out infinite 2s; }
.hbi { font-size: 1.2rem; }
.hbv { font-size: 0.72rem; font-weight: 800; color: #2a2018; }
.hbs { font-size: 0.62rem; color: #9a8a7a; }

.btn-orange {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 100px;
  background: #e07840;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(224, 120, 64, 0.35);
  transition: all 0.3s cubic-bezier(.23, 1, .32, 1);
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
}
.btn-orange:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 14px 30px rgba(224, 120, 64, 0.5);
}


/* ═══════════════════════════════════════
   MARQUEE TICKER
═══════════════════════════════════════ */
.mq-wrap {
  overflow: hidden;
  padding: 16px 0;
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}
.mq-t {
  display: flex;
  gap: 44px;
  white-space: nowrap;
  animation: mqs 20s linear infinite;
}
.mq-t:hover { animation-play-state: paused; }

@keyframes mqs {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.mi {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a09080;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: color 0.3s;
}
.mi:hover { color: #e07840; }
.ms { color: #e07840; font-size: 0.45rem; }


/* ═══════════════════════════════════════
   SCROLL REVEAL SYSTEM
═══════════════════════════════════════ */
.rev {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(.23, 1, .32, 1), transform 0.8s cubic-bezier(.23, 1, .32, 1);
}
.rev.vis { opacity: 1; transform: translateY(0); }

.rev-l {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.8s cubic-bezier(.23, 1, .32, 1), transform 0.8s cubic-bezier(.23, 1, .32, 1);
}
.rev-l.vis { opacity: 1; transform: translateX(0); }

.rev-r {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.8s cubic-bezier(.23, 1, .32, 1), transform 0.8s cubic-bezier(.23, 1, .32, 1);
}
.rev-r.vis { opacity: 1; transform: translateX(0); }

.rev-s {
  opacity: 0;
  transform: scale(0.85) rotate(-3deg);
  transition: opacity 0.8s cubic-bezier(.23, 1, .32, 1), transform 0.8s cubic-bezier(.23, 1, .32, 1);
}
.rev-s.vis { opacity: 1; transform: scale(1) rotate(0deg); }

/* Stagger delay utilities */
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }
.d5 { transition-delay: 0.5s; }
.d6 { transition-delay: 0.6s; }
.d7 { transition-delay: 0.7s; }
.d8 { transition-delay: 0.8s; }


/* ═══════════════════════════════════════
   SECTION SHARED STYLES
═══════════════════════════════════════ */
.sec-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.sec-lbl::before {
  content: '';
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.sec-h {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
  position: relative;
  display: inline-block;
}

/* Label & emphasis color variants */
.lbl-b { color: #3a6a8a; } .lbl-g { color: #3a6a4a; }
.lbl-o { color: #c05830; } .lbl-p { color: #8a4a60; } .lbl-m { color: #3a7a5a; }

.em-b { color: #2a5a7a; } .em-g { color: #2a5a3a; }
.em-o { color: #d05828; } .em-p { color: #7a3a50; } .em-m { color: #2a6a4a; }


/* ═══════════════════════════════════════
   ABOUT SECTION — Sky Blue
═══════════════════════════════════════ */
#about {
  padding: 110px 60px;
  background: linear-gradient(145deg, #c8dce8 0%, #d4e4ee 50%, #bcd0e0 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.ab-blob {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: linear-gradient(155deg, #a8c8e0, #80b0cc);
  box-shadow: inset -12px -12px 30px rgba(255, 255, 255, 0.6), inset 6px 6px 20px rgba(100, 150, 190, 0.2);
  opacity: 0.5;
  pointer-events: none;
  animation: f3 10s ease-in-out infinite;
}

.ab-txt {
  font-size: 1.05rem;
  line-height: 1.82;
  color: #3a5a6a;
  margin-bottom: 16px;
}

.ab-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 30px;
}
.ab-c {
  padding: 20px 18px;
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(.23, 1, .32, 1);
  box-shadow: 0 8px 28px rgba(100, 150, 190, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.ab-c:hover { transform: translateY(-6px) rotate(0.5deg) scale(1.02); }
.ab-cw { background: rgba(255, 255, 255, 0.6);  border: 1px solid rgba(255, 255, 255, 0.9); }
.ab-cb { background: rgba(180, 210, 230, 0.5); border: 1px solid rgba(200, 225, 240, 0.8); }
.ab-ic {
  font-size: 1.5rem;
  margin-bottom: 10px;
  display: block;
  transition: transform 0.4s cubic-bezier(.23, 1, .32, 1);
}
.ab-c:hover .ab-ic { transform: scale(1.25) rotate(-8deg); }
.ab-ct { font-size: 0.82rem; font-weight: 800; margin-bottom: 4px; color: #2a4a5a; }
.ab-cd { font-size: 0.74rem; color: #6a8a9a; line-height: 1.5; }

/* Quick Info Row */
.ab-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0 24px;
}
.ab-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: #3a5a6a;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.85);
  padding: 10px 14px;
  border-radius: 12px;
}
.ab-info-icon { font-size: 1rem; }

/* Code window */
.code-win {
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 60px rgba(100, 150, 190, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.5s cubic-bezier(.23, 1, .32, 1);
}
.code-win:hover { transform: translateY(-8px) perspective(800px) rotateX(2deg); }

.cw-top {
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.38);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}
.cwb  { width: 11px; height: 11px; border-radius: 50%; }
.cwr  { background: #ff5f57; }
.cwy  { background: #ffbd2e; }
.cwg  { background: #28c840; }
.cw-fn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: #6a8a9a;
  margin-left: auto;
}

.cw-body {
  padding: 24px 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.77rem;
  line-height: 2.1;
  color: #2a4a5a;
}

/* Syntax highlight colors */
.ck { color: #7060a0; }
.cs { color: #2a7a50; }
.cn { color: #c05828; }
.cf { color: #2058a0; }
.cc { color: #8aaa9a; font-style: italic; }
.cp { color: rgba(40, 70, 80, 0.3); }

/* Typewriter line animation */
.type-line {
  overflow: hidden;
  white-space: nowrap;
  animation: typeLine 1s steps(30, end) both;
}
.type-line:nth-child(1) { animation-delay: 0.2s; }
.type-line:nth-child(2) { animation-delay: 0.5s; }
.type-line:nth-child(3) { animation-delay: 0.8s; }
.type-line:nth-child(4) { animation-delay: 1.1s; }
.type-line:nth-child(5) { animation-delay: 1.4s; }
.type-line:nth-child(6) { animation-delay: 1.7s; }
.type-line:nth-child(7) { animation-delay: 2.0s; }
.type-line:nth-child(8) { animation-delay: 2.3s; }
.type-line:nth-child(9) { animation-delay: 2.6s; }

@keyframes typeLine {
  from { max-width: 0;    opacity: 0; }
  to   { max-width: 100%; opacity: 1; }
}


/* ═══════════════════════════════════════
   SKILLS SECTION — Sage Green
═══════════════════════════════════════ */
#skills {
  padding: 110px 60px;
  background: linear-gradient(145deg, #c0d4c0 0%, #ccdccc 50%, #b8ccb8 100%);
  position: relative;
  overflow: hidden;
}

.sk-head { text-align: center; margin-bottom: 58px; }
.sk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.sk-c {
  padding: 28px 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 28px rgba(80, 120, 80, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(.23, 1, .32, 1), box-shadow 0.5s;
  transform-style: preserve-3d;
  perspective: 600px;
}
.sk-c::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80, 160, 100, 0.12) 0%, transparent 65%);
  transition: all 0.5s;
}
.sk-c:hover {
  transform: translateY(-10px) rotateX(4deg) rotateY(-2deg) scale(1.03);
  box-shadow: 0 24px 56px rgba(80, 120, 80, 0.18);
}
.sk-c:hover::before { transform: scale(1.5); opacity: 0.8; }

.sk-em {
  font-size: 2rem;
  margin-bottom: 14px;
  display: block;
  transition: transform 0.4s cubic-bezier(.23, 1, .32, 1);
}
.sk-c:hover .sk-em { transform: scale(1.35) rotate(-10deg) translateY(-4px); }
.sk-nm { font-size: 0.86rem; font-weight: 800; color: #2a3a2a; margin-bottom: 5px; }
.sk-lv { font-size: 0.72rem; color: #6a8a6a; margin-bottom: 14px; }

.sk-bar {
  height: 5px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 3px;
  overflow: hidden;
}
.sk-f {
  height: 100%;
  border-radius: 3px;
  transition: width 2s cubic-bezier(.23, 1, .32, 1);
  position: relative;
}
.sk-f::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

.sf-g { background: linear-gradient(90deg, #3a8a5a, #6ac07a); }
.sf-o { background: linear-gradient(90deg, #d07840, #e0a060); }
.sf-b { background: linear-gradient(90deg, #4a80b0, #70a8d0); }

.sk-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 3px 10px rgba(80, 120, 80, 0.1);
  font-size: 0.7rem;
  font-weight: 700;
  color: #3a6a3a;
  margin-top: 12px;
}
.tg-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a8a5a, #5aaa7a);
  box-shadow: 0 2px 6px rgba(58, 138, 90, 0.4);
  transition: transform 0.3s;
}
.sk-c:hover .tg-dot { transform: scale(1.2) rotate(180deg); }


/* ═══════════════════════════════════════
   EXPERIENCE SECTION — Warm Peach
═══════════════════════════════════════ */
#experience {
  padding: 110px 60px;
  background: linear-gradient(145deg, #ecd4c0 0%, #f0dccc 50%, #e4ccc0 100%);
  position: relative;
  overflow: hidden;
}

.exp-w {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  margin-top: 56px;
}
.exp-list { display: flex; flex-direction: column; gap: 14px; }

.exp-tab {
  padding: 22px 24px;
  border-radius: 22px;
  cursor: none;
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 20px rgba(200, 140, 100, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.4s cubic-bezier(.23, 1, .32, 1);
}
.exp-tab:hover,
.exp-tab.active {
  border-color: rgba(200, 120, 80, 0.35);
  transform: translateX(8px) scale(1.02);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 32px rgba(200, 140, 100, 0.18);
}
.et-co   { font-size: 0.9rem;  font-weight: 800; color: #3a2018; margin-bottom: 4px; }
.et-role { font-size: 0.74rem; color: #c06030; font-family: 'JetBrains Mono', monospace; margin-bottom: 4px; }
.et-yr   { font-size: 0.7rem;  color: #a08070; }

.exp-dp {
  border-radius: 28px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 60px rgba(200, 140, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.5s cubic-bezier(.23, 1, .32, 1);
}
.exp-dp:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 80px rgba(200, 140, 100, 0.18);
}

.edp-co   { font-size: 1.6rem;  font-weight: 900; color: #2a1808; margin-bottom: 6px; }
.edp-role { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #c06030; margin-bottom: 4px; }
.edp-per  { font-size: 0.75rem; color: #a08070; margin-bottom: 26px; }
.edp-desc { font-size: 1.05rem; line-height: 1.8; color: #5a3a28; margin-bottom: 22px; }

.edp-ul { list-style: none; }
.edp-ul li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(200, 160, 120, 0.15);
  font-size: 0.95rem;
  color: #5a3a28;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.5;
  opacity: 0;
  animation: fadeUp 0.5s cubic-bezier(.23, 1, .32, 1) both;
}
.edp-ul li:nth-child(1) { animation-delay: 0.1s; }
.edp-ul li:nth-child(2) { animation-delay: 0.2s; }
.edp-ul li:nth-child(3) { animation-delay: 0.3s; }
.edp-ul li:nth-child(4) { animation-delay: 0.4s; }
.edp-ul li::before { content: '▸'; color: #c06030; flex-shrink: 0; margin-top: 1px; }

.edp-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.edp-pill {
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(200, 160, 120, 0.3);
  color: #7a4a30;
  box-shadow: 0 2px 8px rgba(200, 140, 100, 0.1);
  transition: all 0.3s cubic-bezier(.23, 1, .32, 1);
}
.edp-pill:hover {
  transform: translateY(-3px) scale(1.08);
  background: rgba(255, 255, 255, 0.9);
}


/* ═══════════════════════════════════════
   PROJECTS SECTION — Dusty Mint
═══════════════════════════════════════ */
#projects {
  padding: 110px 60px;
  background: linear-gradient(145deg, #c0d8d0 0%, #cce0d8 50%, #b8d0c8 100%);
  position: relative;
  overflow: hidden;
}

.pj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 56px;
}

.pj-c {
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 32px rgba(80, 140, 120, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.5s cubic-bezier(.23, 1, .32, 1);
  transform-style: preserve-3d;
  perspective: 800px;
}
.pj-c:hover {
  transform: translateY(-12px) rotateX(3deg) scale(1.02);
  box-shadow: 0 32px 72px rgba(80, 140, 120, 0.2);
}

.pj-th {
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.pj-em {
  font-size: 3.5rem;
  z-index: 2;
  position: relative;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
  transition: transform 0.5s cubic-bezier(.23, 1, .32, 1);
}
.pj-c:hover .pj-em { transform: scale(1.25) rotate(-8deg) translateY(-8px); }

.pj-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 20%, rgba(0, 0, 0, 0.3) 100%);
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 3;
}
.pj-c:hover .pj-ov { opacity: 1; }
.pj-lr { display: flex; gap: 8px; }
.pj-lk {
  padding: 8px 18px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.9);
  color: #2a3a30;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.3s;
  cursor: pointer;
  display: inline-block;
}
.pj-lk:hover { background: #2a5a3a; color: #fff; transform: translateY(-2px); }

.pj-info { padding: 22px 22px 26px; }
.pj-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.67rem;
  color: #3a6a5a;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pj-nm { font-size: 1rem;   font-weight: 900; color: #1a2a22; margin-bottom: 10px; }
.pj-ds { font-size: 0.9rem; color: #6a8a7a;   line-height: 1.6; margin-bottom: 15px; }
.pj-stk { display: flex; gap: 7px; flex-wrap: wrap; }
.pj-tg {
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.96);
  color: #4a6a5a;
  transition: all 0.3s cubic-bezier(.23, 1, .32, 1);
}
.pj-tg:hover { transform: translateY(-2px) scale(1.08); background: rgba(255, 255, 255, 0.95); }


/* ═══════════════════════════════════════
   CONTACT SECTION — Lavender
═══════════════════════════════════════ */
#contact {
  padding: 110px 60px;
  background: linear-gradient(145deg, #d8cce8 0%, #e0d4f0 50%, #cec4e0 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.ct-c { max-width: 680px; margin: 0 auto; }

.ct-card {
  margin-top: 40px;
  padding: 48px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 72px rgba(160, 120, 200, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(.23, 1, .32, 1);
}
.ct-card:hover { transform: translateY(-6px); }
.ct-card::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(200, 160, 240, 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.ct-email {
  font-size: clamp(1.1rem, 2.5vw, 1.7rem);
  font-weight: 900;
  color: #5a3a7a;
  text-decoration: none;
  display: block;
  margin: 24px 0;
  transition: all 0.4s cubic-bezier(.23, 1, .32, 1);
  position: relative;
}
.ct-email::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #5a3a7a;
  border-radius: 1px;
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(.23, 1, .32, 1);
}
.ct-email:hover::after { width: 80%; }
.ct-email:hover { color: #8a3a5a; transform: scale(1.04); }

.ct-row {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.ct-it {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #5a4a6a;
  transition: transform 0.3s;
}
.ct-it:hover { transform: translateY(-2px); }

.soc-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
}
.soc {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 16px rgba(160, 120, 200, 0.12);
  font-size: 1.2rem;
  color: #6a5a7a;
  transition: all 0.4s cubic-bezier(.23, 1, .32, 1);
  cursor: pointer;
}
.soc:hover {
  transform: translateY(-6px) rotate(8deg) scale(1.12);
  color: #5a3a7a;
  background: rgba(255, 255, 255, 0.9);
}


/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer {
  padding: 26px 60px;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(240, 232, 222, 0.82);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}

.f-logo {
  font-size: 0.9rem;
  font-weight: 900;
  color: #2a5a3a;
  transition: transform 0.4s;
}
.f-logo:hover { transform: scale(1.1) rotate(-3deg); }
.f-copy { font-size: 0.74rem; color: #9a8a7a; }
.f-links { display: flex; gap: 22px; }
.f-links a {
  font-size: 0.74rem;
  color: #9a8a7a;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s;
}
.f-links a:hover {
  color: #e07840;
  transform: translateY(-2px);
  display: inline-block;
}


/* ═══════════════════════════════════════
   3D TILT — JS Powered
═══════════════════════════════════════ */
.tilt3d {
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
}


/* ═══════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════ */
@media (max-width: 1060px) {
  nav { padding: 16px 24px; }
  #hero, #about { grid-template-columns: 1fr; padding: 100px 24px 60px; }
  .hero-right { display: none; }
  #about { padding: 80px 24px; gap: 40px; }
  .sk-grid { grid-template-columns: repeat(2, 1fr); }
  .pj-grid { grid-template-columns: 1fr 1fr; }
  .exp-w { grid-template-columns: 1fr; }
  #skills, #experience, #projects, #contact { padding: 80px 24px; }
  footer { flex-direction: column; gap: 12px; padding: 24px; text-align: center; }
}

@media (max-width: 600px) {
  .pj-grid { grid-template-columns: 1fr; }
  .h-name  { font-size: 2.6rem; }
  .n-links { display: none; }
  .ct-card { padding: 36px 24px; }
}