:root{
  --text:#f3f7ff;
  --muted:#a7b3c6;
  --muted-2:#d7e0ec;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.12);
  --good:#a5ffcf;
  --shadow:0 24px 70px rgba(0,0,0,.42);
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(108,170,255,.10), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(120,220,255,.08), transparent 18%),
    radial-gradient(circle at 70% 70%, rgba(80,140,220,.08), transparent 20%),
    linear-gradient(180deg,#04070d 0%, #07101b 52%, #050910 100%);
  min-height:100vh;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(circle at center, black 24%, transparent 85%);
  -webkit-mask-image:radial-gradient(circle at center, black 24%, transparent 85%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.10), transparent 10%),
    radial-gradient(circle at 82% 26%, rgba(255,255,255,.08), transparent 8%),
    radial-gradient(circle at 66% 80%, rgba(255,255,255,.05), transparent 8%);
  filter:blur(50px);
  opacity:.38;
}

a{color:#ebf4ff;text-decoration:none}
img{max-width:100%;display:block}

.container{
  width:min(var(--max), calc(100% - 24px));
  margin-inline:auto;
}

.site{
  padding:12px 0 48px;
}

.glass{
  background:linear-gradient(180deg, rgba(14,20,31,.88), rgba(9,14,24,.82));
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

header{
  position:sticky;
  top:10px;
  z-index:100;
  padding-bottom:10px;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border-radius:24px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,22,34,.74), rgba(11,17,28,.68));
  box-shadow:
    0 18px 42px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

.brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  width:250px;
  min-width:250px;
  line-height:0;
}

.brand-logo{
  display:block;
  width:100%;
  max-width:250px;
  height:auto;
  object-fit:contain;
}

.mobile-toggle{
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  padding:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.mobile-toggle svg{
  width:22px;
  height:22px;
  stroke-width:2.5;
}

.nav-links,.nav-actions{
  display:none;
  width:100%;
}

.nav.open{
  flex-wrap:wrap;
}

.nav.open .nav-links,
.nav.open .nav-actions{
  display:flex;
}

.nav.open .nav-links{
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding-top:8px;
}

.nav.open .nav-links a{
  width:100%;
  padding:10px 4px;
  color:var(--muted-2);
  font-size:.98rem;
}

.nav.open .nav-actions{
  padding-top:6px;
}

.nav.open .nav-actions .btn{
  width:100%;
}

.nav-links a.active,
.nav-actions a.active,
.nav-links a[aria-current="page"]{
  color:#ffffff !important;
}

.btn{
  appearance:none;
  border:none;
  border-radius:999px;
  min-height:46px;
  padding:12px 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .18s ease, opacity .18s ease;
}

.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.65;cursor:not-allowed;transform:none}

.btn-primary{
  background:linear-gradient(135deg, rgba(158,203,255,.22), rgba(95,168,255,.14));
  border:1px solid rgba(158,203,255,.24);
  box-shadow:0 14px 36px rgba(95,168,255,.14);
}

.btn-secondary{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
}

section{padding:22px 0}
.hero{
  padding-top:48px;
  padding-bottom:8px;
}

.hero-inner{
  max-width:800px;
  margin:0 auto;
  text-align:center;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(158,203,255,.16);
  color:#dbe9ff;
  background:rgba(158,203,255,.05);
  margin:0 auto 14px;
  font-size:.8rem;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--good);
  box-shadow:0 0 16px rgba(165,255,207,.62);
  flex:0 0 auto;
}

h1{
  margin:0 auto 12px;
  font-size:clamp(2.15rem, 10vw, 5rem);
  line-height:.95;
  letter-spacing:-.055em;
  max-width:10ch;
  text-wrap:balance;
}

.hero p{
  margin:0 auto;
  max-width:58ch;
  color:var(--muted);
  font-size:.96rem;
  line-height:1.62;
}

.hero-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}

.hero-actions .btn{width:100%}

.section-head{
  display:grid;
  gap:10px;
  margin-bottom:16px;
}

.section-head h2{
  margin:0;
  font-size:clamp(1.7rem, 7vw, 3rem);
  letter-spacing:-.05em;
  line-height:1.03;
  max-width:14ch;
}

.section-head p{
  margin:0;
  max-width:65ch;
  color:var(--muted);
  line-height:1.6;
  font-size:.95rem;
}

.services,
.process,
.contact,
.why-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.card,
.step,
.contact-item,
.why-item{
  border-radius:20px;
}

.card{
  padding:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.024));
  box-shadow:var(--shadow);
}

.card-media{
  height:136px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  margin-bottom:14px;
  background:rgba(255,255,255,.03);
}

.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  border:1px solid rgba(158,203,255,.22);
  background:linear-gradient(135deg, rgba(158,203,255,.16), rgba(95,168,255,.07));
  margin-bottom:16px;
  color:#e9f3ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.icon svg{
  width:26px;
  height:26px;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.card h3{
  margin:0 0 6px;
  font-size:1rem;
  letter-spacing:-.02em;
}

.card p{
  margin:0;
  color:var(--muted);
  line-height:1.52;
  font-size:.92rem;
}

