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

:root {
  /* NEW THEME: Nature-matched dark with emerald & gold accents */
  --accent:        #2d7a4f;       /* deep forest green */
  --accent-light:  #3fa06a;       /* mid green */
  --accent-bright: #52c98a;       /* bright mint for glow */
  --accent-gold:   #c8a84b;       /* warm gold — nature highlight */
  --accent-dark:   #1d5435;       /* dark forest */

  --dark:    #0b0f0c;
  --dark-2:  #111714;
  --dark-3:  #192118;

  --serif: 'Cormorant Garamond', serif;
  --sans:  'Outfit', sans-serif;

  --nav-h:  72px;
  --aida-h: 46px;

  /* Glass layers */
  --glass-nav:    rgba(8, 14, 10, 0.82);
  --glass-card:   rgba(10, 18, 12, 0.72);
  --glass-card-h: rgba(14, 26, 16, 0.85);
  --glass-form:   rgba(6, 12, 8,  0.80);
  --glass-border: rgba(255,255,255,0.12);
  --glass-border-h: rgba(82,201,138,0.35);

  /* Text */
  --text-white:  #ffffff;
  --text-bright: rgba(255,255,255,0.92);
  --text-soft:   rgba(255,255,255,0.72);
  --text-muted:  rgba(255,255,255,0.48);
  --text-dim:    rgba(255,255,255,0.30);

  /* Shadows */
  --sh-text:    0 2px 16px rgba(0,0,0,0.85);
  --sh-text-sm: 0 1px 8px  rgba(0,0,0,0.70);
  --sh-card:    0 8px 48px rgba(0,0,0,0.55);
  --sh-card-h:  0 20px 64px rgba(0,0,0,0.70);
  --sh-btn:     0 6px 28px rgba(45,122,79,0.55);
  --sh-btn-h:   0 12px 40px rgba(45,122,79,0.75);

  /* Easing */
  --ease: cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}

/* ===== BASE ===== */
html { scroll-behavior: smooth; cursor: none; }
body {
  font-family: var(--sans);
  background: var(--dark);
  color: var(--text-white);
  line-height: 1.65;
  overflow-x: hidden;
  padding: 0 !important;
}
::selection { background: var(--accent); color: #fff; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--dark-2); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }

/* ===== CURSOR ===== */
#cursor-dot {
  position: fixed; top:0; left:0; z-index:99999; pointer-events:none;
  width:8px; height:8px; border-radius:50%;
  background: var(--accent-bright);
  transform: translate(-50%,-50%);
  transition: width .15s, height .15s;
  will-change: transform;
}
#cursor-ring {
  position:fixed; top:0; left:0; z-index:99998; pointer-events:none;
  width:36px; height:36px; border-radius:50%;
  border: 1.5px solid var(--accent-bright);
  transform: translate(-50%,-50%);
  transition: width .3s var(--ease), height .3s var(--ease), opacity .3s;
  opacity: 0.6; will-change: transform;
}
body.cursor-hover #cursor-dot  { width:14px; height:14px; }
body.cursor-hover #cursor-ring { width:54px; height:54px; opacity:1; }
body.cursor-click #cursor-ring { width:22px; height:22px; opacity:1; }

/* ===== FOREST CANVAS ===== */
#forest-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
  will-change: transform;
}

/* ===== NAV ===== */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height: var(--nav-h);
  display:flex; align-items:center; padding:0 5%;
  background: var(--glass-nav);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid var(--glass-border);
  transition: box-shadow .4s var(--ease), background .4s var(--ease);
}
nav.scrolled {
  background: rgba(6,10,7,0.92);
  box-shadow: 0 2px 40px rgba(0,0,0,0.6);
}

.nav-logo img {
  width:42px; height:42px; border-radius:50%;
  object-fit:cover;
  object-position: 50% 25%;
  border: 2px solid var(--accent);
  display:block;
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.nav-logo img:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(45,122,79,0.30);
}

.nav-links {
  display:flex; align-items:center; gap:1.6rem;
  list-style:none; margin:0 auto;
}
.nav-links a {
  font-family: var(--sans);
  font-size:.83rem; font-weight:500;
  color: var(--text-soft);
  text-decoration:none; letter-spacing:.06em; text-transform:uppercase;
  position:relative;
  transition: color .2s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:100%;
  height:1.5px; background: var(--accent-bright);
  transition: right .35s var(--ease);
  border-radius:2px;
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { right:0; }

.nav-cta {
  padding: 10px 26px !important;
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 50px;
  font-weight: 600 !important; letter-spacing:.04em;
  transition: background .2s, transform .25s var(--ease-spring), box-shadow .25s !important;
  box-shadow: var(--sh-btn);
}
.nav-cta::after { display:none !important; }
.nav-cta:hover {
  background: var(--accent-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--sh-btn-h) !important;
}

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:none; padding:8px;
}
.hamburger span {
  display:block; width:24px; height:2px;
  background: #fff; border-radius:2px;
  transition: transform .3s var(--ease), opacity .3s;
}
.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); }

.mobile-nav {
  display:none; position:fixed; top:var(--nav-h); left:0; right:0;
  background: rgba(6,12,8,0.97);
  backdrop-filter: blur(28px);
  padding:2rem 5%; flex-direction:column; gap:1.5rem; z-index:999;
  border-bottom: 1px solid var(--glass-border);
  transform: translateY(-16px); opacity:0;
  transition: transform .35s var(--ease-out), opacity .35s;
}
.mobile-nav.open { transform: translateY(0); opacity:1; }
.mobile-nav a {
  font-size:1.1rem; color: var(--text-soft);
  text-decoration:none; font-weight:500;
  padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,0.08);
  transition: color .2s, padding-left .2s;
}
.mobile-nav a:hover { color:#fff; padding-left:6px; }
.mobile-nav .nav-cta-m {
  display:inline-block; padding:14px 28px;
  background: var(--accent); color:#fff;
  border-radius:50px; text-align:center; font-weight:600;
  box-shadow: var(--sh-btn);
}

/* ===== AIDA BANNER ===== */
#aida-banner {
  position:fixed;
  top: 0; left:0; right:0; z-index:998;
  background: rgba(8,16,10,0.90);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(82,201,138,0.18);
  box-shadow: 0 4px 32px rgba(0,0,0,0.45);
  max-height: 100vh; 
  overflow:hidden;
  transition: transform .4s cubic-bezier(0.25,0.46,0.45,0.94);
}
#aida-banner::before {
  content:''; position:absolute; top:-50%; right:-10%;
  width:500px; height:500px;
  background: radial-gradient(circle, rgba(45,122,79,0.12) 0%, transparent 70%);
  border-radius:50%; pointer-events:none;
}

.aida-toggle-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 5%;
  background: rgba(45,122,79,0.12);
  border-bottom:1px solid rgba(82,201,138,0.12);
  cursor:pointer; gap:12px;
  min-height:46px; max-height:46px; overflow:hidden;
  transition: background .2s;
}
.aida-toggle-bar:hover { background: rgba(45,122,79,0.22); }
.aida-toggle-label {
  font-size:.82rem; font-weight:700;
  color: var(--accent-bright);
  letter-spacing:.04em; flex:1; line-height:1.4;
  text-shadow: 0 0 20px rgba(82,201,138,0.4);
}
.aida-toggle-icon {
  font-size:.8rem; color: var(--accent-bright);
  transition: transform .35s var(--ease); flex-shrink:0;
}
.aida-toggle-icon.open { transform: rotate(180deg); }

