:root { color-scheme: dark; --background:#05090c; --foreground:#fff; --primary:#00aeef; --primary-foreground:#000; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--background); color:var(--foreground); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; -webkit-tap-highlight-color:transparent; }
.campaign { min-height:100svh; background:#05090c; }
.experience { position:relative; isolation:isolate; width:100%; min-height:100svh; display:flex; flex-direction:column; padding: max(32px,env(safe-area-inset-top)) 24px max(22px,env(safe-area-inset-bottom)); }
.hero { position:absolute; inset:0 0 auto; height:76%; z-index:-3; overflow:hidden; }
.hero img { width:100%; height:100%; object-fit:cover; }
.shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,transparent 22%,transparent 44%,rgba(5,9,12,.20) 53%,#05090c 77%); }
header { text-align:center; }
.logo { display:block; width:228px; max-width:80%; height:auto; margin:auto; }
.connect { margin-top:auto; padding-top: min(48svh,405px); text-align:center; }
h1 { margin:0; font-size:clamp(1.05rem,4.65vw,1.25rem); letter-spacing:.015em; line-height:1.3; font-weight:800; }
h1 span { font-weight:400; }
p { margin:9px 0 23px; font-size:1rem; line-height:1.4; color:#fff; }
nav { display:grid; gap:10px; }
.social { min-height:64px; display:flex; align-items:center; gap:15px; padding:10px 20px; background:#fff; color:#080b0d; border-radius:3px; text-decoration:none; text-align:left; transition:background .15s,transform .15s; }
.social>svg { width:25px; height:25px; flex-shrink:0; }
.social strong { display:block; font-size:1.05rem; line-height:1.25; }
.social small { display:block; margin-top:3px; font-size:.75rem; color:#51565a; }
.arrow { margin-left:auto; width:20px; height:20px; }
.social:hover { background:#d9f5ff; }
.social:active { background:var(--primary); transform:scale(.985); }
a:focus-visible { outline:3px solid var(--primary); outline-offset:5px; }
footer { text-align:center; color:var(--primary); font-size:.75rem; font-weight:700; letter-spacing:.18em; margin-top:20px; }
@media (min-width:601px) {
 .campaign { display:grid; place-items:center; background-image:linear-gradient(#0007,#0009),var(--campaign-image); background-position:center; background-size:cover; background-attachment:fixed; padding:24px; }
 .experience { width:420px; min-height:min(844px,calc(100svh - 48px)); background:#05090c; box-shadow:0 25px 100px #0008; padding-top:32px; }
 .connect { padding-top: min(41svh,335px); }
 .hero img { object-position:59% center !important; }
}
@media (max-height:740px) { .experience { padding-top:max(22px,env(safe-area-inset-top)); padding-bottom:max(14px,env(safe-area-inset-bottom)); } .logo { width:190px; } .connect { padding-top: min(35svh,240px); } p { margin-bottom:16px; } footer { margin-top:9px; } }
@media (max-height:550px) { .connect { padding-top:70px; } .hero { height:100%; } .shade { background:linear-gradient(#0005,#05090ce8 65%); } }
@media (prefers-reduced-motion:reduce) { .social { transition:none; } }

svg { display:block; }
.arrow svg { width:100%; height:100%; }