/* ======================
   BASIS / RESET
====================== */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #EADDCA;
  background: #0b0d14;
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.section-content { max-width: 70rem; margin: 0 auto; padding: 0 2rem; }

/* ======================
   HEADER (GLASS + CENTER)
====================== */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
}
.header-container {
  max-width: 66rem;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.site-header::before,
.site-header::after {
  content:""; position: absolute; top: 0; bottom: 0; width: 120px; pointer-events: none;
}
.site-header::before { left: 0; background: linear-gradient(90deg, rgba(255,255,255,0.06), transparent); }
.site-header::after { right: 0; background: linear-gradient(-90deg, rgba(255,255,255,0.06), transparent); }

.header-nav .menu { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.header-nav .menu a {
  position: relative;
  padding: .25rem .1rem;
  color: #E3DAC9;
}
.header-nav .menu a::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: linear-gradient(90deg, rgba(227,218,201,.0), rgba(227,218,201,.8), rgba(227,218,201,.0));
  transform: scaleX(0); transform-origin: center; transition: transform .18s ease;
}
.header-nav .menu a:hover::after { transform: scaleX(1); }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: #E3DAC9;
  cursor: pointer;
}
@media (max-width: 1024px){
  .header-container { justify-content: flex-end; }
  .menu-toggle { display:block; }
  .menu {
    display:none; position:absolute; right:1.5rem; top:64px;
    flex-direction:column; align-items:flex-end; gap:.75rem;
    background: rgba(0,0,0,.75);
    padding:1rem; border-radius:10px;
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(8px);
  }
  .menu.show { display:flex; }
}

/* ======================
   HERO COSMIC
====================== */
#hero { position: relative; background: #050515; }
#hero.cosmic .hero-backdrop {
  position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 20% 20%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)),
    url("/img/hero-bg.jpg") center/cover no-repeat fixed;
  z-index:0;
}
.hero-container {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: flex-start;
  gap: clamp(3rem,8vw,8rem);
  max-width: 70rem; margin: 0 auto;
  padding: clamp(4rem,8vw,8rem) clamp(0.5rem,5vw,2rem);
}
.hero-text { max-width: 46ch; }
.hero-intro { margin: 0 0 .25rem 0; color: #fff; }
.hero-name {
  margin: 0;
  font-size: clamp(2.6rem,6vw,4.6rem);
  color: #E3DAC9;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-shadow:
    0 0 2px rgba(227,218,201,0.55),
    0 0 6px rgba(227,218,201,0.35);
}
.hero-typing { font-size: clamp(1.05rem,2.2vw,1.6rem); opacity: .95; height: 2rem; }
.cursor { display:inline-block; animation: blink .7s infinite; }
@keyframes blink { 0%,100% {opacity:1} 50% {opacity:0} }

.hero-blurb {
  margin: .5rem 0 1.25rem 0;
  padding: .9rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  color: #E3DAC9;
  line-height: 1.7;
}

#hero .button, #hero .button-secondary {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #E3DAC9;
  border-radius: 12px;
  padding: .7rem 1rem;
  transition: transform .06s, background .2s, border-color .2s;
  margin-right: .6rem;
}
#hero .button:hover, #hero .button-secondary:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}

.hero-socials-card {
  margin-top: .8rem;
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  padding: .6rem .8rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
}
.hero-socials-card a {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #E3DAC9;
  padding: .25rem .4rem;
  border-radius: 8px;
}
.hero-socials-card a:hover { background: rgba(255,255,255,0.10); transform: translateY(-1px); }
.hero-socials-card img { filter: brightness(0) invert(1); opacity: .9; }

.hero-image { width: 400px; height: 400px; margin-left: auto; position: relative; }
.circle-image {
  width: 100%; height: 100%;
  border-radius: 50%; overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
}
.circle-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.location-pill {
  position: absolute; left: 50%; bottom: -32px; transform: translateX(-50%);
  padding: .4rem .7rem; border-radius: 999px;
  font-size: .85rem;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion:no-preference) {
  .circle-image.spin img { animation: spin 4s linear infinite; }
}
@media (max-width:900px){
  .hero-container { flex-direction: column; gap: 1.25rem; }
  .hero-image { width: 300px; height: 300px; }
}

/* ======================
   GLASS UTILITIES
====================== */
.glass{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  border-radius: 16px;
}
.glass-soft{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
}
.glass-hover{
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.glass-hover:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.12);
}

