:root{
  --bg:#150F1E;
  --bg-elevated:#1E1530;
  --bg-card:#241A38;
  --text:#F7ECDD;
  --text-muted:#C4B3D1;
  --accent-orange:#FF6B45;
  --accent-coral:#FF8F6B;
  --accent-gold:#FFC15E;
  --accent-pink:#FF5D8F;
  --accent-purple:#9573C9;
  --border:rgba(247,236,221,0.12);
  --nav-bg:rgba(21,15,30,0.72);

  --sky-1:#1B1030;
  --sky-2:#5B2C6F;
  --sky-3:#E8552F;
  --sky-4:#FFC15E;
  --ground:#0D0815;
  --sun-color:#FFD37A;
  --sun-glow:rgba(255,140,80,0.55);

  --font-display:'Fraunces', serif;
  --font-body:'Space Grotesk', sans-serif;
  --max:1120px;

  --ghost-bg:rgba(255,255,255,0.08);
  --ghost-color:#FFF8ED;
  --ghost-border:rgba(255,255,255,0.35);
  --contact-bg:var(--ground);
  --input-bg:rgba(255,255,255,0.04);
  --input-border:rgba(255,255,255,0.16);
  --shadow-soft:0 20px 40px -20px rgba(0,0,0,0.4);
}

[data-theme="light"]{
  --bg:#FFF4E6;
  --bg-elevated:#FFE9D1;
  --bg-card:#FFFFFF;
  --text:#2B1830;
  --text-muted:#5A4863;
  --border:rgba(43,24,48,0.18);
  --nav-bg:rgba(255,244,230,0.88);

  --accent-orange:#E85A32;
  --accent-coral:#C94B2E;
  --accent-gold:#B87A00;
  --accent-pink:#D64570;

  --ghost-bg:rgba(43,24,48,0.06);
  --ghost-color:var(--text);
  --ghost-border:rgba(43,24,48,0.28);

  --sky-1:#C9D6F0;
  --sky-2:#F3C6D8;
  --sky-3:#FFB088;
  --sky-4:#FFE9C7;
  --ground:#FFF0E0;
  --sun-color:#FFF3D0;
  --sun-glow:rgba(255,200,140,0.6);

  --contact-bg:#FFE9D1;
  --input-bg:#FFFFFF;
  --input-border:rgba(43,24,48,0.2);
  --shadow-soft:0 20px 40px -20px rgba(43,24,48,0.15);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:88px;}
html,body{background:var(--bg);}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background 0.4s ease, color 0.4s ease;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-0.01em;}
.eyebrow{
  font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent-coral); font-weight:600; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1.5px; background:var(--accent-coral); display:inline-block;}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:var(--nav-bg);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; max-width:var(--max); margin:0 auto;
}
.logo{
  font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-0.02em;
  display:flex; align-items:center; gap:8px;
}
.logo .dot{
  width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent-gold),var(--accent-orange));
}
.nav-links{display:flex; align-items:center; gap:34px;}
.nav-links a{
  font-size:14.5px; font-weight:500; color:var(--text-muted);
  position:relative; padding:4px 0; transition:color 0.25s ease;
}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--text);}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:linear-gradient(90deg,var(--accent-orange),var(--accent-gold));
  transition:width 0.25s ease;
}
.nav-links a:hover::after{width:100%;}

.nav-right{display:flex; align-items:center; gap:18px;}

.theme-toggle{
  width:42px; height:42px; border-radius:50%;
  background:var(--bg-elevated); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform 0.3s ease, background 0.3s ease;
  color:var(--accent-gold);
}
.theme-toggle:hover{transform:rotate(20deg) scale(1.06);}
.theme-toggle:focus-visible{outline:2px solid var(--accent-orange); outline-offset:2px;}
.theme-toggle svg{width:20px; height:20px;}
.icon-moon{display:none;}
[data-theme="light"] .icon-sun{display:none;}
[data-theme="light"] .icon-moon{display:block;}

.hamburger{
  display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer;
  background:none; border:none; padding:6px;
}
.hamburger span{height:2px; width:100%; background:var(--text); border-radius:2px; transition:all 0.3s ease;}
.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);}

