:root{
  --bg:#071824;
  --surface:rgba(255,255,255,0.06);
  --surface2:rgba(255,255,255,0.10);
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.72);
  --border:rgba(255,255,255,0.12);
  --brand:#f97316;
  --brand2:#22c55e;
  --shadow:0 22px 80px rgba(0,0,0,0.45);
  --radius:18px;
  --container:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(460px 620px at 10% 18%, rgba(56,189,248,0.14), transparent 66%),
             radial-gradient(380px 520px at 86% 44%, rgba(125,211,252,0.10), transparent 70%),
             radial-gradient(420px 560px at 18% 92%, rgba(255,255,255,0.07), transparent 72%),
             radial-gradient(900px 520px at 14% 0%, rgba(249,115,22,0.18), transparent 62%),
             radial-gradient(900px 520px at 88% 18%, rgba(34,197,94,0.12), transparent 64%),
             var(--bg);
  line-height:1.55;
  hyphens:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

a{color:inherit; text-decoration:none;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(249,115,22,0.38); outline-offset:2px; border-radius:12px;}

.water-drop{
  position:fixed;
  width:540px;
  height:680px;
  border-radius:52% 48% 54% 46% / 64% 60% 40% 36%;
  background:
    radial-gradient(220px 220px at 35% 28%, rgba(255,255,255,0.14), transparent 62%),
    radial-gradient(420px 520px at 50% 55%, rgba(56,189,248,0.10), transparent 70%),
    radial-gradient(520px 520px at 72% 78%, rgba(125,211,252,0.07), transparent 72%);
  filter: blur(0.2px);
  opacity:0.55;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}

.water-drop.drop-1{left:-220px; top:140px; transform:rotate(10deg);}
.water-drop.drop-2{right:-240px; top:520px; transform:rotate(-12deg); width:620px; height:760px; opacity:0.45;}
.water-drop.drop-3{left:-180px; bottom:-260px; transform:rotate(18deg); width:660px; height:820px; opacity:0.35;}

.container{width:min(var(--container),calc(100% - 2.2rem)); margin:0 auto;}

@media (min-width: 901px){
  .topbar .container{width:calc(100% - 2.2rem);}
}

.topbar{
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:blur(12px);
  background:rgba(7,24,36,0.70);
  border-bottom:1px solid rgba(255,255,255,0.10);
}

.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.95rem 0;}
.brand{display:flex; align-items:center; gap:0.75rem; font-weight:900; letter-spacing:-0.02em;}
.brand-mark{width:42px; height:42px; border-radius:16px; background:radial-gradient(18px 18px at 32% 26%, rgba(255,255,255,0.35), transparent 60%), linear-gradient(135deg, var(--brand), rgba(255,255,255,0.10)); box-shadow:0 18px 46px rgba(249,115,22,0.20);}

.nav-links{display:flex; gap:0.95rem; align-items:center; flex-wrap:wrap;}
.nav-links a{color:rgba(255,255,255,0.78); font-weight:750; font-size:0.95rem;}
.nav-links a:hover{color:rgba(255,255,255,0.96);}

.nav-drawer{display:flex; align-items:center; justify-content:flex-end; gap:1rem;}
.nav-actions{display:flex; align-items:center;}

.nav-toggle{display:none; align-items:center; justify-content:center; width:46px; height:46px; border-radius:16px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); padding:0; cursor:pointer;}
.nav-toggle:hover{background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.20);}

.nav-toggle-bars{position:relative; width:20px; height:2px; background:rgba(255,255,255,0.88); border-radius:999px; transition:background 180ms ease;}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:""; position:absolute; left:0; width:20px; height:2px; background:rgba(255,255,255,0.88); border-radius:999px; transition:transform 180ms ease, top 180ms ease;}
.nav-toggle-bars::before{top:-6px;}
.nav-toggle-bars::after{top:6px;}