/* ======================
   ABOUT — NEW SPLIT DESIGN
====================== */
.about-section.split{
  background:#111827;
  padding: clamp(3.5rem,7vw,6rem) 0;
}
.about-split{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(1.6rem,4vw,2.2rem);
  align-items:start;
}
.about-pane{
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
}
.about-pane h2{ margin-top:0; color:#E3DAC9; }
.about-highlights{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.8rem;
  margin: .8rem 0 1rem;
}
.ah-item{
  padding:.7rem .9rem; border-radius:14px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
}
.ah-kicker{ font-size:.8rem; color:#E3DAC9; opacity:.95; }
.ah-main{ margin-top:.15rem; font-weight:700; color:#fff; }

.about-cta{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem; }
.btn-glass, .btn-ghost-glass{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:12px; color:#E3DAC9;
  border:1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px); transition: transform .06s, background .2s, border-color .2s;
}
.btn-ghost-glass{ background: rgba(255,255,255,0.04); }
.btn-glass:hover, .btn-ghost-glass:hover{ background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); transform: translateY(-1px); }

.about-stack{ display:grid; gap:.9rem; }
.stack-card{
  padding:.95rem 1rem; border-radius:16px;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
}
.sc-kicker{ font-size:.8rem; color:#E3DAC9; opacity:.95; }
.sc-main{ margin-top:.2rem; font-size:1.25rem; font-weight:700; color:#fff; }
.sc-sub{ margin-top:.15rem; font-size:.95rem; color:#E3DAC9; opacity:.95; }
.sc-chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.3rem; }
.sc-chips span{
  display:inline-block; padding:.32rem .6rem; border-radius:999px;
  background: rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); color:#E3DAC9;
}

@media (max-width: 900px){
  .about-split{ grid-template-columns: 1fr; }
  .about-highlights{ grid-template-columns: 1fr; }
}

/* ======================
   SKILLS
====================== */
.skills-section.upgraded {
  background:#0f1522;
  padding: clamp(3.5rem,6vw,6rem) 0;
  color:#E3DAC9;
}
.skills-tabs{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-bottom:2rem;}
.skills-tabs .tab{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:#E3DAC9;padding:.5rem 1rem;border-radius:999px;cursor:pointer;}
.skills-tabs .tab.active{background:rgba(255,255,255,0.18);color:#fff;}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem;}
.skill-card{background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.18);border-radius:16px;padding:1.2rem 1rem;color:#E3DAC9;}
.skill-card[data-skill]{display:none;}
.skill-card.visible{display:block;}

/* ======================
   PROJECTS
====================== */
.experience-section.upgraded{
  background:#101a2a;
  padding:clamp(3.5rem,7vw,6rem) 0;
  color:#E3DAC9;
}
.experience-subtitle{max-width:60ch;margin:0 auto 2rem;text-align:center;opacity:.9;font-style:italic;}
.exp-tabs{display:flex;justify-content:center;gap:.8rem;margin-bottom:1.6rem;}
.exp-tab{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:#E3DAC9;padding:.5rem 1rem;border-radius:999px;cursor:pointer;}
.exp-tab.active{background:rgba(255,255,255,0.18);color:#fff;}
.timeline-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;}
.timeline-card{background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.18);border-radius:16px;padding:1rem;color:#E3DAC9;display:none;}
.timeline-card.visible{display:block;}
.timeline-meta{display:flex;justify-content:space-between;}
.timeline-tag{background:linear-gradient(to right,rgba(59,130,246,.85),rgba(147,51,234,.85));border-radius:999px;padding:.25rem .6rem;font-size:.8rem;color:#fff;}

/* ======================
   CONTACT
====================== */
.contact-section.upgraded{
  background:#0f1522;
  padding:clamp(3.5rem,6vw,6rem) 0;
  color:#E3DAC9;
}
.contact-section.upgraded h2.centered{
  text-align:center;
  max-width: 70rem;
  margin: 0 auto 2rem;
  padding: 0 2rem;
}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:1.6rem;}
.contact-card{background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.18);border-radius:16px;padding:1.4rem;}
.contact-card h3{margin-top:0;}
.contact-form input,.contact-form textarea{width:100%;padding:.7rem;border-radius:10px;border:1px solid rgba(255,255,255,0.16);background:rgba(0,0,0,0.35);color:#EADDCA;}
.contact-form .form-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem;}
.contact-form .btn-glass,.contact-form .btn-ghost-glass{height:44px;line-height:44px;min-width:160px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;}
.contact-form .btn-ghost-glass{font-size:.9rem;}
.contact-info .info-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;}
.contact-info .info-list li{padding:.45rem .6rem;border-radius:10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);line-height:1.5;}
.contact-info .info-list li strong{display:block;margin:0 0 .1rem;color:#fff;}
@media(max-width:900px){ .contact-grid{grid-template-columns:1fr;} }

/* ======================
   FOOTER — MINIMAL
====================== */
.footer-section.bare{
  background:#0b0f19;
  color:#EADDCA;
  border-top:1px solid rgba(255,255,255,0.08);
  padding: 1rem 0;
}
.footer-inner{
  display:flex; align-items:center; justify-content:center;
  padding: .8rem 0;
}

/* ======================
   ANCHOR OFFSET
====================== */
section[id]{ scroll-margin-top: 84px; }