html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 80px; }

:root {
    --bg:           #0b0b0f;
    --surface:      #131318;
    --surface-2:    #1a1a21;
    --surface-3:    #23232c;
    --hover:        #1f1f27;
    --border:       #24242c;
    --border-2:     #2e2e38;
    --border-bright:#3a3a46;
    --fg:           #ececef;
    --fg-2:         #a0a0ad;
    --fg-3:         #888897;
    --accent:       #818cf8;
    --accent-hi:    #a5b4fc;
    --accent-soft:  rgba(129, 140, 248, 0.10);
    --accent-ring:  rgba(129, 140, 248, 0.28);
    --cyan:         #4dd4e0;
    --magenta:      #e879a8;
    --success:      #34d399;
    --warn:         #fbbf24;
    --danger:       #f87171;
    --font-ui:   "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }

* { box-sizing: border-box; }

html, body { margin:0; padding:0; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }

.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; letter-spacing:-0.01em; text-decoration:none; color:inherit; }

.brand-logo-img { height:26px; width:auto; }

.nav-links { display:flex; align-items:center; gap:6px; font-size:0.88rem; color:var(--fg-2); }

.nav-links a { padding:7px 11px; border-radius:7px; text-decoration:none; transition:background 0.15s,color 0.15s; }

.nav-links a:hover, .nav-links a.active { color:var(--fg); background:var(--surface-2); }

.nav-cta:hover { background: var(--accent-hi); }

.nav-actions { display:flex; align-items:center; gap:16px; }

.nav-login:hover { color: var(--fg); }

.mobile-nav { display:none; position:relative; }

.mobile-nav summary { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--border-2); border-radius:8px; color:var(--fg-2); background:var(--surface-2); cursor:pointer; list-style:none; }

.mobile-nav summary::-webkit-details-marker { display:none; }

.mobile-nav summary:hover, .mobile-nav[open] summary { color:var(--fg); border-color:var(--border-bright); }

.mobile-nav summary i { font-size:1.25rem; }

.mobile-menu { position:absolute; top:44px; right:0; width:min(300px, calc(100vw - 32px)); padding:12px; border:1px solid var(--border-2); border-radius:12px; background:rgba(19,19,24,0.98); box-shadow:0 18px 50px rgba(0,0,0,0.45); }

.mobile-menu-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }

.mobile-menu-actions a { display:flex; align-items:center; justify-content:center; min-height:38px; border-radius:8px; font-size:0.82rem; font-weight:700; text-decoration:none; }

.mobile-menu-login { border:1px solid var(--border-2); color:var(--fg); background:var(--surface-2); }

.mobile-menu-cta { color:#0b0b0f; background:var(--accent); }

.mobile-menu-links { display:flex; flex-direction:column; gap:3px; padding-top:10px; border-top:1px solid var(--border); }

.mobile-menu-links a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:var(--fg-2); font-size:0.84rem; font-weight:600; text-decoration:none; }

.mobile-menu-links a:hover, .mobile-menu-links a.active { color:var(--fg); background:var(--surface-2); }

.mobile-menu-links i { width:18px; color:var(--accent-hi); font-size:1rem; }

footer .wrap { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }

footer .fbrand { display:flex; align-items:center; gap:8px; color: var(--fg-2); font-size:0.85rem; }

footer .flinks { display:flex; gap:22px; font-size:0.82rem; color: var(--fg-3); }

footer .flinks a { text-decoration:none; transition:color 0.15s; }

footer .flinks a:hover { color: var(--fg-2); }

.lang-switch { appearance:none; -webkit-appearance:none; -moz-appearance:none; background:var(--surface-2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23a0a0ad" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 10px center; background-size:10px; border:1px solid var(--border-2); border-radius:8px; padding:6px 26px 6px 10px; color:var(--fg-2); font-size:0.75rem; font-weight:700; font-family: var(--font-ui); cursor:pointer; }

.lang-switch:hover { border-color:var(--border-bright); color:var(--fg); }

.lang-switch:focus { outline:2px solid var(--accent-ring); outline-offset:1px; }

.lang-switch option { background:var(--surface-2); color:var(--fg); }