/* ═══════════════════════════════════════════════════════════
   style.css  |  Portfolio — Dark Luxury Edition
   Fonts: Fraunces (display) · Syne (UI) · JetBrains Mono (mono)
   Palette: Near-black · Warm Cream · Champagne Gold · Sage Teal
═══════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────── */
:root {
  --bg:          #0A0A08;
  --bg2:         #101010;
  --bg3:         #141412;
  --card:        #161614;
  --glass:       rgba(20, 20, 18, 0.72);
  --cream:       #F2EDE3;
  --cream-soft:  rgba(242, 237, 227, 0.62);
  --cream-muted: rgba(242, 237, 227, 0.32);
  --gold:        #C9A96E;
  --gold-lt:     #E0C898;
  --gold-dk:     #9A7A47;
  --gold-dim:    rgba(201, 169, 110, 0.11);
  --gold-bdr:    rgba(201, 169, 110, 0.22);
  --teal:        #7EB8A4;
  --bdr:         rgba(242, 237, 227, 0.07);
  --r:           20px;
  --r-sm:        12px;
  --sh:          0 8px 48px rgba(0,0,0,0.55);
  --sh-gold:     0 20px 60px rgba(201,169,110,0.2);
  --ease:        cubic-bezier(0.23, 1, 0.32, 1);
  --dur:         0.38s;
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Syne', sans-serif;
  background: var(--bg);
  color: var(--cream);
  overflow-x: hidden;
  cursor: none;
}
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
img  { max-width: 100%; display: block; }
button { font-family: inherit; cursor: none; border: none; background: none; }

/* ── Noise overlay ───────────────────────────────────── */
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23f)' opacity='0.032'/%3E%3C/svg%3E");
  opacity: 0.55;
}

/* ── Custom Cursor ───────────────────────────────────── */
.cursor {
  width: 9px; height: 9px;
  background: var(--gold); border-radius: 50%;
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; transform: translate(-50%,-50%);
  transition: width .15s var(--ease), height .15s var(--ease);
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1.5px solid var(--gold); border-radius: 50%;
  position: fixed; top: 0; left: 0; z-index: 9998;
  pointer-events: none; transform: translate(-50%,-50%);
  transition: width .2s, height .2s, opacity .2s, transform .14s linear;
  opacity: 0.4;
}
.cursor-ring.expand { width: 54px; height: 54px; opacity: 0.18; }

/* ── NAV ─────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  background: rgba(10,10,8,0.78);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--bdr);
}
.nav-wrap {
  max-width: 1300px; margin: 0 auto;
  padding: 22px 48px;
  display: flex; align-items: center; justify-content: space-between;
  transition: padding var(--dur) var(--ease);
}
.nav.stuck .nav-wrap { padding-top: 13px; padding-bottom: 13px; }

.nav-brand {
  font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 600;
  font-style: italic; letter-spacing: -0.01em; color: var(--cream);
  transition: color .2s;
}
.nav-brand:hover { color: var(--gold); }

.nav-list { display: flex; align-items: center; gap: 34px; }
.nav-list a {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cream-soft);
  position: relative; transition: color .2s;
}
.nav-list a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: var(--gold);
  transition: width .3s var(--ease);
}
.nav-list a:hover { color: var(--cream); }
.nav-list a:hover::after { width: 100%; }

.nav-pill {
  padding: 8px 20px !important;
  background: var(--gold) !important; color: var(--bg) !important;
  border-radius: 100px; font-weight: 700 !important;
  transition: background var(--dur), transform var(--dur) !important;
}
.nav-pill::after { display: none !important; }
.nav-pill:hover  { background: var(--gold-lt) !important; transform: translateY(-2px); }

/* Burger */
.burger {
  display: none; flex-direction: column; gap: 5px; padding: 4px;
}
.burger span {
  width: 22px; height: 1.5px; background: var(--cream);
  display: block; transition: all .3s var(--ease);
}
.burger.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px,4.5px); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px,-4.5px); }

/* Mobile nav */
.mobile-nav {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg); display: flex;
  align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease);
}
.mobile-nav.open { opacity: 1; pointer-events: all; }
.mobile-nav ul   { display: flex; flex-direction: column; gap: 26px; text-align: center; }
.mn-link {
  font-family: 'Fraunces', serif; font-size: 2.6rem;
  font-weight: 300; font-style: italic;
  color: var(--cream-soft); transition: color .2s;
}
.mn-link:hover { color: var(--gold); }
.mn-cta { color: var(--gold) !important; }

