:root { --ink: #06090d; --glass: #f4f7f8; --muted: rgba(229, 236, 241, 0.64); --line: rgba(236, 244, 248, 0.2); }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--ink); }
body { color: var(--glass); font-family: "Manrope", sans-serif; font-weight: 600; background: radial-gradient(circle at 74% 24%, rgba(224, 240, 248, 0.13), transparent 26rem), radial-gradient(circle at 13% 87%, rgba(255, 255, 255, 0.06), transparent 31rem), linear-gradient(135deg, #030405, #10151b 52%, #040506); }
body::before { position: fixed; inset: 0; z-index: 0; opacity: 0.3; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 58px 58px; content: ""; pointer-events: none; }
.availability-page { position: relative; z-index: 1; display: grid; width: min(1440px, 100%); min-height: 100vh; margin: 0 auto; padding: clamp(1.1rem, 3vw, 3rem); grid-template-rows: auto 1fr auto; }
.availability-header, .availability-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.availability-brand { display: block; width: min(210px, 38vw); }.availability-brand img { display:block; width:100%; height:auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.5)); }
.home-link, .availability-footer { color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-decoration: none; }.home-link { padding:.7rem .9rem; background:rgba(255,255,255,.07); color:var(--glass); backdrop-filter:blur(12px); }.home-link:hover { background:rgba(255,255,255,.15); }
.availability-content { padding: clamp(4rem, 9vh, 8rem) 0 clamp(2rem, 7vh, 5rem); }.eyebrow { display:flex; align-items:center; gap:.6rem; margin:0 0 1.2rem; color:rgba(245,250,253,.75); font-size:.62rem; font-weight:800; letter-spacing:.15em; }.eyebrow span { width:.45rem; height:.45rem; border-radius:50%; background:#f4fbff; box-shadow:0 0 0 .35rem rgba(244,251,255,.07); }
.availability-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(300px,.7fr); gap:clamp(2rem,9vw,11rem); align-items:center; }.availability-grid h1 { max-width:11ch; margin:0; background:linear-gradient(180deg,#fff 0%,#e5ebee 42%,#9ba7af 70%,#f5f7f8 100%); -webkit-background-clip:text; background-clip:text; color:transparent; font-family:"Archivo Black",sans-serif; font-size:clamp(3.5rem,8.5vw,8.8rem); letter-spacing:-.08em; line-height:.79; }.availability-copy { max-width:36rem; margin:1.7rem 0 0; color:var(--muted); font-size:clamp(.96rem,1.6vw,1.13rem); font-weight:600; line-height:1.7; }
.availability-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }.availability-link { display:flex; min-width:176px; justify-content:space-between; gap:1rem; padding:.9rem 1rem; color:#071018; background:#f4f8fa; font-size:.63rem; font-weight:800; letter-spacing:.13em; text-decoration:none; }.availability-link:hover { background:#dfe8ed; }.availability-link.subtle { color:#ecf3f7; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); }.availability-link.subtle:hover { background:rgba(255,255,255,.16); }
.lockbox { position:relative; display:grid; min-height:min(470px,50vw); overflow:hidden; border:1px solid var(--line); place-content:center; text-align:center; background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 55%,rgba(0,0,0,.18)); box-shadow:inset 0 1px rgba(255,255,255,.2),0 2rem 6rem rgba(0,0,0,.28); backdrop-filter:blur(24px) saturate(115%); }.lockbox p,.lockbox strong,.lockbox small { position:relative; z-index:1; }.lockbox p { margin:1.6rem 0 .7rem; color:rgba(231,242,248,.62); font-size:.54rem; letter-spacing:.14em; }.lockbox strong { color:#f5f9fb; font-family:"Archivo",sans-serif; font-size:clamp(1.3rem,2.4vw,2rem); letter-spacing:-.05em; line-height:.92; }.lockbox small { margin-top:.85rem; color:rgba(226,239,247,.55); font-size:.52rem; font-weight:800; letter-spacing:.12em; }.lockbox-symbol { position:relative; z-index:1; width:6.7rem; height:5.1rem; margin:auto; border:2px solid rgba(244,250,252,.9); border-radius:.5rem; box-shadow:inset 0 0 40px rgba(255,255,255,.1),0 0 42px rgba(226,244,255,.12); }.lockbox-symbol::before { position:absolute; right:1.25rem; bottom:calc(100% - 2px); left:1.25rem; height:3rem; border:2px solid rgba(244,250,252,.9); border-bottom:0; border-radius:3rem 3rem 0 0; content:""; }.lockbox-symbol span { position:absolute; top:1.45rem; left:50%; width:.58rem; height:1.55rem; border-radius:1rem; background:#f4fafc; transform:translateX(-50%); }.lockbox-orbit { position:absolute; top:50%; left:50%; border:1px solid rgba(236,246,251,.21); border-radius:50%; transform:translate(-50%,-50%); }.orbit-one { width:118%; aspect-ratio:1; }.orbit-two { width:74%; aspect-ratio:1; transform:translate(-50%,-50%) rotate(64deg); border-radius:38%; }.availability-footer { color:rgba(230,239,244,.47); line-height:1.5; }.availability-footer span:last-child { max-width:24rem; text-align:right; }
@media (max-width:760px) { .availability-grid { grid-template-columns:1fr; }.lockbox { min-height:330px; max-width:500px; }.availability-footer { align-items:flex-start; flex-direction:column; }.availability-footer span:last-child { text-align:left; }.availability-content { padding-top:4.5rem; } }
@media (max-width:480px) { .availability-page { padding:1rem; }.availability-grid h1 { font-size:clamp(3.15rem,16vw,5rem); }.availability-actions { flex-direction:column; }.availability-link { width:100%; }.lockbox { min-height:290px; } }