.aida-inner {
  max-height:0; overflow-y:auto; overflow-x:hidden;
  opacity:0; padding:0 5%;
  transition: max-height .55s var(--ease), opacity .4s var(--ease), padding .4s var(--ease);
}
.aida-inner.open { max-height:85vh; padding:30px 5%; opacity:1; }
.aida-content-inner { max-width:680px; margin:0 auto; text-align:center; padding-bottom:20px; }

.aida-headline {
  font-family: var(--serif);
  font-size: clamp(1.5rem,3.5vw,2.6rem);
  font-weight:700; line-height:1.2; color:#fff;
  text-shadow: var(--sh-text);
  margin-bottom:1.2rem; margin-top:1rem;
}
.aida-interest {
  font-size: clamp(.85rem,2vw,1rem);
  color: var(--text-soft); line-height:1.85; margin-bottom:1rem;
  text-shadow: var(--sh-text-sm);
}
.aida-highlight {
  font-family: var(--serif);
  font-size: clamp(1.2rem,2.5vw,2rem);
  font-weight:700; color: var(--accent-bright);
  text-shadow: 0 0 30px rgba(82,201,138,0.5);
  margin:1.2rem auto; line-height:1.3;
}
.aida-desire {
  font-size: clamp(.85rem,2vw,1rem);
  color: var(--text-bright); line-height:1.85; margin-bottom:1rem;
  text-shadow: var(--sh-text-sm);
}
.aida-action { display:flex; flex-direction:column; align-items:center; gap:.8rem; margin-top:1.5rem; }
.aida-note { font-size:.78rem; color: var(--text-muted); line-height:1.6; }
.aida-inner::-webkit-scrollbar { width:3px; }
.aida-inner::-webkit-scrollbar-thumb { background: var(--accent); border-radius:2px; }

/* ===== SECTION FOUNDATION ===== */
section {
  padding: 100px 5%;
  position:relative; z-index:1;
  /* nature background - fixed parallax */
  background: transparent !important;
}

/* Strong per-section overlays so text is always readable */
#hero::before,
#about::before,
#services::before,
#tools::before,
#process::before,
#testimonials::before,
#contact::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
}
#hero::before       { background: linear-gradient(160deg, rgba(4,10,6,0.78) 0%, rgba(6,14,8,0.65) 60%, rgba(4,10,6,0.72) 100%); }
#about::before      { background: rgba(4,10,6,0.76); }
#services::before   { background: rgba(3,8,5,0.78); }
#tools::before      { background: rgba(4,10,6,0.80); }
#process::before    { background: rgba(3,8,5,0.75); }
#testimonials::before { background: rgba(4,10,6,0.78); }
#contact::before    { background: rgba(3,8,5,0.80); }

/* All children above overlay */
#hero > *, #about > *, #services > *,
#tools > *, #process > *, #testimonials > *,
#contact > * { position:relative; z-index:1; }

/* ===== COMMON LABELS ===== */
.section-tag {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color: var(--accent-bright);
  text-shadow: 0 0 16px rgba(82,201,138,0.45);
  margin-bottom:1rem;
}
.section-tag::before { display:none; }

.section-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem,4vw,3.6rem);
  font-weight:700; line-height:1.08;
  color: #fff;
  text-shadow: var(--sh-text);
  margin-bottom:1rem;
}
.section-title em { font-style:italic; color: var(--accent-bright); text-shadow: 0 0 30px rgba(82,201,138,0.4); }

.section-desc {
  font-size:.98rem; color: var(--text-soft);
  text-shadow: var(--sh-text-sm);
  line-height:1.88; max-width:560px; margin-bottom:3.5rem;
}

/* ===== BUTTONS ===== */
.btn-primary {
  padding:14px 34px;
  background: var(--accent); color:#fff;
  border:none; border-radius:50px;
  font-family: var(--sans); font-size:.9rem; font-weight:600;
  cursor:none; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow: var(--sh-btn);
  transition: background .2s, transform .3s var(--ease-spring), box-shadow .3s;
}
.btn-primary:hover {
  background: var(--accent-light);
  transform: translateY(-3px);
  box-shadow: var(--sh-btn-h);
}

.btn-secondary {
  padding:14px 34px;
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius:50px;
  font-family: var(--sans); font-size:.9rem; font-weight:500;
  cursor:none; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s, transform .3s var(--ease-spring);
}
.btn-secondary:hover {
  border-color: var(--accent-bright);
  background: rgba(82,201,138,0.14);
  transform: translateY(-3px);
}

/* ===== HERO ===== */
#hero {
  min-height:100vh;
  padding: calc(var(--nav-h) + var(--aida-h) + 60px) 5% 80px;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:5rem;
}
.hero-left { max-width:560px; }

.available-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 18px; border-radius:50px;
  background: rgba(34,197,94,0.14);
  border: 1px solid rgba(34,197,94,0.38);
  backdrop-filter: blur(8px);
  font-size:.8rem; font-weight:600; color:#6ee7a0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  letter-spacing:.04em; margin-bottom:1.5rem;
  transition: transform .3s var(--ease-spring);
}
.available-pill::before {
  content:''; width:8px; height:8px; border-radius:50%;
  background:#22c55e;
  animation: pulse-green 2s ease-in-out infinite;
}
@keyframes pulse-green {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(1.4); }
}

.hero-name {
  font-family: var(--serif);
  font-size: clamp(3.2rem,6vw,5.8rem);
  font-weight:700; line-height:1.04; color:#fff;
  text-shadow: 0 4px 28px rgba(0,0,0,0.85);
  margin-bottom:.5rem;
}
.hero-name em { font-style:italic; color: var(--accent-bright); text-shadow: 0 0 36px rgba(82,201,138,0.5); }

.hero-subtitle {
  font-family: var(--serif);
  font-size: clamp(1.1rem,2vw,1.45rem);
  font-weight:400; font-style:italic;
  color: var(--text-soft);
  text-shadow: var(--sh-text-sm);
  margin-bottom:1.5rem; letter-spacing:.02em;
}
.hero-desc {
  font-size:.98rem; line-height:1.88;
  color: var(--text-soft);
  text-shadow: var(--sh-text-sm);
  margin-bottom:2.5rem; max-width:480px;
}
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }

/* Photo */
.hero-right { display:flex; justify-content:center; align-items:center; }
.photo-frame-wrap { position:relative; width:380px; height:500px; }
.spin-ring {
  position:absolute; inset:-20px;
  border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%;
  border: 2px dashed rgba(82,201,138,0.35);
  animation: spin-slow 20s linear infinite;
}
@keyframes spin-slow { to { transform:rotate(360deg); } }
.photo-frame {
  position:relative; z-index:2;
  width:100%; height:100%;
  border-radius: 55% 45% 55% 45% / 50% 50% 50% 50%;
  overflow:hidden;
  border: 3px solid rgba(82,201,138,0.30);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 0 40px rgba(0,0,0,0.25);
}
.photo-frame img { 
  width:100%; height:100%; 
  object-fit:cover; 
  object-position: 50% 25%;
}

.float-card {
  position:absolute; z-index:3;
  background: rgba(8,16,10,0.80);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius:14px; padding:12px 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.10);
  display:flex; align-items:center; gap:10px;
  font-size:.82rem; font-weight:600; color:#fff;
  text-shadow: var(--sh-text-sm);
  animation: float 4s ease-in-out infinite;
  transition: transform .3s var(--ease-spring);
}
.float-card:hover { transform: translateY(-4px) scale(1.04) !important; }
.float-card:nth-child(3) { top:40px; right:-30px; animation-delay:0s; }
.float-card:nth-child(4) { bottom:60px; left:-30px; animation-delay:2s; }
.float-card-icon {
  width:32px; height:32px; border-radius:8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  display:flex; align-items:center; justify-content:center; font-size:1rem;
  box-shadow: 0 4px 12px rgba(45,122,79,0.5);
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}

