:root{
  --teal: #0a6e84;
  --teal-700:#075a6b;
  --dark: #111214;
  --dark-700:#0b0c0d;
  --text: #e8eef2;
  --muted:#b9c6cf;
  --white:#ffffff;
  --orange:#e96e2b;
  --orange-700:#c95819;

  --container: 1120px;
  --radius: 18px;
}

.logo-img {
  height: 38px;       /* adjust to your design */
  width: auto;
  object-fit: contain;
  display: block;
}


*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:var(--text); background:var(--dark)}
img{max-width:100%; display:block}
:target{scroll-margin-top: 88px}

.container{width:min(calc(100% - 2rem), var(--container)); margin-inline:auto}
.section{padding:72px 0}
.section-teal{background:var(--teal)}
.section-dark{background:var(--dark)}

.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px); background:rgba(17,18,20,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:16px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--white); font-weight:700}
.logo-dot{width:12px; height:12px; border-radius:50%; background:var(--orange)}
.nav-links{display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0}
.nav-links a{color:var(--text); text-decoration:none; opacity:.9}
.nav-links a:hover{opacity:1}
.nav-toggle{display:none}

.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border-radius:999px; font-weight:600; text-decoration:none; border:0; cursor:pointer}
.btn-primary{background:var(--teal); color:#fff; border:1px solid rgba(255,255,255,.15)}
.btn-primary:hover{background:var(--teal-700)}
.btn-light{background:rgba(255,255,255,.92); color:#0b0c0d}
.btn-light:hover{background:#fff}
.btn-accent{background:var(--orange); color:#fff}
.btn-accent:hover{background:var(--orange-700)}
.btn-pill{background:#1e2226; color:#eaf1f5; border-radius:999px; padding:12px 22px}
.btn-pill:hover{background:#252a2f}

.hero{position:relative; min-height:72vh; display:grid; place-items:center; overflow:hidden}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; filter:saturate(.9) brightness(.55); z-index:-2}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.45)); z-index:-1}
.hero-content{text-align:left; padding:72px 0}
.hero h1{font-size:clamp(2.4rem,5vw,5rem); line-height:1.05; margin:0 0 16px; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.35)}
.hero p{max-width:56ch; margin:0 0 28px; color:var(--muted); font-size:clamp(1rem,1.2vw,1.125rem)}

.stack{display:flex; flex-direction:column; gap:64px}
.feature{display:grid; gap:32px; align-items:center; grid-template-columns:1.1fr 1fr}
.feature--reverse{grid-template-columns:1fr 1.1fr}
.feature--reverse .feature-text{order:2}
.feature--reverse .feature-media{order:1}
.feature-text h2{margin:0 0 12px; font-size:clamp(1.6rem,3vw,2.4rem); color:#fff}
.feature-text p{margin:0 0 20px; color:#e7f1f4}
/* .feature-media{border: 1px solid rgba(255,255,255,.12); border-radius:var(--radius); overflow:hidden; background:#0b0c0d} */
.feature-media{  border: none; border-radius: var(--radius);  overflow:hidden;  background: transparent;  box-shadow: 0 6px 24px rgba(0,0,0,.25);}
.feature-media img{width:100%; height:auto}

.services-head{margin-bottom:28px}
.eyebrow{color:#aab8c2; letter-spacing:.2px; margin:0 0 8px}
.services-head hr{border:0; height:1px; background:rgba(255,255,255,.14)}
.services{display:flex; flex-direction:column; gap:36px}
.service-row{display:grid; gap:24px; grid-template-columns:1.2fr 1fr; background:#16191d; padding:28px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.06)}
.service-row--teal{background:var(--teal)}
.service-title h3{margin:0; font-size:clamp(1.6rem,2.6vw,2.2rem)}
.service-body p{margin:0 0 16px; color:#d7e3ea}
.service-row--teal .service-body p{color:#eaf6fb}

.faq-grid{display:grid; gap:28px; grid-template-columns:1fr 1fr}
.faq-intro h2{margin:6px 0 12px 0; font-size:clamp(1.8rem,3vw,2.4rem)}
.faq-list{display:grid; gap:18px}
.faq-item{background:rgb(180, 180, 180); border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden}
.faq-q{width:100%; background:transparent; color:#e9f0f5; border:0; text-align:left; display:flex; align-items:center; gap:12px; padding:16px 18px; cursor:pointer; font-weight:600}
.faq-q:hover{background:rgba(255,255,255,.03)}
.faq-badge{width:28px; height:28px; border-radius:999px; display:inline-grid; place-items:center; background:rgba(255,255,255,.08)}
.chev{margin-left:auto; opacity:.8; transition:transform .2s ease}
.faq-q[aria-expanded="true"] .chev{transform:rotate(180deg)}
.faq-a{padding:0 18px 16px 58px; color:#cfd9e0; border-top:1px solid rgba(255,255,255,.06)}

.contact-cta{text-align:center; max-width:860px; margin-inline:auto; margin-bottom:32px}
.contact-cta h2{font-size:clamp(1.8rem,3.6vw,2.6rem); margin:0 0 12px}
.contact-cta p{margin:0 0 18px; color:#e7f1f4}

.contact-grid {  display: grid;  gap: 28px;  grid-template-columns: 1fr 1fr;}
.contact-form {  display: grid;  gap: 12px;  background: rgba(0,0,0,.15);  padding: 20px;  border-radius: var(--radius);  border: 1px solid rgba(255,255,255,.08);}
.contact-form label {  display: grid;  gap: 6px;  font-size: .95rem;}
/* Inputs, textarea and select share the same base style */
.contact-form input,.contact-form textarea,.contact-form select {  width: 100%;  padding: 12px 14px;  border-radius: 10px;  border: 1px solid rgba(255,255,255,.2);  background: rgba(255,255,255,.04);  color: #fff;}
/* Focus ring for all fields, including select */
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus {  outline: 2px solid rgba(255,255,255,.35);}
/* Select field: remove native arrows but keep same bg as other fields */
.contact-form select {  appearance: none;  -moz-appearance: none;  -webkit-appearance: none;  background: rgba(255,255,255,.04);  color: #fff;}
/* Dropdown options (popup list) */
.contact-form select option {  background-color: rgb(180, 180, 180);  color: #fff;}
.contact-form select option:hover,.contact-form select option:checked {  background-color: #1f2933;  color: #fff;}
.contact-side {  display: grid;  align-content: start; gap: 20px;}
.contact-card {  background: rgb(180, 180, 180);  border: 1px solid rgba(255,255,255,.08);  border-radius: var(--radius);  padding: 20px;}
.contact-card h3 {  margin: 0 0 8px;}
.contact-list {  margin: 0;  padding-left: 16px;  color: #dbe6ee;}
.contact-logo{  justify-self: center; margin-top: 8px;}
.contact-logo img{ height: auto; display: block; opacity: 0.9; filter: brightness(1.05);}


.footer{background:#0b0c0d; padding:28px 0; color:#a9b3bb}
.footer-inner{display:flex; justify-content:center}

/* ======= SCROLL REVEAL ANIMATIONS ======= */
.reveal {  opacity: 0;  transform: translateY(24px);  transition:    opacity 0.6s ease-out,    transform 0.6s ease-out;  will-change: opacity, transform;}
.reveal--visible {  opacity: 1;  transform: translateY(0);}

/* Optional variants if you want left/right slide */
.reveal-left {  transform: translateX(-32px);}
.reveal-right {  transform: translateX(32px);}
.reveal-left.reveal--visible,.reveal-right.reveal--visible {  transform: translateX(0);}
.hero-video {  animation: slowfade 1s ease-out forwards;}

/* Honeypot: hidden from real users */
.honeypot-wrapper {  position: absolute;  left: -9999px;  opacity: 0;  pointer-events: none;  height: 0;  width: 0;}

/* Alert above form */
.form-alert {  opacity: 0;  transition: opacity .6s ease;  padding: 14px 18px;  border-radius: 10px;  margin-bottom: 20px;  font-size: .95rem;  text-align: center;}

/* success style */
.form-alert.success {  background: rgba(0, 170, 90, .15);  border: 1px solid rgba(0, 170, 90, .4);  color: #5dffb0;}

/* error style */
.form-alert.error {  background: rgba(255, 50, 50, .15);  border: 1px solid rgba(255, 50, 50, .4);  color: #ff9a9a;}

/* Loading state on submit button */
.btn.is-loading {  position: relative;  cursor: wait;  opacity: 0.8;}

.btn.is-loading span {  visibility: hidden; /* hide text while spinner runs */}

/* spinner in button */
.btn.is-loading::after {  content: "";  position: absolute;  top: 50%;  left: 50%;  width: 18px;  height: 18px;  border-radius: 50%;  border: 2px solid rgba(255,255,255,.4);  border-top-color: #fff;  transform: translate(-50%, -50%);  animation: btn-spin .7s linear infinite;}

@keyframes btn-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes slowfade {  from { opacity: 0; }  to   { opacity: 1; }}


@media (max-width:960px){
  .feature,.feature--reverse{grid-template-columns:1fr}
  .feature--reverse .feature-text{order:1} .feature--reverse .feature-media{order:2}
  .service-row{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .nav-toggle{display:block; background:none; color:#fff; border:0; font-size:1.25rem}
  .nav-links{display:none}
  .nav[aria-expanded="true"] .nav-links{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
}
@media (max-width:480px){
  .hero-content{padding:48px 0}
  .hero h1{font-size:clamp(2rem,7vw,3.5rem)}
}