/* --- Variables --- */
:root { --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); --card-cover-bg: linear-gradient(135deg, #bb1b3b 0%, #764ba2 100%); --card-bottom-bg: #ffffff; --text-main: #333; --text-light: #fff; --accent: #2d023b; --muted: #2a0c32; --card-width: 300px; --card-height: 420px; }

/* --- Global Resets --- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
html, body { height: 100%; margin: 0; }
body { font-family: 'Inter', system-ui, sans-serif; background: #1d032a; color: var(--text-main); display: flex; flex-direction: column; background-attachment: fixed; }
body::before { content: ""; width: 100%; aspect-ratio: 2; position: absolute; left: 0; top: 0; background: url(../images/hidden-spy-bg-01.jpg) center bottom / cover; z-index: -1; }

/* --- Layout --- */
main { flex: 1; display: flex; flex-direction: column; }
.logo img { width: 100px; }

/* --- Typography --- */
h1 { margin: 0 0 -20px 0; font-size: 60px; color: #b52c47; }
h2 { color: var(--text-light); }

/* --- Utilities --- */
.hidden { display: none !important; }

/* --- Responsive --- */
@media only screen and (max-width: 820px) { h1 { font-size: 38px; margin-bottom: -10px; } }