:root { color-scheme:dark; --ink:#050806; --ivory:#eee7da; --gold:#c5a261; --muted:#9ba39c; }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--ink); }
body { min-height:100svh; margin:0; color:var(--ivory); background:linear-gradient(90deg,rgba(3,7,5,.95),rgba(3,7,5,.63)),url('/assets/fortuora-security-entrance-interior-v1.png') center/cover fixed; font-family:"DM Sans",sans-serif; }
body::before { position:fixed; inset:14px; border:1px solid rgba(197,162,97,.12); content:""; pointer-events:none; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid #ddc17e; outline-offset:4px; }
header { min-height:82px; padding:18px clamp(22px,5vw,72px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(4,8,5,.68); backdrop-filter:blur(18px); }
header img { width:clamp(126px,15vw,164px); display:block; }
.language-control { display:flex; gap:3px; }
.language-control button { min-width:44px; min-height:44px; padding:0 9px; border:0; background:transparent; color:#7d867e; font-size:9px; cursor:pointer; }
.language-control button[aria-pressed="true"] { color:#e0c98f; }
main { width:min(1180px,calc(100% - 48px)); min-height:calc(100svh - 82px); margin:auto; padding:clamp(58px,8vw,110px) 0; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr); align-items:center; gap:clamp(42px,8vw,110px); }
.reserved-message small,.credential-panel > small { color:#a88c55; font-size:9px; letter-spacing:.22em; }
.reserved-seal { width:72px; aspect-ratio:1; margin-bottom:34px; display:grid; place-items:center; border:1px solid rgba(215,181,110,.62); border-radius:50%; color:#dfc580; font:italic 30px "Playfair Display",serif; box-shadow:0 0 85px rgba(197,162,97,.13); }
.reserved-message h1 { max-width:740px; margin:18px 0 26px; font:500 clamp(48px,6vw,82px)/.98 "Playfair Display",serif; letter-spacing:-.04em; }
.reserved-message p { max-width:650px; margin:0 0 34px; color:#b0b8b1; font:400 clamp(15px,1.45vw,19px)/1.75 "Playfair Display",serif; }
.reserved-message > a { min-height:56px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #c3a466; background:linear-gradient(110deg,#c9ac72,#97743c); color:#101510; font-size:10px; font-weight:600; letter-spacing:.07em; }
.credential-panel { padding:clamp(30px,4vw,50px); border:1px solid rgba(197,162,97,.22); background:rgba(5,10,7,.88); box-shadow:0 35px 100px rgba(0,0,0,.4); backdrop-filter:blur(22px); }
.credential-panel h2 { margin:14px 0 12px; font:500 clamp(32px,3.5vw,48px)/1.05 "Playfair Display",serif; }
.credential-panel > p { margin:0 0 28px; color:var(--muted); font-size:13px; line-height:1.65; }
form { display:grid; gap:18px; }
label span { display:block; margin-bottom:8px; color:#ccc5b7; font-size:11px; }
input { width:100%; min-height:54px; padding:0 14px; border:1px solid rgba(255,255,255,.15); border-radius:2px; background:rgba(255,255,255,.04); color:var(--ivory); }
form button { min-height:56px; margin-top:4px; border:1px solid rgba(197,162,97,.6); background:rgba(197,162,97,.12); color:#e2cea4; font-size:10px; letter-spacing:.09em; cursor:pointer; }
form button:disabled { opacity:.6; cursor:wait; }
#credentialStatus { min-height:20px; margin:0; color:#d0a39c; font-size:11px; line-height:1.55; }
.credential-panel > em { display:block; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); color:#788078; font:italic 12px "Playfair Display",serif; }
@media (max-width:900px) { main { width:min(100% - 56px,760px); grid-template-columns:1fr; gap:70px; } .reserved-message p { font-size:18px; } .credential-panel { padding:42px; } }
@media (max-width:600px) { body::before { inset:8px; } header { min-height:70px; padding:12px 17px; } header img { width:116px; } main { width:calc(100% - 36px); padding:70px 0 90px; gap:60px; } .reserved-message h1 { font-size:clamp(43px,13vw,61px); } .reserved-message > a { width:100%; text-align:center; } .credential-panel { padding:30px 21px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }