:root{
  --brand:#0a84ff;
  --brand-2:#102a43;
  --bg:#0b1320;
  --surface:#111a2b;
  --text:#e6eefc;
  --muted:#a0b3d2;
  --accent:#24e1a5;
  --danger:#ff4d4f;
  --base-font-size:16px;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:var(--base-font-size);
  color:var(--text);
  background:linear-gradient(180deg,#0b1320 0%, #0b1320 60%, #0e1830 100%);
  line-height:1.6;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
.btn{
  background:#1a2740;color:#fff;border:none;border-radius:10px;padding:12px 18px;cursor:pointer;transition:transform .12s ease,background .2s ease;display:inline-flex;align-items:center;gap:8px;text-decoration:none
}
.btn:hover{transform:translateY(-1px);background:#233558}
.btn.primary{background:linear-gradient(135deg,var(--brand),#4fa3ff)}
.btn.ghost{background:transparent;border:1px solid #2b3c5f;color:#cfe0ff}
.btn.small{padding:8px 12px;font-size:.9rem}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(9,16,30,.8);backdrop-filter:blur(8px);border-bottom:1px solid #15223b}
.site-header .brand{display:flex;align-items:center;height:64px}
.logo{display:flex;align-items:center;gap:10px;color:#fff}
.logo img{border-radius:10px;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.navbar{display:flex;align-items:center;justify-content:space-between}
.nav-links{list-style:none;display:flex;gap:18px;margin:0;padding:0;align-items:center}
.nav-links a{color:#d3e0ff;padding:10px 12px;border-radius:10px}
.nav-links a.active, .nav-links a:hover{background:#18233c}
.nav-toggle{display:none;background:none;border:none;color:#fff}
.nav-toggle span{display:block;width:24px;height:2px;background:#d3e0ff;margin:5px 0;border-radius:2px}
.has-dropdown{position:relative}
.has-dropdown .dropdown{
  position:absolute;top:48px;left:0;background:#0f182b;border:1px solid #1b2a45;border-radius:12px;padding:8px;width:340px;display:none;flex-direction:column;gap:4px;box-shadow:var(--shadow)
}
.has-dropdown:hover .dropdown{display:flex}
.actions{display:flex;gap:10px}

/* Hero */
.hero{min-height:56vh;background-size:cover;background-position:center;display:flex;align-items:center}
.hero.small{min-height:36vh}
.hero-content{background:linear-gradient(90deg,rgba(11,19,32,.92),rgba(11,19,32,.4));padding:32px;border-radius:18px;box-shadow:var(--shadow);max-width:740px;margin:40px}
.hero h1{margin:0 0 10px 0;font-size:2.2rem}
.hero p{color:#c1d0ee;margin:0 0 18px 0}

/* Sections */
.section-head{text-align:center;margin:40px 0 20px 0}
.highlights .cards-4,.team .cards-5{display:grid;gap:18px}
.cards-4{grid-template-columns:repeat(4,1fr)}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards-5{grid-template-columns:repeat(5,1fr)}
.card,.mini-card,.team-card,.info-box{
  background:linear-gradient(180deg,#0f182b,#0d1525);border:1px solid #1b2a45;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)
}
.card img,.info-box img,.article-img{width:100%;height:220px;object-fit:cover;display:block}
.card>div{padding:16px}
.link{color:#9bc3ff}
.mini-card{padding:18px}
.mini-card .icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#15223b;color:#9bc3ff;margin-bottom:8px}
.team-card{padding:14px;text-align:center}
.team-card img{border-radius:14px;height:400px;object-fit:cover}
.info-box{padding-bottom:14px}
.info-box h4{padding:0 14px}
.info-box .bullets{padding:0 30px;color:#cfe0ff}
.list{padding-left:20px}
.for-beginners{margin:20px auto 40px auto}

/* Post feature */
.post-feature{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center;background:linear-gradient(180deg,#0f182b,#101a2f);border:1px solid #1b2a45;border-radius:18px;padding:12px}
.post-feature img{width:100%;height:300px;object-fit:cover;border-radius:14px}

/* Article */
.article{max-width:880px}
.article h1{font-size:2rem;margin:14px 0}
.article p{color:#d7e6ff}

/* Contact */
.contact-wrap .icon-inline{display:inline-flex;vertical-align:middle;margin-right:8px;color:#9bc3ff}
.form{background:#0f182b;border:1px solid #1b2a45;border-radius:16px;padding:16px}
.form-row{display:flex;flex-direction:column;margin-bottom:12px}
.form-row input,.form-row textarea{
  background:#0b1320;border:1px solid #223356;color:#e6eefc;border-radius:10px;padding:10px
}
.form-row input:focus,.form-row textarea:focus{outline:2px solid #2c8cff}

/* Footer */
.site-footer{margin-top:40px;border-top:1px solid #15223b;background:#0b1320}
.footer-top{display:grid;grid-template-columns:1fr;gap:16px;padding:24px 0}
.footer-brand{display:flex;flex-direction:column;gap:10px}
.footer-links{display:flex;gap:18px;justify-content:center;padding:10px 0}
.footer-links a{color:#cfe0ff;background:#121c31;border:1px solid #1b2a45;padding:8px 12px;border-radius:10px}
.footer-bottom{text-align:center;color:#9db3d8;padding-bottom:20px}
.socials{display:flex;gap:12px}
.socials a{color:#cfe0ff;background:#121c31;border:1px solid #1b2a45;border-radius:10px;padding:8px;display:inline-flex}

/* Cookie banner */
.cookie-banner{
  position:fixed;left:20px;right:20px;bottom:20px;background:#0f182b;border:1px solid #1b2a45;border-radius:16px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:14px;box-shadow:var(--shadow);z-index:1200
}
.cookie-text p{margin:0;color:#cfe0ff}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:1300}
.modal.open{display:flex}
.modal-content{background:#0f182b;border:1px solid #1b2a45;border-radius:16px;max-width:520px;width:92%;padding:18px}
.switch{display:flex;align-items:center;gap:10px;margin:10px 0}
.switch input{width:18px;height:18px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}

/* Responsive */
@media(max-width:980px){
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .cards-5{grid-template-columns:repeat(2,1fr)}
  .cards-3{grid-template-columns:repeat(2,1fr)}
  .post-feature{grid-template-columns:1fr}
}
@media(max-width:720px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:64px;left:0;right:0;background:#0f182b;border-bottom:1px solid #1b2a45;display:none;flex-direction:column;padding:12px}
  .nav-links.open{display:flex}
  .dropdown{position:static;width:100%}
  .cards-4,.cards-5,.cards-3{grid-template-columns:1fr}
}