.nav.is-open .nav-toggle-bars{background:transparent;}
.nav.is-open .nav-toggle-bars::before{top:0; transform:rotate(45deg);}
.nav.is-open .nav-toggle-bars::after{top:0; transform:rotate(-45deg);}

.btn{display:inline-flex; align-items:center; justify-content:center; padding:0.78rem 1.05rem; border-radius:999px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.92); font-weight:850; transition:transform 180ms ease, background 180ms ease, border-color 180ms ease; white-space:nowrap;}
.btn:hover{transform:translateY(-2px); background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.20);}
.btn-primary{border:0; background:linear-gradient(135deg, var(--brand), #ffb703); color:#0b141c; box-shadow:0 22px 70px rgba(249,115,22,0.22);}
.btn-primary:hover{color:rgba(255,255,255,0.96);}
.btn-primary:visited{color:rgba(255,255,255,0.96);}

.hero{position:relative; padding:4.6rem 0 3.8rem; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:2rem; align-items:center;}

.kicker{display:inline-flex; align-items:center; gap:0.55rem; padding:0.42rem 0.7rem; border-radius:999px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.78); font-weight:800; font-size:0.9rem; width:fit-content;}
.kicker .dot{width:10px; height:10px; border-radius:999px; background:linear-gradient(135deg, var(--brand), #ffb703);}

.hero h1{margin:0.9rem 0 0; font-size:clamp(2.2rem,4.6vw,3.65rem); line-height:1.05; letter-spacing:-0.04em;}
.hero p{margin:1rem 0 1.35rem; color:rgba(255,255,255,0.72); max-width:60ch; font-size:1.05rem;}
.hero-actions{display:flex; gap:0.8rem; flex-wrap:wrap; margin-bottom:1.25rem;}
.hero-actions .btn,
.cta-inner .actions .btn{
  flex:1 1 220px;
  min-height:48px;
  padding:1rem 2.4rem;
  line-height:1.1;
  text-align:center;
}
.hero-trust{display:flex; flex-wrap:wrap; gap:0.9rem; color:rgba(255,255,255,0.72); font-weight:750; font-size:0.95rem;}

.mobile-break{display:inline;}

.hero-panel{
  position:relative;
  isolation:isolate;
  border-radius:calc(var(--radius) + 10px);
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow:var(--shadow);
  overflow:hidden;
  aspect-ratio:16 / 10;
}

.hero-panel::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:radial-gradient(420px 260px at 26% 20%, rgba(249,115,22,0.22), transparent 64%),
             radial-gradient(420px 260px at 78% 74%, rgba(34,197,94,0.14), transparent 64%),
             linear-gradient(120deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  transform:rotate(-6deg);
  z-index:0;
}

.hero-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(640px 320px at 50% 0%, rgba(255,255,255,0.10), transparent 62%),
             linear-gradient(180deg, rgba(7,24,36,0.15), rgba(7,24,36,0.92));
  z-index:0;
  pointer-events:none;
}

.hero-rotator{
  position:absolute;
  inset:4%;
  border-radius:calc(var(--radius) + 6px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  z-index:1;
  background:rgba(0,0,0,0.16);
}

.hero-rotator::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(520px 240px at 20% 20%, rgba(249,115,22,0.16), transparent 60%),
             radial-gradient(520px 240px at 80% 70%, rgba(34,197,94,0.12), transparent 60%);
  pointer-events:none;
  opacity:0.65;
}

.hero-rotator-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 900ms ease;
}

.hero-rotator-img.is-active{
  opacity:1;
}

.badge-stack{
  position:absolute;
  inset:auto 1.05rem 1.05rem 1.05rem;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0.85rem;
}

.badge{
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.22);
  border-radius:16px;
  padding:0.95rem 0.95rem;
  transition:transform 240ms ease, border-color 240ms ease, background 240ms ease;
}

.badge:hover{transform:translateY(-6px); border-color:rgba(255,255,255,0.20); background:rgba(0,0,0,0.28);}

