:root { --ink:#f4f6f7; --line:rgba(210,226,232,.19); --panel:rgba(7,18,23,.92); --cyan:#74e1e0; --gold:#e0c579; }
* { box-sizing:border-box; }
html,body { margin:0;min-height:100%; }
body { color:var(--ink);background:#071117;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
a { color:inherit; }
button { font:inherit; }
.contactPage { min-height:100svh;position:relative;overflow:hidden;background:#03080c url('moon-earth-rover-background.png') center center/cover no-repeat; }
.contactPage:before { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,5,12,.68) 0%,rgba(2,5,12,.3) 48%,rgba(2,5,12,.08) 100%); }
.contactPage:after { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 72% 42%,transparent 0%,rgba(2,8,12,.08) 52%,rgba(2,7,10,.48) 100%); }
.topbar { height:64px;width:min(1170px,calc(100% - 40px));margin:auto;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;font-size:12px; }
.brand { text-decoration:none;font-weight:800;letter-spacing:-.03em; }
.brand:after { content:"";display:inline-block;width:5px;height:5px;background:var(--gold);border-radius:50%;margin-left:3px;vertical-align:top; }
.topbar div { display:flex;gap:24px; }
.topbar div a { text-decoration:none;color:#d9e1e4; }
.topbar div a:hover { color:var(--cyan); }
.stage { width:min(1170px,calc(100% - 40px));min-height:calc(100svh - 64px);margin:auto;position:relative;z-index:1;display:flex;align-items:center;padding:44px 0 80px; }
.identityCard { width:560px;padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 28px 90px rgba(0,0,0,.35);backdrop-filter:blur(16px); }
.identityMark { width:70px;height:70px;border-radius:50%;display:grid;place-items:center;margin-bottom:22px;border:2px solid var(--cyan);box-shadow:0 0 0 3px rgba(224,197,121,.7);background:linear-gradient(145deg,#15303a,#091419);overflow:hidden; }
.identityMark img { width:100%;height:100%;display:block;object-fit:cover;object-position:50% 24%;transform:scale(1.28) translateX(4%);transform-origin:50% 24%; }
.availability { display:flex;align-items:center;gap:8px;margin:0 0 14px;color:#99a8ae;text-transform:uppercase;letter-spacing:.1em;font:10px ui-monospace,SFMono-Regular,Consolas,monospace; }
.availability span { width:7px;height:7px;background:var(--cyan);border-radius:50%;box-shadow:0 0 10px var(--cyan); }
h1 { font-size:36px;line-height:1.05;letter-spacing:-.045em;margin:0 0 27px;font-weight:760; }
.primaryActions { display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px; }
.primaryActions a { height:44px;padding:0 16px;border-radius:7px;display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:14px;font-weight:680;border:1px solid var(--line); }
.saveButton { color:#071217;background:linear-gradient(120deg,#dffafa 0%,#8ef1e9 65%,#e4c578 100%);border-color:rgba(255,255,255,.4)!important; }
.darkButton { background:rgba(255,255,255,.065); }
.darkButton:hover { background:rgba(255,255,255,.11); }
.contactGrid { display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin:0; }
.contactGrid div { border-top:1px solid var(--line);padding:15px 0 14px;min-width:0; }
.contactGrid dt { color:#93a2a7;text-transform:uppercase;letter-spacing:.08em;font:700 10px ui-monospace,SFMono-Regular,Consolas,monospace;margin-bottom:7px; }
.contactGrid dd { margin:0;font-size:14px;color:#eef1f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.contactGrid a { text-underline-offset:3px;text-decoration-color:rgba(116,225,224,.65); }
.contactGrid a:hover { color:var(--cyan); }
.secondaryActions { display:flex;gap:8px;align-items:center;margin-top:8px; }
.secondaryActions a,.secondaryActions button { color:#e5eaec;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:6px;padding:9px 12px;font-size:11px;font-weight:700;text-decoration:none;cursor:pointer; }
.secondaryActions a:hover,.secondaryActions button:hover { border-color:rgba(116,225,224,.6);color:var(--cyan); }
.qrCard { position:absolute;right:18%;top:18%;width:248px;padding:18px 18px 17px;background:rgba(7,18,23,.94);border:1px solid var(--line);border-radius:8px;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.35);backdrop-filter:blur(12px); }
.qrCard img { width:100%;aspect-ratio:1;background:white;border-radius:7px;padding:13px;display:block;margin-bottom:14px; }
.qrCard strong,.qrCard span { display:block; }
.qrCard strong { font-size:14px;margin-bottom:5px; }
.qrCard span { font-size:11px;color:#9facb1; }
@media(max-width:900px){.stage{align-items:flex-start;gap:22px;padding-top:50px;flex-direction:column}.identityCard{width:min(560px,100%)}.qrCard{position:static;width:230px;align-self:flex-end;margin-top:-150px;margin-right:18px}}
@media(max-width:680px){.contactPage{overflow:auto;background-position:67% center}.contactPage:before{opacity:.6}.topbar,.stage{width:calc(100% - 28px)}.stage{padding:30px 0 45px}.identityCard{padding:22px}.identityMark{width:58px;height:58px;margin-bottom:18px}h1{font-size:30px}.contactGrid{grid-template-columns:1fr}.contactGrid dd{white-space:normal}.qrCard{width:100%;margin:0;align-self:stretch;display:grid;grid-template-columns:108px 1fr;grid-template-rows:1fr 1fr;column-gap:16px;text-align:left;align-items:end}.qrCard img{width:108px;grid-row:1/3;margin:0;padding:7px}.qrCard strong{align-self:end}.qrCard span{align-self:start}.secondaryActions{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}