@media (max-width:860px){
  .nav-links{
    position:fixed; top:73px; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--border);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px 32px 20px;
    transform:translateY(-140%); opacity:0;
    transition:transform 0.3s ease, opacity 0.3s ease;
    pointer-events:none;
  }
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-links a{width:100%; padding:13px 0; border-bottom:1px solid var(--border); font-size:16px;}
  .hamburger{display:flex;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  overflow:hidden;
  background:linear-gradient(to bottom, var(--sky-1) 0%, var(--sky-2) 38%, var(--sky-3) 66%, var(--sky-4) 82%, var(--ground) 82%, var(--ground) 100%);
  transition:background 0.5s ease;
}
.hero-sun{
  position:absolute; left:50%; top:34%; width:150px; height:150px; border-radius:50%;
  background:var(--sun-color);
  box-shadow:0 0 90px 30px var(--sun-glow);
  transform:translate(-50%,0);
  transition:background 0.6s ease, box-shadow 0.6s ease;
  will-change:transform, opacity;
}
.hero-horizon{
  position:absolute; left:0; right:0; bottom:18%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
}
.hero-stripes{position:absolute; inset:0; opacity:0.5; mix-blend-mode:overlay; pointer-events:none;}
.hero-content{
  position:relative; z-index:2; width:100%; padding:0 32px 90px; max-width:var(--max); margin:0 auto;
}
.hero-content .eyebrow{color:rgba(255,255,255,0.85);}
.hero-content .eyebrow::before{background:rgba(255,255,255,0.85);}
.hero h1{
  font-size:clamp(42px, 8vw, 92px); color:#FFF8ED; margin-top:16px;
  text-shadow:0 2px 30px rgba(0,0,0,0.25);
}
.hero h1 em{font-style:italic; color:#FFE7C2; font-weight:500;}
.hero p.sub{
  margin-top:22px; max-width:560px; font-size:18px; line-height:1.6;
  color:rgba(255,248,237,0.88); font-weight:400;
}
.hero-ctas{margin-top:36px; display:flex; gap:16px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:100px; font-size:14.5px; font-weight:600;
  cursor:pointer; border:1px solid transparent; transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:linear-gradient(120deg,var(--accent-orange),var(--accent-pink));
  color:#FFF8ED; box-shadow:0 10px 30px -8px rgba(255,90,90,0.55);
}
.btn-ghost{
  background:var(--ghost-bg); color:var(--ghost-color); border-color:var(--ghost-border);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{
  background:color-mix(in srgb, var(--ghost-bg) 70%, var(--text) 8%);
  border-color:color-mix(in srgb, var(--ghost-border) 80%, var(--text) 20%);
}
.hero .btn-ghost{
  --ghost-bg:rgba(255,255,255,0.08);
  --ghost-color:#FFF8ED;
  --ghost-border:rgba(255,255,255,0.35);
}
[data-theme="light"] .hero .btn-ghost{
  --ghost-bg:rgba(255,255,255,0.14);
  --ghost-color:#FFF8ED;
  --ghost-border:rgba(255,255,255,0.5);
}

/* ---------- SECTIONS ---------- */
section{padding:110px 0; position:relative;}
.section-head{margin-bottom:56px; max-width:640px;}
.section-head h2{font-size:clamp(28px,4vw,42px); margin-top:14px;}
.section-head p{margin-top:16px; color:var(--text-muted); font-size:16px; line-height:1.65;}

/* About */
#about{background:var(--bg);}
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
.about-portrait{
  aspect-ratio:4/5; border-radius:22px; position:relative; overflow:hidden;
  background:var(--bg-elevated);
}
.about-portrait-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; display:block;
}
.about-portrait::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(21,15,30,0.45) 0%, transparent 40%);
}
.about-portrait .mono-tag{
  z-index:2;
  position:absolute; bottom:18px; left:18px; right:18px;
  background:rgba(21,15,30,0.55); backdrop-filter:blur(8px);
  color:#FFF3E4; padding:12px 16px; border-radius:12px; font-size:13px;
  display:flex; justify-content:space-between; border:1px solid rgba(255,255,255,0.15);
}
.about-text p{color:var(--text-muted); font-size:16.5px; line-height:1.75; margin-bottom:18px;}
.about-text p strong{color:var(--text); font-weight:600;}
.stat-row{display:flex; gap:36px; margin-top:32px; flex-wrap:wrap;}
.stat-row div h3{font-size:30px; color:var(--accent-gold);}
.stat-row div span{display:block; font-size:13px; color:var(--text-muted); margin-top:4px;}