/* ===== MARQUEE ===== */
.marquee-strip {
  position:relative; z-index:2;
  background: rgba(4,10,6,0.94) !important;
  backdrop-filter: blur(12px);
  padding:16px 0; overflow:hidden;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.marquee-track {
  display:flex; gap:0;
  animation: marquee-scroll 28s linear infinite;
  width: max-content;
}
.marquee-item {
  display:flex; align-items:center; gap:1rem;
  padding:0 2.5rem;
  font-size:.8rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color: var(--text-muted); white-space:nowrap;
}
.marquee-item .dot { width:4px; height:4px; border-radius:50%; background: var(--accent); }
.marquee-item span.accent { color: var(--accent-bright); }
@keyframes marquee-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ===== ABOUT ===== */
.about-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:5rem; align-items:center; }

.about-photo-card { position:relative; }
.about-photo-card::before {
  content:''; position:absolute;
  top:16px; left:16px; right:-16px; bottom:-16px;
  border: 2px solid rgba(82,201,138,0.25);
  border-radius:20px; z-index:0;
  transition: border-color .4s;
}
.about-photo-card:hover::before { border-color: rgba(82,201,138,0.55); }
.about-photo-card img {
  position:relative; z-index:1;
  width:100%; border-radius:16px;
  object-fit:cover;
  object-position: 50% 25%;
  height:560px;
  box-shadow: 0 24px 72px rgba(0,0,0,0.60);
  transition: transform .6s var(--ease);
}
.about-photo-card:hover img { transform:scale(1.02); }

.about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.5rem; }
.stat-card {
  background: var(--glass-card);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius:16px; padding:1.4rem; text-align:center;
  transition: border-color .3s, background .3s, transform .3s var(--ease-spring), box-shadow .3s;
}
.stat-card:hover {
  border-color: var(--glass-border-h);
  background: var(--glass-card-h);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(45,122,79,0.25);
}
.stat-num {
  font-family: var(--serif); font-size:2.2rem; font-weight:700;
  color: var(--accent-bright);
  text-shadow: 0 0 24px rgba(82,201,138,0.45);
  line-height:1;
}
.stat-label { font-size:.74rem; color: var(--text-muted); font-weight:500; margin-top:4px; }

.about-details { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0; }
.detail-item { display:flex; align-items:flex-start; gap:10px; font-size:.88rem; }
.detail-icon { color: var(--accent-bright); font-size:1rem; margin-top:1px; }
.detail-label { font-size:.72rem; color: var(--text-muted); display:block; }
.detail-value { color:#fff; font-weight:500; text-shadow: var(--sh-text-sm); }

/* ===== SERVICES ===== */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.service-card {
  background: var(--glass-card);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius:20px; padding:2rem;
  position:relative; overflow:hidden;
  transition: transform .35s var(--ease-spring), box-shadow .35s, background .3s, border-color .3s;
}
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:100%;
  height:2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transition: right .5s var(--ease);
}
.service-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-card-h);
  background: var(--glass-card-h);
  border-color: var(--glass-border-h);
}
.service-card:hover::before { right:0; }

.service-num {
  font-family: var(--serif); font-size:3rem; font-weight:300;
  color: rgba(82,201,138,0.18); line-height:1; margin-bottom:.5rem;
}
.service-icon { font-size:1.8rem; margin-bottom:1rem; display:block; }
.service-title {
  font-family: var(--serif); font-size:1.3rem; font-weight:600;
  color:#fff; text-shadow: var(--sh-text-sm); margin-bottom:.6rem;
}
.service-desc {
  font-size:.88rem; color: var(--text-soft);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  line-height:1.78; margin-bottom:1rem;
}
.service-tags { display:flex; gap:6px; flex-wrap:wrap; }
.service-tag {
  font-size:.72rem; padding:4px 12px; border-radius:20px;
  background: rgba(45,122,79,0.20);
  border: 1px solid rgba(82,201,138,0.28);
  color: var(--accent-bright); font-weight:600; letter-spacing:.04em;
  transition: background .2s;
}
.service-tag:hover { background: rgba(45,122,79,0.40); }

