:root{
  --bg: #16264F;
  --bg-2: #1C3268;
  --surface: rgba(255,255,255,0.09);
  --surface-strong: rgba(255,255,255,0.14);
  --border: rgba(255,255,255,0.18);
  --text: #F6F8FC;
  --text-muted: #A9B4CE;
  --blue-1: #3E7BFA;
  --blue-2: #7FB1FF;
  --blue-glow: #2A4B8F;
  --max-width: 1120px;
}

*{
  box-sizing: border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior: smooth;
}

body{
  background:
    radial-gradient(
      ellipse 1000px 700px at 15% -10%,
      rgba(127,177,255,0.34),
      transparent 62%
    ),
    radial-gradient(
      ellipse 900px 800px at 90% 10%,
      rgba(127,177,255,0.24),
      transparent 58%
    ),
    radial-gradient(
      ellipse 1200px 1000px at 50% 60%,
      rgba(62,123,250,0.16),
      transparent 65%
    ),
    linear-gradient(
      180deg,
      #1B2E60 0%,
      #16264F 45%,
      #101E42 100%
    );

  color: var(--text);

  font-family:
    'Inter',
    sans-serif;

  font-weight: 300;

  line-height: 1.6;

  -webkit-font-smoothing:
    antialiased;

  letter-spacing:
    -0.01em;
}

