*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#eef3f6;
  background:#07151b;
  line-height:1.65
}

a{color:inherit}

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px clamp(20px,5vw,72px);
  background:rgba(7,21,27,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08)
}

.brand{
  font-weight:800;
  letter-spacing:.12em;
  text-decoration:none;
  font-size:.9rem
}

.site-header nav{
  display:flex;
  gap:22px
}

.site-header nav a{
  text-decoration:none;
  font-size:.92rem;
  color:#c9d5d9
}

.site-header nav a:hover{color:#fff}

.menu{
  display:none;
  background:none;
  border:0;
  color:white;
  font-size:1.5rem
}

.hero{
  min-height:76vh;
  display:flex;
  align-items:center;
  padding:80px clamp(22px,7vw,110px);
  background:
    radial-gradient(circle at 78% 35%,rgba(30,115,133,.28),transparent 34%),
    linear-gradient(135deg,#07151b,#0b2731)
}

.hero-inner{max-width:900px}

.eyebrow{
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.22em;
  color:#9fc9d0;
  margin-bottom:16px
}

.hero h1{
  font-size:clamp(3rem,7vw,6.8rem);
  line-height:.95;
  letter-spacing:-.055em;
  margin:0 0 28px;
  max-width:1000px
}

.lead{
  font-size:clamp(1.1rem,2vw,1.35rem);
  max-width:760px;
  color:#c6d4d8
}

.actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:34px
}

.btn{
  display:inline-block;
  padding:13px 20px;
  border-radius:999px;
  text-decoration:none;
  font-weight:750;
  border:1px solid rgba(255,255,255,.22);
  cursor:pointer;
  font:inherit
}

.primary{
  background:#e9f5f6;
  color:#092027
}

.primary:hover{
  background:#fff
}

.secondary{
  background:transparent;
  color:#eef3f6
}

.full{
  text-align:center;
  width:100%;
  margin-top:10px
}

.disabled{
  opacity:.55;
  pointer-events:none
}

.section{
  padding:90px clamp(22px,7vw,110px)
}

.section.alt{
  background:#0b2028
}

.section h2{
  font-size:clamp(2rem,4vw,3.8rem);
  line-height:1.05;
  letter-spacing:-.035em;
  margin:0 0 28px
}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px
}

.split p{max-width:650px}

.cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:40px
}

.card{
  background:#102b34;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  padding:34px
}

.featured{background:#13343e}

.tag{
  font-size:.7rem;
  font-weight:850;
  letter-spacing:.14em;
  color:#a8d4d9
}

.card h3{
  font-size:1.8rem;
  margin:10px 0
}

.price{
  font-size:2.5rem;
  font-weight:850;
  letter-spacing:-.04em
}

.price small{
  font-size:.95rem;
  font-weight:600;
  color:#b7c8cc
}

.or{
  margin-top:0;
  color:#c5d3d7
}

.card ul{padding-left:20px}

.small{
  font-size:.9rem;
  color:#aebfc4
}

.phases{
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  margin:22px 0;
  padding:10px 0
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:38px
}

.person{
  background:#0d252d;
  border-radius:20px;
  padding:26px;
  border:1px solid rgba(255,255,255,.07)
}

.initials{
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#dbecee;
  color:#0b242c;
  font-weight:900
}

.person h3{
  margin:16px 0 2px
}

.role{
  margin-top:0;
  color:#9fc9d0;
  font-weight:700;
  font-size:.9rem
}

.notice{
  margin-top:24px;
  padding:20px;
  border-left:3px solid #9fc9d0;
  background:rgba(255,255,255,.04);
  color:#c3d0d4
}

.narrow{max-width:760px}


/* FREE INTRODUCTION */

.intro-section{
  background:
    radial-gradient(circle at 15% 10%,rgba(39,121,139,.16),transparent 25%),
    #081a21
}

.intro-heading{
  max-width:820px;
  margin:0 auto 48px;
  text-align:center
}

.intro-heading .lead{
  margin-left:auto;
  margin-right:auto
}

.assessment{
  max-width:950px;
  margin:0 auto
}

.question-card{
  background:#0d252d;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  padding:clamp(24px,5vw,42px);
  margin-bottom:24px
}

.question-number{
  margin:0 0 6px;
  color:#9fc9d0;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.2em
}

.question-card h3{
  margin:0 0 8px;
  font-size:clamp(1.35rem,3vw,2rem);
  line-height:1.2
}

.choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:24px
}

