:root{
--bg:#0b1220;
--panel:#121b2f;
--muted:#98a2b3;
--text:#e6eefc;
--primary:#4f8cff;
--secondary:#243b64;
--accent:#00c2a8;
--warning:#ffcc00;
--danger:#ff6b6b;
--radius:14px;
--shadow:0 10px 30px rgba(0,0,0,.35)
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
a{color:var(--primary);text-decoration:none}
a:hover{opacity:.9}
img{display:block;border-radius:12px;object-fit: cover;max-width:100%}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(180deg,rgba(11,18,32,.95),rgba(11,18,32,.7));backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:18px}
.hamburger{display:none;background:transparent;border:0;color:#fff}
.hamburger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px}
.nav{display:flex;align-items:center;gap:16px}
.nav a{padding:10px 12px;border-radius:10px;color:#dbe7ff}
.nav a.active,.nav a:hover{background:var(--secondary);color:#fff}
.dropdown{position:relative}
.dropbtn{background:var(--secondary);color:#fff;border:0;padding:10px 14px;border-radius:10px}
.dropdown-content{position:absolute;top:110%;right:0;background:var(--panel);padding:10px;border-radius:12px;box-shadow:var(--shadow);display:none;min-width:260px}
.dropdown:hover .dropdown-content{display:block}
.dropdown-content a{display:block;padding:10px;border-radius:8px;color:#e6eefc}
.dropdown-content a:hover{background:rgba(255,255,255,.06)}
.hero{position:relative;display:grid;gap:22px;padding:24px 20px}
.hero-text{max-width:840px;margin-top:-120px;background:linear-gradient(180deg,rgba(18,27,47,.85),rgba(18,27,47,.75));padding:20px;border-radius:16px;backdrop-filter:blur(6px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;font-weight:700;transition:transform .1s ease,box-shadow .2s ease;border:1px solid transparent}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:#fff}
.btn-secondary{background:var(--secondary);color:#fff}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.2);color:#fff}
.btn-accent{background:var(--accent);color:#0a0f1a}
.features{padding:30px 20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--panel);padding:18px;border-radius:16px;box-shadow:var(--shadow)}
.card h3{margin:10px 0 6px 0}
.reorder{padding:30px 20px}
.reorder-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:center}
.reorder-text textarea{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0e1628;color:#e6eefc;padding:12px}
.spell-controls{display:flex;align-items:center;gap:12px;margin-top:10px}
.cta{padding:30px 20px;text-align:center}
.footer{margin-top:40px;padding:30px 20px;background:#0a0f1a;border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.footer h4{margin:0 0 10px 0}
.footer ul{list-style:none;margin:0;padding:0}
.footer .legal a{color:#b8c6e8;text-decoration:underline}
.copy{text-align:center;margin-top:16px;color:var(--muted)}
.blog{display:grid;grid-template-columns:1fr 360px;gap:22px;padding:24px 20px}
.post-featured .post-meta{margin-top:14px}
.sidebar{position:sticky;top:90px;background:var(--panel);padding:16px;border-radius:16px;height:max-content}
.post-list{list-style:none;margin:0;padding:0}
.post-list li{margin:10px 0}
.page-hero{position:relative;padding:24px 20px}
.about .team{padding:20px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.team-card{background:var(--panel);padding:12px;border-radius:16px;text-align:center}
.values{padding:24px 20px}
.contact-grid{padding:24px 20px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-card{background:var(--panel);padding:16px;border-radius:16px}
.form-row{display:grid;gap:8px;margin-bottom:12px}
input,textarea{border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0e1628;color:#e6eefc;padding:12px}
.inline{color:#e6eefc;text-decoration:underline}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:60}
.modal.show{display:flex}
.modal-content{background:var(--panel);padding:22px;border-radius:16px;max-width:420px;width:92%}
.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;z-index:80;box-shadow:var(--shadow)}
.cookie-text p{margin:0 0 6px 0}
.cookie-actions{display:flex;gap:8px;flex-wrap:wrap}
.cookie-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:90}
.cookie-modal.show{display:flex}
.cookie-modal-content{background:var(--panel);padding:20px;border-radius:16px;min-width:320px}
@media(max-width:1100px){
.grid-3{grid-template-columns:1fr}
.blog{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.about .team{grid-template-columns:repeat(2,1fr)}
.reorder-wrap{grid-template-columns:1fr}
.nav{position:fixed;top:64px;right:12px;left:12px;background:var(--panel);border-radius:14px;padding:10px;display:none;flex-direction:column}
.nav.open{display:flex}
.hamburger{display:block}
}