h1,
h2,
h3{
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

a{
  color: inherit;
  text-decoration: none;
}

.wrap{
  max-width:
    var(--max-width);

  margin:
    0 auto;

  padding:
    0 32px;
}

@media (max-width: 640px){

  .wrap{
    padding:
      0 20px;
  }
}

.grad-text{
  background:
    linear-gradient(
      100deg,
      #FFFFFF 10%,
      var(--blue-2) 60%,
      var(--blue-1) 100%
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  color:
    var(--blue-2);
}


/* =========================================================
   HEADER
   ========================================================= */

header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;

  background:
    linear-gradient(
      90deg,
      rgba(18, 38, 82, 0.96) 0%,
      rgba(24, 51, 105, 0.94) 50%,
      rgba(15, 31, 68, 0.96) 100%
    );

  -webkit-backdrop-filter:
    blur(18px)
    saturate(150%);

  backdrop-filter:
    blur(18px)
    saturate(150%);

  border-bottom:
    1px solid rgba(127,177,255,0.28);

  box-shadow:
    0 8px 30px rgba(0,0,0,0.22),
    0 1px 0 rgba(127,177,255,0.08);
}

.nav{
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    18px 0;
}

.logo{
  font-weight:
    600;

  font-size:
    1.05rem;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  letter-spacing:
    -0.01em;
}

.logo-mark{
  width:
    26px;

  height:
    26px;

  border-radius:
    8px;

  display:
    inline-flex;
}

.nav-links{
  display: flex;
  gap: 34px;
  font-size: 0.88rem;
  color: #C7D4EE;
  font-weight: 400;
}

.nav-links a:hover{
  color:
    var(--text);
}
.nav-cta{
  background:
    linear-gradient(
      135deg,
      #7FB1FF,
      #3E7BFA
    );

  color: #061126;

  padding: 9px 18px;

  border-radius: 100px;

  font-weight: 600;

  font-size: 0.85rem;

  white-space: nowrap;

  box-shadow:
    0 6px 18px rgba(62,123,250,0.28);
}

@media (max-width: 760px){

  .nav-links{
    display:
      none;
  }
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  padding:
    210px 0 90px;

  text-align:
    center;
}

.hero h1{
  font-size:
    clamp(
      2.6rem,
      6vw,
      4.4rem
    );

  line-height:
    1.08;

  max-width:
    18ch;

  margin:
    0 auto;

  font-weight:
    600;
}

.hero p{
  margin:
    26px auto 0;

  font-size:
    1.2rem;

  font-weight:
    300;

  color:
    var(--text-muted);

  max-width:
    44ch;
}

.hero-actions{
  margin-top:
    40px;

  display:
    flex;

  gap:
    18px;

  justify-content:
    center;

  flex-wrap:
    wrap;
}

.btn-primary{
  background:
    var(--text);

  color:
    #04070F;

  padding:
    14px 30px;

  border-radius:
    100px;

  font-weight:
    500;

  font-size:
    0.98rem;

  display:
    inline-block;
}

.btn-secondary{
  color:
    var(--text-muted);

  padding:
    14px 12px;

  font-weight:
    400;

  font-size:
    0.98rem;

  display:
    inline-block;
}

.btn-secondary:hover{
  color:
    var(--text);
}


/* =========================================================
   INTRO ANIMATION
   ========================================================= */

.reveal{
  opacity:
    0;

  transform:
    translateY(14px);

  animation:
    revealUp
    0.45s
    ease
    forwards;
}

.reveal.d1{
  animation-delay:
    0.02s;
}

.reveal.d2{
  animation-delay:
    0.1s;
}

.reveal.d3{
  animation-delay:
    0.18s;
}

@keyframes revealUp{

  to{
    opacity:
      1;

    transform:
      translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){

  .reveal{
    animation:
      none;

    opacity:
      1;

    transform:
      none;
  }
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

section{
  padding:
    64px 0;
}

.section-head{
  max-width:
    50ch;

  margin:
    0 auto 40px;

  text-align:
    center;
}

.section-head h2{
  font-size:
    clamp(
      1.7rem,
      3.2vw,
      2.3rem
    );
}

.section-head p{
  margin-top:
    14px;

  color:
    var(--text-muted);

  font-size:
    1.05rem;

  font-weight:
    300;
}


/* =========================================================
   SERVICES
   ========================================================= */

.service-grid{
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap:
    18px;
}

@media (max-width: 700px){

  .service-grid{
    grid-template-columns:
      1fr;
  }
}

.panel{
  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius:
    20px;

  padding:
    34px;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

.panel:hover{
  transform:
    translateY(-4px);

  border-color:
    rgba(
      127,
      177,
      255,
      0.5
    );

  background:
    var(--surface-strong);
}

.panel-icon{
  width:
    40px;

  height:
    40px;

  border-radius:
    10px;

  background:
    rgba(
      127,
      177,
      255,
      0.14
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    18px;
}

.panel-icon svg{
  width:
    20px;

  height:
    20px;
}

.panel h3{
  font-size:
    1.15rem;

  font-weight:
    500;

  margin-bottom:
    10px;
}

.panel p{
  color:
    var(--text-muted);

  font-size:
    0.98rem;

  font-weight:
    300;
}


/* =========================================================
   PROCESS
   ========================================================= */

.process-steps{
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    44px;

  text-align:
    center;
}

@media (max-width: 760px){

  .process-steps{
    grid-template-columns:
      1fr;

    text-align:
      left;
  }
}

.step-num{
  font-size:
    2.4rem;

  font-weight:
    600;

  margin-bottom:
    14px;
}

.process-steps h3{
  font-size:
    1.05rem;

  font-weight:
    500;

  margin-bottom:
    8px;
}

.process-steps p{
  color:
    var(--text-muted);

  font-size:
    0.95rem;

  font-weight:
    300;
}


/* =========================================================
   TEAM
   ========================================================= */

.team-grid{
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    24px;
}

@media (max-width: 760px){

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

.team-card{
  display:
    flex;

  flex-direction:
    column;

  gap:
    22px;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius:
    24px;

  padding:
    40px;

  transition:
    border-color
    0.25s
    ease;
}

.team-card:hover{
  border-color:
    rgba(
      127,
      177,
      255,
      0.4
    );
}

.avatar-photo{
  width:
    88px;

  height:
    88px;

  border-radius:
    50%;

  object-fit:
    cover;

  object-position:
    center 15%;

  background:
    var(--surface-strong);
}

@media (max-width: 640px){

  .team-card{
    padding:
      30px;
  }
}

.avatar{
  width:
    96px;

  height:
    96px;

  border-radius:
    50%;

  background:
    linear-gradient(
      150deg,
      var(--blue-2),
      var(--blue-1)
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-weight:
    600;

  font-size:
    1.7rem;

  color:
    #04070F;
}

.team-name{
  font-size:
    1.3rem;

  font-weight:
    600;

  margin-bottom:
    4px;
}

.team-role{
  color:
    var(--blue-2);

  font-size:
    0.92rem;

  font-weight:
    400;

  margin-bottom:
    18px;
}

.team-bio{
  color:
    var(--text-muted);

  margin-bottom:
    20px;

  max-width:
    62ch;

  font-weight:
    300;
}

.skill-tags{
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;
}

.skill-tag{
  border:
    1px solid
    var(--border);

  color:
    var(--text-muted);

  font-size:
    0.82rem;

  font-weight:
    400;

  padding:
    6px 14px;

  border-radius:
    100px;
}

.edit-note{
  margin-top:
    22px;

  font-size:
    0.82rem;

  color:
    var(--text-muted);

  border-left:
    2px solid
    var(--blue-glow);

  padding-left:
    14px;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-block{
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    48px;

  align-items:
    start;
}

@media (max-width: 760px){

  .contact-block{
    grid-template-columns:
      1fr;
  }
}

.contact-detail{
  margin-top:
    8px;

  color:
    var(--text-muted);

  font-weight:
    300;
}

.contact-detail strong{
  color:
    var(--text);

  display:
    block;

  margin-bottom:
    4px;

  font-weight:
    500;
}

.contact-detail +
.contact-detail{
  margin-top:
    22px;
}

form{
  display:
    flex;

  flex-direction:
    column;

  gap:
    26px;
}

.field{
  position:
    relative;
}

input,
textarea{
  background:
    transparent;

  border:
    none;

  border-bottom:
    1px solid
    var(--border);

  color:
    var(--text);

  padding:
    10px 2px;

  width:
    100%;

  font-family:
    'Inter',
    sans-serif;

  font-weight:
    300;

  font-size:
    1rem;
}

input::placeholder,
textarea::placeholder{
  color:
    var(--text-muted);
}

input:focus,
textarea:focus{
  outline:
    none;

  border-bottom:
    1px solid
    var(--blue-2);
}

textarea{
  resize:
    vertical;

  min-height:
    90px;
}

button[type="submit"]{
  border:
    none;

  cursor:
    pointer;

  width:
    fit-content;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
  padding:
    34px 0;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  font-size:
    0.85rem;

  color:
    var(--text-muted);

  flex-wrap:
    wrap;

  gap:
    12px;

  font-weight:
    300;
}


/* =========================================================
   RADIO BUTTONS
   ========================================================= */

.radio-group{
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;
}

.radio-pill{
  position:
    relative;

  cursor:
    pointer;
}

.radio-pill input{
  position:
    absolute;

  opacity:
    0;

  width:
    0;

  height:
    0;
}

.radio-pill span{
  display:
    inline-block;

  border:
    1px solid
    var(--border);

  border-radius:
    100px;

  padding:
    10px 18px;

  font-size:
    0.9rem;

  font-weight:
    400;

  color:
    var(--text-muted);

  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}

.radio-pill input:checked + span{
  border-color:
    var(--blue-2);

  color:
    var(--text);

  background:
    rgba(
      111,
      163,
      255,
      0.12
    );
}

.radio-pill input:focus-visible + span{
  outline:
    2px solid
    var(--blue-2);

  outline-offset:
    2px;
}

.field-label{
  font-size:
    0.85rem;

  color:
    var(--text-muted);

  margin-bottom:
    10px;

  display:
    block;
}


/* =========================================================
   SELECT
   ========================================================= */

select{
  background:
    transparent;

  border:
    none;

  border-bottom:
    1px solid
    var(--border);

  color:
    var(--text);

  padding:
    10px 28px 10px 2px;

  width:
    100%;

  font-family:
    'Inter',
    sans-serif;

  font-weight:
    300;

  font-size:
    1rem;

  appearance:
    none;

  -webkit-appearance:
    none;

  background-image:
    url(
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2393A0BC' stroke-width='1.5'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E"
    );

  background-repeat:
    no-repeat;

  background-position:
    right 2px center;

  background-size:
    16px;
}

select:focus{
  outline:
    none;

  border-bottom:
    1px solid
    var(--blue-2);
}

select option{
  background:
    var(--bg-2);

  color:
    var(--text);
}


/* =========================================================
   PROJECTS
   ========================================================= */

.project-grid{
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    18px;
}

@media (max-width: 900px){

  .project-grid{
    grid-template-columns:
      1fr;
  }
}

.project-card{
  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius:
    20px;

  overflow:
    hidden;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}

.project-card:hover{
  transform:
    translateY(-4px);

  border-color:
    rgba(
      127,
      177,
      255,
      0.5
    );
}

.project-thumb{
  width:
    100%;

  aspect-ratio:
    16 / 10;

  object-fit:
    cover;

  display:
    block;

  border-bottom:
    1px solid
    var(--border);
}

.project-card-body{
  padding:
    26px 30px 30px;
}

.project-status{
  display:
    inline-block;

  font-size:
    0.78rem;

  color:
    var(--blue-2);

  border:
    1px solid
    var(--blue-glow);

  border-radius:
    100px;

  padding:
    4px 12px;

  margin-bottom:
    16px;
}

.project-card h3{
  font-size:
    1.1rem;

  font-weight:
    500;

  margin-bottom:
    8px;
}

.project-card p{
  color:
    var(--text-muted);

  font-size:
    0.95rem;

  font-weight:
    300;
}

.project-note{
  text-align:
    center;

  max-width:
    52ch;

  margin:
    40px auto 0;

  color:
    var(--text-muted);

  font-size:
    0.95rem;

  font-weight:
    300;
}


/* =========================================================
   MULTI-STEP FORM
   ========================================================= */

.step-progress{
  position:
    relative;

  display:
    flex;

  justify-content:
    space-between;

  margin-bottom:
    36px;

  padding:
    0 2px;
}

.step-progress::before{
  content:
    '';

  position:
    absolute;

  top:
    7px;

  left:
    14px;

  right:
    14px;

  height:
    2px;

  background:
    var(--border);

  z-index:
    0;
}

.step-item{
  position:
    relative;

  z-index:
    1;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    8px;

  flex:
    1;
}

.step-item .step-dot{
  width:
    14px;

  height:
    14px;

  border-radius:
    50%;

  background:
    var(--bg);

  border:
    2px solid
    var(--border);

  transition:
    background 0.2s,
    border-color 0.2s;
}

.step-item.active .step-dot{
  background:
    var(--blue-2);

  border-color:
    var(--blue-2);
}

.step-item .step-label{
  font-size:
    0.76rem;

  color:
    var(--text-muted);

  transition:
    color 0.2s;

  white-space:
    nowrap;
}

.step-item.active .step-label{
  color:
    var(--text);
}

.form-step{
  display:
    none;

  flex-direction:
    column;

  gap:
    26px;
}

.form-step.active{
  display:
    flex;
}

.step-actions{
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  margin-top:
    4px;
}

.btn-back{
  color:
    var(--text-muted);

  font-size:
    0.92rem;

  font-weight:
    400;

  background:
    none;

  border:
    none;

  cursor:
    pointer;

  padding:
    8px 0;
}

.btn-back:hover{
  color:
    var(--text);
}

.btn-next{
  background:
    linear-gradient(
      135deg,
      #7FB1FF,
      #3E7BFA
    );

  color: #061126;

  padding: 13px 26px;

  border-radius: 100px;

  font-weight: 600;

  font-size: 0.95rem;

  border: none;

  cursor: pointer;

  box-shadow:
    0 6px 18px rgba(62,123,250,0.28);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.btn-next:hover{
  transform: translateY(-2px);

  box-shadow:
    0 10px 24px rgba(62,123,250,0.38);

  filter: brightness(1.06);
}

.btn-next:active{
  transform: translateY(0);
}

.form-note{
  font-size:
    0.85rem;

  color:
    var(--text-muted);

  font-weight:
    300;
}


/* =========================================================
   NETWORK CANVAS
   ========================================================= */

#network-bg{
  position:
    fixed;

  top:
    0;

  left:
    0;

  width:
    100vw;

  height:
    100vh;

  z-index:
    0;

  pointer-events:
    none;
}

.hero,
section,
footer{
  position:
    relative;

  z-index:
    1;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo-img{
  height:
    26px;

  width:
    auto;

  display:
    block;
}


/* =========================================================
   NAV ACTIVE STATE
   ========================================================= */

.nav-links a{
  position:
    relative;
}

.nav-links a.active{
  color:
    var(--text);
}

.nav-links a.active::after{
  content:
    '';

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    -6px;

  height:
    2px;

  border-radius:
    2px;

  background:
    linear-gradient(
      90deg,
      var(--blue-2),
      var(--blue-1)
    );
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.sr{
  opacity:
    0;

  transform:
    translateY(16px);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.sr.in{
  opacity:
    1;

  transform:
    translateY(0);
}

@media (
  prefers-reduced-motion:
  reduce
){

  .sr{
    opacity:
      1;

    transform:
      none;

    transition:
      none;
  }
}


/* =========================================================
   SUB PAGE HEADER
   ========================================================= */

.page-header{
  padding:
    150px 0 40px;

  text-align:
    center;
}

.page-header h1{
  font-size:
    clamp(
      2.2rem,
      5vw,
      3.2rem
    );

  font-weight:
    600;
}

.page-header p{
  margin:
    18px auto 0;

  color:
    var(--text-muted);

  max-width:
    46ch;

  font-size:
    1.1rem;

  font-weight:
    300;
}

.breadcrumb-back{
  display:
    inline-block;

  margin-top:
    14px;

  color:
    var(--text-muted);

  font-size:
    0.9rem;
}

.breadcrumb-back:hover{
  color:
    var(--text);
}


/* =========================================================
   PAIN POINTS
   ========================================================= */

.pain-grid{
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    18px;
}

@media (max-width: 800px){

  .pain-grid{
    grid-template-columns:
      1fr;
  }
}

.pain-card{
  border:
    1px solid
    var(--border);

  border-radius:
    20px;

  padding:
    30px;

  background:
    rgba(
      255,
      255,
      255,
      0.03
    );
}

.pain-card .pain-mark{
  font-size:
    1.6rem;

  margin-bottom:
    14px;

  display:
    block;
}

.pain-card h3{
  font-size:
    1.05rem;

  font-weight:
    500;

  margin-bottom:
    8px;
}

.pain-card p{
  color:
    var(--text-muted);

  font-size:
    0.95rem;

  font-weight:
    300;
}

.pain-bridge{
  text-align:
    center;

  max-width:
    56ch;

  margin:
    46px auto 0;

  font-size:
    1.15rem;

  font-weight:
    400;
}


/* =========================================================
   CTA BAND
   ========================================================= */

.cta-band{
  text-align:
    center;

  border:
    1px solid
    var(--border);

  border-radius:
    24px;

  padding:
    56px 30px;

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );
}

.cta-band h2{
  font-size:
    clamp(
      1.5rem,
      3vw,
      2rem
    );

  margin-bottom:
    14px;
}

.cta-band p{
  color:
    var(--text-muted);

  margin-bottom:
    26px;

  font-weight:
    300;
}


/* =========================================================
   SCROLL ROCKET
   ========================================================= */

#scroll-rocket{
  position:
    fixed;

  right:
    22px;

  top:
    0;

  height:
    100vh;

  width:
    40px;

  z-index:
    40;

  pointer-events:
    none;
}

.rocket-track{
  position:
    absolute;

  left:
    50%;

  transform:
    translateX(-50%);

  top:
    100px;

  bottom:
    100px;

  width:
    2px;

  border-radius:
    2px;

  background:
    linear-gradient(
      180deg,
      rgba(127,177,255,0.02),
      rgba(127,177,255,0.32),
      rgba(127,177,255,0.02)
    );
}

.rocket-icon{
  position:
    absolute;

  left:
    50%;

  top:
    100px;

  width:
    46px;

  height:
    46px;

  transform:
    translate(
      -50%,
      -50%
    );

  filter:
    drop-shadow(
      0 0 9px
      rgba(
        127,
        177,
        255,
        0.6
      )
    );

  will-change:
    top;
}

.rocket-flame{
  transform-origin:
    center top;

  animation:
    rocketFlicker
    0.4s
    ease-in-out
    infinite
    alternate;
}

@keyframes rocketFlicker{

  from{
    opacity:
      0.55;

    transform:
      scaleY(0.85);
  }

  to{
    opacity:
      1;

    transform:
      scaleY(1.15);
  }
}

@media (max-width: 900px){

  #scroll-rocket{
    display:
      none;
  }
}

@media (
  prefers-reduced-motion:
  reduce
){

  .rocket-flame{
    animation:
      none;
  }
}


/* =========================================================
   FAQ
   ========================================================= */

.faq-list{
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  max-width:
    760px;

  margin:
    0 auto;
}

.faq-item{
  border:
    1px solid
    var(--border);

  border-radius:
    14px;

  padding:
    0 24px;

  background:
    var(--surface);

  transition:
    border-color
    0.2s;
}

.faq-item[open]{
  border-color:
    rgba(
      127,
      177,
      255,
      0.4
    );
}

.faq-item summary{
  cursor:
    pointer;

  padding:
    20px 0;

  font-weight:
    500;

  color:
    var(--text);

  list-style:
    none;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    16px;
}

.faq-item summary::-webkit-details-marker{
  display:
    none;
}

.faq-item summary::after{
  content:
    '+';

  font-size:
    1.5rem;

  font-weight:
    300;

  color:
    var(--blue-2);

  transition:
    transform 0.2s;

  flex-shrink:
    0;
}

.faq-item[open] summary::after{
  transform:
    rotate(45deg);
}

.faq-item p{
  color:
    var(--text-muted);

  font-weight:
    300;

  padding-bottom:
    22px;

  margin-top:
    -4px;

  font-size:
    0.96rem;
}


/* =========================================================
   FORM SPAM PROTECTION
   ========================================================= */

.hp-field{
  position:
    absolute !important;

  left:
    -10000px !important;

  width:
    1px !important;

  height:
    1px !important;

  overflow:
    hidden !important;
}


/* =========================================================
   PRIVACY CHECKBOX
   ========================================================= */

.privacy-check{
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  color:
    var(--text-muted);

  font-size:
    0.84rem;

  line-height:
    1.5;

  cursor:
    pointer;
}

.privacy-check input{
  width:
    18px;

  height:
    18px;

  margin-top:
    2px;

  flex:
    0 0 auto;

  accent-color:
    var(--blue-2);
}

.privacy-check a{
  color:
    var(--blue-2);
}


/* =========================================================
   FORM STATUS
   ========================================================= */

.form-status{
  min-height:
    1.35em;

  font-size:
    0.9rem;

  line-height:
    1.45;
}

.form-status.is-success{
  color:
    #75dfb1;
}

.form-status.is-error{
  color:
    #ff9090;
}

#request-submit[disabled]{
  opacity:
    0.65;

  cursor:
    wait;
}


/* =========================================================
   COOKIE BANNER
   ========================================================= */

.cookie-banner{
  position:
    fixed;

  left:
    20px;

  right:
    20px;

  bottom:
    20px;

  z-index:
    9999;

  max-width:
    980px;

  margin:
    0 auto;

  padding:
    20px 22px;

  border:
    1px solid
    rgba(
      127,
      177,
      255,
      0.28
    );

  border-radius:
    18px;

  background:
    rgba(
      9,
      18,
      38,
      0.97
    );

  box-shadow:
    0 18px 60px
    rgba(
      0,
      0,
      0,
      0.38
    );

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  display:
    none;

  gap:
    20px;

  align-items:
    center;

  justify-content:
    space-between;
}

.cookie-banner.is-visible{
  display:
    flex;
}

.cookie-copy{
  max-width:
    650px;
}

.cookie-title{
  color:
    var(--text);

  font-weight:
    600;

  margin-bottom:
    6px;
}

.cookie-text{
  color:
    var(--text-muted);

  font-size:
    0.9rem;

  line-height:
    1.55;

  font-weight:
    300;
}

.cookie-text a{
  color:
    var(--blue-2);
}

.cookie-actions{
  display:
    flex;

  gap:
    10px;

  flex-wrap:
    wrap;

  flex-shrink:
    0;
}

.cookie-btn{
  border-radius:
    999px;

  padding:
    11px 17px;

  border:
    1px solid
    var(--border);

  background:
    transparent;

  color:
    var(--text);

  font:
    inherit;

  font-size:
    0.86rem;

  cursor:
    pointer;
}

.cookie-btn.primary{
  background:
    var(--text);

  color:
    #04070F;

  border-color:
    var(--text);
}

.cookie-settings-link{
  background:
    none;

  border:
    0;

  padding:
    0;

  color:
    var(--text-muted);

  font:
    inherit;

  cursor:
    pointer;
}

.cookie-settings-link:hover{
  color:
    var(--text);
}

@media (max-width:700px){

  .cookie-banner{
    left:
      12px;

    right:
      12px;

    bottom:
      12px;

    padding:
      18px;

    align-items:
      stretch;

    flex-direction:
      column;
  }

  .cookie-actions{
    width:
      100%;
  }

  .cookie-btn{
    flex:
      1;

    min-width:
      135px;
  }
}


/* =========================================================
   FINAL FORM SUCCESS SCREEN
   ========================================================= */

.form-success-final{
  text-align:
    center;

  padding:
    48px 25px;

  border:
    1px solid
    rgba(
      127,
      177,
      255,
      0.25
    );

  border-radius:
    18px;

  background:
    rgba(
      127,
      177,
      255,
      0.05
    );
}

.form-success-icon{
  width:
    58px;

  height:
    58px;

  margin:
    0 auto 20px;

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    #75dfb1;

  color:
    #081426;

  font-size:
    30px;

  font-weight:
    700;

  box-shadow:
    0 0 0 8px
    rgba(
      117,
      223,
      177,
      0.08
    );
}

.form-success-final h3{
  margin-bottom:
    12px;

  color:
    var(--text);

  font-size:
    1.35rem;
}

.form-success-final p{
  color:
    var(--text-muted);

  line-height:
    1.6;
}

.form-success-small{
  margin-top:
    10px;

  font-size:
    0.9rem;
}


/* Keep autofilled fields in the same dark SoluSystems design */
input,
textarea,
select {
  color-scheme: dark;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;

  -webkit-box-shadow:
    0 0 0 1000px transparent inset !important;

  box-shadow:
    0 0 0 1000px transparent inset !important;

  background-color: transparent !important;

  transition:
    background-color 9999s ease-in-out 0s;
}

#request-form input,
#request-form textarea {
  background: transparent !important;
  color: var(--text) !important;
}

.form-success-back{
  margin: 26px auto 0;
  display: inline-block;
}

.solusystems-wordmark{
  display:block;
  height:48px;
  width:auto;
  object-fit:contain;

  filter: brightness(2.2);
}

@media (max-width:640px){
  .solusystems-wordmark{
    height:30px;
  }
}