/* Skills */
#skills{background:var(--bg-elevated);}
.skills-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.skill-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:18px; padding:28px;
}
.skill-card h3{font-size:16px; font-family:var(--font-body); font-weight:700; margin-bottom:20px; display:flex; align-items:center; gap:10px;}
.skill-card h3::before{content:""; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--accent-orange),var(--accent-gold));}
.skill-item{margin-bottom:16px;}
.skill-item:last-child{margin-bottom:0;}
.skill-item .label{display:flex; justify-content:space-between; font-size:13.5px; color:var(--text-muted); margin-bottom:7px;}
.skill-item .label span:first-child{color:var(--text); font-weight:500;}
.bar-track{height:6px; border-radius:6px; background:var(--border); overflow:hidden;}
.bar-fill{height:100%; border-radius:6px; background:linear-gradient(90deg,var(--accent-orange),var(--accent-gold));}

/* Portfolio */
#portfolio{background:var(--bg);}
.project-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.project-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:20px; overflow:hidden;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft);}
.project-thumb{
  height:190px; position:relative; background:var(--bg-elevated);
}
.project-thumb img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
}
.project-thumb.p1{background:linear-gradient(135deg,#5B2C6F,#E8552F);}
.project-thumb.p2{background:linear-gradient(135deg,#E8552F,#FFC15E);}
.project-thumb.p3{background:linear-gradient(135deg,#1B1030,#9573C9);}
.project-thumb.p4{background:linear-gradient(135deg,#FF5D8F,#FFC15E);}
.project-body{padding:24px 26px 28px;}
.project-body h3{font-size:20px; margin-bottom:8px;}
.project-body p{font-size:14.5px; color:var(--text-muted); line-height:1.6; margin-bottom:16px;}
.tag-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.tag{
  font-size:12px; padding:5px 11px; border-radius:100px; background:var(--bg-elevated);
  color:var(--text-muted); border:1px solid var(--border);
}
.project-link{font-size:13.5px; font-weight:600; color:var(--accent-coral); display:inline-flex; align-items:center; gap:6px;}
.project-link svg{width:13px; height:13px; transition:transform 0.2s ease;}
.project-link:hover svg{transform:translate(2px,-2px);}
.feat-list{margin-bottom:18px;}
.feat-list li{
  font-size:13.5px; color:var(--text-muted); display:flex; align-items:center; gap:8px; margin-bottom:7px;
}
.feat-list li::before{
  content:"✓"; color:var(--accent-gold); font-weight:700; font-size:12px;
  width:16px; height:16px; border-radius:50%; background:var(--bg-elevated);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.project-links-row{display:flex; gap:12px;}
.project-links-row .btn{padding:9px 18px; font-size:13px;}

/* Experience */
#experience{background:var(--bg-elevated);}
.timeline{position:relative; max-width:760px; margin-left:6px;}
.timeline::before{
  content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1.5px;
  background:linear-gradient(to bottom, var(--accent-orange), var(--accent-purple));
}
.t-item{position:relative; padding-left:40px; padding-bottom:44px;}
.t-item:last-child{padding-bottom:0;}
.t-dot{
  position:relative; z-index:2; position:absolute; left:0; top:4px;
  width:15px; height:15px; border-radius:50%;
  background:var(--bg-elevated); border:2.5px solid var(--accent-orange);
}
.t-date{font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-coral); font-weight:600;}
.t-item h3{font-size:19px; margin-top:8px;}
.t-item .t-role{font-size:14.5px; color:var(--text-muted); margin-top:2px; margin-bottom:10px;}
.t-item p{font-size:15px; color:var(--text-muted); line-height:1.7; max-width:600px;}

/* Contact */
#contact{background:var(--contact-bg); color:var(--text); position:relative; overflow:hidden; transition:background 0.5s ease, color 0.5s ease;}
.star{position:absolute; border-radius:50%; background:#fff; opacity:0.6;}
[data-theme="light"] .star{display:none;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; position:relative; z-index:2;}
#contact .eyebrow{color:var(--accent-coral);}
#contact .eyebrow::before{background:var(--accent-coral);}
#contact h2{color:var(--text);}
#contact p{color:var(--text-muted);}
.social-row{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; align-items:center;}
.social-pill{
  padding:11px 20px; border-radius:100px; border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,248,237,0.96);
  font-size:13.5px; font-weight:600; color:#21131F;
  transition:background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  display:inline-flex; align-items:center; gap:10px;
}
.social-pill:hover{
  background:#FFFFFF; border-color:rgba(255,255,255,0.36);
  transform:translateY(-1px);
  box-shadow:0 10px 24px -16px rgba(0,0,0,0.55);
}
.social-icon{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--border);
  background:rgba(255,248,237,0.96); display:inline-flex; align-items:center; justify-content:center;
  padding:10px; transition:background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.social-icon:hover{
  background:#FFFFFF; border-color:rgba(255,255,255,0.36);
  transform:translateY(-1px);
  box-shadow:0 10px 24px -16px rgba(0,0,0,0.55);
}
.social-icon img{width:100%; height:100%; object-fit:contain; display:block;}
.social-pill--email{padding-right:22px;}
.social-pill-icon{
  width:22px; height:22px; border-radius:50%; background:rgba(33,19,31,0.08);
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; color:#21131F;
}
.social-pill-icon svg{width:13px; height:13px;}

.form-field{margin-bottom:18px;}
.form-field label{display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:8px;}
.form-field input, .form-field textarea{
  width:100%; padding:13px 16px; border-radius:10px; border:1px solid var(--input-border);
  background:var(--input-bg); color:var(--text); font-family:var(--font-body); font-size:14.5px;
  transition:border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.form-field input::placeholder, .form-field textarea::placeholder{color:color-mix(in srgb, var(--text-muted) 75%, transparent);}
.form-field input:focus, .form-field textarea:focus{
  outline:none; border-color:var(--accent-orange);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-orange) 18%, transparent);
}
[data-theme="dark"] .form-field input:focus, [data-theme="dark"] .form-field textarea:focus{
  background:rgba(255,255,255,0.07);
}
.form-field textarea{resize:vertical; min-height:110px;}
.submit-btn{
  width:100%; padding:15px; border-radius:10px; border:none; cursor:pointer;
  background:linear-gradient(120deg,var(--accent-orange),var(--accent-pink));
  color:#FFF8ED; font-family:var(--font-body); font-weight:700; font-size:14.5px;
  transition:transform 0.25s ease;
}
.submit-btn:hover{transform:translateY(-2px);}
.form-note{font-size:12.5px; color:var(--text-muted); margin-top:12px; text-align:center;}

footer{
  border-top:1px solid var(--border);
  background:var(--contact-bg);
  padding:26px 0; text-align:center; font-size:13px; color:var(--text-muted); position:relative; z-index:2;
  transition:background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

/* Scroll reveal */
.scroll-reveal{
  opacity:0;
  transform:translateY(30px) scale(0.98);
  transition:
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change:opacity, transform;
}
.scroll-reveal.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion:reduce){
  .scroll-reveal{opacity:1; transform:none; transition:none;}
}

[data-theme="light"] .bar-track{background:rgba(43,24,48,0.12);}
[data-theme="light"] .feat-list li::before{background:var(--bg-card); border:1px solid var(--border);}
[data-theme="light"] .about-portrait::after{
  background:linear-gradient(to top, rgba(43,24,48,0.35) 0%, transparent 45%);
}
[data-theme="light"] .hero-horizon{
  background:linear-gradient(90deg, transparent, rgba(43,24,48,0.15), transparent);
}

@media (max-width:900px){
  .about-grid, .contact-grid{grid-template-columns:1fr;}
  .skills-grid{grid-template-columns:1fr 1fr;}
  .project-grid{grid-template-columns:1fr;}
  .contact-grid{gap:50px;}
}
@media (max-width:560px){
  .skills-grid{grid-template-columns:1fr;}
  section{padding:76px 0;}
  .stat-row{gap:24px;}
}