:root{
  --bg: #0b1220;
  --bg-alt:#0e1526;
  --card:#121a2d;
  --text:#e6f0ff;
  --muted:#9fb3c8;
  --primary:#0ea5e9;   /* brand cyan */
  --primary-2:#35c6f4;
  --ring: rgba(14,165,233,.35);
  --maxw: 1120px;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),#0a1326 55%,var(--bg));
  line-height:1.6;
}

/* Utilities */
.container{max-width:var(--maxw); margin-inline:auto; padding: 0 1.2rem}
.section{padding: 4.5rem 0}
.section--alt{background:var(--bg-alt)}
.section__title{font-size:2rem; margin:0 0 1.2rem}
.muted{color:var(--muted)}
.brand-accent{color:var(--primary)}
.grid{display:grid; gap:1.2rem}
.cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.badge{background:#15223a; color:#b6e7ff; padding:.35rem .6rem; border-radius:999px; font-size:.85rem; border:1px solid #1b2a47}
.badges{display:flex; flex-wrap:wrap; gap:.5rem}
.btn{
  display:inline-block; padding:.9rem 1.2rem; border-radius:12px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  color:#00111a; font-weight:700; text-decoration:none; border:none; cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease;
  box-shadow:0 6px 20px rgba(53,198,244,.25);
}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{
  background:transparent; color:var(--text); border:1px solid #1c2b48;
  box-shadow:none
}
.btn--small{padding:.6rem .9rem; font-weight:600; color: #000}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(5,10,22,.6);
  border-bottom:1px solid #101a2e;
}
.site-header .brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); font-weight:700
}
.logo{width:36px; height:36px}
.site-header .nav{
  display:flex; gap:1rem; align-items:center
}
.site-header .nav a{color:var(--muted); text-decoration:none; font-weight:600}
.site-header .nav a:hover{color:var(--text)}
.site-header{display:flex; align-items:center; justify-content:space-between; padding:.7rem 1.2rem}

.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle .bar{width:22px; height:2px; background:#cde7ff; margin:4px 0}

@media (max-width: 820px){
  .nav{position:fixed; inset:60px 0 auto 0; background:#0a1222; padding:1rem; display:none; flex-direction:column; border-bottom:1px solid #10213a}
  .nav.show{display:flex}
  .nav-toggle{display:block}
}

/* Hero */
.hero{
  padding: 5.5rem 0 4rem;
  background:
    radial-gradient(1000px 450px at 70% -10%, rgba(53,198,244,.15), transparent 60%),
    radial-gradient(900px 400px at 20% -10%, rgba(14,165,233,.18), transparent 60%);
  text-align:center;
}
.hero__title{font-size:clamp(2rem,4vw,3rem); margin:.2rem 0 .4rem; letter-spacing:-.02em}
.hero__subtitle{color:#d6e8ff; margin:0 0 1.4rem}
.hero__cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.hero__badge span{
  display:inline-block; margin-top:1rem; padding:.4rem .7rem; border:1px solid #1b2743; border-radius:999px; color:#bfeaff
}

/* Cards */
.card{
  background:var(--card); padding:1.2rem; border-radius:var(--radius);
  border:1px solid #1b2743;
  box-shadow:var(--shadow);
}
.card__link{color:#9bdcff; font-weight:700; text-decoration:none}
.card__link:hover{text-decoration:underline}

/* About */
.about{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}
.media{margin:0}
.media img{width:100%; height:auto; border-radius:var(--radius); border:1px solid #1b2743}

/* Form */
.form{margin-top:1rem}
.form__grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.field{display:flex; flex-direction:column; gap:.45rem; margin: .6rem 0}
.field input, .field select, .field textarea{
  width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid #203153; background:#0c1529; color:var(--text);
  outline:none; transition:border .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--ring)}
.field span{font-weight:600}
.form__status{margin-top:.8rem; min-height:1.2rem}
.hp{display:none !important}

/* Footer */
.site-footer{padding:2rem 0; border-top:1px solid #0f1a2f; background:#080f1e}
.footer__inner{display:grid; gap:.8rem; align-items:center; grid-template-columns:1fr auto auto}
.footer__brand{display:flex; align-items:center; gap:.6rem}
.footer__nav{display:flex; gap:.9rem}
.footer__nav a{color:#b9d7ee; text-decoration:none}
.footer__nav a:hover{text-decoration:underline}
@media (max-width:740px){.footer__inner{grid-template-columns:1fr}}

.reveal{opacity:0; transform:translateY(12px); transition:.5s ease}
.reveal.in-view{opacity:1; transform:none}

/* Light mode (optional) */
@media (prefers-color-scheme: light){
  :root{--text:#0c1222; --bg:#f8fbff; --bg-alt:#f4f8ff; --card:#ffffff; --muted:#4b5a70}
  .site-header{background:rgba(255,255,255,.7); border-bottom:1px solid #e6eef8}
  .hero{background:radial-gradient(1100px 500px at 65% -10%, rgba(14,165,233,.12), transparent 60%)}
  .badge{background:#e9f6ff; color:#0a3550; border-color:#d5eefe}
}

/* Reviews */
#reviews .form { margin-top: 1rem; }
.reviews-list {
  margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.reviews-list .card {
  background: var(--card);
  padding: 1.2rem;
  border-radius: var(--radius);
  border: 1px solid #1b2743;
}

.reviews-list .card strong {
  display:block;
  margin-top:.6rem;
  color: var(--primary);
}