/* ===== AI TOOLS ===== */
#tools { position:relative; overflow:hidden; }
.tools-bg-text {
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  font-family: var(--serif);
  font-size: clamp(6rem,14vw,14rem);
  font-weight:700; letter-spacing:.1em;
  color: rgba(255,255,255,0.022);
  pointer-events:none; white-space:nowrap; user-select:none;
}
.tools-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; position:relative; z-index:1; }
.tool-card {
  display:flex; align-items:center; gap:1rem;
  padding:1.4rem 1.8rem;
  background: var(--glass-card);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius:14px;
  transition: transform .3s var(--ease-spring), background .3s, border-color .3s, box-shadow .3s;
}
.tool-card:hover {
  transform: translateX(8px);
  background: var(--glass-card-h);
  border-color: var(--glass-border-h);
  box-shadow: 0 0 32px rgba(45,122,79,0.18);
}
.tool-emoji { font-size:1.8rem; flex-shrink:0; }
.tool-info { flex:1; }
.tool-name { font-weight:600; color:#fff; font-size:.95rem; text-shadow: var(--sh-text-sm); }
.tool-cat  { font-size:.78rem; color: var(--text-muted); margin-top:2px; }
.tool-badge {
  font-size:.7rem; padding:4px 10px; border-radius:20px;
  border: 1px solid rgba(82,201,138,0.35);
  color: var(--accent-bright); font-weight:600; letter-spacing:.04em;
  background: rgba(45,122,79,0.12); flex-shrink:0;
}

/* ===== PROCESS ===== */
.process-steps {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2rem; position:relative; margin-top:1rem;
}
.process-steps::before {
  content:''; position:absolute; top:32px; left:10%; right:10%;
  height:1px; border-top:2px dashed rgba(82,201,138,0.25); z-index:0;
}
.process-step { text-align:center; position:relative; z-index:1; }
.step-num-wrap {
  width:64px; height:64px; border-radius:50%;
  border: 2px solid rgba(82,201,138,0.30);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.5rem;
  background: rgba(10,18,12,0.70);
  backdrop-filter: blur(10px);
  cursor:default;
  transition: background .3s, border-color .3s, transform .3s var(--ease-spring), box-shadow .3s;
}
.process-step:hover .step-num-wrap {
  background: var(--accent);
  border-color: var(--accent-bright);
  transform: scale(1.10);
  box-shadow: 0 8px 30px rgba(45,122,79,0.50);
}
.step-num {
  font-family: var(--serif); font-size:1.4rem; font-weight:700;
  color: var(--accent-bright);
  transition: color .3s;
}
.process-step:hover .step-num { color:#fff; }
.step-title {
  font-family: var(--serif); font-size:1.2rem; font-weight:600;
  color:#fff; text-shadow: var(--sh-text-sm); margin-bottom:.6rem;
}
.step-desc { font-size:.85rem; color: var(--text-soft); line-height:1.75; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }

/* ===== TESTIMONIALS ===== */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.testimonial-card {
  background: var(--glass-card);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius:20px; padding:2rem;
  transition: transform .35s var(--ease-spring), box-shadow .35s, background .3s, border-color .3s;
}
.testimonial-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-card-h);
  background: var(--glass-card-h);
  border-color: var(--glass-border-h);
}
.stars { color:#f59e0b; font-size:.85rem; margin-bottom:.8rem; letter-spacing:2px; }
.testimonial-quote {
  font-size:3rem; line-height:1;
  color: var(--accent-bright); opacity:.45;
  font-family: var(--serif); margin-bottom:.5rem;
}
.testimonial-text {
  font-size:.92rem; color: var(--text-soft);
  text-shadow: var(--sh-text-sm);
  line-height:1.82; margin-bottom:1.5rem; font-style:italic;
}
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar {
  width:44px; height:44px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-size:.9rem; flex-shrink:0;
  box-shadow: 0 4px 16px rgba(45,122,79,0.45);
}
.testimonial-name { font-weight:600; color:#fff; text-shadow: var(--sh-text-sm); font-size:.9rem; }
.testimonial-role { font-size:.75rem; color: var(--text-muted); margin-top:2px; }
.testimonial-company {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:1rem; padding:6px 14px;
  background: rgba(45,122,79,0.15);
  border: 1px solid rgba(82,201,138,0.25);
  border-radius:20px; font-size:.72rem; font-weight:600;
  color: var(--accent-bright); letter-spacing:.04em;
}

/* ===== CONTACT ===== */
.contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:5rem; align-items:start; }
.contact-items { display:flex; flex-direction:column; gap:1rem; margin-bottom:2.5rem; }
.contact-item {
  display:flex; align-items:center; gap:14px;
  padding:1rem 1.2rem;
  background: var(--glass-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius:14px; font-size:.88rem;
  transition: background .3s, border-color .3s, transform .3s var(--ease-spring);
}
.contact-item:hover {
  background: var(--glass-card-h);
  border-color: var(--glass-border-h);
  transform: translateX(5px);
}
.contact-item-icon {
  width:36px; height:36px; border-radius:10px;
  background: rgba(45,122,79,0.22);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.contact-item-label { font-size:.72rem; color: var(--text-muted); display:block; }
.contact-item-val   { color:#fff; font-weight:500; text-shadow: var(--sh-text-sm); }

.social-links { display:flex; gap:10px; flex-wrap:wrap; }
.social-link {
  width:40px; height:40px; border-radius:10px;
  border: 1.5px solid var(--glass-border);
  background: var(--glass-card);
  backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-soft); text-decoration:none;
  transition: border-color .2s, color .2s, background .2s, transform .3s var(--ease-spring);
}
.social-link:hover {
  border-color: var(--accent-bright);
  color: var(--accent-bright);
  background: rgba(45,122,79,0.18);
  transform: translateY(-3px);
}

/* Contact form */
.contact-form-wrap {
  background: var(--glass-form);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius:20px; padding:2.5rem;
  box-shadow: var(--sh-card);
}
.contact-form-wrap h3 {
  font-family: var(--serif); font-size:1.5rem; font-weight:600;
  color:#fff; text-shadow: var(--sh-text-sm); margin-bottom:1.5rem;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.2rem; }
.form-group label {
  display:block; font-size:.76rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color: var(--text-muted); margin-bottom:6px;
}
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:12px 16px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.16);
  border-radius:10px;
  font-family: var(--sans); font-size:.9rem;
  color:#fff; outline:none; cursor:none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-dim); }
.form-group select option { background:#0b0f0c; color:#fff; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent-bright);
  background: rgba(255,255,255,0.11);
  box-shadow: 0 0 0 3px rgba(82,201,138,0.18);
}
.form-group textarea { resize:vertical; min-height:120px; }
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='rgba(255,255,255,0.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px;
}

.btn-send {
  width:100%; padding:15px;
  background: var(--accent); color:#fff; border:none;
  border-radius:12px; font-family: var(--sans);
  font-size:.95rem; font-weight:600; cursor:none;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow: var(--sh-btn);
  transition: background .2s, transform .3s var(--ease-spring), box-shadow .3s;
}
.btn-send:hover {
  background: var(--accent-light);
  transform: translateY(-3px);
  box-shadow: var(--sh-btn-h);
}

/* ===== FOOTER ===== */
footer {
  position:relative; z-index:2;
  background: rgba(4,8,5,0.97) !important;
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding:60px 5% 30px;
}
.footer-grid {
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:3rem; margin-bottom:3rem;
}
.footer-brand-name {
  font-family: var(--serif); font-size:1.8rem; font-weight:700;
  color: var(--accent-bright); margin-bottom:.5rem;
  text-shadow: 0 0 28px rgba(82,201,138,0.40);
}
.footer-tagline { font-size:.85rem; color: var(--text-dim); line-height:1.75; }
.footer-col h4 {
  font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color: var(--text-muted); margin-bottom:1.2rem;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-col ul a {
  font-size:.85rem; color: var(--text-dim); text-decoration:none;
  transition: color .2s, padding-left .25s var(--ease);
}
.footer-col ul a:hover { color: var(--accent-bright); padding-left:6px; }
.footer-socials { display:flex; gap:8px; flex-wrap:wrap; margin-top:1.2rem; }
.footer-social {
  width:36px; height:36px; border-radius:8px;
  border: 1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  color: var(--text-dim); text-decoration:none;
  transition: border-color .2s, color .2s, transform .3s var(--ease-spring);
}
.footer-social:hover {
  border-color: var(--accent-bright);
  color: var(--accent-bright);
  transform: translateY(-3px);
}
.footer-bottom {
  padding-top:2rem; border-top:1px solid rgba(255,255,255,0.06);
  display:flex; justify-content:space-between; align-items:center;
  font-size:.78rem; color: var(--text-dim);
}

/* ===== BACK TO TOP ===== */
#back-top {
  position:fixed; bottom:2rem; right:2rem; z-index:900;
  width:48px; height:48px; border-radius:50%;
  background: var(--accent); color:#fff;
  border:none; cursor:none;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  box-shadow: var(--sh-btn);
  opacity:0; transform:translateY(16px);
  transition: opacity .3s var(--ease), transform .3s var(--ease-spring), background .2s;
  pointer-events:none;
}
#back-top.visible { opacity:1; transform:translateY(0); pointer-events:all; }
#back-top:hover { background: var(--accent-light); transform:translateY(-4px); }

/* ===== TOAST ===== */
#toast {
  position:fixed; bottom:5rem; left:50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(6,12,8,0.92);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(82,201,138,0.25);
  color:#fff; padding:14px 24px; border-radius:50px;
  font-size:.88rem; font-weight:500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  opacity:0; pointer-events:none; z-index:9999; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
  transition: opacity .3s var(--ease), transform .35s var(--ease-spring);
}
#toast.show { opacity:1; transform: translateX(-50%) translateY(0); }

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity:0; transform:translateY(30px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .nav-links { gap:1rem; }
  .nav-links a { font-size:.78rem; }
  .nav-cta { padding:8px 18px !important; font-size:.78rem !important; }
}
@media (max-width:768px) {
  :root { --nav-h:64px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .mobile-nav { display:flex; }

  #hero {
    grid-template-columns:1fr;
    gap:3rem;
    padding-top: calc(var(--nav-h) + var(--aida-h) + 40px);
    text-align:center;
    justify-items:center;
  }
  .hero-left {
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .hero-name,
  .hero-subtitle,
  .hero-desc { text-align:center; }
  .hero-desc  { max-width:100%; }
  .available-pill { align-self:center; }
  .hero-btns  { justify-content:center; width:100%; }
  .hero-right {
    order:-1;
    width:100%;
    display:flex;
    justify-content:center;
  }

  .photo-frame-wrap { width:260px; height:300px; }
  .float-card:nth-child(3) { top:10px; right:-10px; }
  .float-card:nth-child(4) { bottom:10px; left:-10px; }
  .about-grid { grid-template-columns:1fr; }
  .about-photo-card { max-width:360px; margin:0 auto; }
  .services-grid { grid-template-columns:1fr; }
  .tools-grid  { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:repeat(2,1fr); }
  .process-steps::before { display:none; }
  .contact-grid { grid-template-columns:1fr; gap:3rem; }
  .footer-grid  { grid-template-columns:1fr 1fr; gap:2rem; }
  .testimonials-grid { grid-template-columns:1fr; }
  section { padding:70px 5%; }
  #aida-banner { top: var(--nav-h); }
}
@media (max-width:480px) {
  .about-stats { grid-template-columns:repeat(3,1fr); gap:.6rem; }
  .stat-num { font-size:1.5rem; }
  .process-steps { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .photo-frame-wrap { width:220px; height:260px; }
  .aida-toggle-label { font-size:.7rem; }
  .aida-inner.open { padding:20px 4%; }
  .aida-headline { font-size:1.2rem; }
  .aida-highlight { font-size:1rem; }
}

/* ===== FLOATING RESUME BUTTON ===== */
#resume-float {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--glass-card);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1.5px solid rgba(82,201,138,0.35);
  border-radius: 50px;
  color: var(--accent-bright);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .04em;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 0 16px rgba(45,122,79,0.18);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s var(--ease), transform .4s var(--ease-spring),
              background .25s, border-color .25s, box-shadow .25s;
  pointer-events: none;
  cursor: none;
}
#resume-float.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
#resume-float:hover {
  background: rgba(45,122,79,0.28);
  border-color: var(--accent-bright);
  box-shadow: 0 6px 32px rgba(0,0,0,0.5), 0 0 28px rgba(45,122,79,0.40);
  transform: translateY(-3px);
}
#resume-float svg {
  flex-shrink: 0;
  transition: transform .3s var(--ease-spring);
}
#resume-float:hover svg { transform: translateY(2px); }
.resume-label { white-space: nowrap; }

