@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --deep:     #030d18;
  --navy:     #061a2e;
  --panel:    #0b2540;
  --border:   rgba(0,200,185,0.14);
  --teal:     #00c8b9;
  --teal-dim: rgba(0,200,185,0.08);
  --white:    #ffffff;
  --off:      #cddae8;
  --muted:    #6a90aa;
  --line:     rgba(255,255,255,0.06);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:'DM Sans', sans-serif;
  background:var(--deep);
  color:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* BG */
.bg {
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(0,80,100,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(0,50,80,0.2) 0%, transparent 70%),
    linear-gradient(180deg, #030d18 0%, #061a2e 50%, #030d18 100%);
  overflow:hidden;
}
.grid-lines {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,200,185,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,185,0.03) 1px, transparent 1px);
  background-size:60px 60px;
}
.stars {
  position:absolute; inset:0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 10%, rgba(255,255,255,0.55) 0%,transparent 100%),
    radial-gradient(1px 1px at 28% 5%, rgba(255,255,255,0.4) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 47% 15%, rgba(0,200,185,0.6) 0%,transparent 100%),
    radial-gradient(1px 1px at 65% 8%, rgba(255,255,255,0.45) 0%,transparent 100%),
    radial-gradient(1px 1px at 80% 18%, rgba(255,255,255,0.35) 0%,transparent 100%),
    radial-gradient(1px 1px at 38% 25%, rgba(255,255,255,0.3) 0%,transparent 100%),
    radial-gradient(1px 1px at 72% 32%, rgba(0,200,185,0.3) 0%,transparent 100%);
}
.ocean {
  position:absolute; bottom:0; left:0; right:0; height:180px; overflow:hidden;
}
.wv { position:absolute; bottom:0; left:-100%; width:300%; height:100%; animation:wdrift linear infinite; }
.wv svg { width:100%; height:100%; }
.wv1 { animation-duration:12s; opacity:0.12; }
.wv2 { animation-duration:18s; opacity:0.07; bottom:8px; animation-direction:reverse; }
.wv3 { animation-duration:24s; opacity:0.05; bottom:16px; }
@keyframes wdrift { from{transform:translateX(0)} to{transform:translateX(33.33%)} }

.bbl {
  position:absolute; border-radius:50%;
  border:1px solid rgba(0,200,185,0.2);
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,0.1),transparent);
  animation:brise linear infinite;
}
@keyframes brise {
  0%{opacity:0;transform:translateY(0)} 8%{opacity:0.7} 92%{opacity:0.3} 100%{opacity:0;transform:translateY(-100vh)}
}

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:68px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2.5rem;
  background:rgba(3,13,24,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.logo {
  display:flex; align-items:center; gap:0.7rem;
  font-family:'Outfit',sans-serif;
  font-weight:800; font-size:1.25rem;
  color:var(--white); letter-spacing:-0.01em;
  text-decoration:none;
}
.logo-mark {
  width:34px; height:34px; border-radius:10px;
  background:var(--navy); border:1.5px solid var(--teal);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--teal);
  box-shadow:0 0 16px rgba(0,200,185,0.2);
  flex-shrink:0;
}
.logo span { color:var(--teal); }
.nav-links { display:flex; gap:2rem; list-style:none; align-items:center; }
.nav-links a {
  font-family:'DM Sans',sans-serif;
  font-size:0.88rem; font-weight:500;
  color:var(--muted); text-decoration:none;
  transition:color 0.2s;
}
.nav-links a:hover { color:var(--white); }
.nav-links a.active { color:var(--teal); }
.nav-btn {
  font-family:'Outfit',sans-serif !important;
  font-weight:700 !important; font-size:0.85rem !important;
  background:var(--teal) !important; color:var(--deep) !important;
  padding:0.5rem 1.3rem; border-radius:8px;
  transition:opacity 0.2s, box-shadow 0.2s !important;
}
.nav-btn:hover { opacity:0.88; box-shadow:0 0 20px rgba(0,200,185,0.35) !important; color:var(--deep) !important; }

/* LAYOUT */
.wrap { position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:0 2rem; }

