:root { --bg:#0b0b0b; --fg:#f5f5f5; --muted:#a7a7a7; --line:#1e1e1e; --card:#111111; --radius:16px; --radius-sm:10px; --gold:#d4af37; }
:root[data-theme="light"] { --bg:#ffffff; --fg:#0b0b0b; --muted:#555; --line:#e8e8e8; --card:#f9f9f9; --gold:#b38b00; }
:root[data-theme="light"] .tags span { color:#111; background:#fff; border-color:#e5e5e5; }

* { box-sizing: border-box; } html,body { height:100%; background:var(--bg); color:var(--fg); }
body { font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; }
.container { width:min(1100px, 92vw); margin-inline:auto; }
a { color:inherit; text-decoration:none; } img { max-width:100%; display:block; border-radius:12px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.9rem 1.2rem; border:1px solid var(--gold); background:var(--gold); color:#0b0b0b; font-weight:700; transition:transform .2s ease, background .2s ease, color .2s ease; }
.btn:hover { box-shadow:0 0 0 3px rgba(212,175,55,.18); } .btn:active{ transform:translateY(0); }
.btn.ghost { background:transparent; color:var(--gold); border-color:var(--gold); }
.btn.small { padding:.6rem .9rem; font-weight:600; }
.mono { font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

.site-header { position:sticky; top:0; z-index:50; background:var(--bg); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.brand { font-weight:900; letter-spacing:.2px; }
.site-nav { display:flex; gap:1rem; align-items:center; }
.site-nav a { padding:.6rem .8rem; border-radius:8px; }
.nav-toggle { display:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:transparent; align-items:center; justify-content:center; gap:4px; flex-direction:column; }
.nav-toggle span{ width:18px; height:2px; background:var(--fg); border-radius:2px; }
.theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--fg); }
@media (max-width: 860px){ .theme-toggle{ order:3; } }

@media (max-width: 860px) {
  .nav-toggle { display:flex; }
  .site-nav { position:fixed; inset:64px 0 auto 0; background:var(--bg); color:var(--fg); border-bottom:1px solid var(--line); padding:1rem; display:grid; gap:.6rem; transform:translateY(-120%); transition:transform .25s ease; }
  .site-nav[data-open="true"] { transform:translateY(0); }
}

.hero { position:relative; padding:8vh 0 10vh; }
#bg3d{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; z-index:1; }
#bgvid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero .hero-inner{ position:relative; z-index:1; }
.eyebrow { color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; }
.headline { font-weight:900; font-size:clamp(2rem, 6vw, 4rem); line-height:1.05; letter-spacing:-.02em; margin:.4rem 0 1rem; }
.subhead { color:var(--muted); font-size:clamp(1rem, 2.5vw, 1.25rem); max-width:40ch; }
.cta-row { display:flex; gap:.6rem; margin:1.25rem 0 1rem; flex-wrap:wrap; }
.meta-row { display:flex; gap:1rem; color:var(--muted); font-size:.95rem; flex-wrap:wrap; }
.hero-scroller { position:absolute; right:2vw; bottom:2vh; display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.9rem; }
.hero-scroller .dot { width:6px; height:6px; background:var(--gold); border-radius:50%; animation:float 1.2s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

.section { padding:8vh 0; border-top:1px solid var(--line); }
.section-head { margin-bottom:2rem; }
.section-title { font-size:clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing:-.01em; }
.section-desc { color:var(--muted); max-width:60ch; }

.projects-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.project-card { grid-column:span 12; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.project-card:hover { box-shadow:0 10px 30px rgba(0,0,0,.06); }
.project-card .thumb { aspect-ratio: 16/9; overflow:hidden; background:#eaeaea; }
.project-card img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.project-card:hover img { transform:scale(1.04); }
.card-body { padding:1rem; }
.card-body h3 { margin:0 0 .4rem; font-size:1.25rem; }
.card-body p { margin:0 0 .6rem; color:var(--muted); }
.tags { display:flex; gap:.5rem; flex-wrap:wrap; }
.tags span { border:1px solid var(--line); padding:.3rem .6rem; border-radius:999px; font-size:.85rem; color:#333; background:#fff; }

@media (min-width: 700px) {
  .project-card { grid-column:span 6; }
}

.about-wrap { display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center; }
.about-text p { color: var(--muted); }
.about-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.8rem; margin-top:1.2rem; }
.about-facts div { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1rem; display:grid; gap:.25rem; }
.about-facts .kpi { color:var(--gold); font-size:clamp(1.6rem,4.5vw,2.2rem); font-weight:900; line-height:1; }
.about-facts div span:last-child { color:var(--muted); font-size:.95rem; }
.about-photo {
  position:relative;
  isolation:isolate;
}
.about-photo::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: calc(var(--radius) - 6px);
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.06), transparent 40%);
  filter: blur(10px);
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
  transform: scale(.98);
  pointer-events:none;
}
/* subtle pulsing glow for the portrait when in-view */
.about-photo.in-view::after { opacity: 1; transform: scale(1); animation: pulseGlow 3.6s ease-in-out infinite; }
@keyframes pulseGlow { 0%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.02); opacity:.65 } 100%{ transform:scale(1); opacity:.9 } }
/* ensure image has a gentle pop on enter */
.about-photo img.enter-pop { transform-origin:center; }

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

.skills-list { list-style:none; padding:0; margin:1rem 0 0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.skills-list li { display:flex; flex-direction:column; gap:.5rem; padding:1rem; border-top:1px solid var(--line); }
.skills-list li > span:first-child { font-weight:700; }
.skills-list li > span:last-child { color:var(--muted); font-size:.95rem; }
.skill-line { width:100%; height:8px; background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(0,0,0,0.03)); border-radius:999px; overflow:hidden; border:1px solid var(--line); }
.skill-bar { width:0%; height:100%; background:linear-gradient(90deg,var(--gold), color-mix(in srgb, var(--gold) 60%, transparent)); transition:width .9s cubic-bezier(.2,.9,.2,1); }
.skill-meta { display:flex; justify-content:space-between; align-items:center; gap:1rem; }

.contact-card { background:#0f0f0f; color:#fff; padding:2rem; border-radius:var(--radius); display:grid; gap:.6rem; }
.contact-card .btn.ghost { border-color:#fff; color:#fff; }
.contact-actions { display:flex; gap:.6rem; flex-wrap:wrap; }

.site-footer { border-top:1px solid var(--line); padding:2rem 0; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.reveal { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; will-change: transform, opacity; }
.reveal.in-view { opacity:1; transform:translateY(0); }
.reveal.in-view:nth-child(1){ transition-delay:.02s } .reveal.in-view:nth-child(2){ transition-delay:.07s }
.reveal.in-view:nth-child(3){ transition-delay:.12s } .reveal.in-view:nth-child(4){ transition-delay:.17s }

.tilt { transform-style:preserve-3d; }
@media (hover: hover) and (pointer: fine) {
  .tilt:hover { transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* subtle contrast tweaks for light mode */
:root[data-theme="light"] .contact-card { background:#fafafa; color:#0b0b0b; }
:root[data-theme="light"] .btn.ghost { color:var(--fg); border-color:#ddd; }

.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; border:1px solid var(--line);
  color:#25D366; background:transparent; transition:opacity .2s ease;
}
.icon-btn:hover { opacity:.9; }

.testimonials-wrap { margin-top:1rem; }
.carousel { position:relative; overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
.slides { display:flex; gap:1rem; transition:transform .6s cubic-bezier(.2,.9,.2,1); will-change:transform; scroll-snap-type: x mandatory; }
.slide { min-width:80%; flex:0 0 80%; scroll-snap-align:center; }
/* on larger screens allow full width slides */
@media (min-width:900px) { .slide { min-width:100%; flex:0 0 100%; } }
/* hide native scrollbar visually but keep it accessible */
.carousel::-webkit-scrollbar { height:8px; }
.carousel::-webkit-scrollbar-thumb { background: linear-gradient(90deg,var(--gold), color-mix(in srgb, var(--gold) 60%, transparent)); border-radius:999px; }
/* ensure controls remain usable */
.carousel-controls { position:relative; z-index:2; }
.carousel-controls { display:flex; align-items:center; justify-content:center; gap:.6rem; margin-top:.9rem; }
.carousel-controls button { background:transparent; border:1px solid var(--line); color:var(--fg); width:40px; height:40px; border-radius:10px; }
.dots { display:flex; gap:.45rem; align-items:center; }
.dots button { width:10px; height:10px; border-radius:50%; background:transparent; border:1px solid var(--line); padding:0; }
.dots button[aria-selected="true"] { background:var(--gold); border-color:var(--gold); }
/* small screens */
@media (max-width:700px){ .carousel { padding:1rem; } .slide p{ font-size:.98rem } }

html { scroll-padding-top: 76px; } /* ensures anchored sections are not hidden beneath sticky header */
@media (max-width:860px){ html { scroll-padding-top: 64px; } }