/* ===== Tokens ===== */
:root{
  --bg: #0b1526;
  --paper: #0f1b2d;
  --ink: #e9eef7;
  --muted: #b0bdd3;
  --brand: #2aa8ff;
  --brand-2: #6ce1ff;
  --accent: #83ffa9;
  --card: #121f35;
  --stroke: #1d2a41;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg), #0d1830 40%, #0d1a34 100%);
  color: var(--ink);
  line-height: 1.6;
}

/* Utilities */
.container{width:min(1200px, 92%); margin-inline:auto}
.section{padding: 80px 0}
.section-alt{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));}
h1,h2,h3{line-height:1.2; margin:0 0 12px}
h1{font-size: clamp(28px, 5vw, 48px)}
h2{font-size: clamp(22px, 3.5vw, 34px)}
h3{font-size: clamp(18px, 2.5vw, 24px)}
p{margin: 0 0 16px}
.muted{color: var(--muted)}
.accent{color: var(--accent)}
.grid-2{display:grid; gap:28px; grid-template-columns: 1fr}
@media (min-width: 860px){ .grid-2{ grid-template-columns: 1.2fr .8fr } }

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.btn{
  display:inline-block;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#041122;
  border:none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight:700;
  text-decoration:none;
  box-shadow: 0 6px 16px rgba(42,168,255,.35);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(42,168,255,.45); }
.btn-outline{
  background: transparent;
  color: var(--ink);
  border:1px solid var(--brand);
  box-shadow:none;
}

/* Header / Nav */
.site-header{
  position: sticky; top:0; z-index: 1000;
  background: rgba(10,17,34,.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700}
.brand-mark{width:34px; height:34px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));}
.brand-text b{color: var(--brand)}
.nav{display:flex; gap:18px}
.nav a{color:var(--muted); text-decoration:none; font-weight:600; padding:10px 6px; border-radius:10px}
.nav a:hover{color:var(--ink); background: rgba(255,255,255,.05)}

.nav-toggle{display:none; width:42px; height:42px; background:transparent; border:1px solid var(--stroke); border-radius:10px}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after{
  content:""; display:block; height:2px; background: var(--ink); margin: 0 auto;
  width:24px; position:relative; top:0; transition:.2s;
}
.nav-toggle-bar::before{ position:absolute; top:-7px; }
.nav-toggle-bar::after{ position:absolute; top:7px; }
@media (max-width: 840px){
  .nav{position:absolute;left:0; right:0; top:64px;display:none;flex-direction:column;gap:10px;padding:16px 4%;background: rgba(7,12,24,0.98);          /* much darker/clearer panel */
    border-top: 1px solid rgba(255,255,255,.10);border-bottom: 1px solid rgba(255,255,255,.08);box-shadow: 0 18px 36px rgba(0,0,0,.55);backdrop-filter: blur(8px);               /* subtle glass effect */}
  .nav.is-open{ display:flex }
  /* Links look like clear tappable rows */
  .nav a{color: var(--ink);background: rgba(255,255,255,.06);border: 1px solid var(--stroke);
    border-radius: 12px;padding: 12px 14px;font-weight: 700;}
  .nav a:hover,.nav a:active{background: rgba(255,255,255,.12);}
  /* Toggle button gets a clearer state when open */
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center }
  .nav-toggle[aria-expanded="true"]{background: rgba(255,255,255,.08);}}
/* Optional: prevent background page scroll when menu is open */
body.nav-open{ overflow:hidden }
/* Hero */
.hero{position:relative; overflow:hidden}.slider{position:relative}.slides{position:relative; height: clamp(420px, 60vw, 640px)}
.slide{position:absolute; inset:0; opacity:0; transition: opacity .5s ease, transform .6s ease;
  transform: scale(.98);display:grid; align-content:center;}
.slide.is-active{ opacity:1; transform: scale(1) }
.slide-media{position:absolute; inset:0;background-size: cover; background-position:center;filter: contrast(1.05) saturate(1.1) brightness(.85);}
.slide-media--steel{background-image:    radial-gradient(1200px 500px at 10% 20%, rgba(42,168,255,.25), transparent 50%),
    url('https://images.unsplash.com/photo-1524231757912-21f4fe3a7200?q=80&w=1600&auto=format&fit=crop');}
.slide-media--concrete{background-image:radial-gradient(800px 400px at 90% 70%, rgba(131,255,169,.25), transparent 60%),
    url('https://images.unsplash.com/photo-1518779578993-ec3579fee39f?q=80&w=1600&auto=format&fit=crop');}
