/* ------------------------------
   Root + Base
------------------------------ */
:root{
  --bg:#0a1116;
  --bg-alt:#0b151b;
  --text:#e6f0f4;
  --muted:#b9c7ce;
  --line:rgba(255,255,255,.08);
  --main:#00bfff;
  --main-ink:#001318;
  --max:1100px;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  font-size:16px;
}
img{max-width:100%;display:block}
a{color:var(--main);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

/* ------------------------------
   Header / Nav
------------------------------ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,17,22,.75);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px;
  font-size:.92rem; color:var(--text);
}
.brand img{width:26px;height:26px}

.nav-links{display:flex; gap:18px}
.nav-links a{color:#fff; opacity:.9; font-size:.94rem}
.nav-links a:hover{opacity:1}

.nav-toggle{display:none}
.nav-burger{display:none}

/* Mobile nav */
@media (max-width:900px){
  .nav-burger{display:block; width:40px; height:40px; position:relative; cursor:pointer}
  .nav-burger span,
  .nav-burger span::before,
  .nav-burger span::after{
    content:""; position:absolute; left:8px; right:8px; height:2px; background:#fff; top:19px; transition:.3s
  }
  .nav-burger span::before{top:-8px}
  .nav-burger span::after{top:8px}

  .nav-links{
    position:fixed; inset:64px 0 auto 0;
    background:rgba(10,17,22,.97);
    border-bottom:1px solid var(--line);
    transform:translateY(-100%);
    transition:.3s;
    display:flex; flex-direction:column; gap:0;
  }
  .nav-links a{padding:16px 20px; border-top:1px solid var(--line)}
  .nav-toggle:checked ~ .nav-links{transform:translateY(0)}
  .nav-toggle:checked + .nav-burger span{background:transparent}
  .nav-toggle:checked + .nav-burger span::before{transform:rotate(45deg); top:0}
  .nav-toggle:checked + .nav-burger span::after{transform:rotate(-45deg); top:0}
}

/* ------------------------------
   Hero
------------------------------ */
.hero{position:relative; min-height:72vh; display:grid; place-items:end start;}
.hero-media{
  position:absolute; inset:0; background:#000;
}
.hero-media::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55) 50%, rgba(10,17,22,.9));
}
.hero-media{background-image:var(--bg); background-size:cover; background-position:center}

.hero-inner{padding:110px 20px 60px; position:relative}
.display{
  font-size:2.8rem; line-height:1.1; margin:0 0 10px; letter-spacing:.2px;
}
.lead{max-width:760px; opacity:.92; margin:0 0 20px}
.btn{
  display:inline-block; padding:12px 18px; border-radius:999px; font-weight:700; border:1px solid transparent;
}
.btn-primary{
  background:var(--main); color:var(--main-ink);
  box-shadow:0 8px 24px rgba(0,191,255,.25);
}
.btn-primary:hover{transform:translateY(-1px)}

/* ------------------------------
   Sections & Utilities
------------------------------ */
.section{padding:72px 0}
.section-alt{background:radial-gradient(1100px 220px at 50% -70px, rgba(0,191,255,.12), transparent 60%) var(--bg)}
.h-rule{
  display:inline-block; position:relative; padding-bottom:8px; margin:0 0 12px; line-height:1.2;
}
.h-rule::after{
  content:""; position:absolute; left:0; bottom:0; width:64px; height:3px;
  background:linear-gradient(90deg, var(--main), rgba(0,191,255,.15)); border-radius:3px;
}
.grid{display:grid; gap:20px}
.grid-2{grid-template-columns:1.05fr .95fr}
@media (max-width:920px){ .grid-2{grid-template-columns:1fr} }

.text-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow);
}
.media-card{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line)}
.media-card img{width:100%; height:100%; object-fit:cover}

/* Vision list */
.list-check{list-style:none; padding:0; margin:14px 0 0}
.list-check li{position:relative; padding-left:28px; margin:8px 0}
.list-check li::before{
  content:""; position:absolute; left:0; top:.45em; width:16px; height:16px; border-radius:50%;
  background:var(--main);
}

/* ------------------------------
   Focus mosaic
------------------------------ */
.focus-grid{
  display:grid; gap:18px; grid-template-columns:repeat(3, 1fr);
  align-items:start;
}
.focus-grid .text-card h3{margin:.2rem 0 .4rem}
.media-stack{
  grid-row:span 2; border-radius:var(--radius); overflow:hidden; position:relative; display:grid; gap:0;
  border:1px solid var(--line);
}
.media-stack img:first-child{height:210px; width:100%; object-fit:cover}
.media-stack img:last-child{height:260px; width:100%; object-fit:cover}
@media (max-width:920px){
  .focus-grid{grid-template-columns:1fr}
  .media-stack{grid-row:auto}
}

/* ------------------------------
   Cards grid
------------------------------ */
.cards-grid{
  margin-top:10px;
  display:grid; gap:18px;
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:1024px){ .cards-grid{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:680px){ .cards-grid{grid-template-columns:1fr} }

.card{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-alt);
  box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.card img{height:170px; width:100%; object-fit:cover}
.card-body{padding:14px 16px}
.card-body h3{margin:.25rem 0 .35rem}
.card-body p{color:var(--muted); margin:0}

/* Testimonials */
.cards-grid--testimonials .t-card{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-alt); padding:12px; text-align:center;
  box-shadow:var(--shadow);
}
.t-card img{width:100%; height:170px; object-fit:cover; border-radius:10px}
.t-card blockquote{margin:10px auto; color:#eaf6ff; font-weight:600}
.t-card figcaption{color:var(--muted); font-size:.92rem}

/* ------------------------------
   Contact
------------------------------ */
.contact-grid{
  display:grid; gap:22px; grid-template-columns: 1fr 1.2fr;
}
@media (max-width:980px){ .contact-grid{grid-template-columns:1fr} }

.contact-details p{margin:.4rem 0}
.contact-details a{color:#ccefff; text-decoration:underline}

.contact-form{padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-alt); box-shadow:var(--shadow)}
.contact-form .field{margin-bottom:12px}
.contact-form label{display:block; font-size:.9rem; opacity:.85; margin:0 0 6px}
.contact-form input,
.contact-form textarea{
  width:100%; padding:13px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background:#0b151b; color:#fff; outline:none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:rgba(255,255,255,.6)}
.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--main)}
.form-row--two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:720px){ .form-row--two{grid-template-columns:1fr} }
.contact-form .btn{width:100%; margin-top:8px}

/* Map full width under contact */
.map-wrap{margin-top:26px; border-top:1px solid var(--line)}
.map-wrap iframe{width:100%; height:340px; display:block; border:0}

/* ------------------------------
   Footer
------------------------------ */
.footer{border-top:1px solid var(--line); padding:26px 0; background:#0a1014}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:20px}
.footer small{color:var(--muted)}
.to-top{color:#ccefff; font-weight:600}