*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; max-width: 100%; }
:root{--bg:#f0f4f9;--surface:#fff;--border:#dadce0;--text:#1a1a1a;--text2:#777;--text3:#aaa;--accent:#4285f4;--accent-bg:#e3f2fd;--accent-text:#1565c0;--hover:#f0f4f9;--footer-bg:#fff;--placeholder:#bbb}
.dark{--bg:#1a1a2e;--surface:#16213e;--border:#2a2a4a;--text:#e0e0e0;--text2:#aaa;--text3:#666;--accent:#4285f4;--accent-bg:#1a2a4a;--accent-text:#7ab3f4;--hover:#1e2a4a;--footer-bg:#0f1528;--placeholder:#555}
body{font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background 0.3s,color 0.3s}
header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;gap:12px;height:60px;position:sticky;top:0;z-index:200;transition:background 0.3s,border-color 0.3s}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-icon{width:36px;height:36px;background:var(--accent-bg);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px;font-weight:700}
.logo-text{font-size:20px;font-weight:700;color:var(--accent)}
.spacer{flex:1}
nav{display:flex;align-items:center;gap:4px}
nav a{font-size:14px;color:var(--text2);text-decoration:none;padding:6px 12px;border-radius:8px;transition:background 0.15s,color 0.15s}
nav a:hover,nav a.active{background:var(--accent-bg);color:var(--accent)}
.toggle-wrap{display:flex;align-items:center;gap:8px;margin-left:12px}
.toggle-label{font-size:13px;color:var(--text2)}
.toggle{position:relative;width:44px;height:24px;cursor:pointer}
.toggle input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#ccc;border-radius:24px;transition:background 0.3s}
.slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform 0.3s}
input:checked+.slider{background:var(--accent)}
input:checked+.slider:before{transform:translateX(20px)}
.main{width:100%;margin:0;padding:16px 24px}
.main-inner{max-width:900px;margin:0 auto}
.page-title{font-size:28px;font-weight:700;color:var(--text);margin-bottom:8px}
.page-subtitle{font-size:15px;color:var(--text2);margin-bottom:32px;line-height:1.6}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px;margin-bottom:24px;transition:background 0.3s,border-color 0.3s}
.card h2{font-size:18px;font-weight:700;color:var(--text);margin-bottom:14px}
.card h3{font-size:15px;font-weight:600;color:var(--text);margin-bottom:8px;margin-top:20px}
.card p{font-size:15px;color:var(--text2);line-height:1.8;margin-bottom:12px}
.card ul{padding-left:20px;color:var(--text2);font-size:15px;line-height:2.2}
.card a{color:var(--accent);text-decoration:none}
.card a:hover{text-decoration:underline}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px}
.form-group input,.form-group textarea{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:10px;font-size:15px;font-family:inherit;background:var(--surface);color:var(--text);outline:none;transition:border-color 0.2s}
.form-group input:focus,.form-group textarea:focus{border-color:var(--accent)}
.form-group textarea{min-height:140px;resize:vertical}
.btn-submit{background:var(--accent);color:#fff;border:none;padding:10px 28px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:background 0.15s}
.btn-submit:hover{background:#3367d6}
.contact-info{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text2);margin-bottom:16px}
footer{background:var(--footer-bg);border-top:1px solid var(--border);padding:28px 24px;margin-top:48px;transition:background 0.3s}
.footer-inner{max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.footer-brand p{font-size:13px;color:var(--text3);margin-top:6px;max-width:240px;line-height:1.6}
.footer-links h4{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.05em}
.footer-links a{display:block;font-size:13px;color:var(--text2);text-decoration:none;margin-bottom:6px;transition:color 0.15s}
.footer-links a:hover{color:var(--accent)}
.footer-bottom{max-width:900px;margin:20px auto 0;padding-top:16px;border-top:1px solid var(--border);text-align:center;font-size:12px;color:var(--text3)}
.footer-bottom a{color:var(--accent);text-decoration:none}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;cursor:pointer;background:none;border:none;padding:4px;border-radius:8px;transition:background 0.15s}
.hamburger:hover{background:var(--hover)}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all 0.3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:600px){
  header{padding:0 12px;height:56px}
  .hamburger{display:flex}
  .spacer{flex:1}
  nav{display:none;position:absolute;top:56px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;padding:8px 12px;gap:2px;z-index:199;box-shadow:0 4px 12px rgba(0,0,0,0.1)}
  nav.open{display:flex}
  nav a{font-size:15px;padding:10px 14px;border-radius:8px;width:100%}
  .main{padding:0 12px}
  .footer-inner{flex-direction:column}
  .panels{grid-template-columns:1fr}
}