/* ================================================================
   STYLE.CSS — Portfolio of Gundumalla Sthana Sriharsha
   ================================================================

   THEME: Glassmorphism Light — Off-White, Cream & Warm Beige
   Apple-style minimal aesthetic with soft frosted-glass surfaces.

   TABLE OF CONTENTS
   -----------------
   1.  CSS Variables  ← THE ONLY SECTION TO EDIT FOR COLORS
   2.  Reset & Base
   3.  Scrollbar
   4.  Noise Texture Overlay
   5.  Cursor Glow
   6.  Navigation
   7.  Reusable Section Styles
   8.  Hero Section
   9.  About Section
   10. Skills Section
   11. Experience Section
   12. Projects Section
   13. Certifications Section
   14. Contact Section
   15. Footer
   16. Animations
   17. Responsive (Mobile)
   ================================================================ */


/* ----------------------------------------------------------------
   1. CSS VARIABLES  ← EDIT COLORS HERE ONLY
   ----------------------------------------------------------------

   HOW THE PALETTE WORKS:
   ┌─────────────────────────────────────────────────────────────┐
   │  --bg       Main page background    → warm off-white        │
   │  --bg2      Alternating sections    → soft cream            │
   │  --bg3      Card / surface white    → pure white            │
   │  --surface  Frosted glass panels    → translucent white     │
   │  --border   Dividers                → warm beige tint       │
   │  --accent   Primary brand color     → warm tan / gold       │
   │  --accent2  Secondary hover color   → deep caramel          │
   │  --accent3  Highlight tint          → light terracotta      │
   │  --text     Body text               → warm soft dark        │
   │  --muted    Labels / captions       → medium tan            │
   │  --heading  Headings                → near-black warm       │
   └─────────────────────────────────────────────────────────────┘

   TO SWITCH TO A DIFFERENT PALETTE, only change the values below.
   Every component reads from these variables automatically.
   ---------------------------------------------------------------- */
:root {

  /* ── BACKGROUNDS ─────────────────────────────────────────── */
  --bg:       #faf8f5;                    /* warm off-white            */
  --bg2:      #f3ede4;                    /* soft cream                */
  --bg3:      #ffffff;                    /* pure white for cards      */
  --surface:  rgba(255, 255, 255, 0.72);  /* frosted glass panel       */
  --surface2: rgba(255, 255, 255, 0.45);  /* lighter glass variant     */

  /* ── BORDERS ─────────────────────────────────────────────── */
  --border:   rgba(160, 130, 95, 0.14);
  --border2:  rgba(160, 130, 95, 0.22);

  /* ── ACCENT COLORS ───────────────────────────────────────── */
  --accent:   #b07d4a;   /* warm tan gold — primary CTA        */
  --accent2:  #8b5e3c;   /* deep caramel  — hover / secondary  */
  --accent3:  #d4956a;   /* terracotta    — highlights / orbs  */

  /* ── GLOW TINTS (backgrounds, orbs, glows) ───────────────── */
  --glow-accent:  rgba(176, 125, 74, 0.12);
  --glow-accent2: rgba(212, 149, 106, 0.10);

  /* ── TEXT ────────────────────────────────────────────────── */
  --text:    #2c2420;   /* body text — warm dark brown          */
  --muted:   #7a6455;   /* captions, labels — medium tan        */
  --muted2:  #9a8070;   /* lighter muted for subtext            */
  --heading: #1a100a;   /* headings — deep warm black           */

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── SHAPE & MOTION ──────────────────────────────────────── */
  --radius:     14px;
  --radius-sm:  8px;
  --radius-lg:  20px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── SHADOWS (warm-tinted, not cold grey) ────────────────── */
  --shadow-sm:    0 2px 12px rgba(100, 70, 40, 0.08);
  --shadow-md:    0 8px 32px rgba(100, 70, 40, 0.12);
  --shadow-lg:    0 20px 60px rgba(100, 70, 40, 0.16);
  --shadow-glass: 0 8px 40px rgba(100, 70, 40, 0.10),
                  inset 0 1px 0 rgba(255, 255, 255, 0.80);
}


/* ----------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
}

a  { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul  { list-style: none; }

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

strong {
  color: var(--heading);
  font-weight: 600;
}


/* ----------------------------------------------------------------
   3. CUSTOM SCROLLBAR
   ---------------------------------------------------------------- */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--accent3); border-radius: 4px; }


/* ----------------------------------------------------------------
   4. NOISE TEXTURE OVERLAY
   ----------------------------------------------------------------
   Very subtle paper-grain — gives an organic, premium feel
   instead of a flat plain white background.
   ---------------------------------------------------------------- */
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='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
}


/* ----------------------------------------------------------------
   5. CURSOR GLOW
   ----------------------------------------------------------------
   Warm amber glow to match the cream palette.
   ---------------------------------------------------------------- */