/* ── Shared layout ───────────────────────────────────── */
.wrap { max-width: 1300px; margin: 0 auto; }
section { padding: 130px 48px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.67rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--gold); }

.section-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.8rem, 5vw, 5.2rem);
  font-weight: 300; line-height: 1.02; letter-spacing: -0.025em;
  color: var(--cream);
}
.section-title em { font-style: italic; color: var(--gold); }

.section-sub {
  font-size: 1.05rem; font-weight: 400; line-height: 1.8;
  color: var(--cream-soft); max-width: 500px; margin-top: 14px;
}

/* Reveal */
.rv {
  opacity: 0; transform: translateY(28px);
  transition: opacity .72s var(--ease), transform .72s var(--ease);
}
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .1s; }
.rv.d2 { transition-delay: .2s; }
.rv.d3 { transition-delay: .3s; }
.rv.d4 { transition-delay: .4s; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; border-radius: 100px;
  font-family: 'Syne', sans-serif; font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.04em; transition: all var(--dur) var(--ease);
}
.btn-solid  { background: var(--gold); color: var(--bg); border: none; }
.btn-solid:hover  { background: var(--gold-lt); transform: translateY(-3px); box-shadow: var(--sh-gold); }
.btn-solid svg { transition: transform .25s var(--ease); }
.btn-solid:hover svg { transform: translateX(5px); }

.btn-outline { background: transparent; color: var(--cream); border: 1.5px solid var(--bdr); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }

/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
#hero {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 64px;
  padding: 150px 48px 100px;
  position: relative; overflow: hidden;
  max-width: 1300px; margin: 0 auto;
}

/* Ambient glow blobs */
.hero-glow {
  position: fixed; border-radius: 50%;
  pointer-events: none; filter: blur(130px); z-index: 0;
}
.hg1 {
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(201,169,110,.13), transparent 65%);
  top: -180px; right: -100px;
}
.hg2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(126,184,164,.07), transparent 65%);
  bottom: 20px; left: -60px;
}

/* Left column */
.hero-left { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.67rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  background: var(--gold-dim); border: 1px solid var(--gold-bdr);
  padding: 7px 16px; border-radius: 100px; margin-bottom: 36px;
  opacity: 0; transform: translateY(14px);
  animation: up .65s var(--ease) .15s forwards;
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(1.6);} }

.hero-name {
  font-family: 'Fraunces', serif;
  font-size: clamp(3.4rem, 5.8vw, 7rem);
  font-weight: 300; line-height: .95;
  letter-spacing: -.03em; color: var(--cream);
  opacity: 0; transform: translateY(26px);
  animation: up .8s var(--ease) .28s forwards;
}
.hero-name .italic { font-style: italic; color: var(--gold); }

.hero-tagline {
  font-size: 1.05rem; font-weight: 400; line-height: 1.8;
  color: var(--cream-soft); max-width: 400px;
  margin: 28px 0 44px;
  opacity: 0; transform: translateY(18px);
  animation: up .8s var(--ease) .42s forwards;
}

.hero-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  opacity: 0; transform: translateY(18px);
  animation: up .8s var(--ease) .56s forwards;
}

.hero-stats {
  display: flex; gap: 44px; margin-top: 60px;
  padding-top: 36px; border-top: 1px solid var(--bdr);
  opacity: 0; animation: up .8s var(--ease) .72s forwards;
}
.stat-n {
  font-family: 'Fraunces', serif; font-size: 2.5rem; font-weight: 600;
  line-height: 1; color: var(--gold);
}
.stat-l { font-size: 0.73rem; color: var(--cream-muted); margin-top: 4px; letter-spacing: .04em; }

/* Right column — mock UI */
.hero-right {
  position: relative; z-index: 1;
  opacity: 0; transform: translateX(32px);
  animation: right .95s var(--ease) .35s forwards;
}