/* TYPOGRAPHY */
.eyebrow {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:var(--teal-dim); border:1px solid var(--border);
  color:var(--teal); border-radius:6px;
  padding:0.3rem 0.9rem;
  font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  margin-bottom:1.4rem;
}
.s-eyebrow {
  font-size:0.72rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--teal); margin-bottom:0.7rem;
  display:flex; align-items:center; gap:0.5rem;
}
.s-eyebrow::before {
  content:''; display:inline-block; width:20px; height:1.5px;
  background:var(--teal); border-radius:2px;
}
.s-title {
  font-family:'Outfit',sans-serif;
  font-weight:800; letter-spacing:-0.02em;
  font-size:clamp(1.9rem,3.8vw,2.8rem);
  color:var(--white); line-height:1.15; margin-bottom:1rem;
}
.s-sub { color:var(--muted); font-size:1rem; line-height:1.75; max-width:500px; font-weight:400; }

/* BUTTONS */
.btn-primary {
  font-family:'Outfit',sans-serif; font-weight:700; font-size:0.92rem;
  background:var(--teal); color:var(--deep);
  padding:0.85rem 1.8rem; border-radius:10px;
  text-decoration:none; display:inline-block;
  transition:all 0.2s;
}
.btn-primary:hover { box-shadow:0 0 28px rgba(0,200,185,0.4); transform:translateY(-2px); }
.btn-outline {
  font-family:'Outfit',sans-serif; font-weight:600; font-size:0.92rem;
  background:transparent; color:var(--off);
  padding:0.85rem 1.8rem; border-radius:10px;
  text-decoration:none; display:inline-block;
  border:1px solid rgba(255,255,255,0.14);
  transition:all 0.2s;
}
.btn-outline:hover { border-color:rgba(255,255,255,0.3); color:var(--white); }

/* PANELS */
.panel {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px; padding:2rem;
  position:relative; overflow:hidden;
}
.panel-top::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(to right,transparent,var(--teal),transparent);
}

/* DIVIDER */
.div-line {
  position:relative; z-index:1; height:1px;
  background:linear-gradient(to right,transparent,rgba(0,200,185,0.18),transparent);
}

/* SECTIONS */
section { position:relative; z-index:1; padding:6rem 0; }

/* CHECK ITEMS */
.check-item { display:flex; gap:1rem; align-items:flex-start; }
.chk {
  width:22px; height:22px; border-radius:6px;
  background:var(--teal); color:var(--deep);
  font-size:0.72rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:2px;
}
.check-item h4 { font-family:'Outfit',sans-serif; font-weight:700; font-size:0.95rem; color:var(--white); margin-bottom:0.25rem; }
.check-item p { color:var(--muted); font-size:0.84rem; line-height:1.6; }

/* FORM */
.form { display:flex; flex-direction:column; gap:0.9rem; text-align:left; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; }
.form input, .form select, .form textarea {
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; padding:0.85rem 1rem;
  color:var(--white);
  font-family:'DM Sans',sans-serif; font-size:0.9rem;
  outline:none; transition:border-color 0.2s, box-shadow 0.2s;
}
.form input::placeholder, .form textarea::placeholder { color:var(--muted); }
.form input:focus, .form select:focus, .form textarea:focus {
  border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,200,185,0.12);
}
.form select option { background:var(--panel); }
.form textarea { resize:vertical; min-height:100px; }
.form-submit {
  background:var(--teal); color:var(--deep);
  border:none; border-radius:10px;
  padding:0.95rem; width:100%;
  font-family:'Outfit',sans-serif; font-size:0.95rem; font-weight:700;
  cursor:pointer; transition:all 0.2s;
}
.form-submit:hover { box-shadow:0 0 28px rgba(0,200,185,0.35); transform:translateY(-2px); }

