:root{
  --bg:#071127; --card:#0b1220; --muted:#9fb0c6; --accent:#6ee7b7; --glass:rgba(255,255,255,0.03);
  --radius:12px; --shadow:0 8px 30px rgba(2,6,23,0.6);
  --container:1200px;
  font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#071127 0%, #081827 100%);color:#e6eef8;-webkit-font-smoothing:antialiased}
.container{max-width:var(--container);margin:0 auto;padding:20px}

/* Header */
.site-header{backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;gap:16px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:8px}
.brand-text{font-weight:700;color:var(--accent);font-size:18px}
.nav{flex:1;margin-left:24px}
.nav-list{display:flex;gap:16px;list-style:none;padding:0;margin:0}
.nav-list a{color:var(--muted);text-decoration:none;padding:8px;border-radius:8px}
.nav-list a:hover{color:#fff;background:rgba(255,255,255,0.02)}

/* Header actions */
.header-actions{display:flex;align-items:center;gap:10px}
.btn{padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:600}
.btn-primary{background:linear-gradient(90deg,#10b981,#06b6d4);color:#032027}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.03)}

/* menu toggle (mobile) */
.menu-toggle{display:none;background:transparent;border:0;color:var(--muted);font-size:20px}

/* Hero */
.hero{padding:48px 0}
.hero-inner{display:flex;gap:30px;align-items:center;justify-content:space-between}
.hero-content{max-width:640px}
.hero h1{font-size:32px;margin:0 0 12px;color:#fff}
.lead{color:var(--muted);margin-bottom:18px;line-height:1.6}
.hero-ctas{display:flex;gap:12px}
.hero-illustration .illustration-card{width:260px;height:160px;border-radius:14px;background:linear-gradient(135deg,#0f1724 0%, #0b1b2a 100%);display:flex;align-items:center;justify-content:center;color:var(--muted);box-shadow:var(--shadow)}

/* Products */
.section-title{font-size:22px;color:var(--muted);margin-bottom:12px}
.grid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:12px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,0.02)}
.card h3{margin:0 0 10px}
.card-list{list-style:none;padding:0;margin:0 0 16px;color:var(--muted)}
.card-list li{margin:6px 0}
.card-link{text-decoration:none;color:var(--accent);font-weight:600}

/* About */
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.about-card{background:var(--card);padding:18px;border-radius:10px;color:var(--muted);min-height:120px;box-shadow:0 6px 20px rgba(2,6,23,0.5)}

/* Development */
.development-text{color:var(--muted);line-height:1.8}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:18px 0;margin-top:36px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.footer-inner a{color:var(--muted);text-decoration:none;margin-right:12px}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,23,0.6);backdrop-filter: blur(4px);visibility:visible;opacity:1;transition:opacity .18s}
.modal[aria-hidden="true"]{visibility:hidden;opacity:0;pointer-events:none}
.modal-panel{background:linear-gradient(180deg,#061427,#071a2b);padding:18px;border-radius:12px;max-width:520px;width:100%;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,0.03);position:relative}
.modal-close{position:absolute;right:12px;top:8px;background:transparent;color:var(--muted);border:0;font-size:20px;cursor:pointer}
.contact-form label{display:block;margin-top:10px;color:var(--muted)}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#e6eef8;margin-top:6px}
.form-actions{display:flex;gap:10px;margin-top:12px}
.feedback{margin-top:10px;color:var(--accent)}

/* Responsiveness */
@media (max-width:920px){
  .grid-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .nav{display:none}
  .menu-toggle{display:block}
  .grid-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .hero h1{font-size:24px}
}