.cursor-glow {
  position: fixed;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(176, 125, 74, 0.07) 0%,
    rgba(212, 149, 106, 0.04) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: 0.12s ease;
}


/* ----------------------------------------------------------------
   6. NAVIGATION
   ----------------------------------------------------------------
   Frosted glass nav — the signature Apple-style component.
   ---------------------------------------------------------------- */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  height: 68px;
  background: rgba(250, 248, 245, 0.80);    /* translucent warm white */
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--heading);
  z-index: 110;
  position: relative;
}

.nav-logo span { color: var(--accent); }

.nav-links {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

.nav-links a {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  transition: color var(--transition);
}

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

.nav-links a:hover,
.nav-links a.active { color: var(--accent); }

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* Contact CTA */
.nav-cta {
  padding: 0.45rem 1.1rem;
  border: 1.5px solid rgba(176, 125, 74, 0.38) !important;
  border-radius: 8px;
  color: var(--accent) !important;
  font-size: 0.75rem !important;
  background: rgba(176, 125, 74, 0.06) !important;
  transition: var(--transition) !important;
}

.nav-cta:hover {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
}

.nav-cta::after { display: none !important; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  z-index: 110;
  position: relative;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ----------------------------------------------------------------
   7. REUSABLE SECTION STYLES
   ---------------------------------------------------------------- */
section {
  position: relative;
  z-index: 2;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5vw;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: block;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.section-sub {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 520px;
  margin-top: 1rem;
  line-height: 1.75;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-header .section-sub {
  margin: 1rem auto 0;
  text-align: center;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  letter-spacing: 0.01em;
  border: none;
  font-family: var(--font-body);
  box-shadow: 0 4px 18px rgba(176, 125, 74, 0.28);
}

.btn-primary:hover {
  background: var(--accent2);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(176, 125, 74, 0.32);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  transition: var(--transition);
  font-family: var(--font-body);
  backdrop-filter: blur(12px);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(176, 125, 74, 0.06);
  transform: translateY(-2px);
}

.accent { color: var(--accent); }


/* ----------------------------------------------------------------
   8. HERO SECTION
   ---------------------------------------------------------------- */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 6rem 5vw 4rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 75% 25%, rgba(212, 149, 106, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(176, 125, 74, 0.07)  0%, transparent 60%),
    var(--bg);
}

/* Warm dot-grid */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(160, 130, 95, 0.18) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 10%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 10%, transparent 100%);
  pointer-events: none;
}

/* Ambient orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.hero-orb-1 {
  width: 500px; height: 500px;
  background: rgba(212, 149, 106, 0.12);
  top: -120px; right: -80px;
  animation: floatA 14s ease-in-out infinite;
}

.hero-orb-2 {
  width: 380px; height: 380px;
  background: rgba(176, 125, 74, 0.08);
  bottom: 60px; left: -100px;
  animation: floatB 18s ease-in-out infinite;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 840px;
}

/* "Available" badge */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: rgba(176, 125, 74, 0.08);
  border: 1px solid rgba(176, 125, 74, 0.22);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  margin-bottom: 2rem;
  animation: fadeDown 0.8s ease both;
  backdrop-filter: blur(8px);
}

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

/* Hero name */
.hero-name {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -0.04em;
  line-height: 1;
  animation: fadeUp 0.8s 0.1s ease both;
}

.hero-name .accent { color: var(--accent); }

/* Typed text */
.hero-typed-wrap {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--muted);
  margin: 1.25rem 0 1.5rem;
  height: 2.6rem;
  animation: fadeUp 0.8s 0.2s ease both;
}

.typed-cursor {
  color: var(--accent);
  animation: blink 1s step-end infinite;
}

.hero-desc {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.85;
  animation: fadeUp 0.8s 0.3s ease both;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  animation: fadeUp 0.8s 0.4s ease both;
}

/* Social icons */
.hero-social {
  display: flex;
  gap: 0.875rem;
  margin-top: 3rem;
  animation: fadeUp 0.8s 0.5s ease both;
}

.hero-social a {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--muted);
  transition: var(--transition);
  background: var(--surface);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.hero-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-3px);
  background: rgba(176, 125, 74, 0.08);
  box-shadow: var(--shadow-md);
}

/* Scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: fadeUp 1s 1s ease both;
  z-index: 2;
}

.scroll-hint .line {
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: lineDown 2s ease infinite;
}


/* ----------------------------------------------------------------
   9. ABOUT SECTION
   ---------------------------------------------------------------- */
#about {
  padding: 7rem 0;
  background: var(--bg);
}

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

/* Glass photo frame */
.about-image-frame {
  width: 100%;
  aspect-ratio: 1;
  max-width: 380px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border2);
  display: grid;
  place-items: center;
  overflow: visible;
  position: relative;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-glass);
}

