:root{
  --bg: #2d2f30;
  --fg: #F6F3EE;
  --muted: rgba(246,243,238,0.56);
  --line: rgba(246,243,238,0.14);
  --accent: #4cb7e2;
  --accent-dim: rgba(76,183,226,0.22);
  --panel: #1C1A1C;
  color-scheme: dark;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(78px + env(safe-area-inset-top,0px)); }
body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Sora', sans-serif;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
  overflow-x: hidden;
}
a{ color: var(--accent); text-decoration: none; }
a:hover{ opacity: 0.78; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- scroll progress ---- */
.scroll-progress{
  position: fixed; top: env(safe-area-inset-top,0px); left: 0; height: 3px;
  background: var(--accent); z-index: 100; width: 0%;
  transition: width .12s linear;
}

/* ---- nav ---- */
.nav{
  position: sticky; top: env(safe-area-inset-top,0px); z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 56px;
  transition: padding .35s ease, background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  padding: 16px 56px;
  background: rgba(45,47,48,0.78);
  backdrop-filter: blur(10px);
  border-color: var(--line);
}
.logo{ font-family:'Sora', sans-serif; font-weight:700; font-size:20px; letter-spacing:-0.01em; }
.logo .dot{ color: var(--accent); }
.nav-links{ display:flex; gap: 34px; list-style:none; margin:0; padding:0; }
.nav-links a{ position:relative; color: var(--fg); font-size: 14px; font-weight: 500; opacity: .82; padding-bottom: 4px; transition: opacity .25s, color .25s; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover, .nav-links a.active{ opacity: 1; color: var(--accent); }
.nav-links a:hover::after, .nav-links a.active::after{ transform: scaleX(1); }
.menu-btn{ display:none; background:none; border:none; color:var(--fg); cursor:pointer; padding:8px; flex-direction:column; gap:5px; }
.menu-btn span{ width:22px; height:2px; background:var(--fg); display:block; }

/* ---- hero ---- */
.hero{ position:relative; min-height: 92vh; display:flex; align-items:center; padding: 0 56px 40px; overflow: hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; background: var(--panel); }
.hero-bg video{
  width:100%; height:100%; object-fit:cover; display:block;
  animation: kenburns 22s ease-in-out infinite alternate;
}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(45,47,48,.55) 0%, rgba(45,47,48,.88) 75%, var(--bg) 100%);
}
@keyframes kenburns{ from{ transform: scale(1); } to{ transform: scale(1.14); } }