.badge strong{display:block; letter-spacing:-0.02em;}
.badge span{display:block; margin-top:0.15rem; color:rgba(255,255,255,0.74); font-weight:700; font-size:0.9rem;}

section{padding:4.2rem 0;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.35rem;}
.section-head h2{margin:0; font-size:clamp(1.6rem,2.8vw,2.25rem); letter-spacing:-0.03em;}
.section-head p{margin:0; max-width:62ch; color:rgba(255,255,255,0.72);}

.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:1.2rem;}

.card{border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); border-radius:var(--radius); padding:1.3rem; box-shadow:0 20px 60px rgba(0,0,0,0.28); position:relative; overflow:hidden; transform:translateZ(0); transition:transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; animation:cardIn 520ms ease both;}

.card::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(520px 220px at 18% 0%, rgba(249,115,22,0.22), transparent 60%),
             radial-gradient(520px 220px at 82% 100%, rgba(34,197,94,0.18), transparent 60%);
  opacity:0;
  transition:opacity 240ms ease;
  pointer-events:none;
}

.card:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:0 30px 90px rgba(0,0,0,0.44);
  border-color:rgba(255,255,255,0.18);
}

.card:hover::after{opacity:1;}

.grid > .card:nth-child(1){animation-delay:40ms;}
.grid > .card:nth-child(2){animation-delay:90ms;}
.grid > .card:nth-child(3){animation-delay:140ms;}
.grid > .card:nth-child(4){animation-delay:190ms;}

details{transition:transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;}
details:hover{transform:translateY(-6px); box-shadow:0 22px 70px rgba(0,0,0,0.38); border-color:rgba(255,255,255,0.18);}

@keyframes cardIn{from{opacity:0; transform:translateY(18px) scale(0.99);}to{opacity:1; transform:translateY(0) scale(1);}}

.service{grid-column:span 4; min-height:172px; position:relative; overflow:hidden;}
.service::before{content:""; position:absolute; inset:0; background:radial-gradient(320px 200px at 20% 0%, rgba(249,115,22,0.22), transparent 62%), radial-gradient(320px 200px at 90% 90%, rgba(34,197,94,0.14), transparent 62%); opacity:0.95; pointer-events:none;}
.service h3{margin:0; font-size:1.15rem; letter-spacing:-0.02em; position:relative; z-index:1;}
.service p{margin:0.6rem 0 0; color:rgba(255,255,255,0.72); position:relative; z-index:1;}
.service .tag{display:inline-flex; margin-top:0.95rem; padding:0.38rem 0.65rem; border-radius:999px; border:1px solid rgba(255,255,255,0.14); background:rgba(0,0,0,0.20); color:rgba(255,255,255,0.78); font-weight:850; font-size:0.86rem; position:relative; z-index:1;}

.about{grid-column:span 7;}
.about p{margin:0.8rem 0 0; color:rgba(255,255,255,0.74);}

