:root { color-scheme: dark; }
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background: #0a0a0a;
    color: #f5f5f0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: #d4af37; }

.parallax-container { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.ambient-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60vw; height: 60vh; background: radial-gradient(circle, rgba(212,175,55,0.04) 0%, transparent 70%); pointer-events: none; }
.bg-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Playfair Display', serif; font-size: 14vw; font-weight: 700; color: white; opacity: 0.015; pointer-events: none; user-select: none; white-space: nowrap; letter-spacing: -0.04em; }

.panel {
    position: absolute; background-color: #0e0e0e; background-size: cover; background-position: center;
    overflow: hidden; cursor: pointer; will-change: translate; border-radius: 22px;
    backface-visibility: hidden; -webkit-backface-visibility: hidden; isolation: isolate;
    box-shadow: 0 0 0 1.5px #000, 0 0 0 2.5px rgba(255,255,255,0.05), 0 20px 50px rgba(0,0,0,0.6);
    transition: translate 0.1s ease-out, scale 0.5s cubic-bezier(.25,.46,.45,.94), box-shadow 0.5s ease;
    scale: 1;
}
.panel:hover {
    scale: 1.1;
    box-shadow: 0 0 0 1.5px rgba(212,175,55,0.5), 0 0 0 3px rgba(212,175,55,0.12), 0 30px 70px rgba(0,0,0,0.8), 0 0 50px rgba(212,175,55,0.1), 0 0 100px rgba(212,175,55,0.04);
}
.panel::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.88) 12%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.12) 55%, transparent 70%);
    transition: opacity 0.5s ease; border-radius: inherit;
}
.panel:hover::after { opacity: 0.6; }
.panel::before {
    content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: 5; pointer-events: none; border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05); transition: all 0.5s cubic-bezier(.25,.46,.45,.94);
}
.panel:hover::before { top: 14px; left: 14px; right: 14px; bottom: 14px; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(212,175,55,0.3), inset 0 0 24px rgba(212,175,55,0.03); }
.panel-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.6rem; z-index: 3; transform: translateY(10px); opacity: 0; transition: all 0.4s cubic-bezier(.25,.46,.45,.94); }
.panel:hover .panel-label { transform: translateY(0); opacity: 1; }
.panel:focus-visible { outline: 2px solid #d4af37; outline-offset: 4px; }

.deco { cursor: default; pointer-events: none; box-shadow: 0 0 0 1.5px #000, 0 0 0 2.5px rgba(255,255,255,0.03), 0 15px 35px rgba(0,0,0,0.4) !important; }
.deco:hover { scale: 1 !important; box-shadow: 0 0 0 1.5px #000, 0 0 0 2.5px rgba(255,255,255,0.03), 0 15px 35px rgba(0,0,0,0.4) !important; }
.deco-bg { position: absolute; inset: -25px; background-size: cover; background-position: center; filter: blur(3px) brightness(0.18); }
.deco::before, .deco::after { display: none !important; }
.deco .panel-label { display: none; }

.modal-overlay { position: fixed; inset: 0; background: rgba(6,6,6,0.92); backdrop-filter: blur(16px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; display: flex; align-items: center; justify-content: center; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-box { background: #131313; border: 1px solid #222; border-radius: 24px; width: 92%; max-width: 880px; max-height: 88vh; overflow-y: auto; transform: scale(0.95) translateY(12px); transition: transform 0.35s cubic-bezier(.25,.46,.45,.94); position: relative; }
.modal-overlay.active .modal-box { transform: scale(1) translateY(0); }
.close-btn { position: sticky; top: 0; float: right; margin: 1rem; width: 40px; height: 40px; background: rgba(19,19,19,0.8); backdrop-filter: blur(8px); border: 1px solid #2a2a2a; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #555; cursor: pointer; transition: all 0.2s; z-index: 10; }
.close-btn:hover { color: #d4af37; border-color: #d4af37; }
.section-line { width: 36px; height: 3px; background: #d4af37; border-radius: 9px; }
.form-input { background: #0a0a0a; border: 1px solid #222; border-radius: 12px; color: #f5f5f0; padding: 0.7rem 1rem; width: 100%; outline: none; transition: border-color 0.3s; font-family: 'Inter', sans-serif; font-size: 0.875rem; }
.form-input:focus { border-color: #d4af37; }
.calc-option { background: #0a0a0a; border: 1px solid #222; border-radius: 14px; padding: 0.85rem; cursor: pointer; transition: all 0.2s; text-align: center; }
.calc-option:hover, .calc-option.active { border-color: #d4af37; background: rgba(212,175,55,0.04); }
.social-link { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; background: #0a0a0a; border: 1px solid #1e1e1e; border-radius: 16px; transition: all 0.3s ease; text-decoration: none; }
.social-link:hover { border-color: rgba(212,175,55,0.4); transform: translateY(-2px); }
.social-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

@media (max-width: 900px) {
    body { overflow-y: auto; overflow-x: hidden; height: auto; }
    .parallax-container { height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; display: flex; flex-direction: column; align-items: center; padding: 24px 16px 60px; gap: 20px; }
    .ambient-glow, .bg-text { display: none; }
    .panel { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin-left: 0 !important; width: 100% !important; height: 55vw !important; rotate: 0deg !important; translate: none !important; max-height: 320px; }
    .deco { display: none !important; }
    .panel-label { transform: translateY(0) !important; opacity: 1 !important; }
    .panel:hover { scale: 1.02 !important; }
}