/* Hide label on very small screens */
@media (max-width: 400px) {
  .resume-label { display: none; }
  #resume-float { padding: 12px; }
}


/* ===== NAV DROPDOWNS ===== */
.nav-item-drop { position: relative; }

.nav-drop-toggle {
  display: flex !important;
  align-items: center;
  gap: 5px;
  cursor: none;
}
.drop-arrow {
  display: inline-block;
  transition: transform .3s var(--ease);
  opacity: .7;
  flex-shrink: 0;
  margin-top: 1px;
}
.nav-item-drop:hover .drop-arrow,
.nav-item-drop.open .drop-arrow {
  transform: rotate(180deg);
  opacity: 1;
}
 
/* Invisible bridge fills the gap so cursor doesn't break hover */
.nav-item-drop::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 20px; /* matches the gap size */
  background: transparent;
}
 
.nav-dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  background: rgba(6,12,8,0.96);
  backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(82,201,138,0.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .3s var(--ease-out);
  z-index: 2000;
}
 
/* Triangle pointer */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 6px;
  background: rgba(6,12,8,0.96);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
 
.nav-item-drop:hover .nav-dropdown,
.nav-item-drop.open .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
 
.drop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .83rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  letter-spacing: .02em;
  transition: background .2s, color .2s, padding-left .2s var(--ease);
  white-space: nowrap;
  border-left: 2px solid transparent;
}
.drop-item:hover {
  background: rgba(45,122,79,0.18);
  color: #fff;
  padding-left: 18px;
  border-left-color: var(--accent-bright);
}
.drop-item::after { display: none !important; }
 
.drop-icon {
  font-size: .9rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
 
.drop-item-cta {
  color: var(--accent-bright) !important;
  background: rgba(45,122,79,0.10);
  border-left-color: rgba(82,201,138,0.25) !important;
}
.drop-item-cta:hover {
  background: rgba(45,122,79,0.28) !important;
  border-left-color: var(--accent-bright) !important;
}

/* Mobile nav sub-items */
.mob-group-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-bright);
  opacity: .7;
  padding: .2rem 0 .2rem 0;
  margin-top: .5rem;
}
.mob-sub {
  padding-left: 1rem !important;
  font-size: .95rem !important;
  color: var(--text-muted) !important;
  border-bottom-color: rgba(255,255,255,0.04) !important;
}
.mob-sub:hover { color: var(--accent-bright) !important; }


/* ===== BACKGROUND / STORY SECTION ===== */

.bg-story-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: start;
}

/* Timeline */
.bg-timeline { position: relative; padding-left: 28px; }
.bg-timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(82,201,138,0.60) 0%,
    rgba(82,201,138,0.15) 100%);
  border-radius: 2px;
}

.bg-tl-item {
  position: relative;
  margin-bottom: 2.4rem;
}
.bg-tl-item:last-child { margin-bottom: 0; }

.bg-tl-dot {
  position: absolute;
  left: -24px; top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--dark-3);
  border: 2px solid rgba(82,201,138,0.45);
  transition: background .3s, border-color .3s, box-shadow .3s;
  z-index: 1;
}
.bg-tl-dot.active,
.bg-tl-item:hover .bg-tl-dot {
  background: var(--accent);
  border-color: var(--accent-bright);
  box-shadow: 0 0 14px rgba(82,201,138,0.55);
}

.bg-tl-content {
  background: var(--glass-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  transition: border-color .3s, background .3s, transform .3s var(--ease-spring);
}
.bg-tl-item:hover .bg-tl-content {
  border-color: var(--glass-border-h);
  background: var(--glass-card-h);
  transform: translateX(4px);
}

.bg-tl-year {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-bright);
  display: block;
  margin-bottom: .35rem;
}
.bg-tl-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  text-shadow: var(--sh-text-sm);
  margin-bottom: .45rem;
  line-height: 1.3;
}
.bg-tl-desc {
  font-size: .86rem;
  color: var(--text-soft);
  line-height: 1.8;
}

/* Values */
.bg-values { display: flex; flex-direction: column; gap: 0; }
.bg-values-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1.2rem;
  text-shadow: var(--sh-text-sm);
}

.bg-value-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background .25s, padding-left .25s var(--ease), border-color .25s;
  border-radius: 10px;
  cursor: default;
}
.bg-value-card:hover {
  background: rgba(45,122,79,0.10);
  padding-left: 1.6rem;
  border-bottom-color: rgba(82,201,138,0.18);
}
.bg-value-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.bg-value-name {
  font-weight: 600;
  font-size: .9rem;
  color: #fff;
  text-shadow: var(--sh-text-sm);
  margin-bottom: .25rem;
}
.bg-value-desc {
  font-size: .83rem;
  color: var(--text-muted);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .bg-story-grid { grid-template-columns: 1fr; gap: 3rem; }
}


/* ===== SKILLS SECTION ===== */
.skills-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: start;
}

.skills-group-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  text-shadow: var(--sh-text-sm);
  margin-bottom: 1.4rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Skill bars */
.skill-bar-item { margin-bottom: 1.35rem; }
.skill-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.skill-bar-name {
  font-size: .87rem;
  font-weight: 500;
  color: var(--text-bright);
  text-shadow: var(--sh-text-sm);
}
.skill-bar-pct {
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent-bright);
  letter-spacing: .04em;
  font-family: var(--serif);
}
.skill-bar-track {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.skill-bar-fill {
  height: 100%;
  width: 0%;          /* animated by JS */
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  box-shadow: 0 0 10px rgba(82,201,138,0.45);
  transition: width 1.1s cubic-bezier(0.22,1,0.36,1);
}

/* Tag pills */
.skill-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.skill-tag-pill {
  padding: 7px 14px;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-soft);
  transition: background .2s, border-color .2s, color .2s, transform .25s var(--ease-spring);
  cursor: default;
}
.skill-tag-pill:hover {
  background: rgba(45,122,79,0.22);
  border-color: rgba(82,201,138,0.40);
  color: #fff;
  transform: translateY(-2px);
}
.skill-tag-pill.tool {
  background: rgba(45,122,79,0.12);
  border-color: rgba(82,201,138,0.28);
  color: var(--accent-bright);
}
.skill-tag-pill.tool:hover {
  background: rgba(45,122,79,0.32);
  border-color: var(--accent-bright);
  color: #fff;
}