.choice{
  position:relative;
  display:block;
  cursor:pointer
}

.choice input{
  position:absolute;
  opacity:0;
  pointer-events:none
}

.choice span{
  display:flex;
  align-items:center;
  min-height:62px;
  padding:15px 18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:#102d36;
  color:#dce7ea;
  font-weight:650;
  transition:.18s ease
}

.choice span:before{
  content:"";
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-right:12px;
  border:2px solid #86afb7;
  border-radius:5px
}

.choice input[type="radio"] + span:before{
  border-radius:50%
}

.choice:hover span{
  border-color:#9fc9d0;
  background:#143640
}

.choice input:checked + span{
  background:#dceff1;
  color:#092027;
  border-color:#dceff1
}

.choice input:checked + span:before{
  background:#0b5968;
  border-color:#0b5968;
  box-shadow:inset 0 0 0 4px #dceff1
}

.choice input:focus-visible + span{
  outline:3px solid #9fc9d0;
  outline-offset:3px
}

.text-label{
  display:block;
  margin-top:24px;
  color:#d7e3e6;
  font-weight:650
}

textarea,
.field-grid input{
  width:100%;
  margin-top:8px;
  padding:14px 15px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:#071a21;
  color:#eef3f6;
  font:inherit;
  outline:none
}

textarea{
  resize:vertical
}

textarea:focus,
.field-grid input:focus{
  border-color:#9fc9d0;
  box-shadow:0 0 0 3px rgba(159,201,208,.12)
}

textarea::placeholder,
.field-grid input::placeholder{
  color:#718b92
}

.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:24px
}

.field-grid label{
  color:#d7e3e6;
  font-weight:650
}

.consent-card{
  background:#0b2028
}

.consent{
  display:flex;
  gap:13px;
  align-items:flex-start;
  margin-top:20px;
  padding:17px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  cursor:pointer
}

.consent input{
  width:20px;
  height:20px;
  flex:0 0 auto;
  margin-top:3px;
  accent-color:#9fc9d0
}

.consent span{
  color:#cbd9dc
}

.assessment-submit{
  text-align:center;
  max-width:700px;
  margin:36px auto 0;
  padding:35px 24px
}

.submit-btn{
  margin-top:12px;
  min-width:260px;
  border:0
}

.form-status{
  min-height:26px;
  margin-top:18px;
  color:#b9d9de;
  font-weight:650
}

.legal-preview{
  padding:28px clamp(22px,7vw,110px);
  background:#061116;
  color:#9fb0b5;
  font-size:.88rem
}


/* FOOTER */

footer{
  padding:42px clamp(22px,7vw,110px);
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#b8c7cb
}

.footer-links{
  display:flex;
  gap:20px
}

.footer-links a{
  text-decoration:none
}

.copyright{
  grid-column:1/-1;
  font-size:.8rem;
  color:#788d93
}


/* TABLET */

@media(max-width:900px){

  .team-grid{
    grid-template-columns:1fr 1fr
  }

  .site-header nav{
    display:none;
    position:absolute;
    top:68px;
    left:0;
    right:0;
    padding:20px;
    background:#07151b;
    flex-direction:column
  }

  .site-header nav.open{
    display:flex
  }

  .menu{
    display:block
  }

  .split,
  .cards{
    grid-template-columns:1fr
  }

  .split{
    gap:20px
  }

  .hero{
    min-height:70vh
  }

  .hero h1{
    font-size:clamp(3rem,13vw,5rem)
  }

}


/* MOBILE */

@media(max-width:650px){

  .choice-grid,
  .field-grid{
    grid-template-columns:1fr
  }

  .choice span{
    min-height:58px
  }

}


@media(max-width:560px){

  .team-grid{
    grid-template-columns:1fr
  }

  .section{
    padding-top:64px;
    padding-bottom:64px
  }

  .card{
    padding:25px
  }

  .question-card{
    border-radius:18px
  }

  footer{
    grid-template-columns:1fr
  }

  .footer-links{
    justify-content:flex-start;
    flex-wrap:wrap
  }

  .submit-btn{
    width:100%;
    min-width:0
  }

}