:root{
  --bg:#0b0f12;
  --panel:#0f1720;
  --muted:#9aa4ad;
  --accent:#a7a09a;
  --white:#f8fafc;
  --glass: rgba(255,255,255,0.04);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--white);font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto;}
a{color:inherit}
b{color:var(--accent)}
.sidebar{position:fixed;left:1;top:1;bottom:1;width:280px;background:linear-gradient(180deg,var(--panel),#193d5a);padding:28px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.sidebar0{position:inherit;left:0;top:0;bottom:0;width:260px;background:linear-gradient(180deg,var(--panel),#5186b3);padding:28px 18px;display:flex;flex-direction:column;align-items:first baseline;gap:18px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.brand0{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.logo{width: auto;height: auto;border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--white);font-size:1.2rem}
.tag{color:var(--muted);font-size:0.9rem; justify-content: center; align-content:center;}
.side-nav{display:flex;flex-direction:column;width:100%;margin-top:8px;gap:6px}
.side-nav a{padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:600}
.side-nav a.active, .side-nav a:hover{background:var(--glass);color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02)}
.side-nav0{display:flex;flex-direction:column;width:100%;margin-top:8px;gap:6px}
.side-nav b{padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:600}
.side-nav b.active, .side-nav0 b:hover{background:var(--glass);color:var(--white);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02)}
.main{margin-left:260px;min-height:100vh;display:flex;flex-direction:column}
.topbar{height:64px;display:inherit;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid rgba(255,255,255,0.02);backdrop-filter: blur(6px)}
.menu-toggle{background:none;border:none;color:var(--white);font-size:1.1rem}
.hero{display:flex;align-items:center;padding:48px 20px;gap:40px}
.dark-hero{background:linear-gradient(135deg,  #646c74 , rgba(42, 17, 182, 0));border-bottom:1px solid #221fc505}
.hero-inner{max-width:720px}
.hero h1{font-size:2.2rem;line-height:1.02;color:var(--white);margin-bottom:12px}
.hero p{color:var(--muted);margin-bottom:18px}
.btn{display:inline-block;padding:10px 18px;background:var(--accent);color:var(--white);border-radius:8px;text-decoration:none;font-weight:700;transition:transform .18s ease}
.btn:hover{transform:translateY(-4px)}
.hero-visual img{width:460px;border-radius:12px;box-shadow:0 20px 60px #f5f5f5ad; margin-left: 6.5cm}
.vision1 img{width:350px;border-radius:15px; margin-left: 1 cm; }
.vision2 img{width:350px;border-radius:15px; display:flexbox; margin-left: 16cm; margin-top: 0cm; margin-bottom: -2.8cm; margin-right: 2cm;}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:28px 20px}
.quick-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.02)}
.features{display:flex;gap:18px;padding:20px}
.feature{flex:1;background:rgba(255,255,255,0.02);padding:18px;border-radius:10px}
.container{max-width:1000px;margin:0 auto}
.content{padding:28px 20px}
.values-grid, .team-grid, .news-grid, .grid-portfolio{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.contact-form{display:flex;flex-direction:column;gap:10px;max-width:900px}
input, textarea{background:#9e9cdf;border:1px solid rgba(240, 233, 233, 0.918);padding:12px;border-radius:8px;color:var(--white)}
label{color:var(--muted);font-weight:600}
.footer{margin-top:auto;padding:20px 20px;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}
@media(max-width:900px){
  .sidebar{position:relative;width:100%;flex-direction:row;align-items:center;justify-content:space-between;padding:12px 16px}
  .sidebar0{position:relative;width:100%;flex-direction:row;align-items:center;justify-content:space-between;padding:12px 16px}
  .main{margin-left:0}
  .hero{flex-direction:column;align-items:flex-start}
  .quick-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .side-nav{flex-direction:row;gap:8px;overflow:auto}
  .side-nav a{white-space:nowrap}
  .side-nav0{flex-direction:row;gap:8px;overflow:auto}
  .side-nav b{white-space:nowrap}

}