:root { color-scheme: dark; --bg:#0b0d12; --surface:rgba(20,24,34,.72); --line:rgba(255,255,255,.11); --muted:#8991a3; --text:#f4f6fb; --cyan:#70e4db; --violet:#8d7aff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body:before { position:fixed; inset:0; z-index:-3; background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:56px 56px; content:""; mask-image:linear-gradient(to bottom,black,transparent 86%); }
.ambient { position:fixed; z-index:-2; width:34rem; height:34rem; border-radius:50%; filter:blur(90px); opacity:.2; pointer-events:none; }
.ambient-one { top:-13rem; right:-9rem; background:var(--violet); }.ambient-two { bottom:-18rem; left:-13rem; background:#22b8b0; }
.shell { width:min(1120px,calc(100% - 48px)); margin:0 auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:27px 0; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); font-size:1.02rem; font-weight:720; letter-spacing:-.03em; text-decoration:none; }.brand-mark { display:grid; width:27px; height:27px; place-items:center; border:1px solid rgba(112,228,219,.65); border-radius:9px; color:var(--cyan); font-weight:800; }
.status,.pill,.type,.label,.locked { color:var(--muted); font-size:.62rem; font-weight:750; letter-spacing:.13em; }.status { display:flex; align-items:center; gap:8px; }.status i,.signal i { width:7px; height:7px; border-radius:50%; background:#e1a861; box-shadow:0 0 12px #e1a861; }
.hero { max-width:720px; padding:112px 0 100px; }.eyebrow,.label { margin:0 0 22px; color:var(--cyan); }.hero h1 { margin:0; font-size:clamp(3.7rem,9vw,7.7rem); font-weight:620; letter-spacing:-.085em; line-height:.88; }.hero h1 em { color:#9da5b7; font-style:normal; }.lede { max-width:500px; margin:32px 0 0; color:var(--muted); font-size:1.08rem; line-height:1.65; }.hero-actions { display:flex; align-items:center; gap:18px; margin-top:39px; }.primary { padding:14px 19px; border:1px solid rgba(112,228,219,.3); border-radius:10px; background:rgba(112,228,219,.08); color:var(--cyan); font:inherit; font-size:.87rem; }.primary:disabled { cursor:not-allowed; opacity:.7; }.note { color:var(--muted); font-size:.74rem; }
.preview { padding:30px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.018)); box-shadow:0 25px 100px rgba(0,0,0,.25); backdrop-filter:blur(18px); }.preview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }.preview h2 { margin:0; font-size:1.55rem; letter-spacing:-.045em; }.pill { padding:8px 10px; border:1px solid rgba(112,228,219,.2); border-radius:999px; color:var(--cyan); white-space:nowrap; }.cards { display:grid; grid-template-columns:1.45fr 1fr; gap:14px; margin-top:30px; }.rental-card,.side-card { min-height:240px; padding:22px; border:1px solid var(--line); border-radius:14px; background:rgba(9,12,18,.65); }.card-top,.card-foot { display:flex; align-items:center; gap:9px; }.product-dot { width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 15px var(--cyan); }.more { margin-left:auto; color:var(--muted); }.rental-card h3 { margin:30px 0 18px; font-size:1.1rem; font-weight:540; }.time { display:flex; align-items:center; gap:9px; }.time strong { font-size:3.5rem; font-weight:500; letter-spacing:-.08em; }.time span { color:var(--muted); font-size:.7rem; line-height:1.25; text-transform:uppercase; }.progress { height:4px; margin:18px 0 19px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.09); }.progress span { display:block; width:68%; height:100%; border-radius:99px; background:var(--cyan); box-shadow:0 0 15px var(--cyan); }.card-foot { justify-content:space-between; color:var(--muted); font-size:.72rem; }.side-card { display:flex; flex-direction:column; }.side-card strong { margin-top:6px; font-size:1.55rem; font-weight:540; letter-spacing:-.05em; }.side-card p { max-width:260px; margin:17px 0 auto; color:var(--muted); line-height:1.55; font-size:.86rem; }.signal { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.62rem; letter-spacing:.1em; }.signal i { background:#778197; box-shadow:none; }
footer { display:flex; justify-content:space-between; padding:28px 0 40px; color:#687082; font-size:.7rem; }.locked { color:#657083; }
@media (max-width:680px) { .shell { width:min(100% - 32px,1120px); }.topbar { padding:20px 0; }.status { font-size:.55rem; }.hero { padding:80px 0 70px; }.hero h1 { font-size:clamp(3.7rem,19vw,6rem); }.lede { font-size:.97rem; }.hero-actions { align-items:flex-start; flex-direction:column; gap:12px; }.preview { padding:18px; }.preview-head { flex-direction:column; }.cards { grid-template-columns:1fr; }.rental-card,.side-card { min-height:220px; } footer { flex-direction:column; gap:8px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }