:root {
    --bg: #ffffff; --text: #1d1d1f; --subtext: #86868b; --accent: #0071e3;
    --border: rgba(0,0,0,0.1); --glass: rgba(255, 255, 255, 0.72); --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);
}
body.dark {
    --bg: #000000; --text: #f5f5f7; --subtext: #a1a1a6; --accent: #2997ff;
    --border: rgba(255,255,255,0.15); --glass: rgba(22, 22, 23, 0.72);
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; letter-spacing: -0.022em; }
body, html { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; }

/* Splash */
#splash { position: fixed; inset: 0; background: #000; z-index: 99999; display: flex; align-items: center; justify-content: center; transition: 0.8s var(--ease-apple); }
body.loaded #splash { transform: translateY(-100%); }
.splash-logo { width: 50px; filter: invert(1); margin-bottom: 20px; }
.loader-bar { width: 100px; height: 2px; background: rgba(255,255,255,0.1); overflow: hidden; }
.loader-bar span { display: block; width: 0; height: 100%; background: #fff; animation: load 1.2s ease forwards; }
@keyframes load { to { width: 100%; } }

/* macOS Traffic Lights (Enhanced) */
.traffic-lights { display: flex; gap: 8px; align-items: center; width: 60px; height: 100%; }
.dot { width: 12px; height: 12px; border-radius: 50%; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 0.5px solid rgba(0,0,0,0.05); }
.dot::after { content: ''; font-size: 8px; font-weight: bold; opacity: 0; transition: 0.1s; position: absolute; color: rgba(0,0,0,0.5); }
.traffic-lights:hover .dot::after { opacity: 1; }
.dot.red { background: #ff5f56; } .dot.red::after { content: '✕'; }
.dot.yellow { background: #ffbd2e; } .dot.yellow::after { content: '−'; }
.dot.green { background: #27c93f; } .dot.green::after { content: '＋'; }

/* Navigation */
.nav-container { position: fixed; top: 0; width: 100%; height: 52px; z-index: 1000; display: flex; justify-content: center; }
.glass-nav { width: 100%; max-width: 1024px; background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--border); }
.brand-group { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; font-size: 19px; }
.nav-menu { display: flex; list-style: none; gap: 30px; font-size: 13px; font-weight: 500; }
.nav-menu a { text-decoration: none; color: var(--text); opacity: 0.7; transition: 0.3s; }
.nav-menu a:hover { opacity: 1; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.lang-switcher { background: var(--border); border: none; padding: 4px 8px; border-radius: 6px; color: var(--text); font-size: 11px; font-weight: 700; cursor: pointer; }
.theme-toggle { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--text); }

/* Windows & Modals */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(12px); z-index: 9999; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: 0.4s; }
.modal-backdrop.active { visibility: visible; opacity: 1; }
.mac-window { background: var(--glass); backdrop-filter: blur(40px); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 30px 100px rgba(0,0,0,0.25); overflow: hidden; transform: scale(0.95) translateY(20px); transition: 0.4s var(--ease-apple); }
.active .mac-window { transform: scale(1) translateY(0); }
.window-header { height: 38px; background: rgba(0,0,0,0.03); display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--border); position: relative; }
.window-title { position: absolute; width: 100%; text-align: center; font-size: 13px; font-weight: 600; opacity: 0.6; left: 0; pointer-events: none; }
.window-body { padding: 30px; }

/* Dialog Specific */
.dialog-window { width: 300px; text-align: center; }
.dialog-text { font-size: 15px; font-weight: 500; margin-bottom: 25px; line-height: 1.5; }
.dialog-actions { display: flex; gap: 10px; justify-content: center; }
.dialog-actions button { flex: 1; padding: 10px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
.btn-main { background: var(--accent); color: #fff; }
.btn-sub { background: var(--border); color: var(--text); }

/* Hero & Other Styles */
.hero-wrap { height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-title { font-size: clamp(40px, 8vw, 84px); font-weight: 800; line-height: 1.1; letter-spacing: -0.04em; }
.gradient-text { background: linear-gradient(135deg, var(--accent), #ff3b30); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.container { max-width: 1024px; margin: 0 auto; padding: 0 24px; }
.modern-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.luxury-card { background: var(--border); border-radius: 24px; overflow: hidden; display: block; text-decoration: none; color: inherit; transition: 0.4s; }
.luxury-card:hover { transform: translateY(-8px); }
.card-visual { height: 200px; background: #888; }
.hidden { display: none !important; }