@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap");

:root{
  --bg:#0B1230;
  --bg2:#0F173A;
  --text:#0B1230;
  --muted:#5C6B8A;
  --card:#FFFFFF;
  --line:rgba(11,18,48,.10);

  --accent1:#FF8A00;
  --accent2:#FF2D55;
  --accent3:#1D6BFF;

  --shadow: 0 12px 30px rgba(11,18,48,.10);
  --radius: 18px;
  --container: 1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  color:var(--text);
  background:#fff;
}

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

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

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  gap:16px;
}

.brand{display:flex; align-items:center; text-decoration:none;}
.brand-mark{height:44px; width:auto; display:block;}

.nav{display:flex; align-items:center; gap:14px;}
.nav-menu{display:flex; align-items:center; gap:18px;}
.nav-link{
  text-decoration:none;
  color:rgba(11,18,48,.78);
  font-weight:600;
  font-size:14px;
}
.nav-link:hover{color:rgba(11,18,48,1);}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:14px;
  padding:12px 16px;
  font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active{transform:translateY(1px)}

.btn-primary{
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  color:#fff;
  box-shadow: 0 10px 24px rgba(255,45,85,.18);
}
.btn-primary:hover{
  box-shadow: 0 14px 28px rgba(255,45,85,.22);
}

.btn-ghost{
  background: rgba(255,255,255,.10);
  color:#fff;
  border:1px solid rgba(255,255,255,.20);
}
.btn-ghost:hover{background: rgba(255,255,255,.16);}

.hero{
  position:relative;
  color:#fff;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,18,48,.25), rgba(11,18,48,.45)),
    radial-gradient(1200px 420px at 20% 20%, rgba(29,107,255,.35), transparent 60%),
    radial-gradient(900px 360px at 75% 20%, rgba(255,45,85,.28), transparent 60%),
    url("img/Hero.png") center/cover no-repeat,
    linear-gradient(180deg, var(--bg), var(--bg2));
}
.hero-inner{
  position:relative;
  padding:92px 0 84px;
  min-height:520px;
  display:flex;
  align-items:center;
}
.hero-copy{max-width:680px;}
h1{
  margin:0 0 14px;
  font-size:44px;
  line-height:1.08;
  letter-spacing:-.5px;
}
.lead{
  margin:0 0 22px;
  font-size:18px;
  line-height:1.6;
  color:rgba(255,255,255,.82);
}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap;}
.hero-meta{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap;}
.pill{
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.86);
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  padding:8px 10px;
  border-radius:999px;
}

.section{padding:62px 0; scroll-margin-top:90px;}
.section.alt{background: #F6F8FF;}

h2{
  margin:0 0 18px;
  font-size:30px;
  letter-spacing:-.2px;
}
h3{
  margin:0 0 10px;
  font-size:18px;
  letter-spacing:-.1px;
}
p{margin:0; color:rgba(11,18,48,.78); line-height:1.65;}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top:18px;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}
.icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:28px;
  line-height:1;
  color:#0B1230;
  margin-bottom:12px;
}

.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top:18px;
}
.step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
}
.step-num{
  width:38px;height:38px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  background: rgba(29,107,255,.10);
  color: var(--accent3);
  margin-bottom:10px;
}
.step:nth-child(2) .step-num{background: rgba(255,45,85,.10); color: var(--accent2);}
.step:nth-child(3) .step-num{background: rgba(255,138,0,.12); color: var(--accent1);}

.two-col{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:20px;
  align-items:start;
}
.checks{
  list-style:none;
  padding:0;
  margin:10px 0 0;
}
.checks li{
  display:flex;
  gap:10px;
  padding:10px 0;
  border-bottom:1px dashed rgba(11,18,48,.12);
  color:rgba(11,18,48,.82);
  font-weight:650;
}
.checks li:before{
  content:"✓";
  color: var(--accent3);
  font-weight:900;
}

.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}
.bullets{
  margin:10px 0 12px 18px;
  color:rgba(11,18,48,.78);
}
.muted{color:rgba(11,18,48,.58);}
.small{font-size:12px; line-height:1.5;}

.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  align-items:start;
}
.contact .lead{
  color: rgba(11,18,48,.78);
}
.contact-details{
  margin-top:16px;
  display:grid;
  gap:12px;
}
.detail .label{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.6px;
  color:rgba(11,18,48,.50);
}
.detail .value{
  margin-top:4px;
  font-weight:650;
}
.detail a{color: var(--accent3); text-decoration:none;}
.detail a:hover{text-decoration:underline;}

.form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}
label{
  display:block;
  font-weight:750;
  font-size:13px;
  color:rgba(11,18,48,.80);
  margin-bottom:12px;
}
input, textarea{
  width:100%;
  margin-top:8px;
  border-radius:14px;
  border:1px solid rgba(11,18,48,.14);
  padding:12px 12px;
  font: inherit;
  outline:none;
}
input:focus, textarea:focus{
  border-color: rgba(29,107,255,.45);
  box-shadow: 0 0 0 4px rgba(29,107,255,.12);
}

.footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding:18px 0;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

.nav-toggle{
  display:none;
  border:1px solid rgba(11,18,48,.16);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
}
.nav-toggle-bars{
  width:18px;height:2px;
  display:block;
  background:rgba(11,18,48,.85);
  position:relative;
}
.nav-toggle-bars:before,
.nav-toggle-bars:after{
  content:"";
  position:absolute;
  left:0;
  width:18px;height:2px;
  background:rgba(11,18,48,.85);
}
.nav-toggle-bars:before{top:-6px;}
.nav-toggle-bars:after{top:6px;}

@media (max-width: 980px){
  .cards, .steps{grid-template-columns:1fr;}
  .two-col, .contact{grid-template-columns:1fr;}
  h1{font-size:38px;}
}

@media (max-width: 760px){
  .nav-toggle{display:inline-flex;}
  .nav-menu{
    position:absolute;
    right:20px;
    top:64px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px;
    box-shadow: var(--shadow);
    display:none;
    min-width: 220px;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .nav-menu.open{display:flex;}
  .nav-link{padding:8px 10px;}
  .brand-mark{height:38px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}