:root {
  --bg: #0f172a;
  --panel: #111827;
  --muted: #9ca3af;
  --text: #f3f4f6;
  --brand: #06b6d4;
  --brand-2: #3b82f6;
  --accent: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
* { box-sizing: border-box }
html, body { margin: 0; padding: 0; background: radial-gradient(1200px 600px at 10% 0%, rgba(6,182,212,.15), transparent), var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif; }
img { max-width: 100%; display: block }
a { color: #a5e3ff; text-decoration: none }
a:hover { text-decoration: underline }
.container { width: min(1120px, 92%); margin-inline: auto }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(17,24,39,.8); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.06) }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: #e5f6ff }
.brand img { border-radius: 50% }
.navbar a { margin-left: 18px; padding: 8px 14px; border-radius: 10px; color: #e5f6ff; text-decoration: none; transition: .2s }
.navbar a:hover { background: rgba(255,255,255,.06) }
.navbar a.active { background: rgba(6,182,212,.2); border: 1px solid rgba(6,182,212,.5) }
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; padding: 36px 0 20px }
.hero-text h1 { font-size: 42px; margin: 0 0 10px }
.hero-text p { color: var(--muted) }
.cta-group { display: flex; gap: 12px; margin-top: 16px }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #fff; text-decoration: none; cursor: pointer; transition: .2s }
.btn:hover { transform: translateY(-1px) }
.btn.primary { background: var(--accent); border: none }
.btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.2) }
.btn.small { padding: 8px 12px; font-size: 14px }
.pill { display: inline-block; background: rgba(59,130,246,.15); border: 1px solid rgba(59,130,246,.4); color: #cfe7ff; padding: 6px 10px; border-radius: 999px; margin-right: 8px; font-size: 12px }
.meta-line { margin-top: 14px }
.rounded { border-radius: var(--radius) }
.shadow { box-shadow: var(--shadow) }
.mt-16 { margin-top: 16px }
.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px auto }
.card { background: var(--panel); padding: 20px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.06) }
.card.accent { background: radial-gradient(800px 400px at 0% 0%, rgba(6,182,212,.12), transparent), var(--panel) }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: #cfe7ff; text-decoration: none }
.post-highlight { display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; align-items: center; background: var(--panel); padding: 16px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.06); margin: 14px 0 }
.post-links { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 16px }
.post-links a { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); padding: 12px 14px; border-radius: 12px }
.contact-banner { margin: 34px auto }
.contact-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px }
.contact-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px 12px }
.icon { width: 20px; height: 20px; fill: #9ad8ff }
.site-footer { border-top: 1px solid rgba(255,255,255,.08); margin-top: 36px; padding: 26px 0; background: rgba(17,24,39,.7) }
.footer-grid { display: grid; grid-template-columns: 1.1fr .6fr .9fr; gap: 20px; align-items: start }
.foot-brand { margin-bottom: 8px }
.socials { display: flex; gap: 10px }
.socials svg { width: 22px; height: 22px; fill: #cfe7ff; transition: .2s }
.socials a:hover svg { fill: #ffffff }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px }
.footer-links a { color: #e5f6ff; text-decoration: none }
.footer-links a:hover { text-decoration: underline }
.lead { color: var(--muted) }
.about-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; margin: 24px 0 }
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px }
.team-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 14px; text-align: center }
.team-card img { object-fit: cover; border-radius: 10px }
.form-card { margin-top: 14px }
.form-row { display: grid; gap: 8px; margin-bottom: 12px }
.form-row input, .form-row textarea { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #fff; padding: 10px 12px }
.form-row input:focus, .form-row textarea:focus { outline: 2px solid rgba(6,182,212,.5); border-color: transparent }
.form-actions { display: flex; justify-content: flex-end }
.contact-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; margin: 24px 0 }
.contact-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px }
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; background: #0b1222; border-top: 1px solid rgba(255,255,255,.1); padding: 12px; z-index: 100 }
.cookie-banner.hidden { display: none }
.cookie-content { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center }
.cookie-actions { display: flex; gap: 10px; align-items: center }
.link { color: #a5e3ff }
.cookie-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 120 }
.cookie-modal.hidden { display: none }
.cookie-modal-card { background: #0e1629; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; width: min(560px, 92%); padding: 20px }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; margin: 10px 0 }
.switch { position: relative; display: inline-block; width: 48px; height: 26px }
.switch input { display:none }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #64748b; transition: .2s; border-radius: 999px }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background: white; transition: .2s; border-radius: 50% }
.switch input:checked + .slider { background: #22c55e }
.switch input:checked + .slider:before { transform: translateX(22px) }
@media (max-width: 980px) {
  .hero, .about-hero, .contact-hero, .post-highlight { grid-template-columns: 1fr }
  .grid.two { grid-template-columns: 1fr }
  .footer-grid { grid-template-columns: 1fr; gap: 10px }
  .team-grid { grid-template-columns: repeat(2, 1fr) }
  .contact-row { grid-template-columns: 1fr }
  .post-links { grid-template-columns: 1fr }
}