.step{
  padding:18px 16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.step-no{
  width:34px;
  height:34px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  margin-bottom:12px;
  background:rgba(158,203,255,.14);
  border:1px solid rgba(158,203,255,.24);
  color:#dff2ff;
  font-weight:800;
  font-size:.88rem;
}

.step strong{
  display:block;
  margin-bottom:8px;
}

.step span{
  color:var(--muted);
  font-size:.92rem;
  line-height:1.54;
}

.content-page{padding-top:48px}

.content-card{
  padding:24px;
}

.content-card h1{
  margin:0 0 12px;
  max-width:12ch;
  text-align:left;
  font-size:clamp(2rem,8vw,4rem);
}

.content-card p{
  color:var(--muted);
  line-height:1.7;
  font-size:.98rem;
}

.why-item{
  padding:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.why-item strong{
  display:block;
  margin-bottom:8px;
  font-size:1rem;
}

.why-item span{
  color:var(--muted-2);
  font-size:.94rem;
  line-height:1.58;
}

.legal-box{
  padding:24px;
}

.legal-box h2{
  margin:0 0 12px;
  font-size:1.3rem;
  letter-spacing:-.03em;
}

.legal-box p,
.legal-box li{
  color:var(--muted);
  line-height:1.68;
  font-size:.94rem;
}

.legal-box strong{color:var(--text)}
.legal-box ul{
  margin:10px 0 0;
  padding-left:18px;
}

.contact-box{padding:20px}

.contact-box h2{
  margin:0 0 12px;
  max-width:100%;
}

.note{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.6;
}

.contact-list{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.contact-item{
  padding:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.contact-item strong{
  display:block;
  margin-bottom:8px;
  font-size:.98rem;
}

.contact-item span,.contact-item a{
  color:var(--muted-2);
  font-size:.92rem;
  line-height:1.56;
}

form{
  display:grid;
  gap:14px;
}

.field{
  display:grid;
  gap:8px;
}

label{
  color:#dfe9f8;
  font-size:.92rem;
}

input,textarea{
  width:100%;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  color:var(--text);
  font:inherit;
  font-size:16px;
  outline:none;
}

input:focus,textarea:focus{
  border-color:rgba(158,203,255,.42);
  box-shadow:0 0 0 5px rgba(158,203,255,.08);
  background:rgba(255,255,255,.045);
}

textarea{
  min-height:160px;
  resize:vertical;
}

.form-alert{
  display:none;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  font-size:.92rem;
  line-height:1.55;
}

.form-alert.show{display:block}
.form-alert.success{
  color:#dff7ea;
  background:rgba(36,107,71,.18);
  border-color:rgba(86,201,140,.28);
}

.form-alert.error{
  color:#ffe1e1;
  background:rgba(120,43,43,.18);
  border-color:rgba(255,120,120,.28);
}

.hidden{display:none !important}

footer{padding:22px 0 8px}

.footer{
  padding:18px 2px 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.84rem;
}

.footer-links{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.footer-links a{
  color:var(--muted);
  text-decoration:none;
  transition:color .18s ease;
}

.footer-links a:hover,
.footer-links a[aria-current="page"]{
  color:var(--text);
}

.footer-sep{
  color:rgba(255,255,255,.28);
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:480px){
  .brand{
    width:190px;
    min-width:190px;
    margin-left:6px;
  }

  .brand-logo{
    max-width:190px;
  }
}

@media (min-width:841px){
  .container{width:min(var(--max), calc(100% - 32px))}
  .site{padding:16px 0 72px}
  header{top:14px;padding-bottom:14px}
  section{padding:30px 0}

  .mobile-toggle{display:none}

  .nav{
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:12px 20px;
    border-radius:999px;
  }

  .brand{
    width:340px;
    min-width:340px;
    flex:0 0 auto;
    margin-left:0;
  }

  .brand-logo{
    max-width:340px;
  }

  .nav-links,.nav-actions{
    display:flex;
    width:auto;
  }

  .nav-links{
    gap:18px;
    align-items:center;
  }

  .nav-links a{
    color:var(--muted);
    font-size:1rem;
  }

  .nav-actions .btn{
    width:auto;
  }

  .hero{
    padding-top:78px;
    padding-bottom:18px;
  }

  .hero-inner{
    max-width:980px;
  }

  .eyebrow{
    font-size:.88rem;
    padding:10px 14px;
    margin-bottom:16px;
  }

  h1{
    font-size:clamp(2.8rem,6vw,5.2rem);
    max-width:9.5ch;
    margin-bottom:14px;
  }

  .hero p{
    font-size:1.03rem;
    line-height:1.72;
    max-width:54ch;
  }

  .hero-actions{
    flex-direction:row;
    justify-content:center;
    margin-top:24px;
  }

  .hero-actions .btn{width:auto}

  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:22px;
    margin-bottom:20px;
  }

  .section-head h2{
    font-size:clamp(2rem,3vw,3rem);
    max-width:13ch;
  }

  .section-head p{
    font-size:1rem;
    line-height:1.74;
    max-width:60ch;
  }

  .services{grid-template-columns:repeat(3,1fr);gap:16px}
  .process{grid-template-columns:repeat(6,1fr);gap:14px}
  .contact{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(3,1fr)}

  .card{padding:20px;border-radius:26px}
  .card-media{height:132px;border-radius:18px;margin-bottom:18px}
  .icon{width:56px;height:56px;border-radius:18px;margin-bottom:18px}
  .icon svg{width:28px;height:28px}
  .card h3{font-size:1.08rem}
  .card p{font-size:.95rem}

  .contact-box,.content-card,.legal-box{
    padding:32px 24px;
  }

  .content-page{padding-top:78px}

  .content-card h1{
    font-size:clamp(2.4rem,5vw,4.5rem);
  }

  .footer{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    font-size:.94rem;
  }
}

@media (min-width:841px) and (max-width:1120px){
  .services{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(3,1fr)}
  .contact{grid-template-columns:1fr}
}