@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@400;500&display=swap');

:root {
  --black:    #060608;
  --surface:  #0e0e12;
  --surface2: #16161c;
  --surface3: #1e1e26;
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.13);
  --text:     #eeecea;
  --muted:    #7a7885;
  --faint:    #2e2e38;
  --accent:   #c8f135;
  --accent-dim:rgba(200,241,53,0.1);
  --s:#5b9cf6;--s-bg:rgba(91,156,246,0.08);
  --c:#4ade80;--c-bg:rgba(74,222,128,0.08);
  --a:#c084fc;--a-bg:rgba(192,132,252,0.08);
  --l:#fb923c;--l-bg:rgba(251,146,60,0.08);
  --e:#f87171;--e-bg:rgba(248,113,113,0.08);
  --radius:10px;--radius-lg:16px;
  --display:'Syne',sans-serif;
  --serif:'Instrument Serif',serif;
  --mono:'DM Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--text);font-family:var(--display);line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:var(--display);cursor:pointer;border:none;background:none}
::selection{background:var(--accent);color:#000}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--faint);border-radius:2px}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;background:rgba(6,6,8,0.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-mark{width:32px;height:32px;background:var(--accent);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#000;font-family:var(--display)}
.nav-name{font-size:15px;font-weight:700;letter-spacing:-0.01em}
.nav-links{display:flex;gap:2px;list-style:none}
.nav-links a{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:500;color:var(--muted);transition:color 0.15s,background 0.15s}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:rgba(255,255,255,0.05)}
.nav-cta{background:var(--accent);color:#000;padding:9px 22px;border-radius:8px;font-size:13px;font-weight:700;transition:opacity 0.15s,transform 0.15s;display:inline-block}
.nav-cta:hover{opacity:0.88;transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer}
.hamburger span{width:22px;height:2px;background:var(--text);border-radius:1px;transition:all 0.2s}
.drawer{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--black);z-index:99;padding:32px 24px;flex-direction:column;gap:8px;border-top:1px solid var(--border)}
.drawer.open{display:flex}
.drawer a{padding:14px 16px;font-size:16px;font-weight:500;color:var(--muted);border-radius:10px;border:1px solid var(--border);transition:all 0.15s}
.drawer a:hover,.drawer a.active{color:var(--text);border-color:var(--border2);background:var(--surface)}
.drawer .nav-cta{display:flex;justify-content:center;margin-top:12px;padding:14px;font-size:15px}

/* LAYOUT */
.container{max-width:1080px;margin:0 auto;padding:0 40px}
section{padding:120px 0}
hr.div{border:none;border-top:1px solid var(--border)}

/* TYPE */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:blink 2s infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.display{font-family:var(--serif);font-size:clamp(44px,7vw,88px);font-weight:400;line-height:1.05;letter-spacing:-0.02em}
.display em{font-style:italic;color:var(--accent)}
.sec-label{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.sec-title{font-family:var(--serif);font-size:clamp(32px,4.5vw,56px);font-weight:400;line-height:1.1;letter-spacing:-0.02em;margin-bottom:20px}
.sec-sub{font-size:17px;color:var(--muted);line-height:1.7;max-width:560px;margin-bottom:64px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:10px;font-size:15px;font-weight:700;transition:all 0.15s;letter-spacing:0.01em}
.btn-accent{background:var(--accent);color:#000}
.btn-accent:hover{opacity:0.88;transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--border2);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);background:var(--accent-dim)}
.btn-sm{padding:9px 20px;font-size:13px}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:60px 0}
.foot-inner{max-width:1080px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start}
.foot-brand{font-family:var(--serif);font-size:22px;color:var(--accent);margin-bottom:8px}
.foot-desc{font-size:13px;color:var(--muted);line-height:1.65;max-width:300px}
.foot-nav{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.foot-nav a{font-size:13px;color:var(--muted);transition:color 0.15s}
.foot-nav a:hover{color:var(--text)}
.foot-bottom{max-width:1080px;margin:28px auto 0;padding:24px 40px 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.foot-copy{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:0.06em}
.foot-tag{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--muted)}

/* RESPONSIVE */
@media(max-width:768px){
  nav{padding:0 20px}
  .nav-links,.nav-cta{display:none}
  .hamburger{display:flex}
  .container{padding:0 20px}
  section{padding:80px 0}
  .foot-inner{grid-template-columns:1fr}
  .foot-nav{align-items:flex-start}
  .foot-bottom{flex-direction:column;gap:8px}
}
@media(max-width:480px){
  nav{padding:0 16px}
  .container{padding:0 16px}
}