/* ── PORTFOLIO V4 — DESIGN SYSTEM ── */
:root {
  --accent:        #c8f542;
  --accent-rgb:    200,245,66;
  --accent-dim:    rgba(200,245,66,.09);
  --accent-border: rgba(200,245,66,.25);
  --bg:            #080808;
  --fg:            #f0ece4;
  --muted:         #555;
  --line:          rgba(255,255,255,.07);
  --line2:         rgba(255,255,255,.12);
  --font-head:     'Syne', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --br:            2px;
  --ease:          cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-weight:300;
  cursor:none; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Noise layer */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  opacity:.06;
}

/* ── CANVAS ── */
#canvas-bg { position:fixed;inset:0;z-index:0;opacity:.25; }

/* ── CUSTOM CURSOR ── */
#cur { position:fixed;width:10px;height:10px;background:var(--fg);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease);mix-blend-mode:difference; }
#cur-ring { position:fixed;width:38px;height:38px;border:1px solid rgba(240,236,228,.28);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:opacity .3s; }
body:has(a:hover) #cur, body:has(button:hover) #cur { width:42px;height:42px; }
body:has(a:hover) #cur-ring, body:has(button:hover) #cur-ring { opacity:0; }

/* ── WRAPPER ── */
.pf-wrap { position:relative;z-index:2; }

/* ── NAV ── */
nav#pf-nav {
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 48px;
  transition:padding .35s var(--ease),background .35s,border-color .35s;
}
nav#pf-nav.scrolled {
  padding:14px 48px;
  background:rgba(8,8,8,.9);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);
}
.nav-logo {
  font-family:var(--font-head);font-weight:800;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg);text-decoration:none;
}
.nav-links { display:flex;gap:28px;list-style:none; }
.nav-links a {
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg);text-decoration:none;opacity:.38;transition:opacity .2s;
}
.nav-links a:hover,.nav-links a.active { opacity:1; }
.nav-cta {
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bg);background:var(--fg);padding:8px 18px;
  text-decoration:none;border-radius:var(--br);font-weight:500;transition:opacity .2s;
}
.nav-cta:hover { opacity:.8; }

/* ── MARQUEE ── */
.marquee-wrap {
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;overflow:hidden;white-space:nowrap;
}
.marquee-track { display:inline-flex;animation:marquee var(--mspeed,18s) linear infinite; }
.marquee-item { font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:0 28px; }
.marquee-item .dot { display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--accent);margin-right:28px;vertical-align:middle; }

/* ── REVEAL ── */
.reveal { opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease); }
.reveal.in { opacity:1;transform:none; }
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ── SECTION HEAD ── */
.sec-head {
  display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--line);margin-bottom:40px;
}
.sec-num   { font-size:10px;letter-spacing:.2em;color:var(--muted); }
.sec-title { font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; }
.sec-link  { font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s; }
.sec-link:hover { color:var(--fg); }

/* ── PAGE HERO ── */
.pg-hero { padding:148px 48px 68px;border-bottom:1px solid var(--line); }
.pg-tag {
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.pg-tag::before { content:'';width:24px;height:1px;background:var(--muted);flex-shrink:0; }
.pg-title {
  font-family:var(--font-head);font-size:clamp(48px,7.5vw,108px);
  font-weight:800;letter-spacing:-.03em;line-height:.92;
}
.pg-title .acc { color:var(--accent); }

/* ── SKILL BARS ── */
.sk-bar-wrap { width:120px;height:1px;background:rgba(255,255,255,.1);position:relative;overflow:hidden; }
.sk-bar { height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease); }
.sk-bar.in { transform:scaleX(1); }

/* ── BUTTONS ── */
.btn-pr {
  display:inline-block;background:var(--accent);color:var(--bg);
  font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:13px 30px;text-decoration:none;border:none;border-radius:var(--br);cursor:none;
  transition:opacity .2s,transform .2s;
}
.btn-pr:hover { opacity:.82;transform:translateY(-2px); }
.btn-ol {
  display:inline-block;background:transparent;color:var(--fg);
  font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 30px;text-decoration:none;border:1px solid var(--line2);border-radius:var(--br);cursor:none;
  transition:border-color .2s;
}
.btn-ol:hover { border-color:var(--fg); }

/* ── CONTACT FORM ── */
.frm-row { position:relative;border-bottom:1px solid var(--line2);padding:14px 0; }
.frm-row input,.frm-row textarea { width:100%;background:transparent;border:none;outline:none;font-family:var(--font-body);font-size:14px;font-weight:300;color:var(--fg);caret-color:var(--accent); }
.frm-row textarea { resize:none;height:100px; }
.frm-row label { position:absolute;top:14px;left:0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:transform .2s,font-size .2s,color .2s;pointer-events:none; }
.frm-row input:focus~label,.frm-row input:not(:placeholder-shown)~label,
.frm-row textarea:focus~label,.frm-row textarea:not(:placeholder-shown)~label {
  transform:translateY(-14px);font-size:9px;color:var(--accent);
}

/* ── FOOTER ── */
footer#pf-foot {
  padding:24px 48px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;
}
.foot-copy { font-size:11px;color:var(--muted); }
.foot-links { display:flex;gap:20px; }
.foot-links a { font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s; }
.foot-links a:hover { color:var(--fg); }

/* ── KEYFRAMES ── */
@keyframes marquee  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes scanIn   { 0%{left:-100%} 50%{left:100%} 100%{left:100%} }