/* staffii-dev.com: dark developer portfolio. Self-contained (no external requests). */
:root {
  --bg:#0b0d12; --bg2:#10131a; --panel:#141824; --line:#232a3a; --text:#eef1f7; --muted:#94a0b5;
  --blue:#3b82f6; --cyan:#22d3ee; --violet:#8b5cf6; --side:240px;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.7 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px; }
.skip { position:absolute; left:-999px; top:8px; background:#fff; color:#000; padding:8px 14px; border-radius:8px; z-index:100; } .skip:focus { left:8px; }

/* ---------- sidebar ---------- */
.side { position:fixed; inset:0 auto 0 0; width:var(--side); background:var(--bg2); border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:20; }
.logoBox { display:block; text-decoration:none; color:inherit; padding:26px 20px 22px; text-align:center; border-bottom:1px solid var(--line); background:radial-gradient(120% 90% at 50% 0%,#12254d 0%,transparent 70%); }
.logoBox img { width:84px; height:84px; filter:drop-shadow(0 6px 22px rgba(59,130,246,.55)); }
.logoBox b { display:block; font-size:21px; letter-spacing:-.01em; margin-top:8px; }
.logoBox small { color:var(--muted); font-size:13px; }
.menu { list-style:none; margin:26px 0 0; padding:0; }
.menu a { display:block; padding:14px 26px; text-decoration:none; color:var(--muted); border-left:3px solid transparent; font-size:15.5px; transition:.15s; }
.menu a:hover, .menu a.on { color:var(--text); background:rgba(59,130,246,.08); border-left-color:var(--blue); }
.sideFoot { margin-top:auto; padding:22px; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
.sideFoot a { display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:9px 14px; border:1px solid var(--line); border-radius:10px; color:var(--text); }
.sideFoot a:hover { border-color:var(--blue); }
.sideFoot svg { width:18px; height:18px; fill:currentColor; }

/* ---------- layout ---------- */
main { margin-left:var(--side); }
.inner { max-width:1000px; margin:0 auto; padding:0 36px; }
section { padding:92px 0 36px; position:relative; }
.eyebrow { font-family:var(--mono); color:var(--cyan); font-size:13px; letter-spacing:.16em; text-transform:uppercase; margin:0 0 12px; }
h2 { font-size:clamp(28px,4.4vw,40px); line-height:1.12; letter-spacing:-.025em; margin:0 0 12px; }
.lead { color:var(--muted); max-width:640px; margin:0 0 34px; font-size:17.5px; }

/* ---------- hero ---------- */
.hero { min-height:min(100vh,900px); display:flex; align-items:center; padding:60px 0; overflow:hidden; }
#art { position:absolute; right:-6%; top:50%; transform:translateY(-50%); width:72%; max-width:900px; aspect-ratio:1/1; opacity:.95; pointer-events:none; }
.tags span { position:absolute; font-family:var(--mono); font-size:13px; color:#2d364b; user-select:none; pointer-events:none; }
.hero .inner { position:relative; z-index:2; width:100%; min-width:0; }
.hello { font-size:clamp(42px,7.4vw,92px); line-height:.98; font-weight:800; letter-spacing:-.045em; margin:0; }
.hello .g { background:linear-gradient(110deg,var(--cyan),var(--blue) 45%,var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.roles { overflow-wrap:anywhere; font-family:var(--mono); letter-spacing:.22em; text-transform:uppercase; font-size:clamp(12px,1.7vw,15px); color:var(--muted); margin:26px 0 38px; }
.btn { display:inline-block; text-decoration:none; font-family:var(--mono); letter-spacing:.2em; text-transform:uppercase; font-size:14px; padding:17px 34px; color:var(--cyan); border:1px solid var(--cyan); background:rgba(34,211,238,.04); transition:.2s; position:relative; }
.btn:hover { background:var(--cyan); color:#04121a; box-shadow:0 0 36px rgba(34,211,238,.35); }
.btn.solid { background:linear-gradient(110deg,var(--blue),var(--violet)); border-color:transparent; color:#fff; } .btn.solid:hover { box-shadow:0 0 36px rgba(99,102,241,.5); color:#fff; background:linear-gradient(110deg,#5b97f8,#a07bf8); }
.scrollDown { position:absolute; left:36px; bottom:26px; font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl; z-index:2; text-decoration:none; }

/* ---------- cards ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:18px; }
.grid.two { grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)); }
.card { background:linear-gradient(180deg,#171c2b,#121622); border:1px solid var(--line); border-radius:18px; padding:28px; transition:.2s; }
.card:hover { border-color:#34406a; transform:translateY(-3px); }
.card h3 { margin:14px 0 8px; font-size:20px; letter-spacing:-.01em; } .card p { margin:0; color:var(--muted); font-size:15.5px; }
.card ul { margin:14px 0 0; padding:0; list-style:none; } .card li { color:var(--muted); font-size:15px; padding:3px 0 3px 22px; position:relative; } .card li::before { content:"›"; position:absolute; left:4px; color:var(--cyan); }
.ico { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(139,92,246,.22)); border:1px solid #2d3a64; }
.ico svg { width:25px; height:25px; stroke:var(--cyan); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- product ---------- */
.product { display:grid; grid-template-columns:200px 1fr; gap:34px; align-items:center; border:1px solid #2b3560; border-radius:24px; padding:38px; background:radial-gradient(110% 120% at 0% 0%,#14234c 0%,#0f1424 55%,#0c0f1a 100%); position:relative; overflow:hidden; }
.product img { width:200px; height:200px; filter:drop-shadow(0 10px 34px rgba(59,130,246,.5)); }
.product h3 { font-size:34px; letter-spacing:-.03em; margin:0 0 4px; } .product .sub { color:var(--cyan); font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 14px; }
.product p { color:#b4bfd4; margin:0 0 22px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; padding:0; list-style:none; } .chips li { font-family:var(--mono); font-size:12.5px; color:var(--text); border:1px solid #33407a; border-radius:99px; padding:5px 13px; background:rgba(59,130,246,.08); }

/* ---------- process ---------- */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; counter-reset:s; }
.step { border-top:2px solid var(--line); padding-top:18px; counter-increment:s; } .step::before { content:"0" counter(s); font-family:var(--mono); color:var(--cyan); font-size:14px; letter-spacing:.14em; }
.step h3 { margin:6px 0 6px; font-size:19px; } .step p { margin:0; color:var(--muted); font-size:15.5px; }
.stack { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; } .stack span { font-family:var(--mono); font-size:13.5px; padding:8px 15px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--panel); }

/* ---------- contact / footer ---------- */
.contact { text-align:center; border:1px solid var(--line); border-radius:26px; padding:70px 24px; background:radial-gradient(70% 120% at 50% 0%,rgba(59,130,246,.18),transparent 70%),var(--bg2); }
.contact h2 { font-size:clamp(30px,5vw,48px); } .contact .lead { margin:0 auto 30px; }
footer { padding:44px 0 56px; color:var(--muted); font-size:14px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
footer a { color:var(--text); }

/* ---------- reveal on scroll ---------- */
.rv { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; } .rv.in { opacity:1; transform:none; }

/* ---------- small screens ---------- */
@media (max-width:900px) {
  :root { --side:0px; }
  .side { position:sticky; top:0; inset:auto; width:100%; flex-direction:row; align-items:center; height:62px; border-right:0; border-bottom:1px solid var(--line); padding:0 16px; }
  .logoBox { padding:0; border:0; background:none; display:flex; align-items:center; gap:10px; text-align:left; } .logoBox img { width:38px; height:38px; } .logoBox b { margin:0; font-size:18px; } .logoBox small { display:none; }
  .menu { display:none; } .sideFoot { margin-left:auto; padding:0; } .sideFoot span { display:none; }
  .roles { letter-spacing:.12em; } .logoBox { display:flex; }
  .scrollDown { display:none; } .inner { padding:0 22px; } #art { width:120%; right:-40%; opacity:.4; } .hero { min-height:88vh; }
  .product { grid-template-columns:1fr; text-align:center; justify-items:center; padding:30px 22px; } .chips { justify-content:center; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .rv { opacity:1; transform:none; transition:none; } .card:hover { transform:none; } }