:root{
  --bg:#050e1c; --nav:#04101f; --teal:#2fd4c4; --line:#16395e; --panel:#0a1e36;
  --ink:#fff; --muted:#d7e2ee; --muted2:#c3d2e2;
  --pad:clamp(16px,3vw,32px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter Tight',Helvetica,Arial,sans-serif}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:#6ae6da}
h1,h2{margin:0}

/* nav */
.nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:16px var(--pad);background:var(--nav)}
.nav__logo img{height:clamp(34px,4.2vw,46px);width:auto;filter:brightness(0) invert(1)}
.nav__menu{display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);font-size:15px;white-space:nowrap}
.nav__menu a{color:#e6edf6;display:flex;align-items:center;gap:7px;padding:6px 0}
.nav__menu a.is-active{color:#fff;border-bottom:2px solid var(--teal)}
.nav__wa{display:flex;align-items:center;white-space:nowrap;gap:11px;padding:11px 22px;border:1px solid #2b7c78;border-radius:999px;background:#0b2135;color:#fff;font-size:15px;font-weight:700;min-height:44px}
.nav__wa:hover{color:#fff;background:#0e2a44}
.wa-dot{width:26px;height:26px;border-radius:50%;background:#25a35a;display:flex;align-items:center;justify-content:center;flex:none}
.nav__toggle{display:none;width:46px;height:44px;background:none;border:1px solid #24486e;border-radius:8px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;padding:0 11px}
.nav__toggle span{display:block;height:2px;background:#fff;transition:transform .2s,opacity .2s}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* hero */
.hero{position:relative;overflow:hidden;padding-bottom:30px}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1100px 700px at 78% 34%,#0f4a86 0%,#0a2b56 34%,#041228 62%,#030b18 100%)}
.hero>*{position:relative}
.hero__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:center;gap:24px;padding:clamp(24px,3vw,34px) var(--pad) 0;max-width:1280px;margin:0 auto}
.hero__copy{max-width:560px}
.eyebrow{display:inline-block;margin:0;white-space:nowrap;padding:9px 20px;border:1px solid #2b7c78;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.06em;color:#eaf3f6}
h1{margin-top:22px;font-size:clamp(32px,5.2vw,54px);line-height:1.06;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
h1 span{color:var(--teal)}
.lede{margin:22px 0 0;font-size:clamp(15px,1.5vw,18px);line-height:1.55;color:var(--muted);text-wrap:pretty}
.cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.btn{display:flex;align-items:center;gap:14px;padding:16px 22px;border-radius:6px;color:#fff;min-height:44px}
.btn:hover{color:#fff}
.btn svg{flex:none}
.btn .arw{margin-left:8px}
.btn strong{display:block;white-space:nowrap;font-size:16px;font-weight:700;letter-spacing:.02em;line-height:1.3}
.btn em{display:block;white-space:nowrap;font-style:normal;font-size:13px;color:#d8f3f1;margin-top:2px}
.btn--primary{background:linear-gradient(90deg,#17a4a0,#0d7f8c);box-shadow:0 10px 26px rgba(11,120,124,.35)}
.btn--primary:hover{background:linear-gradient(90deg,#19b3ae,#0e8c9a)}
.btn--ghost{border:1px solid #3b5f7d;background:rgba(8,26,46,.6)}
.btn--ghost:hover{background:rgba(14,42,68,.8)}
.trustline{display:flex;align-items:center;gap:10px;margin:26px 0 0;font-size:14px;color:#cfdcea}
.trustline svg{flex:none}
.hero__art{display:flex;justify-content:center}
.hero__art img{width:100%;max-width:640px;height:auto}

/* trust bar */
.trustbar{list-style:none;margin:20px auto 0;padding:0;max-width:1280px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;width:calc(100% - 2*var(--pad))}
.trustbar li{display:flex;align-items:center;gap:14px;padding:18px 22px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.trustbar svg{flex:none}
.trustbar strong{display:block;font-size:14px;font-weight:700;letter-spacing:.04em}
.trustbar em{display:block;font-style:normal;font-size:13px;color:var(--muted2);margin-top:3px}

/* cards */
.cards{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:20px var(--pad) 0}
.card{background:#fdfdfd;border-radius:10px;padding:16px;color:#0e2033;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{color:#0e2033;transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.28)}
.card__head{display:flex;gap:12px;align-items:flex-start}
.card__head img{width:62px;height:62px;object-fit:contain;flex:none}
.card__icon{width:56px;height:56px;border-radius:50%;background:#0f6f74;flex:none;display:flex;align-items:center;justify-content:center}
.card h2{font-size:15px;font-weight:700;line-height:1.25}
.card p{margin:14px 0 0;font-size:13px;line-height:1.5;color:#5b6b7c}

@media (max-width:1080px){
  .nav__toggle{display:flex}
  .nav__menu{display:none;order:3;width:100%;flex-direction:column;align-items:flex-start;gap:2px;padding-top:8px;border-top:1px solid #17324f}
  .nav__menu.is-open{display:flex}
  .nav__menu a{width:100%;padding:12px 0;min-height:44px}
  .nav__menu a.is-active{border-bottom:none;color:var(--teal)}
  .nav__wa{margin-left:auto}
}
@media (max-width:520px){
  .nav__wa{width:100%;justify-content:center;order:4}
  .cta .btn{width:100%}
  .hero__copy{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}