@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Inter:wght@400;600&display=swap');
/* Critical above-fold CSS - variables, reset, nav, header */
:root {
    --bg-primary: linear-gradient(180deg, #f0f4f8 0%, #e8f0f6 50%, #f5f8fb 100%);
    --bg-secondary: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    --bg-nav: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    --bg-card: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-tertiary: #666666;
    --border-color: rgba(45, 127, 184, 0.2);
    --accent-color: #2d7fb8;
    --accent-dark: #1e3a5f;
    --shadow-color: rgba(30, 58, 95, 0.15);
    --nav-shadow: rgba(30, 58, 95, 0.1);
    --header-overlay: linear-gradient(135deg, rgba(30, 58, 95, 0.85) 0%, rgba(45, 127, 184, 0.85) 100%);
    --pattern-opacity: 0.08;
}
[data-theme="dark"] {
    --bg-primary: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    --bg-secondary: linear-gradient(180deg, #1e293b 0%, #334155 100%);
    --bg-nav: linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    --bg-card: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border-color: rgba(45, 127, 184, 0.3);
    --accent-color: #60a5fa;
    --accent-dark: #3b82f6;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --nav-shadow: rgba(0, 0, 0, 0.3);
    --header-overlay: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
    --pattern-opacity: 0.15;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-primary);min-height:100vh;line-height:1.6;color:var(--text-primary);font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;transition:background .3s ease,color .3s ease}
.goog-te-banner-frame,.goog-te-banner-frame.skiptranslate{display:none!important;visibility:hidden!important;height:0!important;min-height:0!important;max-height:0!important}
html,body{top:0!important;margin-top:0!important;position:static!important}
.goog-logo-link,.goog-te-gadget span{display:none!important}
.goog-te-balloon-frame,#goog-gt-tt,.goog-tooltip,.goog-tooltip:hover{display:none!important;visibility:hidden!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
body.skiptranslate{top:0!important;margin-top:0!important}
body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 50%,rgba(45,127,184,var(--pattern-opacity)) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(30,58,95,var(--pattern-opacity)) 0%,transparent 50%),linear-gradient(135deg,rgba(45,127,184,.02) 0%,transparent 100%);pointer-events:none;z-index:0;transition:background-image .3s ease}
.container{width:100%;margin:0;padding:0;position:relative;z-index:1}
.main-nav{background:var(--bg-nav);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color);padding:20px 48px;position:sticky;top:0;z-index:1000;box-shadow:0 1px 0 rgba(0,0,0,.04);width:100%;display:flex;justify-content:space-between;align-items:center;transition:all .3s ease}
.nav-brand{display:flex;align-items:center;gap:0;font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:600;color:var(--text-primary);transition:color .3s ease}
.nav-logo,.nav-logo-light,.nav-logo-dark{height:74px;width:auto;max-height:74px;object-fit:contain;object-position:left center;transition:opacity .3s ease,transform .2s ease}
.brand-wordmark-logo{mix-blend-mode:darken;isolation:isolate}
[data-theme="dark"] .brand-wordmark-logo,[data-theme="dark"] .main-nav .brand-wordmark-logo{mix-blend-mode:screen;filter:invert(1) brightness(1.08) contrast(1.05)}
.nav-brand span{display:none!important}
.nav-logo:hover{opacity:.8;transform:translateY(-1px)}
.nav-logo-dark{display:none!important}
html[data-theme="dark"] .main-nav .nav-logo-light{display:none!important;visibility:hidden!important;position:absolute!important;width:0!important;height:0!important;overflow:hidden!important}
html[data-theme="dark"] .main-nav .nav-logo-dark{display:block!important;visibility:visible!important;filter:none!important;mix-blend-mode:normal!important;width:auto!important;min-width:0!important;max-width:none!important;object-fit:contain!important;object-position:left center!important}
.main-nav .container{display:flex;justify-content:space-between;align-items:center}
.nav-links{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.nav-links a{color:var(--text-secondary);text-decoration:none;font-weight:500;font-size:14px;letter-spacing:.02em;padding:10px 14px;border-radius:8px;transition:color .2s ease,background .2s ease;position:relative;white-space:nowrap}
.nav-links a:hover{color:var(--text-primary);background:rgba(45,127,184,.08)}
.nav-links a.active{color:var(--accent-color);font-weight:600}
.nav-links a[href="match.html"]{background:linear-gradient(135deg,var(--accent-color) 0%,var(--accent-dark) 100%);color:#fff!important;margin-left:12px;padding:10px 20px;font-weight:600}
.nav-links a[href="match.html"]:hover{background:linear-gradient(135deg,var(--accent-dark) 0%,var(--accent-color) 100%);color:#fff!important;filter:brightness(1.05)}
.nav-links a[href="match.html"].active{background:linear-gradient(135deg,var(--accent-dark) 0%,var(--accent-color) 100%);color:#fff!important;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.nav-dropdown{position:relative;display:inline-block}
.nav-dropdown-trigger{display:flex;align-items:center;gap:4px;cursor:pointer;padding:10px 14px;border:none;background:none;color:var(--text-secondary);font-weight:500;font-size:14px;letter-spacing:.02em;font-family:inherit;border-radius:8px;transition:color .2s ease,background .2s ease}
.nav-dropdown-trigger:hover{color:var(--text-primary);background:rgba(45,127,184,.08)}
.nav-dropdown.active .nav-dropdown-trigger{color:var(--accent-color);font-weight:600}
.nav-dropdown-trigger::after{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:2px;transition:transform .2s ease}
.nav-dropdown:hover .nav-dropdown-trigger::after{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:100%;left:0;min-width:220px;margin-top:4px;padding:8px 0;background:var(--bg-nav);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 8px 24px var(--shadow-color);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;z-index:100}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown-menu a{display:block;padding:10px 20px;color:var(--text-secondary);text-decoration:none;font-size:14px;transition:color .2s ease,background .2s ease;white-space:nowrap}
.nav-dropdown-menu a:hover{color:var(--accent-color);background:rgba(45,127,184,.08)}
.nav-dropdown-menu a.active{color:var(--accent-color);font-weight:600}
[data-theme="dark"] .nav-dropdown-menu{background:#0f172a;border-color:rgba(96,165,250,.3);box-shadow:0 12px 28px rgba(2,6,23,.55)}
[data-theme="dark"] .nav-dropdown-menu a{color:#e2e8f0}
[data-theme="dark"] .nav-dropdown-menu a:hover,[data-theme="dark"] .nav-dropdown-menu a.active{color:#93c5fd;background:rgba(59,130,246,.16)}
.nav-links a[href="calculator.html"]{margin-left:16px;padding-left:18px;border-left:1px solid var(--border-color)}
.theme-toggle{background:var(--bg-card);border:2px solid var(--border-color);border-radius:50px;width:52px;height:28px;position:relative;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;padding:4px;margin-left:12px}
.theme-toggle-mobile{display:none}
.theme-toggle:hover{border-color:var(--accent-color);box-shadow:0 0 10px rgba(45,127,184,.3)}
.theme-toggle::before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#fbbf24,#f59e0b);transition:all .3s ease;box-shadow:0 2px 6px rgba(0,0,0,.2)}
[data-theme="dark"] .theme-toggle::before{transform:translateX(24px);background:linear-gradient(135deg,#3b82f6,#60a5fa)}
.theme-toggle::after{content:'☀️';position:absolute;left:6px;font-size:14px;transition:opacity .3s ease;z-index:1}
[data-theme="dark"] .theme-toggle::after{content:'🌙';left:28px}
.language-selector-wrapper{margin-left:20px;position:relative}
.language-selector{background:var(--bg-card);border:2px solid var(--border-color);border-radius:8px;padding:6px 32px 6px 12px;font-size:14px;font-weight:500;color:var(--text-primary);cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;transition:all .3s ease;min-width:120px;font-family:'Inter',sans-serif}
.language-selector:hover{border-color:var(--accent-color);box-shadow:0 0 10px rgba(45,127,184,.2)}
.language-selector:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 10px rgba(45,127,184,.3)}
.language-selector-wrapper::after{content:'▼';position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:10px;color:var(--text-secondary)}
[dir="rtl"] .language-selector-wrapper::after{right:auto;left:12px}
header{background:var(--header-overlay),url('https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=75') center/cover no-repeat;text-align:center;color:#fff;padding:120px 60px;margin:0;position:relative;overflow:hidden;transition:background .3s ease}
@media(max-width:768px){.theme-toggle{width:54px;height:30px;margin-left:15px}.theme-toggle::before{width:22px;height:22px}[data-theme="dark"] .theme-toggle::before{transform:translateX(24px)}.theme-toggle::after{font-size:14px;left:7px}[data-theme="dark"] .theme-toggle::after{left:31px}.language-selector-wrapper{margin-left:0;margin-top:16px;width:100%;max-width:200px;align-self:center}.language-selector{width:100%}}