@media (max-width: 768px) {
  .skills-layout { grid-template-columns: 1fr; gap: 3rem; }
}


/* ===== FAQ SECTION ===== */
.faq-grid {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--glass-card);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.faq-item.open {
  border-color: var(--glass-border-h);
  background: var(--glass-card-h);
  box-shadow: 0 8px 32px rgba(45,122,79,0.18);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.6rem;
  background: none;
  border: none;
  cursor: none;
  text-align: left;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-bright);
  text-shadow: var(--sh-text-sm);
  line-height: 1.5;
  transition: color .2s;
}
.faq-q:hover { color: #fff; }
.faq-item.open .faq-q { color: var(--accent-bright); }

.faq-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid rgba(82,201,138,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--accent-bright);
  font-weight: 300;
  line-height: 1;
  transition: transform .35s var(--ease-spring), background .25s, border-color .25s;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: rgba(45,122,79,0.25);
  border-color: var(--accent-bright);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s var(--ease-out), padding .35s var(--ease);
  padding: 0 1.6rem;
}
.faq-item.open .faq-a {
  max-height: 300px;
  padding: 0 1.6rem 1.4rem;
}
.faq-a p {
  font-size: .9rem;
  color: var(--text-soft);
  line-height: 1.85;
  text-shadow: var(--sh-text-sm);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 1rem;
}

/* ============================================================
   STRONG DARK BG FIX — paste at the very bottom of style.css
   Must be AFTER all other rules to override cleanly
   ============================================================ */

#background,
#skills,
#faq {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

#background::before,
#skills::before,
#faq::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: rgba(4, 10, 6, 0.82) !important;
}

#background > *,
#skills > *,
#faq > * {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 768px) {
  .nav-links {
    display: none !important;
  }
 
  .hamburger {
    display: flex !important;
  }
 
  /* Mobile nav panel */
  .mobile-nav {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;                  /* full height to bottom */
    background: rgba(6,12,8,0.98);
    backdrop-filter: blur(28px);
    padding: 1.5rem 5% 3rem;
    flex-direction: column;
    gap: 0;
    z-index: 999;
    border-bottom: 1px solid var(--glass-border);
    transform: translateY(-16px);
    opacity: 0;
    transition: transform .35s var(--ease-out), opacity .35s;
 
    /* KEY FIX: scroll inside the nav, not the page */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* prevents page scroll bleed */
  }
 
  .mobile-nav.open {
    transform: translateY(0);
    opacity: 1;
  }
 
  .mobile-nav a {
    font-size: 1rem;
    color: var(--text-soft);
    text-decoration: none;
    font-weight: 500;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: color .2s, padding-left .2s;
    display: block;
  }
  .mobile-nav a:hover { color: #fff; padding-left: 6px; }
 
  .mob-group-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-bright);
    opacity: .7;
    padding: 1.2rem 0 .3rem;
    display: block;
  }
 
  .mob-sub {
    padding-left: 1rem !important;
    font-size: .92rem !important;
    color: var(--text-muted) !important;
    border-bottom-color: rgba(255,255,255,0.03) !important;
  }
  .mob-sub:hover { color: var(--accent-bright) !important; }
 
  .mobile-nav .nav-cta-m {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 14px 28px;
    background: var(--accent);
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-weight: 600;
    box-shadow: var(--sh-btn);
    border-bottom: none !important;
  }
  .mobile-nav .nav-cta-m:hover {
    background: var(--accent-light);
    padding-left: 28px !important; /* override the hover shift */
  }
}
 
/* Lock body scroll when mobile nav is open */
body.mob-open {
  overflow: hidden;
}


#nav {
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              background .4s var(--ease);
}
#nav.nav-hidden {
  transform: translateY(-100%);
}

/* ── Active page link highlight ── */
.nav-links .nav-active {
  color: var(--accent-bright) !important;
}
.nav-links .nav-active::after {
  right: 0 !important;
  background: var(--accent-bright) !important;
}
#about {
  padding-top: calc(var(--nav-h) + var(--aida-h) + 60px);
}

#contact {
  padding-top: calc(var(--nav-h) + var(--aida-h) + 60px);
}

/* ── Page hero banner (About / Services / Contact pages) ── */
.page-hero {
  min-height: calc(var(--nav-h) + var(--aida-h) + 40px);
  position: relative;
  z-index: 1;
  padding: calc(var(--nav-h) + 80px) 5% 70px;
  text-align: center;
  background: transparent;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(4,10,6,0.80);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
.page-hero-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.08;
  color: #fff;
  text-shadow: var(--sh-text);
  margin: .8rem 0 1rem;
}
.page-hero-title em {
  font-style: italic;
  color: var(--accent-bright);
  text-shadow: 0 0 30px rgba(82,201,138,0.4);
}
.page-hero-sub {
  font-size: 1rem;
  color: var(--text-soft);
  line-height: 1.8;
  text-shadow: var(--sh-text-sm);
}
#services {
  padding-top: calc(var(--aida-h) + 80px);
}
#services-cta {
  padding: 80px 5%;
}
#services-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(3,8,5,0.80);
  z-index: 0;
  pointer-events: none;
}
#services-cta > * { position: relative; z-index: 1; }

@media (min-width: 769px) {
  #nav {
    top: 0 !important;
    z-index: 1001 !important;
  }
 
  #aida-banner {
    top: var(--nav-h) !important;
    z-index: 999 !important;
  }
 
  #hero {
    padding-top: calc(var(--nav-h) + var(--aida-h) + 60px) !important;
  }
}

body.aida-open {
  overflow: hidden !important;
}
 
#aida-banner.aida-expanded {
  top: var(--nav-h) !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  max-height: none !important;
  z-index: 1000 !important;
  overflow: hidden;
}
 
#aida-banner.aida-expanded .aida-inner {
  max-height: calc(100vh - var(--nav-h) - 46px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
 
#aida-banner.aida-expanded .aida-content-inner {
  max-width: 720px;
  padding: 2rem 1.5rem 3rem;
}
 
@media (max-width: 768px) {
  #aida-banner.aida-expanded {
    top: var(--nav-h) !important;
  }
  #aida-banner.aida-expanded .aida-inner {
    max-height: calc(100vh - var(--nav-h) - 46px) !important;
  }
}

body.aida-open {
  overflow: hidden !important;
  position: fixed !important;  
  width: 100% !important;
}
 
#aida-banner {
  max-height: 46px !important;     
  overflow: hidden !important;
  transition: max-height .5s cubic-bezier(0.25,0.46,0.45,0.94),
              transform .4s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
 
#aida-banner.aida-expanded {
  max-height: 100vh !important; 
  bottom: 0 !important;
  top: var(--nav-h) !important;
  position: fixed !important;
  z-index: 1000 !important;
  overflow: hidden !important;
}
 
#aida-banner.aida-expanded .aida-inner {
  max-height: calc(100vh - var(--nav-h) - 46px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
 
#aida-banner.aida-expanded ~ nav,
#nav {
  z-index: 1001 !important;
}

/* ═══════════════════════════════════════
   ADD TO BOTTOM OF style.css
   (for services.html)
═══════════════════════════════════════ */