.mockup {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: 24px;
  box-shadow: 0 40px 100px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03);
  overflow: hidden;
}
.mockup-bar {
  padding: 13px 18px; background: #0D0D0B;
  border-bottom: 1px solid var(--bdr);
  display: flex; align-items: center; gap: 7px;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-r { background: #FF5F57; } .dot-y { background: #FFBD2E; } .dot-g { background: #28C840; }

.mockup-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }

/* mock topbar */
.m-topbar { display: flex; justify-content: space-between; align-items: center; }
.m-logo   { width: 76px; height: 7px; border-radius: 4px; background: var(--gold); opacity: .65; }
.m-pills  { display: flex; gap: 7px; }
.m-pill   { width: 34px; height: 7px; border-radius: 4px; background: var(--bdr); }
.m-pill.on{ background: var(--gold); opacity: .5; }

/* mock hero card */
.m-hero {
  background: linear-gradient(135deg,#181816,#1E1E1B);
  border: 1px solid var(--bdr); border-radius: 14px; padding: 22px;
  position: relative; overflow: hidden;
}
.m-hero::before {
  content: ''; position: absolute;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(201,169,110,.2),transparent 65%);
  top: -60px; right: -40px;
}
.m-h1 { width: 54%; height: 9px; border-radius: 5px; background: var(--cream); opacity: .75; margin-bottom: 7px; }
.m-h2 { width: 40%; height: 9px; border-radius: 5px; background: var(--cream); opacity: .3; margin-bottom: 18px; }
.m-bl { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); margin-bottom: 5px; }
.m-bl.w75 { width: 75%; } .m-bl.w60 { width: 60%; }
.m-actions { display: flex; gap: 8px; margin-top: 16px; }
.m-btn-a { width: 72px; height: 24px; border-radius: 100px; background: var(--gold); opacity: .85; }
.m-btn-b { width: 58px; height: 24px; border-radius: 100px; border: 1px solid rgba(255,255,255,.15); }

/* mock grid */
.m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-card { background: #1A1A18; border: 1px solid var(--bdr); border-radius: 10px; padding: 14px; }
.m-icon { width: 26px; height: 26px; border-radius: 7px; margin-bottom: 9px; }
.ic-gold{ background: rgba(201,169,110,.28); } .ic-teal{ background: rgba(126,184,164,.28); }
.m-cl { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); margin-bottom: 4px; }
.m-cl.s{ width: 52%; }

/* floating badges */
.fbadge {
  position: absolute;
  background: var(--glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-sm); padding: 11px 14px;
  box-shadow: var(--sh); display: flex; align-items: center; gap: 10px;
  animation: float 5s ease-in-out infinite;
}
.fb1 { bottom: -22px; left: -28px; animation-delay: 0s; }
.fb2 { top:  20px; right: -32px; animation-delay: 2.5s; }
.fb-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.fi-g { background: var(--gold-dim); } .fi-t { background: rgba(126,184,164,.12); }
.fb-text strong { font-size: 0.8rem; font-weight: 700; color: var(--cream); display: block; }
.fb-text span   { font-size: 0.67rem; color: var(--cream-muted); }

/* Scroll hint */
.scroll-hint {
  position: absolute; bottom: 32px; left: 48px;
  display: flex; align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cream-muted);
  opacity: 0; animation: up .8s var(--ease) 1.15s forwards;
}
.sh-line { width: 42px; height: 1px; background: var(--cream-muted); overflow: hidden; position: relative; }
.sh-line::after {
  content: ''; position: absolute; left: -100%; top: 0;
  width: 100%; height: 100%; background: var(--gold);
  animation: slide 2.4s ease-in-out infinite;
}

/* Marquee strip */
.marquee-strip {
  border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr);
  padding: 18px 0; overflow: hidden;
  background: rgba(201,169,110,.03);
}
.marquee-track {
  display: flex; gap: 52px; width: max-content;
  animation: marquee 22s linear infinite;
}
.mq-item {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 1rem; color: var(--cream-muted); white-space: nowrap;
}
.mq-dot { width: 4px; height: 4px; background: var(--gold); border-radius: 50%; }

/* ═══════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════ */
#about {
  background: var(--bg2);
  border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr);
}
.about-grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: 96px; align-items: center;
}

/* Avatar block */
.about-img { position: relative; }
.about-frame {
  aspect-ratio: 3/4; border-radius: 22px; overflow: hidden;
  background: linear-gradient(145deg, #1C1A16 0%, #111 100%);
  border: 1px solid var(--bdr);
  box-shadow: 0 36px 72px rgba(0,0,0,.6);
  position: relative;
}
.af-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 30%, rgba(201,169,110,.18), transparent 65%);
}
.af-shapes { position: absolute; inset: 0; overflow: hidden; }
.af-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(201,169,110,.14);
}
.afr1 { width: 220px; height: 220px; top: 15%; left: 50%; transform: translateX(-50%); }
.afr2 { width: 130px; height: 130px; top: 8%;  right: 12%; }
.af-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding-bottom: 40px;
  background: linear-gradient(to top, rgba(10,10,8,.9), transparent);
  display: flex; align-items: flex-end; justify-content: center;
}
.af-initials {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--gold-dim); border: 1.5px solid var(--gold-bdr);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-size: 2.2rem;
  font-style: italic; color: var(--gold);
}