.slide-media--bim{background-image:radial-gradient(1000px 400px at 70% 30%, rgba(108,225,255,.25), transparent 60%),
    url('https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?q=80&w=1600&auto=format&fit=crop');}
.slide-content{ position:relative; z-index:2; max-width: 780px; padding: 40px 0 }
.slide-content p{ color: var(--muted); font-size: 1.05rem }
.slider-controls{ display:flex; gap:10px; padding: 12px 0 22px }
.dot{ width:10px; height:10px; border-radius:50%; border:1px solid var(--muted); background:transparent; opacity:.9 }
.dot.is-active, .dot:hover{ background: var(--brand); border-color: var(--brand); }
/* Hero legibility improvements */
.slide::before{content:"";position:absolute; inset:0;
  /* subtle darkening across the whole slide to help contrast */
  background: linear-gradient(180deg, rgba(4,10,20,.15), rgba(4,10,20,.45));pointer-events:none;}
/* Let the hero text sit in a compact panel rather than full container width */
.slide-content.container { width: auto; }
/* The faint bordered background behind the wording */
.slide-content{display:inline-block;background: rgba(12,23,42,.60);             /* translucent panel */
  border: 1px solid rgba(255,255,255,.14);     /* faint border */
  border-radius: 16px;padding: 22px 24px;backdrop-filter: blur(6px);                  /* gentle glassy effect */
  box-shadow: 0 10px 30px rgba(0,0,0,.35);max-width: min(760px, 92vw);}                 /* keep it tidy on large screens */
/* Sharpen headings and copy on busy images */
.slide-content h1,.slide-content p{text-shadow: 0 2px 6px rgba(0,0,0,.5);margin: 0 0 12px;}
@media (max-width: 640px){.slide-content{ padding:16px; }}
/* (Optional) slightly smoother slide fade */
.slide{transition: opacity .8s ease, transform .8s ease;}
/* Lists */
.checklist{ list-style:none; padding:0; margin: 16px 0 0 }
.checklist li{ padding-left:26px; position:relative; margin:10px 0; color:var(--ink) }
.checklist li::before{content:"✓"; position:absolute; left:0; top:0; color: var(--accent); font-weight:700}
/* Profile */
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.pill{border:1px solid var(--stroke); padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.03) }
.profile-card{ text-align:center }
.avatar{ width:96px; height:96px; border-radius:50%; margin:0 auto 12px; background: linear-gradient(180deg,#365780,#1a2b44) }

/* Pricing */
.cards-3{ display:grid; gap:18px; grid-template-columns: 1fr }
@media (min-width: 860px){ .cards-3{ grid-template-columns: repeat(3, 1fr) } }
.card .price{ font-weight:700; font-size: 18px; margin: 6px 0 10px }
.card .price span{ font-size:36px }
.features{ list-style:none; padding:0; margin:0 0 14px; color: var(--muted) }
.features li{ margin:6px 0 }
.featured{ border-color: var(--brand); box-shadow: 0 10px 28px rgba(42,168,255,.18) }

/* Contact */
.contact-list{ list-style:none; padding:0; margin:0 0 14px }
.contact-list li{ margin: 6px 0 }
.contact-form label{ display:block; margin-bottom:12px }
.contact-form span{ display:block; font-size: 13px; color: var(--muted); margin-bottom:6px }
.contact-form input, .contact-form textarea{
  width:100%; background: #0c172a; color: var(--ink); border:1px solid var(--stroke); border-radius:10px; padding:10px 12px;
}
.form-note{ color: var(--muted); font-size: 12px; margin-top:10px }

/* Footer */
.site-footer{ border-top: 1px solid rgba(255,255,255,.06); padding: 22px 0; }
.footer-inner{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap }
.credit a{ color: var(--brand); text-decoration: none }
.credit a:hover{ text-decoration: underline }

/* Back to top */
.back-to-top{
  position:fixed; right:20px; bottom:20px; width:46px; height:46px;
  border-radius:50%; border:1px solid var(--stroke);
  background: radial-gradient(circle at 30% 30%, var(--brand), var(--brand-2));
  color:#001429; font-weight:700;
  display:grid; place-items:center;
  box-shadow: var(--shadow);
  cursor:pointer;
  opacity:.9; transform: translateY(0); transition: opacity .2s, transform .2s;
}
.back-to-top:hover{ opacity:1; transform: translateY(-2px) }

/* Smooth anchor scroll base */
html{ scroll-behavior: smooth }