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

:root { --bg:#050608; --panel:#0a0c0f; --text:#f1f2f4; --muted:#858b94; --line:rgba(255,255,255,.13); --accent:#b5c7ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,Arial,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
::selection { color:#050608; background:#dbe3ff; }

.noise { position:fixed; inset:0; z-index:20; opacity:.035; pointer-events:none; 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.site-header { position:absolute; inset:0 0 auto; z-index:10; height:92px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; }
.brand { font:500 13px/1 DM Mono,monospace; letter-spacing:.18em; }
.brand-dot, h2 span { color:var(--accent); }
.nav-link { font:500 10px/1 DM Mono,monospace; letter-spacing:.2em; padding:13px 0; border-bottom:1px solid var(--accent); }

.hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate; }
.hero-image { position:absolute; inset:-6%; z-index:-3; background:url('assets/hero-bg.png') 62% 50%/cover no-repeat; transform:scale(1.04); animation:heroDrift 18s ease-in-out infinite alternate; }
.hero-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(3,4,6,.93) 0%,rgba(3,4,6,.68) 36%,rgba(3,4,6,.12) 69%,rgba(3,4,6,.45) 100%),linear-gradient(0deg,var(--bg) 0%,transparent 20%); }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.12; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.025) 3px 4px); }
.hero-content { width:min(760px,82vw); margin-left:clamp(24px,11vw,170px); padding-top:46px; }
.eyebrow { margin:0 0 26px; display:flex; align-items:center; gap:12px; color:#aeb3bc; font:400 10px/1.4 DM Mono,monospace; letter-spacing:.24em; }
.eyebrow span { width:28px; height:1px; background:var(--accent); box-shadow:0 0 12px var(--accent); }
h1 { margin:0; max-width:780px; font-size:clamp(56px,8.2vw,128px); line-height:.85; letter-spacing:-.065em; font-weight:800; text-transform:uppercase; }
h1 span { color:transparent; -webkit-text-stroke:1px rgba(241,242,244,.64); }
.intro { margin:34px 0 0 4px; color:#aaaeb5; font-size:clamp(13px,1.2vw,16px); line-height:1.75; }
.scroll-cue { position:absolute; left:clamp(24px,5vw,76px); bottom:38px; display:flex; align-items:center; gap:18px; color:#969ba4; font:400 9px/1 DM Mono,monospace; letter-spacing:.18em; }
.scroll-cue i { position:relative; width:56px; height:1px; overflow:hidden; background:rgba(255,255,255,.2); }
.scroll-cue i::after { content:""; position:absolute; inset:0; background:var(--text); transform:translateX(-100%); animation:scan 2.2s ease-in-out infinite; }
.coordinates { position:absolute; right:clamp(24px,5vw,76px); bottom:36px; color:#737983; text-align:right; font:300 9px/1.6 DM Mono,monospace; letter-spacing:.14em; }

.connect { min-height:92vh; padding:clamp(100px,13vw,190px) clamp(24px,8vw,120px); background:radial-gradient(circle at 85% 20%,rgba(103,122,180,.08),transparent 30%),var(--bg); }
.section-heading { margin-bottom:70px; }
.section-heading .eyebrow { margin-bottom:18px; }
h2 { margin:0; font-size:clamp(54px,8vw,110px); line-height:1; letter-spacing:-.06em; }
.section-heading > p:last-child { color:var(--muted); margin:20px 0 0; }
.social-grid { border-top:1px solid var(--line); }
.social-card { position:relative; width:100%; min-height:142px; padding:28px 10px; border:0; border-bottom:1px solid var(--line); background:transparent; cursor:pointer; display:grid; grid-template-columns:55px 72px 1fr auto; align-items:center; text-align:left; transition:background .35s ease,padding .35s ease; }
.social-card::before { content:""; position:absolute; inset:0; transform:scaleX(0); transform-origin:right; background:rgba(255,255,255,.035); transition:transform .45s cubic-bezier(.77,0,.18,1); }
.social-card:hover::before, .social-card:focus-visible::before { transform:scaleX(1); transform-origin:left; }
.social-card:hover, .social-card:focus-visible { padding-left:28px; outline:0; }
.card-index { z-index:1; color:#60656d; font:400 9px DM Mono,monospace; }
.card-icon { z-index:1; width:42px; height:42px; border:1px solid #3d424a; display:grid; place-items:center; font:500 13px DM Mono,monospace; transition:border-color .3s,box-shadow .3s; }
.social-card:hover .card-icon,.social-card:focus-visible .card-icon { border-color:var(--accent); box-shadow:0 0 25px rgba(181,199,255,.12); }
.card-body { z-index:1; display:grid; gap:8px; }
.card-body small { color:#757b84; font:400 9px DM Mono,monospace; letter-spacing:.2em; }
.card-body strong { font-size:clamp(18px,2.2vw,30px); letter-spacing:-.035em; font-weight:500; }
.card-action { z-index:1; color:#777d86; font:400 9px DM Mono,monospace; letter-spacing:.16em; }
.card-action b { display:inline-block; margin-left:12px; color:var(--text); font-size:17px; font-weight:300; transition:transform .3s; }
.social-card:hover .card-action b { transform:translate(4px,-4px); }
footer { min-height:110px; padding:0 clamp(24px,8vw,120px); border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:#5f646c; font:400 9px DM Mono,monospace; letter-spacing:.15em; }
.status { display:flex; align-items:center; gap:9px; }.status i { width:6px;height:6px;border-radius:50%;background:#9de0b3;box-shadow:0 0 12px #9de0b3; }
.toast { position:fixed; z-index:30; left:50%; bottom:28px; padding:12px 18px; background:#e9edf7; color:#08090b; font:500 10px DM Mono,monospace; letter-spacing:.08em; transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:.3s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(25px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:none; }
@keyframes heroDrift { to { transform:scale(1.08) translate3d(-1.2%,.8%,0); } }
@keyframes scan { 50%,100% { transform:translateX(100%); } }
@media (max-width:700px) {
  .site-header { height:74px; }.nav-link { display:none; }
  .hero { min-height:100svh; align-items:flex-end; padding-bottom:28vh; }
  .hero-image { background-position:66% center; }.hero-shade { background:linear-gradient(0deg,rgba(3,4,6,.96) 0%,rgba(3,4,6,.34) 62%,rgba(3,4,6,.55) 100%); }
  .hero-content { margin-left:24px; width:calc(100vw - 48px); }.intro { margin-top:24px; }
  h1 { font-size:clamp(42px,12vw,50px); letter-spacing:-.07em; }
  .coordinates { display:none; }.scroll-cue { bottom:28px; }
  .connect { padding-left:24px;padding-right:24px; }.section-heading { margin-bottom:46px; }
  .social-card { min-height:124px; grid-template-columns:38px 55px 1fr; }.card-action { display:none; }.social-card:hover { padding-left:16px; }
  footer { flex-direction:column;align-items:flex-start;justify-content:center;gap:12px; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.hero-image,.scroll-cue i::after{animation:none}.reveal{opacity:1;transform:none;transition:none}.social-card,.social-card::before,.card-action b{transition:none} }