/* Spin ring */
.about-ring-deco {
  position: absolute; top: -14px; right: -14px;
  width: 90px; height: 90px; border-radius: 50%;
  border: 1.5px dashed var(--gold-bdr);
  animation: spin 18s linear infinite;
}
/* Exp card */
.about-exp {
  position: absolute; bottom: -18px; right: -24px;
  background: var(--glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-sm); padding: 16px 20px;
  box-shadow: var(--sh);
}
.ae-num {
  font-family: 'Fraunces', serif; font-size: 2.8rem;
  font-weight: 600; line-height: 1; color: var(--gold);
}
.ae-lbl { font-size: 0.7rem; color: var(--cream-muted); margin-top: 2px; }

/* Text */
.about-bio { font-size: 1.02rem; font-weight: 400; line-height: 1.85; color: var(--cream-soft); margin-bottom: 14px; }
.skills-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 0.64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  margin: 34px 0 14px;
}
.skills-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-pill {
  padding: 6px 16px;
  background: rgba(255,255,255,.04); border: 1px solid var(--bdr);
  border-radius: 100px; font-size: 0.8rem; color: var(--cream-soft);
  transition: all .25s var(--ease); cursor: default;
}
.skill-pill:hover {
  background: var(--gold-dim); border-color: var(--gold-bdr);
  color: var(--gold); transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════
   PROJECTS
═══════════════════════════════════════════════════════ */
#projects { background: var(--bg); }
.projects-hd {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 60px; flex-wrap: wrap; gap: 20px;
}
.projects-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

.proj-card {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 30px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden; cursor: none;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  transform-style: preserve-3d;
}
.proj-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,169,110,.07), transparent 55%);
  opacity: 0; transition: opacity var(--dur);
}
.proj-card:hover { transform: translateY(-10px); border-color: var(--gold-bdr); box-shadow: 0 32px 64px rgba(0,0,0,.55); }
.proj-card:hover::before { opacity: 1; }

.pcard-num {
  font-family: 'JetBrains Mono', monospace; font-size: 0.64rem;
  letter-spacing: .1em; color: var(--gold); margin-bottom: 18px;
}
.pcard-thumb {
  height: 166px; border-radius: var(--r-sm);
  margin-bottom: 24px; overflow: hidden; position: relative;
}
.pthumb { width: 100%; height: 100%; transition: transform .55s var(--ease); }
.proj-card:hover .pthumb { transform: scale(1.06); }
.thumb-blue   { background: linear-gradient(135deg,#122540 0%,#1B4A7A 55%,#C9A96E 100%); }
.thumb-purple { background: linear-gradient(135deg,#280F3A 0%,#5A2880 55%,#E090C0 100%); }
.thumb-green  { background: linear-gradient(135deg,#0D2A1C 0%,#1B5E3A 55%,#7EB8A4 100%); }
.pthumb-ui {
  position: absolute; inset: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px; backdrop-filter: blur(6px);
  padding: 10px; display: flex; flex-direction: column; gap: 6px;
}
.pt-line { height: 5px; border-radius: 3px; background: rgba(255,255,255,.35); }
.pt-line.h { width: 55%; } .pt-line.g { background: var(--gold); width: 38%; }
.pt-blocks { display: flex; gap: 7px; flex: 1; margin-top: 3px; }
.pt-blk { flex: 1; border-radius: 6px; background: rgba(255,255,255,.1); }
.pt-blk:first-child { flex: 1.7; }

.pcard-title {
  font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 300;
  line-height: 1.18; color: var(--cream); margin-bottom: 18px;
}
.pcard-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; flex: 1; }
.meta-r { display: flex; gap: 10px; align-items: flex-start; }
.meta-k {
  font-family: 'JetBrains Mono', monospace; font-size: 0.59rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
  min-width: 60px; padding-top: 2px; flex-shrink: 0;
}
.meta-v { font-size: 0.81rem; color: var(--cream-soft); line-height: 1.55; }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; }
.ttag {
  padding: 3px 10px; border-radius: 100px;
  background: var(--gold-dim); border: 1px solid var(--gold-bdr);
  font-size: 0.67rem; color: var(--gold);
}
.pcard-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.79rem; font-weight: 700; color: var(--gold);
  padding: 9px 0; border-bottom: 1px solid var(--gold-bdr);
  margin-top: 14px; transition: gap .2s, border-color .2s;
}
.pcard-link:hover { gap: 14px; border-color: var(--gold); }

/* ═══════════════════════════════════════════════════════
   TOOLS
═══════════════════════════════════════════════════════ */
#tools {
  background: var(--bg3);
  border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr);
  text-align: center;
}
#tools .eyebrow { justify-content: center; }
.tools-grid {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 52px;
}
.tool-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 30px 38px;
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r);
  min-width: 148px; cursor: default;
  position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.tool-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,169,110,.07), transparent);
  opacity: 0; transition: opacity var(--dur);
}
.tool-card:hover { transform: translateY(-8px); border-color: var(--gold-bdr); box-shadow: var(--sh-gold); }
.tool-card:hover::before { opacity: 1; }
.tool-emoji { font-size: 2.1rem; transition: transform var(--dur) var(--ease); }
.tool-card:hover .tool-emoji { transform: scale(1.22) rotate(-8deg); }
.tool-name  { font-size: 0.8rem; font-weight: 600; color: var(--cream-soft); letter-spacing: .02em; }

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════ */
#testimonials { background: var(--bg); }
.testi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 58px; }
.testi-card {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 38px;
  display: flex; flex-direction: column; gap: 26px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.testi-card:hover { transform: translateY(-6px); border-color: var(--gold-bdr); }
.quote-mark {
  font-family: 'Fraunces', serif; font-size: 5rem; line-height: .5;
  color: var(--gold); opacity: .22; user-select: none;
}
.testi-quote {
  font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 300;
  font-style: italic; line-height: 1.82; color: var(--cream-soft); flex: 1;
}
.testi-author { display: flex; align-items: center; gap: 14px; }
.t-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-size: 1.2rem;
  font-style: italic; font-weight: 600; color: var(--bg); flex-shrink: 0;
}
.t-name { font-size: 0.88rem; font-weight: 700; color: var(--cream); }
.t-role { font-size: 0.73rem; color: var(--cream-muted); margin-top: 1px; }