/* FOOTER */
footer {
  position:relative; z-index:1;
  padding:2rem 2.5rem;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.footer-logo { font-family:'Outfit',sans-serif; font-weight:800; font-size:1rem; color:var(--white); text-decoration:none; }
.footer-logo span { color:var(--teal); }
footer p { color:var(--muted); font-size:0.82rem; }
footer a { color:var(--teal); text-decoration:none; }

/* REVEAL */
.reveal { opacity:0; transform:translateY(22px); transition:opacity 0.55s ease, transform 0.55s ease; }
.reveal.on { opacity:1; transform:translateY(0); }

/* BREADCRUMB */
.breadcrumb {
  position:relative; z-index:1;
  padding:5.5rem 0 0;
}
.breadcrumb-inner {
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.82rem; color:var(--muted);
}
.breadcrumb-inner a { color:var(--teal); text-decoration:none; }
.breadcrumb-inner a:hover { text-decoration:underline; }
.breadcrumb-inner span { color:var(--muted); }

/* SERVICE PAGE HERO */
.svc-hero { padding:3rem 0 5rem; position:relative; z-index:1; }
.svc-hero h1 {
  font-family:'Outfit',sans-serif; font-weight:900;
  font-size:clamp(2.4rem,5vw,3.8rem);
  line-height:1.08; letter-spacing:-0.02em;
  color:var(--white); margin-bottom:1.2rem;
}
.svc-hero h1 em { font-style:normal; color:var(--teal); }
.svc-hero p { font-size:1.05rem; line-height:1.8; color:var(--muted); max-width:580px; margin-bottom:2rem; }
.svc-hero-grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:3rem; align-items:center; }

/* PRICE BADGE */
.price-badge {
  display:inline-flex; flex-direction:column;
  background:var(--teal-dim); border:1px solid var(--border);
  border-radius:14px; padding:1.2rem 1.8rem;
  margin-bottom:1.5rem;
}
.price-badge .price-amt {
  font-family:'Outfit',sans-serif; font-weight:900;
  font-size:2.8rem; color:var(--teal); line-height:1;
  letter-spacing:-0.02em;
}
.price-badge .price-label { font-size:0.82rem; color:var(--muted); margin-top:0.2rem; }

/* FAQ */
.faq-item {
  border:1px solid var(--line); border-radius:12px;
  margin-bottom:0.75rem; overflow:hidden;
  transition:border-color 0.2s;
}
.faq-item:hover { border-color:var(--border); }
.faq-q {
  width:100%; background:none; border:none;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.1rem 1.4rem; cursor:pointer;
  font-family:'Outfit',sans-serif; font-weight:700;
  font-size:0.95rem; color:var(--white); text-align:left;
}
.faq-q span { color:var(--teal); font-size:1.2rem; transition:transform 0.3s; }
.faq-q.open span { transform:rotate(45deg); }
.faq-a { display:none; padding:0 1.4rem 1.1rem; color:var(--muted); font-size:0.9rem; line-height:1.7; }
.faq-a.open { display:block; }

/* PROCESS STEPS */
.process-steps { display:flex; flex-direction:column; gap:1.2rem; }
.process-step {
  display:flex; gap:1.2rem; align-items:flex-start;
  padding:1.2rem; border-radius:12px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--line);
  transition:border-color 0.2s;
}
.process-step:hover { border-color:var(--border); }
.step-num-sm {
  width:32px; height:32px; border-radius:8px;
  background:var(--teal); color:var(--deep);
  font-family:'Outfit',sans-serif; font-weight:800; font-size:0.85rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.process-step h4 { font-family:'Outfit',sans-serif; font-weight:700; color:var(--white); font-size:0.95rem; margin-bottom:0.25rem; }
.process-step p { color:var(--muted); font-size:0.85rem; line-height:1.6; }

/* RESULTS GRID */
.results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.result-card {
  background:var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:1.5rem; text-align:center;
}
.result-num {
  font-family:'Outfit',sans-serif; font-weight:900;
  font-size:2.4rem; color:var(--teal); line-height:1;
  letter-spacing:-0.02em; margin-bottom:0.4rem;
}
.result-label { color:var(--muted); font-size:0.82rem; line-height:1.5; }

/* RESPONSIVE */
@media(max-width:820px){
  .nav-links { display:none; }
  .svc-hero-grid { grid-template-columns:1fr; }
  .results-grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  footer { flex-direction:column; text-align:center; }
}
@media(max-width:500px){
  .results-grid { grid-template-columns:1fr; }
}