/* Warm gradient tint over frame */
.about-image-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(212, 149, 106, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* Corner bracket decoration */
.about-image-frame::after {
  content: '';
  position: absolute;
  top: 16px; right: 16px;
  width: 54px; height: 54px;
  border-top: 2px solid rgba(176, 125, 74, 0.30);
  border-right: 2px solid rgba(176, 125, 74, 0.30);
  border-radius: 0 8px 0 0;
}

.avatar-placeholder {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 800;
  color: var(--accent);
  opacity: 0.4;
  position: relative;
  z-index: 1;
}

.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 1;
}

/* Floating badge */
.about-badge {
  position: absolute;
  bottom: -22px; right: -22px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 3;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(20px);
}

.about-badge .badge-icon {
  width: 40px; height: 40px;
  background: rgba(176, 125, 74, 0.10);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}

.about-badge .badge-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
}

.about-badge .badge-value {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--heading);
  display: block;
}

.about-text .section-title { margin-bottom: 1.5rem; }

.about-text p {
  color: var(--muted);
  line-height: 1.9;
  margin-bottom: 1rem;
}

/* Stats */
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: var(--transition);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

.stat-card:hover {
  border-color: rgba(176, 125, 74, 0.28);
  background: rgba(255, 255, 255, 0.88);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.stat-num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.stat-desc {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.4rem;
  letter-spacing: 0.04em;
}


/* ----------------------------------------------------------------
   10. SKILLS SECTION
   ---------------------------------------------------------------- */
#skills {
  padding: 7rem 0;
  background: var(--bg2);
}

.skills-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.skill-category {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
}

/* Warm gradient top border on hover */
.skill-category::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent3), transparent);
  opacity: 0;
  transition: var(--transition);
}

.skill-category:hover {
  border-color: rgba(176, 125, 74, 0.22);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

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

.skill-cat-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.skill-cat-icon {
  width: 32px; height: 32px;
  background: rgba(176, 125, 74, 0.10);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--border2);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--text);
  font-family: var(--font-mono);
  transition: var(--transition);
  cursor: default;
  backdrop-filter: blur(6px);
}

.skill-tag:hover {
  background: rgba(176, 125, 74, 0.08);
  border-color: rgba(176, 125, 74, 0.32);
  color: var(--accent2);
}


/* ----------------------------------------------------------------
   11. EXPERIENCE SECTION
   ---------------------------------------------------------------- */
#experience {
  padding: 7rem 0;
  background: var(--bg);
}

.exp-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}

.exp-sticky {
  position: sticky;
  top: 6rem;
}

.exp-sticky .section-sub { margin-top: 1rem; }

.timeline { position: relative; }

.timeline::before {
  content: '';
  position: absolute;
  left: 15px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--accent3), var(--border));
}

.timeline-item {
  position: relative;
  padding: 0 0 3rem 3.5rem;
}

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

.timeline-dot {
  position: absolute;
  left: 7px; top: 7px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border2);
  transition: var(--transition);
}

.timeline-item:hover .timeline-dot {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 14px rgba(176, 125, 74, 0.35);
}

/* Glass timeline card */
.timeline-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: var(--transition);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
}

.timeline-card:hover {
  border-color: rgba(176, 125, 74, 0.22);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-md);
}

.timeline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.timeline-role {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--heading);
}

.timeline-company {
  font-size: 0.88rem;
  color: var(--accent);
  margin-top: 0.2rem;
  font-weight: 500;
}

.timeline-period {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  padding: 0.28rem 0.75rem;
  background: rgba(176, 125, 74, 0.06);
  border-radius: 100px;
  white-space: nowrap;
  border: 1px solid var(--border2);
}

.timeline-desc {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 1rem;
  line-height: 1.85;
}

.timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.2rem;
}

.timeline-tag {
  padding: 0.2rem 0.65rem;
  background: rgba(176, 125, 74, 0.07);
  border: 1px solid rgba(176, 125, 74, 0.18);
  border-radius: 4px;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--accent2);
}


/* ----------------------------------------------------------------
   12. PROJECTS SECTION
   ---------------------------------------------------------------- */
#projects {
  padding: 7rem 0;
  background: var(--bg2);
}

.projects-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Glass project card */
.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
  --mx: 50%; --my: 50%;
}

/* Warm spotlight */
.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(212, 149, 106, 0.08) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.project-card:hover::after { opacity: 1; }

.project-card:hover {
  border-color: rgba(176, 125, 74, 0.25);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  background: rgba(255, 255, 255, 0.90);
}

.project-card--wip {
  border-style: dashed;
  opacity: 0.70;
}

.project-number {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  letter-spacing: 0.1em;
}

