:root{
  --color-bg: #061732;
  --color-surface: #0b1220;
  --color-surface-2: #0f1724; 
  --color-text: #E6F2F7; 
  --color-muted: #98A6B2; 
  --color-primary: #00BCD4; 
  --color-primary-600: #00ACC1; 
  --radius: 10px;
  --max-width: 1100px;
  --gap: 24px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

  color-scheme: only dark;
}

* { box-sizing: border-box; }

body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--color-text);
  background-color: var(#020312);
  background:linear-gradient(180deg, var(--color-bg) 0%, #020312 80%);
  background-attachment: fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

html, body {
  height: 100vh;
  height: 100dvh;
  -webkit-overflow-scrolling: auto;
}

a {
    color: #00bcd4;
}


.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
}

.section {
  padding:16px;
}


.grid{ display:grid; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gap-12 { gap:12px; }
.gap-16 { gap:16px; }
.gap-24 { gap:24px; }
.gap-32 { gap:32px; }
.gap-48 { gap:48px; }
.gap-64 { gap:64px; }


.site-header{
  background:linear-gradient(90deg, rgba(6,10,18,0.65), rgba(6,10,18,0.55));
  border-bottom:1px solid rgba(255,255,255,0.04);
  position:sticky;
  top:0;
  z-index:60;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  color:inherit;
  padding:0 8px;
}
.brand .logo{ display:block; }
.brand-text{ font-weight:600; letter-spacing:0.2px; font-size:1.35rem; }


.site-nav{ display:block; }
.nav-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:18px;
  align-items:center;
}
.nav-list a{
  text-decoration:none;
  color:inherit;
  padding:8px 10px;
  border-radius:6px;
  font-weight:500;
}
.nav-list a:hover,
.nav-list a[aria-current="page"]{
  background:rgba(0,188,212,0.12);
  color:var(--color-primary-600);
}


.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  padding:8px;
  margin-left:8px;
}
.hamburger{
  width:22px;
  height:2px;
  background:currentColor;
  color:white;
  display:block;
  position:absolute;
  right:32px;
}
.hamburger::before,
.hamburger::after{
  content:"";
  width:22px;
  height:2px;
  background:currentColor;
  position:absolute;
  right:0;
}
.hamburger::before{ top:-6px; }
.hamburger::after{ top:6px; }


.hero{
  padding:48px 0;
  background:linear-gradient(180deg, rgba(0,188,212,0.06), transparent);
}
.hero-inner{
  grid-template-columns: 1fr 420px;
  gap:24px;
  align-items:center;
}
.hero-title{
  font-size:2.35rem;
  line-height:1.08;
  margin:0 0 12px 0;
}
.hero-subtitle{ margin:0 0 20px 0; color:var(--color-muted); }
.hero-cta .btn{ margin-right:12px; }


.card{
  background:var(--color-surface);
  border-radius:12px;
  padding:20px;
  box-shadow:0 6px 18px rgba(2,6,23,0.6);
}
.card-title{ margin-top:0; }
.service-card{ padding:18px; border-radius:12px; background:var(--color-surface); text-align:left; }
.service-figure{ height:84px; border-radius:8px; background:linear-gradient(135deg,#12243a,#0d1b2f); margin-bottom:12px; align-items:center; align-content:center; text-align:center; }


.form .field{ margin-bottom:14px; display:flex; flex-direction:column; gap:8px; }
input, textarea{
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color:var(--color-text);
  padding:10px 12px;
  border-radius:8px;
  font-size:0.95rem;
  font-family:inherit;
}
input::placeholder, textarea::placeholder { color: rgba(230,242,247,0.45); }
input:focus, textarea:focus{ outline:3px solid rgba(0,188,212,0.14); border-color:var(--color-primary); }

.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:8px;
  text-decoration:none;
  color:var(--color-text);
  background:var(--color-primary);
  border:1px solid var(--color-primary);
  cursor:pointer;
  font-weight:600;
}
.btn-primary{ background:var(--color-primary); }
.btn-outline{
  background:transparent;
  color:var(--color-primary-600);
  border:1px solid rgba(0,188,212,0.16);
}
.btn-ghost{
  background:transparent;
  color:var(--color-muted);
  border:1px solid transparent;
}

.site-footer{
  border-top:1px solid rgba(255,255,255,0.04);
  background: var(--color-surface);
  padding:16px 0 18px;
}
.footer-inner{
  display:flex;
  gap:24px;
  align-items:flex-start;
  justify-content:space-between;
}
.footer-column{ min-width:180px; }
.footer-links, .social-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.footer-links a{ text-decoration:none; color:inherit; }

.muted{ color:var(--color-muted); }
.align-center{ text-align:center; align-items:center; justify-content:center; }

@media (max-width:880px){
  .hero-inner{ grid-template-columns: 1fr; }
  .cols-3 { grid-template-columns: repeat(1, 1fr); }
  .cols-2 { grid-template-columns: repeat(1, 1fr); }
  .nav-list{ display:none; flex-direction:column; background:var(--color-surface); position:absolute; right:20px; top:64px; padding:12px; border-radius:8px; box-shadow:0 6px 20px rgba(2,6,23,0.6); }
  .nav-toggle{ display:inline-flex; }
  .site-nav.open .nav-list{ display:flex; }
  .header-inner{ gap:12px; }
  .footer-inner{ flex-direction:column; gap:18px; }
  .container.section { padding:16px; }
}

.btn-primary {
    color: black;
}

.price-indicator {
    color: var(--color-muted);
}