:root{--bg:#f9fafb;--surface:#fff;--card:#fff;--muted:#666;--text:#333;--accent:#0066cc;--accent-2:#004999;--border:#ddd;--glass:transparent}*{box-sizing:border-box}body{font-family:'Segoe UI',Arial,sans-serif;margin:0;background:var(--bg);color:var(--text)}header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:0 2px 4px rgba(0,0,0,0.05)}header .container{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;max-width:1200px;margin:0 auto}.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--accent)}.logo svg{width:32px;height:32px}nav{display:flex;gap:14px;flex-wrap:wrap}nav a{text-decoration:none;color:var(--text);font-size:13px;font-weight:500;padding:6px 12px;border-radius:4px;transition:all .2s;cursor:pointer}nav a:hover,nav a.active{color:var(--accent);background:rgba(0,102,204,0.1)}.menu-toggle{display:none;background:transparent;border:none;font-size:22px;cursor:pointer;color:var(--text);padding:8px;border-radius:6px}.menu-toggle:focus{outline:2px solid rgba(0,102,204,0.18)}@media (max-width:880px){nav{display:none;position:absolute;top:70px;right:18px;background:var(--surface);border:1px solid var(--border);padding:12px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.08);width:calc(100% - 36px);max-width:360px;flex-direction:column;gap:8px}nav.open{display:flex}.menu-toggle{display:inline-flex;align-items:center;justify-content:center}header .container{position:relative}}main{min-height:calc(100vh - 200px)}.page{display:none}.page.active{display:block}section{padding:48px 20px;max-width:1100px;margin:0 auto}.hero{text-align:center;background:linear-gradient(135deg,#e6f0ff 0%,#f0e6ff 100%);padding:80px 20px;border-radius:8px}.hero h2{font-size:36px;margin:0 0 12px 0;color:#0033aa}.hero p{color:var(--muted);margin:0 0 24px 0;font-size:16px}h2{font-size:28px;margin-bottom:20px;color:var(--text)}h3{font-size:18px;color:var(--text)}p{color:var(--muted);line-height:1.6}.grid{display:grid;gap:20px}.grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,0.12)}.btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 24px;border-radius:6px;text-decoration:none;border:none;font-weight:600;cursor:pointer;transition:all .2s}.btn:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,102,204,0.3)}form{margin-top:20px}form label{display:block;margin-top:14px;color:var(--text);font-weight:500;font-size:14px}form input,form textarea{width:100%;padding:10px 12px;margin-top:6px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-family:inherit}form input:focus,form textarea:focus{outline:none;border-color:var(--accent);background:#f0e6ff}form textarea{resize:vertical;min-height:120px}form button{margin-top:16px}footer{background:var(--surface);border-top:1px solid var(--border);padding:24px 20px;text-align:center;color:var(--muted);font-size:13px}.result{font-weight:600;margin-top:10px;color:var(--accent)}@media (max-width:700px){header .container{flex-direction:column;gap:12px}nav{justify-content:center}.hero h2{font-size:24px}section{padding:32px 16px}}