@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#090909;
  --fg:#f4f2ee;
  --muted:#999792;
  --line:rgba(255,255,255,.16);
  --accent:#d8ff3e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:Inter,Arial,sans-serif;overflow-x:hidden
}
a{color:inherit;text-decoration:none}
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")
}
.topbar{
  position:absolute;z-index:10;top:0;left:0;width:100%;
  display:flex;justify-content:space-between;align-items:center;padding:28px 5vw
}
.brand{font-size:14px;font-weight:800;letter-spacing:.12em}
.menu{display:none;background:none;border:0;padding:8px}
.menu span{display:block;width:26px;height:2px;background:#fff;margin:6px}
.hero{
  min-height:100vh;position:relative;display:flex;align-items:flex-end;
  padding:10vh 8vw 10vh;overflow:hidden
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 70% 35%,rgba(216,255,62,.12),transparent 28%),
    radial-gradient(circle at 55% 70%,rgba(255,255,255,.08),transparent 30%),
    linear-gradient(125deg,#111 0%,#070707 65%,#151515 100%);
}
.hero-bg:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.6),transparent 65%);
}
.hero-content{position:relative;z-index:2;max-width:1000px}
.eyebrow{font-size:11px;letter-spacing:.22em;font-weight:700;color:var(--muted);margin:0 0 22px}
h1,h2{margin:0;line-height:.82;letter-spacing:-.065em;font-size:clamp(76px,14vw,210px);font-weight:900}
h1 em,h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.75)}
.intro{font-size:16px;color:#c5c3bd;margin:36px 0 28px}
.primary{
  display:inline-flex;gap:42px;align-items:center;padding:17px 22px;
  border:1px solid rgba(255,255,255,.35);font-size:12px;font-weight:800;
  letter-spacing:.14em;transition:.3s
}
.primary:hover{background:var(--fg);color:#090909}
.scroll{position:absolute;right:5vw;bottom:8vh;font-size:10px;letter-spacing:.18em;color:var(--muted);z-index:2}
.scroll span{margin-left:12px;color:#fff}
.links-section,.about{padding:14vw 8vw;border-top:1px solid var(--line)}
.section-head{margin-bottom:90px}
.section-head h2,.about h2{font-size:clamp(58px,9vw,130px)}
.link-grid{border-top:1px solid var(--line)}
.link-card{
  display:grid;grid-template-columns:70px 1fr 50px;align-items:center;
  padding:27px 0;border-bottom:1px solid var(--line);transition:.35s
}
.link-card:hover{padding-left:18px;background:rgba(255,255,255,.025)}
.number{font-size:11px;color:var(--muted)}
.label{font-size:clamp(22px,3vw,42px);font-weight:800;letter-spacing:-.04em}
.arrow{font-size:25px;text-align:right;transition:.3s}
.link-card:hover .arrow{color:var(--accent);transform:translate(4px,-4px)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:10vw}
.about-text{max-width:540px;align-self:end;color:#aaa7a1;font-size:18px;line-height:1.7}
footer{
  display:flex;justify-content:space-between;padding:28px 8vw;
  border-top:1px solid var(--line);font-size:9px;letter-spacing:.15em;color:#777
}
@media(max-width:700px){
  .topbar{padding:22px 6vw}.menu{display:block}
  .hero{padding:10vh 6vw 9vh}.scroll{display:none}
  .links-section,.about{padding:25vw 6vw}
  .section-head{margin-bottom:55px}
  .link-card{grid-template-columns:42px 1fr 35px;padding:22px 0}
  .about{display:block}.about-text{margin-top:55px}
  footer{padding:25px 6vw;display:block;line-height:2}
}