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

:root{
  --bg:#0A0A0A;
  --bg-2:#111111;
  --bg-3:#161616;
  --fg:#EDEDED;
  --fg-2:#B8B8B8;
  --muted:#7A7A7A;
  --border:rgba(255,255,255,0.08);
  --border-2:rgba(255,255,255,0.14);
  --accent:oklch(0.74 0.2 295);
  --accent-2:oklch(0.82 0.16 295);
  --accent-dim:oklch(0.74 0.2 295 / 0.18);
  --accent-glow:oklch(0.74 0.2 295 / 0.45);
  --danger:oklch(0.7 0.2 25);
  --ok:oklch(0.78 0.16 155);
  --font:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif','Times New Roman',Georgia,serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font-family:var(--font);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease}
.nav.scrolled{background:rgba(10,10,10,0.7);backdrop-filter:blur(14px);border-bottom-color:var(--border)}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:60px;max-width:1200px;margin:0 auto;padding:0 24px;gap:24px;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-0.01em;font-size:15px;justify-self:start}
.brand img{width:22px;height:22px}
.nav-center{display:flex;gap:6px;justify-self:center;align-items:center}
.nav-center > a,.nav-center > .menu-trig{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--fg-2);padding:8px 12px;border-radius:8px;cursor:pointer;transition:color .15s,background .15s;user-select:none}
.nav-center > a:hover,.nav-center > .menu-trig:hover,.nav-center > .menu-trig.open{color:var(--fg);background:rgba(255,255,255,0.04)}
.nav-center > a.active{color:var(--fg)}
.menu-trig svg{width:10px;height:10px;opacity:0.5;transition:transform .2s}
.menu-trig.open svg{transform:rotate(180deg);opacity:1}
.nav-cta{display:flex;gap:8px;align-items:center;justify-self:end}

/* dropdown popover (instant appear, content slides) */
.dropdown{position:absolute;top:54px;left:0;background:rgba(15,15,15,0.96);backdrop-filter:blur(20px);border:1px solid var(--border-2);border-radius:14px;padding:18px;box-shadow:0 24px 60px -20px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.02) inset;visibility:hidden;opacity:0;pointer-events:none;z-index:60;overflow:hidden;transition:left .35s cubic-bezier(.4,.0,.2,1),width .35s cubic-bezier(.4,.0,.2,1),opacity .18s ease}
.dropdown.show{visibility:visible;opacity:1;pointer-events:auto}
.dropdown-pane{display:none;grid-template-columns:auto auto auto;gap:24px;min-width:max-content}
.dropdown-pane.active{display:grid}
.dropdown-pane.slide-r{animation:slideR .26s cubic-bezier(.4,.0,.2,1)}
.dropdown-pane.slide-l{animation:slideL .26s cubic-bezier(.4,.0,.2,1)}
.dropdown-pane.popup{animation:popup .24s cubic-bezier(.2,.7,.2,1)}
@keyframes slideR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes slideL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes popup{from{opacity:0;transform:translateY(-8px) scale(0.97)}to{opacity:1;transform:none}}
.dd-col{display:flex;flex-direction:column;gap:2px;min-width:140px}
.dd-col a{display:block;padding:8px 12px;border-radius:7px;font-size:14px;color:var(--fg-2);transition:color .15s,background .15s;white-space:nowrap}
.dd-col a:hover{color:var(--fg);background:rgba(255,255,255,0.06)}
.dd-col a .sub{display:block;font-size:11px;color:var(--muted);margin-top:2px;font-family:var(--font)}
.dd-card{width:220px;background:linear-gradient(160deg,var(--bg-2),var(--bg-3));border:1px solid var(--border);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;cursor:pointer;transition:border-color .2s}
.dd-card:hover{border-color:var(--border-2)}
.dd-card::after{content:"";position:absolute;width:240px;height:240px;background:var(--accent);opacity:0.08;filter:blur(60px);bottom:-100px;right:-80px;border-radius:50%}
.dd-card h5{font-size:14px;font-weight:500;color:var(--fg);letter-spacing:-0.01em;position:relative;z-index:1}
.dd-card p{font-size:12px;color:var(--muted);line-height:1.5;position:relative;z-index:1}
.dd-card .mini{margin-top:auto;font-family:var(--mono);font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:0.1em;position:relative;z-index:1}
@media(max-width:880px){.nav-center{display:none}.nav-inner{grid-template-columns:1fr auto;gap:12px}}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:8px;font-size:14px;font-weight:500;transition:all .15s;border:1px solid transparent;white-space:nowrap}
/* primary button now dark/pill (Resend-style) */
.btn-primary{background:#1a1a1a;color:#fff;border:1px solid #2a2a2a;box-shadow:0 1px 0 rgba(255,255,255,0.05) inset,0 1px 4px rgba(0,0,0,0.4)}
.btn-primary:hover{background:#222;border-color:#333;transform:translateY(-1px)}
.btn-ghost{color:var(--fg-2);border-color:var(--border)}
.btn-ghost:hover{color:var(--fg);border-color:var(--border-2);background:var(--bg-2)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{filter:brightness(1.1);box-shadow:0 8px 36px -8px var(--accent-glow)}
.btn-lg{height:44px;padding:0 20px;font-size:15px;border-radius:10px}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- TYPOGRAPHY ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.12em}
h1,h2,h3,h4{font-weight:400;letter-spacing:-0.02em;line-height:1.04;color:var(--fg)}
h1{font-family:var(--serif);font-size:clamp(48px,8vw,108px);font-weight:400;letter-spacing:-0.025em;line-height:0.96}
h2{font-family:var(--font);font-size:clamp(34px,4.6vw,56px);letter-spacing:-0.02em;font-weight:400}
h3{font-size:22px;letter-spacing:-0.015em;font-weight:500;font-family:var(--font)}
.lead{font-size:clamp(16px,1.4vw,19px);color:var(--fg-2);max-width:560px;line-height:1.55}
.mono{font-family:var(--mono)}

/* ---------- SECTION ---------- */
.section{padding:120px 0;border-top:1px solid var(--border)}
.section-head{display:flex;flex-direction:column;gap:16px;margin-bottom:64px;max-width:680px}

/* ---------- CARDS ---------- */
.card{background:var(--bg-2);border:1px solid var(--border);border-radius:14px;padding:28px;transition:border-color .2s,background .2s}
.card:hover{border-color:var(--border-2);background:var(--bg-3)}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--border);padding:64px 0 40px;color:var(--muted);font-size:14px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer h5{font-size:12px;text-transform:uppercase;letter-spacing:0.12em;color:var(--fg);font-weight:500;margin-bottom:16px;font-family:var(--mono)}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer a:hover{color:var(--fg)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--border);font-size:13px}
@media(max-width:780px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}

/* ---------- UTILS ---------- */
.glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;opacity:0.5}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.04;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* fade in on scroll */
.fade{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.fade.in{opacity:1;transform:none}