.stats{grid-column:span 5; display:grid; grid-template-columns:1fr; gap:1rem;}
.stat{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border:1px solid rgba(255,255,255,0.12); border-radius:16px; padding:1rem 1.05rem; background:rgba(255,255,255,0.06); transition:transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;}
.stat:hover{transform:translateY(-6px); box-shadow:0 22px 70px rgba(0,0,0,0.38); border-color:rgba(255,255,255,0.18);}
.stat strong{font-size:1.55rem; letter-spacing:-0.03em; background:linear-gradient(135deg, #ffb703, var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.stat span{color:rgba(255,255,255,0.76); font-weight:800;}

.faq{display:grid; grid-template-columns:1fr; gap:0.9rem; margin-top:1.4rem;}

details{border:1px solid rgba(255,255,255,0.12); border-radius:16px; background:rgba(255,255,255,0.06); overflow:hidden;}
summary{cursor:pointer; list-style:none; padding:1.05rem 1.1rem; font-weight:900; letter-spacing:-0.01em;}
summary::-webkit-details-marker{display:none;}
details p{margin:0; padding:0 1.1rem 1.05rem; color:rgba(255,255,255,0.76);}

.cta-band{padding:3.4rem 0;}
.cta-inner{display:grid; grid-template-columns:1.1fr 0.9fr; gap:1.3rem; align-items:center; border:1px solid rgba(255,255,255,0.14); border-radius:calc(var(--radius) + 6px); background:radial-gradient(520px 220px at 20% 20%, rgba(34,197,94,0.14), transparent 60%), radial-gradient(520px 260px at 80% 70%, rgba(249,115,22,0.20), transparent 60%), rgba(255,255,255,0.06); padding:1.45rem 1.5rem; box-shadow:var(--shadow);}
.cta-inner h2{margin:0; letter-spacing:-0.03em;}
.cta-inner p{margin:0.65rem 0 0; color:rgba(255,255,255,0.76);}
.cta-inner .actions{justify-content:flex-end; display:flex; gap:0.7rem; flex-wrap:wrap;}

footer{border-top:1px solid rgba(255,255,255,0.10); padding:2.2rem 0; color:rgba(255,255,255,0.70);}
footer .foot{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;}
footer .mini{color:rgba(255,255,255,0.58); font-weight:800;}

@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero{padding-top:3.4rem;}
  .service{grid-column:span 12;}
  .about{grid-column:span 12;}
  .stats{grid-column:span 12; grid-template-columns:repeat(2,1fr);}
  .cta-inner{grid-template-columns:1fr;}
  .cta-inner .actions{justify-content:flex-start;}
  .section-head{flex-direction:column; align-items:flex-start;}
}

@media (max-width: 600px){
  .nav{display:grid; grid-template-columns:1fr auto; align-items:center; gap:0.75rem;}
  .nav-toggle{display:inline-flex;}
  .nav-drawer{grid-column:1 / -1; display:none; padding:0.85rem 0 0.25rem; margin-top:0.25rem; border-top:1px solid rgba(255,255,255,0.10); flex-direction:column; align-items:center; gap:0.95rem;}
  .nav.is-open .nav-drawer{display:flex;}
  .nav-links{flex-direction:column; align-items:center; gap:0.95rem;}
  .nav-actions{justify-content:center;}
  .nav-actions .btn{width:auto; padding:0.62rem 0.95rem; font-size:0.95rem; min-height:44px;}

  .hero-grid > div:first-child{
    text-align: center;
  }

  .kicker{
    margin-left: auto;
    margin-right: auto;
  }

  .hero p{
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions{
    flex-direction: column;
    align-items: center;
  }

  .hero-actions .btn{
    width: min(360px, 100%);
    min-height: 48px;
    flex: 0 0 auto;
    padding: 0.9rem 1.9rem;
    line-height: 1.1;
  }

  .hero-trust{
    justify-content: center;
    text-align: center;
  }

  .mobile-break{display:block;}

  .section-head{
    align-items: center;
    text-align: center;
  }

  .section-head p{
    max-width: 70ch;
  }

  .card{
    text-align: center;
  }

  .service .tag{
    margin-left: auto;
    margin-right: auto;
  }

  .stat{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cta-inner{
    text-align: center;
  }

  .cta-inner .actions{
    justify-content: center;
  }

  .cta-inner .actions .btn{
    width: min(360px, 100%);
    min-height: 48px;
    flex: 0 0 auto;
    padding: 0.9rem 1.9rem;
    line-height: 1.1;
  }

  footer .foot{
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 520px){
  .stats{grid-template-columns:1fr;}
  .badge-stack{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .btn{transition:none;}
  .card{animation:none; transition:none;}
  details{transition:none;}
  .stat{transition:none;}
  .hero-rotator-img{transition:none;}
  .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{transition:none;}
}