/* ═══════════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════════ */
#contact {
  background: var(--bg2);
  border-top: 1px solid var(--bdr);
  text-align: center;
}
.contact-inner { max-width: 660px; margin: 0 auto; }
.contact-email-link {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 3.2vw, 2.7rem);
  font-style: italic; font-weight: 300;
  color: var(--gold); display: inline-block;
  margin: 30px 0 44px;
  transition: color .2s;
}
.contact-email-link:hover { color: var(--gold-lt); }
.social-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 50px; }
.social-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: var(--card); border: 1px solid var(--bdr); border-radius: 100px;
  font-size: 0.8rem; font-weight: 600; color: var(--cream-soft);
  transition: all .25s var(--ease);
}
.social-btn:hover { background: var(--gold-dim); border-color: var(--gold-bdr); color: var(--gold); transform: translateY(-3px); }

/* ── Footer ──────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--bdr); padding: 34px 48px; }
.footer-wrap {
  max-width: 1300px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
}
.footer-brand { font-family: 'Fraunces', serif; font-size: .95rem; font-style: italic; color: var(--cream-soft); }
.footer-copy  { font-size: .72rem; color: var(--cream-muted); }
.footer-links { display: flex; gap: 22px; }
.footer-links a { font-size: .72rem; color: var(--cream-muted); transition: color .2s; }
.footer-links a:hover { color: var(--gold); }

/* ── Keyframes ───────────────────────────────────────── */
@keyframes up    { to { opacity:1; transform:none; } }
@keyframes right { to { opacity:1; transform:none; } }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@keyframes slide { 0%{left:-100%;} 100%{left:100%;} }
@keyframes spin  { to{transform:rotate(360deg);} }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  #hero        { grid-template-columns: 1fr; gap: 56px; }
  .hero-right  { max-width: 520px; margin: 0 auto; }
  .about-grid  { grid-template-columns: 1fr; gap: 56px; }
  .about-img   { max-width: 380px; }
  .projects-grid{ grid-template-columns: 1fr 1fr; }
  .testi-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  section { padding: 86px 24px; }
  .nav-wrap   { padding: 17px 24px; }
  .nav-list   { display: none; }
  .burger     { display: flex; }
  #hero       { padding: 120px 24px 80px; }
  .hero-stats { gap: 26px; }
  .projects-grid { grid-template-columns: 1fr; }
  .fbadge     { display: none; }
  .about-exp  { right: 8px; }
  .scroll-hint{ left: 24px; }
  .site-footer{ padding: 26px 24px; }
  .footer-wrap{ flex-direction: column; text-align: center; }
  .footer-links{ justify-content: center; }
}
@media (max-width: 480px) {
  .tools-grid { gap: 12px; }
  .tool-card  { padding: 22px 26px; min-width: 126px; }
  .hero-actions{ flex-direction: column; align-items: flex-start; }
}