.hero .content{ position:relative; z-index:1; width:100%; display:flex; flex-wrap:wrap; align-items:stretch; gap:40px; }
.text-col{ flex: 999 1 480px; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:26px; opacity:0; transform: translateY(18px); animation: rise .8s cubic-bezier(.2,.7,.2,1) .15s forwards; }
h1{ margin:0; font-family:'Sora',sans-serif; font-weight:300; line-height:.98; font-size: clamp(42px,6vw,88px); letter-spacing:-0.025em; }
h1 .highlight{ color: var(--accent); font-weight: 600; }
.sub{ margin:0; font-size:15px; color:var(--muted); max-width:380px; line-height:1.65; }
.credit{ display:flex; align-items:center; gap:14px; font-size:13px; color:var(--muted); letter-spacing:0.02em; }
.credit .rule{ width:28px; height:1px; background:var(--accent); display:inline-block; }
.cta-row{ display:flex; gap:14px; margin-top:4px; }
.cta{ border:1px solid var(--line); padding:13px 24px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--fg); min-height:44px; display:inline-flex; align-items:center; transition: border-color .25s, background .25s, transform .25s; }
.cta:hover{ border-color: var(--accent); opacity:1; transform: translateY(-2px) scale(1.03); }
.cta.primary{ background: var(--accent); color:#10262e; border-color: var(--accent); }

.visual-col{ flex:1 1 360px; min-width:280px; position:relative; border-radius:18px; overflow:hidden; background:var(--panel); display:flex; align-items:center; justify-content:center; min-height:420px; opacity:0; transform: translateY(18px); animation: rise .8s cubic-bezier(.2,.7,.2,1) .3s forwards; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.visual-col .glow{ position:absolute; inset:0; background: radial-gradient(120% 90% at 70% 20%, var(--accent-dim) 0%, transparent 60%); }
.visual-col img{ position:relative; width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.visual-col:hover img{ transform: scale(1.04); }
.scroll-tag{ position:absolute; left:22px; bottom:22px; writing-mode:vertical-rl; font-size:11px; letter-spacing:.16em; color:var(--muted); }

@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---- section shell ---- */
section{ padding: 110px 56px; max-width: 1180px; margin: 0 auto; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:48px; flex-wrap:wrap; }
.section-head h2{ font-family:'Sora',sans-serif; font-weight:300; font-size: clamp(28px,3.4vw,42px); margin:0; letter-spacing:-0.015em; }
.section-head .index{ font-family:'Sora',sans-serif; font-weight:600; letter-spacing:0.04em; color:var(--muted); font-size:13px; }

.reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view{ opacity:1; transform:none; }

/* ---- about ---- */
.about-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:56px; align-items:start; }
.about-grid p{ font-size:16px; line-height:1.75; color:var(--muted); max-width:62ch; margin:0 0 16px; }
.about-grid p:last-child{ margin-bottom:0; }
.facts{ display:flex; flex-direction:column; gap:20px; border-left:1px solid var(--line); padding-left:28px; }
.facts .fact b{ display:block; font-family:'Sora',sans-serif; font-size:26px; font-weight:700; }
.facts .fact span{ font-size:13px; color:var(--muted); }

/* ---- skills ---- */
.skills-row{ display:flex; flex-wrap:wrap; gap:12px; }
.skill-tag{ border:1px solid var(--line); border-radius:999px; padding:10px 20px; font-size:13.5px; color:var(--fg); transition: border-color .25s, color .25s, transform .25s, background .25s; }
.skill-tag:hover{ border-color: var(--accent); color:var(--accent); background: var(--accent-dim); transform: translateY(-3px); }

/* ---- projects ---- */
.projects{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:1px; background: var(--line); border:1px solid var(--line); }
.project-card{ background: var(--bg); padding:32px; display:flex; flex-direction:column; gap:14px; transition: background .3s, transform .25s ease-out; will-change: transform; transform-style: preserve-3d; }
.project-card:hover{ background: var(--panel); }
.project-card .tag{ font-size:12px; color:var(--accent); font-weight:700; }
.project-card h3{ font-family:'Sora',sans-serif; font-weight:600; font-size:22px; margin:0; }
.project-card p{ font-size:14px; color:var(--muted); line-height:1.6; margin:0; }
.project-card .link{ font-size:13px; font-weight:700; margin-top:auto; transition: transform .25s; }
.project-card:hover .link{ transform: translateX(4px); }

/* ---- contact ---- */
.contact{ text-align:left; }
.contact h2{ font-family:'Sora',sans-serif; font-weight:300; font-size: clamp(30px,5vw,54px); max-width:16ch; margin:0 0 28px; line-height:1.12; }
.contact-links{ display:flex; flex-wrap:wrap; gap:28px; margin-top:8px; }
.contact-links a{ font-size:14px; font-weight:700; border-bottom:1px solid var(--line); padding-bottom:4px; transition: border-color .25s, transform .25s; display:inline-block; }
.contact-links a:hover{ border-color: var(--accent); transform: translateY(-2px); }

footer{ padding: 28px 56px; display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); border-top:1px solid var(--line); }

@media (max-width: 860px){
  .about-grid{ grid-template-columns:1fr; }
  .facts{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:20px; flex-direction:row; flex-wrap:wrap; gap:28px; }
}
@media (max-width: 640px){
  .nav, .hero, section, footer{ padding-left:22px; padding-right:22px; }
  .nav-links{ display:none; }
  .menu-btn{ display:flex; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .project-card{ transform: none !important; }
}