.project-icon {
  width: 52px; height: 52px;
  background: rgba(176, 125, 74, 0.08);
  border: 1px solid rgba(176, 125, 74, 0.16);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  transition: var(--transition);
}

.project-card:hover .project-icon {
  background: rgba(176, 125, 74, 0.14);
  transform: scale(1.06);
}

.project-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 0.75rem;
}

.project-desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.85;
  flex: 1;
}

.project-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.5rem;
}

.stack-tag {
  padding: 0.2rem 0.6rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border2);
  border-radius: 4px;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: var(--muted);
}

.project-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(176, 125, 74, 0.25);
  border-radius: 6px;
  transition: var(--transition);
  background: rgba(176, 125, 74, 0.04);
}

.project-link:hover {
  background: rgba(176, 125, 74, 0.10);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.project-wip-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 1.5rem;
  padding: 0.35rem 0.85rem;
  background: rgba(176, 125, 74, 0.06);
  border: 1px solid rgba(176, 125, 74, 0.18);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--accent2);
  letter-spacing: 0.05em;
}


/* ----------------------------------------------------------------
   13. CERTIFICATIONS SECTION
   ---------------------------------------------------------------- */
#certifications {
  padding: 7rem 0;
  background: var(--bg);
}

.certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.cert-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: var(--transition);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-sm);
}

.cert-card:hover {
  border-color: rgba(176, 125, 74, 0.25);
  transform: translateX(5px);
  box-shadow: var(--shadow-md);
  background: rgba(255, 255, 255, 0.88);
}

.cert-icon {
  width: 44px; height: 44px;
  min-width: 44px;
  background: rgba(176, 125, 74, 0.08);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
}

.cert-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--heading);
  line-height: 1.4;
}

.cert-issuer {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 0.3rem;
  font-family: var(--font-mono);
}


/* ----------------------------------------------------------------
   14. CONTACT SECTION
   ---------------------------------------------------------------- */
#contact {
  padding: 7rem 0 5rem;
  background: var(--bg2);
  position: relative;
  overflow: hidden;
}

/* Warm ambient glow */
#contact::before {
  content: '';
  position: absolute;
  top: -30%; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(212, 149, 106, 0.08) 0%, transparent 65%);
  pointer-events: none;
}

.contact-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.contact-inner .section-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.contact-inner .section-sub {
  margin: 1.25rem auto 2.5rem;
}

/* Glass email link */
.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--accent);
  padding: 1rem 2rem;
  border: 1px solid rgba(176, 125, 74, 0.25);
  border-radius: var(--radius);
  background: var(--surface);
  transition: var(--transition);
  margin-bottom: 2.5rem;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-sm);
}

.contact-email:hover {
  background: rgba(176, 125, 74, 0.08);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.contact-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.contact-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--border2);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--muted);
  transition: var(--transition);
  background: var(--surface);
  backdrop-filter: blur(12px);
}

.contact-social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(176, 125, 74, 0.06);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}


/* ----------------------------------------------------------------
   15. FOOTER
   ---------------------------------------------------------------- */
footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 2rem 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  z-index: 2;
}

.footer-copy {
  font-size: 0.8rem;
  color: var(--muted);
}

.footer-copy span { color: var(--accent); }

.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
  transition: color var(--transition);
  font-family: var(--font-body);
}

.footer-top:hover { color: var(--accent); }


/* ----------------------------------------------------------------
   16. ANIMATIONS
   ---------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes blink {
  50% { opacity: 0; }
}

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

@keyframes lineDown {
  0%   { transform: scaleY(0); transform-origin: top;    opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

@keyframes floatA {
  0%, 100% { transform: translate(0,    0);     }
  50%       { transform: translate(20px, -30px); }
}

@keyframes floatB {
  0%, 100% { transform: translate(0,     0);    }
  50%       { transform: translate(-15px, 25px); }
}


/* ----------------------------------------------------------------
   17. RESPONSIVE — MOBILE STYLES
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Mobile nav: cream frosted backdrop */
  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(250, 248, 245, 0.97);
    backdrop-filter: blur(24px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    z-index: 100;
  }

  .nav-links.open { display: flex; }
  .nav-links a    { font-size: 1.4rem; }
  .hamburger      { display: flex; }

  .about-grid        { grid-template-columns: 1fr; }
  .about-image-wrap  { display: none; }
  .exp-grid          { grid-template-columns: 1fr; }

  .exp-sticky {
    position: static;
    margin-bottom: 2rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .about-stats      { grid-template-columns: repeat(3, 1fr); }
  .projects-header  { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .about-stats   { grid-template-columns: repeat(2, 1fr); }
  .projects-grid { grid-template-columns: 1fr; }
  .certs-grid    { grid-template-columns: 1fr; }
  .contact-email { font-size: 0.82rem; padding: 0.85rem 1.25rem; }
}