/* Services CTA section overlay */
#services-cta {
  position: relative;
  z-index: 1;
  padding: 80px 5%;
  isolation: isolate;
}
#services-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(3, 8, 5, 0.82);
}
#services-cta > * {
  position: relative;
  z-index: 1;
}

/* Page hero sub-text (used on about / services / contact pages) */
.page-hero-sub {
  font-size: .98rem;
  color: var(--text-soft);
  line-height: 1.85;
  text-shadow: var(--sh-text-sm);
  max-width: 520px;
  margin: 0 auto;
}

/* Services page: 7th card sits centered on last row */
@media (min-width: 769px) {
  #services .services-grid {
    /* 3 columns — 7 cards: row1=3, row2=3, row3=1 centered */
    grid-template-columns: repeat(3, 1fr);
  }
  #services .services-grid .service-card:last-child:nth-child(3n - 2) {
    grid-column: 2 / 3; /* center it */
  }
}

/* Tools grid — 2 columns but 7 items: last item centered */
@media (min-width: 769px) {
  #tools .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  #tools .tools-grid .tool-card:last-child:nth-child(odd) {
    grid-column: 1 / 3;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Header */
.rp-header {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding: 2.5rem 2.5rem 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(45,122,79,0.10);
}
.rp-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 1.3rem; font-weight: 700;
  color: #fff; flex-shrink: 0;
  box-shadow: 0 8px 28px rgba(45,122,79,0.45);
  letter-spacing: .04em;
}
.rp-name {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 700; color: #fff;
  text-shadow: var(--sh-text-sm);
  margin-bottom: .25rem; line-height: 1.2;
}
.rp-role {
  font-size: .88rem; font-weight: 500;
  color: var(--accent-bright);
  letter-spacing: .04em; margin-bottom: .6rem;
}
.rp-contacts {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  font-size: .78rem; color: var(--text-muted);
}

/* Body */
.rp-body { padding: 2rem 2.5rem; display: flex; flex-direction: column; gap: 1.8rem; }


.rp-block-title {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: .8rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(82,201,138,0.18);
}
.rp-block-text {
  font-size: .9rem; color: var(--text-soft);
  line-height: 1.85; text-shadow: var(--sh-text-sm);
}

/* Experience item */
.rp-exp-item {
  display: flex; gap: 1rem; align-items: flex-start;
}
.rp-exp-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; margin-top: 5px;
  box-shadow: 0 0 10px rgba(45,122,79,0.55);
}
.rp-exp-role {
  font-weight: 600; font-size: .92rem; color: #fff;
  text-shadow: var(--sh-text-sm); margin-bottom: .2rem;
}
.rp-exp-company {
  font-size: .78rem; color: var(--accent-bright);
  font-weight: 600; letter-spacing: .03em; margin-bottom: .4rem;
}
.rp-exp-desc {
  font-size: .86rem; color: var(--text-soft);
  line-height: 1.78; text-shadow: var(--sh-text-sm);
}

/* Skill pills */
.rp-skills-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-skill-pill {
  font-size: .76rem; font-weight: 600;
  padding: 5px 14px; border-radius: 99px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-soft);
  transition: background .2s, border-color .2s, color .2s;
}
.rp-skill-pill:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.rp-skill-pill.accent {
  background: rgba(45,122,79,0.18);
  border-color: rgba(82,201,138,0.32);
  color: var(--accent-bright);
}
.rp-skill-pill.accent:hover {
  background: rgba(45,122,79,0.32);
  border-color: var(--accent-bright);
  color: #fff;
}
.rp-skill-pill.soft {
  background: rgba(200,168,75,0.12);
  border-color: rgba(200,168,75,0.28);
  color: var(--accent-gold);
}
.rp-skill-pill.soft:hover {
  background: rgba(200,168,75,0.24);
  border-color: var(--accent-gold);
  color: #fff;
}

/* Footer */
.rp-footer {
  padding: 1.8rem 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.12);
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
}

@media (max-width: 600px) {
  .rp-header { flex-direction: column; text-align: center; gap: 1rem; padding: 2rem 1.5rem 1.5rem; }
  .rp-contacts { justify-content: center; }
  .rp-body { padding: 1.5rem; gap: 1.4rem; }
  .rp-footer { padding: 1.5rem; justify-content: center; }
  .resume-preview-card { border-radius: 18px; }
}
/* ===== PHOTO FIX ===== */
.nav-logo img,
.photo-frame img,
.about-photo-card img {
  object-fit: cover !important;
  object-position: center 30% !important;
}

@media (hover: none) and (pointer: coarse) {
  html { cursor: auto !important; }
  #cursor-dot, #cursor-ring { display: none !important; }
  * { cursor: auto !important; }
  a, button, input, select, textarea, [onclick] { cursor: pointer !important; }
}

a, button, input, select, textarea, [onclick] {
  cursor: none !important;
}

#resume-download {
  padding: 80px 5%;
  position: relative;
  z-index: 1;
  isolation: isolate;
}
#resume-download::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(4, 10, 6, 0.82);
}
#resume-download > * { position: relative; z-index: 1; }

.resume-dl-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--glass-card);
  backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(82, 201, 138, 0.22);
  border-radius: 24px;
  padding: 3rem 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  box-shadow: 0 12px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(82,201,138,0.06);
  transition: border-color .3s, box-shadow .3s;
}
.resume-dl-card:hover {
  border-color: rgba(82, 201, 138, 0.40);
  box-shadow: 0 20px 64px rgba(0,0,0,0.55), 0 0 32px rgba(45,122,79,0.15);
}

/* Left column */
.resume-dl-left { flex: 1; }

.resume-dl-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.resume-dl-chip {
  font-size: .76rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 99px;
  background: rgba(45, 122, 79, 0.14);
  border: 1px solid rgba(82, 201, 138, 0.28);
  color: var(--accent-bright);
  letter-spacing: .02em;
  transition: background .2s, border-color .2s;
}
.resume-dl-chip:hover {
  background: rgba(45, 122, 79, 0.28);
  border-color: var(--accent-bright);
}

/* Right column */
.resume-dl-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: 180px;
}

.resume-dl-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: rgba(45, 122, 79, 0.14);
  border: 1px solid rgba(82, 201, 138, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 0 28px rgba(45,122,79,0.18);
  transition: background .3s, box-shadow .3s, transform .3s var(--ease-spring);
}
.resume-dl-card:hover .resume-dl-icon-wrap {
  background: rgba(45, 122, 79, 0.26);
  box-shadow: 0 0 40px rgba(45,122,79,0.35);
  transform: translateY(-3px);
}

.resume-dl-btn {
  width: 100%;
  justify-content: center;
  font-size: .88rem;
  padding: 13px 28px;
}

/* Responsive */
@media (max-width: 640px) {
  .resume-dl-card {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
    gap: 2rem;
  }
  .resume-dl-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .resume-dl-left p { text-align: center; }
  .resume-dl-highlights { justify-content: center; }
}
.aida-bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 1.2rem auto;
  max-width: 520px;
  text-align: left;
}
.aida-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .92rem;
  color: var(--text-bright);
  line-height: 1.6;
}
.aida-bullet-icon {
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 1px;
}
.skill-bar-note {
  font-size: .74rem;
  color: var(--text-muted);
  margin-top: 5px;
  line-height: 1.5;
  font-style: italic;
}

#why-me {
  position: relative;
  z-index: 1;
  isolation: isolate;
}
#why-me::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(4, 10, 6, 0.80);
}
#why-me > * { position: relative; z-index: 1; }
 
.whyme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
 
.whyme-grid-condensed {
  grid-template-columns: repeat(3, 1fr);
}
 
.whyme-card {
  background: var(--glass-card);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease-spring), box-shadow .35s,
              background .3s, border-color .3s;
}
.whyme-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transition: right .5s var(--ease);
}
.whyme-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-card-h);
  background: var(--glass-card-h);
  border-color: var(--glass-border-h);
}
.whyme-card:hover::before { right: 0; }
 
.whyme-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}
.whyme-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  text-shadow: var(--sh-text-sm);
  margin-bottom: .6rem;
}
.whyme-desc {
  font-size: .88rem;
  color: var(--text-soft);
  line-height: 1.78;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
 
@media (max-width: 768px) {
  .whyme-grid { grid-template-columns: 1fr; }
  .whyme-grid-condensed { grid-template-columns: 1fr; }
}

/* ── Modal Overlay ── */
.portfolio-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99000;
  background: rgba(4, 10, 6, 0.92);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
  overflow-y: auto;
}
.portfolio-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
 
/* ── Modal Box ── */
.portfolio-modal {
  background: rgba(8, 16, 10, 0.98);
  backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(82,201,138,0.22);
  border-radius: 24px;
  padding: 3rem;
  max-width: 780px;
  width: 100%;
  position: relative;
  transform: translateY(24px);
  transition: transform .4s var(--ease-out);
  box-shadow: 0 32px 80px rgba(0,0,0,0.70);
  margin: auto;
}
.portfolio-modal-overlay.open .portfolio-modal {
  transform: translateY(0);
}
 
/* ── Close Button ── */
.portfolio-modal-close {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-soft);
  font-size: .9rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, transform .25s var(--ease-spring);
}
.portfolio-modal-close:hover {
  background: rgba(82,201,138,0.20);
  color: var(--accent-bright);
  transform: rotate(90deg);
}
 
/* ── Header ── */
.portfolio-modal-header { margin-bottom: 2.5rem; }
.portfolio-modal-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700; color: #fff;
  line-height: 1.1;
  text-shadow: var(--sh-text);
  margin-bottom: .8rem;
}
.portfolio-modal-title em { font-style: italic; color: var(--accent-bright); }
.portfolio-modal-sub {
  font-size: .88rem; color: var(--text-soft); line-height: 1.8;
}
 
/* ── Samples List — Full Width Stack ── */
.portfolio-samples-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2.5rem;
}
 
.portfolio-sample { display: flex; flex-direction: column; }
 
/* Full width image */
.portfolio-sample-img-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: rgba(45,122,79,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color .3s, box-shadow .3s;
}
.portfolio-sample-img-wrap:hover {
  border-color: rgba(82,201,138,0.40);
  box-shadow: 0 8px 32px rgba(45,122,79,0.20);
}
.portfolio-sample-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .4s var(--ease);
}
.portfolio-sample-img-wrap:hover img {
  transform: scale(1.01);
}
 
/* Zoom hint overlay */
.portfolio-sample-zoom-hint {
  position: absolute;
  inset: 0;
  background: rgba(4,10,6,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent-bright);
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity .25s;
  border-radius: 12px;
}
.portfolio-sample-img-wrap:hover .portfolio-sample-zoom-hint { opacity: 1; }
 
/* img-error fallback */
.portfolio-sample-img-wrap.img-error::after {
  content: '📧 Image coming soon';
  display: flex; align-items: center; justify-content: center;
  height: 160px;
  font-size: .85rem; color: var(--text-muted);
}
.portfolio-sample-img-wrap.img-error img { display: none; }
 
/* Info below image */
.portfolio-sample-info {
  padding: 1.2rem 0 1rem;
}
.portfolio-sample-num {
  font-family: var(--serif);
  font-size: 2.4rem; font-weight: 300;
  color: rgba(82,201,138,0.25);
  line-height: 1; display: block;
  margin-bottom: .3rem;
}
.portfolio-sample-title {
  font-family: var(--serif);
  font-size: 1.2rem; font-weight: 600;
  color: #fff; text-shadow: var(--sh-text-sm);
  margin-bottom: .5rem; line-height: 1.3;
}
.portfolio-sample-desc {
  font-size: .86rem; color: var(--text-soft); line-height: 1.8;
}
 
/* Divider between samples */
.portfolio-sample-divider {
  width: 100%; height: 1px;
  background: rgba(255,255,255,0.07);
  margin: .5rem 0 2rem;
}
 
/* ── Footer ── */
.portfolio-modal-footer {
  display: flex; gap: 1rem;
  justify-content: flex-end; flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
 
/* View samples tag */
.portfolio-tag {
  color: var(--accent-bright) !important;
  background: rgba(45,122,79,0.20) !important;
  border-color: rgba(82,201,138,0.40) !important;
  cursor: pointer;
}
 
/* ── LIGHTBOX ── */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(2, 6, 3, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
  user-select: none;
}
#lightbox.open {
  opacity: 1;
  pointer-events: all;
}
 
/* Top bar */
.lightbox-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: linear-gradient(rgba(2,6,3,0.9), transparent);
  z-index: 2;
}
.lightbox-counter {
  font-size: .82rem; font-weight: 600;
  color: var(--text-muted); letter-spacing: .08em;
}
.lightbox-controls {
  display: flex; align-items: center; gap: 8px;
}
.lb-btn {
  height: 36px; min-width: 36px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-soft);
  font-size: .9rem; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
}
.lb-btn:hover {
  background: rgba(82,201,138,0.20);
  color: var(--accent-bright);
  border-color: rgba(82,201,138,0.40);
}
.lb-close {
  margin-left: 8px;
  background: rgba(255,255,255,0.06);
}
.lb-close:hover { transform: rotate(90deg); }
 
/* Prev / Next arrows */
.lb-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(8,16,10,0.75);
  border: 1px solid rgba(82,201,138,0.25);
  color: var(--accent-bright);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .2s var(--ease-spring);
}
.lb-arrow:hover {
  background: rgba(45,122,79,0.45);
  border-color: var(--accent-bright);
}
.lb-prev { left: 1.2rem; }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next { right: 1.2rem; }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }
 
/* Image wrapper — handles zoom & pan */
.lightbox-img-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: grab;
  padding: 4rem 5rem;
}
.lightbox-img-wrap.grabbing { cursor: grabbing; }
.lightbox-img-wrap img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.60);
  transform-origin: center center;
  transition: transform .15s ease;
  pointer-events: none;
  display: block;
}
 
/* Caption */
.lightbox-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1rem 1.5rem;
  background: linear-gradient(transparent, rgba(2,6,3,0.92));
  display: flex; align-items: baseline; gap: 12px;
  z-index: 2;
}
.lb-cap-num {
  font-family: var(--serif);
  font-size: 1.4rem; font-weight: 300;
  color: rgba(82,201,138,0.45); line-height: 1;
}
.lb-cap-title {
  font-family: var(--serif);
  font-size: 1rem; font-weight: 600;
  color: rgba(255,255,255,0.85);
}
 
/* Responsive */
@media (max-width: 640px) {
  .portfolio-modal { padding: 1.5rem; border-radius: 16px; }
  .portfolio-modal-footer { justify-content: center; }
  .lb-arrow { width: 38px; height: 38px; font-size: 1rem; }
  .lb-prev { left: .5rem; }
  .lb-next { right: .5rem; }
  .lightbox-img-wrap { padding: 4.5rem 3rem 4rem; }
}

#lightbox .lb-btn,
#lightbox .lb-arrow,
#lightbox .portfolio-modal-close,
#lightbox .lightbox-topbar,
#lightbox .lightbox-caption {
  cursor: pointer !important;
}