@import url('https://fonts.googleapis.com/css2?family=Cabinet+Grotesk:wght@400;500;700;800;900&family=Satoshi:wght@400;500;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#080f0f;color:#7d9490;font-family:'Satoshi',system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;padding:0}
ul{list-style:none}

:root{
  --bg:     #080f0f;
  --bg1:    #0c1616;
  --bg2:    #101e1e;
  --bg3:    #152424;
  --edge:   rgba(255,255,255,0.06);
  --edge2:  rgba(255,255,255,0.04);
  --tl:     #0d5c50;
  --tl-lt:  #0f8a78;
  --tl-dim: rgba(13,92,80,0.15);
  --head:   #e4eeeb;
  --body:   #7d9490;
  --mute:   #4a6060;
  --ghost:  #243030;
  --ok:     #3dba8a;
  --max:    1120px;
  --pad:    clamp(18px,4vw,52px);
  --r:      10px;
  --rl:     16px;
}

h1,h2,h3,h4{font-family:'Cabinet Grotesk',system-ui,sans-serif;font-weight:800;line-height:1.06;letter-spacing:-0.03em;color:var(--head)}
h1{font-size:clamp(2.8rem,7vw,5.6rem)}
h2{font-size:clamp(2rem,4.5vw,3.8rem)}
h3{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:700;letter-spacing:-0.015em}
h4{font-size:0.94rem;letter-spacing:0;font-weight:700}
p{font-size:1.05rem;line-height:1.78;color:var(--body)}

.box{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sec{padding:clamp(72px,10vw,130px) 0}
.dark1{background:var(--bg1)}
.dark2{background:var(--bg2)}

.lbl{display:inline-flex;align-items:center;gap:10px;font-size:0.67rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--tl-lt);margin-bottom:16px}
.lbl::before{content:'';display:block;width:22px;height:1.5px;background:var(--tl-lt);flex-shrink:0}
.lbl-c{justify-content:center}
.lbl-c::before,.lbl-c::after{content:'';display:block;width:22px;height:1.5px;background:var(--tl-lt);flex-shrink:0}

hr.r{display:block;width:38px;height:2px;background:var(--tl);border:none;margin:18px 0 26px}
hr.r-c{margin-left:auto;margin-right:auto}

.intro{margin-bottom:clamp(48px,6vw,76px)}
.intro p{max-width:500px;margin-top:12px}
.intro.c{text-align:center}
.intro.c p{margin-left:auto;margin-right:auto}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Satoshi',sans-serif;font-weight:700;border:2px solid transparent;border-radius:var(--r);cursor:pointer;white-space:nowrap;transition:background .17s,border-color .17s,color .17s,transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s cubic-bezier(.16,1,.3,1)}
.btn:active{transform:none!important}
.bxl{font-size:0.9rem;padding:17px 44px}
.blg{font-size:0.86rem;padding:14px 36px}
.bmd{font-size:0.8rem;padding:11px 26px}
.bsm{font-size:0.75rem;padding:8px 20px}
.bp{background:var(--tl);border-color:var(--tl);color:#fff;box-shadow:0 2px 18px rgba(13,92,80,.28)}
.bp:hover{background:#0a4a40;border-color:#0a4a40;transform:translateY(-2px);box-shadow:0 10px 36px rgba(13,92,80,.4)}
.bg{background:transparent;border-color:rgba(228,238,235,.16);color:rgba(228,238,235,.8)}
.bg:hover{border-color:rgba(228,238,235,.42);background:rgba(228,238,235,.05)}
.bt{background:transparent;border-color:var(--tl);color:var(--tl-lt)}
.bt:hover{background:var(--tl-dim)}

/* NAV */
.nav{position:fixed;inset:0 0 auto;z-index:900;height:68px;background:rgba(8,15,15,.9);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border-bottom:1px solid var(--edge);transition:box-shadow .3s}
.nav.s{box-shadow:0 4px 48px rgba(0,0,0,.55)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:68px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.nlogo{font-family:'Cabinet Grotesk',sans-serif;font-size:1.26rem;font-weight:900;color:var(--head);letter-spacing:-.04em;flex-shrink:0}
.nlogo em{font-style:normal;color:var(--tl-lt)}
.nlinks{display:flex;align-items:center;gap:30px}
.nlinks a{font-size:0.77rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--mute);transition:color .17s;position:relative;padding:3px 0}
.nlinks a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1.5px;background:var(--tl-lt);transition:width .22s cubic-bezier(.16,1,.3,1)}
.nlinks a:hover{color:var(--head)}
.nlinks a:hover::after{width:100%}
.burger{display:none;flex-direction:column;gap:5px;padding:4px;width:30px}
.burger span{display:block;width:100%;height:1.5px;background:var(--head);border-radius:2px;transition:all .27s ease;transform-origin:center}
.burger.o span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.o span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.o span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.drawer{display:none;position:fixed;top:68px;left:0;right:0;bottom:0;background:var(--bg);z-index:899;flex-direction:column;padding:26px var(--pad) 48px;border-top:1px solid var(--edge);overflow-y:auto}
.drawer.o{display:flex}
.drawer a{font-size:0.94rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--body);padding:16px 0;border-bottom:1px solid var(--edge);transition:color .17s}
.drawer a:hover{color:var(--head)}
.drawer .btn{margin-top:22px;align-self:flex-start}

/* HERO */
.hero{padding:158px 0 104px;background:var(--bg);position:relative;overflow:hidden;border-bottom:1px solid var(--edge)}
.hero-wm{position:absolute;right:-2%;top:50%;transform:translateY(-50%);font-family:'Cabinet Grotesk',sans-serif;font-size:clamp(160px,26vw,400px);font-weight:900;line-height:1;letter-spacing:-.07em;color:rgba(13,92,80,.04);pointer-events:none;user-select:none;white-space:nowrap}
.hero-g{display:grid;grid-template-columns:1fr 400px;gap:60px;align-items:center;position:relative;z-index:1}
.status{display:inline-flex;align-items:center;gap:9px;padding:6px 16px 6px 10px;background:rgba(13,92,80,.18);border:1px solid rgba(13,92,80,.35);border-radius:100px;font-size:0.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tl-lt);margin-bottom:22px}
.pip{width:7px;height:7px;background:var(--tl-lt);border-radius:50%;flex-shrink:0;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(15,138,120,.5)}50%{box-shadow:0 0 0 8px rgba(15,138,120,0)}}
.hero h1{margin-bottom:20px}
.hero h1 em{font-style:italic;color:var(--tl-lt)}
.hero-p{font-size:1.1rem;color:var(--body);line-height:1.72;max-width:460px;margin-bottom:34px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.hero-fn{font-size:0.7rem;color:var(--ghost);letter-spacing:.03em}
.panel{background:var(--bg2);border:1px solid var(--edge);border-radius:var(--rl);overflow:hidden}
.ph{padding:14px 22px;background:rgba(255,255,255,.025);border-bottom:1px solid var(--edge);display:flex;align-items:center;justify-content:space-between;font-size:0.63rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tl-lt)}
.ph-live{display:flex;align-items:center;gap:6px;font-size:0.64rem;color:var(--mute);font-weight:500;letter-spacing:0;text-transform:none}
.live-dot{width:5px;height:5px;background:#22c55e;border-radius:50%;animation:pulse 2.5s ease-in-out infinite}
.prows{padding:6px 0}
.prow{display:flex;align-items:flex-start;gap:13px;padding:13px 22px;border-bottom:1px solid var(--edge2);transition:background .17s}
.prow:last-child{border-bottom:none}
.prow:hover{background:rgba(13,92,80,.08)}
.pbadge{width:22px;height:22px;background:var(--tl);border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.pbadge span{font-size:0.62rem;font-weight:800;color:#fff;line-height:1}
.pt{display:block;font-size:0.82rem;font-weight:700;color:var(--head);margin-bottom:2px}
.pd{display:block;font-size:0.73rem;color:var(--mute);line-height:1.5}
.pcta{display:block;width:100%;padding:14px 22px;background:var(--tl);text-align:center;font-family:'Satoshi',sans-serif;font-size:0.83rem;font-weight:700;color:#fff;letter-spacing:.04em;transition:background .17s}
.pcta:hover{background:#0a4a40}

/* STRIP */
.strip{background:var(--bg1);border-bottom:1px solid var(--edge);padding:17px 0;overflow:hidden}
.strip-in{display:flex;align-items:center;gap:32px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding:2px 0}
.strip-in::-webkit-scrollbar{display:none}
.slbl{font-size:0.63rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ghost);flex-shrink:0;padding-right:28px;border-right:1px solid var(--edge)}
.sitems{display:flex;gap:26px;flex-shrink:0}
.si{display:inline-flex;align-items:center;gap:8px;font-size:0.82rem;font-weight:600;color:var(--mute);flex-shrink:0}
.sdot{width:4px;height:4px;background:var(--tl);border-radius:50%}

/* WHO */
.who-g{display:grid;grid-template-columns:400px 1fr;gap:80px;align-items:center}
.who-tags{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wtag{display:flex;align-items:center;gap:12px;padding:15px 18px;background:var(--bg2);border:1px solid var(--edge);border-radius:var(--r);transition:border-color .17s,background .17s;cursor:default}
.wtag:hover{border-color:rgba(13,92,80,.45);background:rgba(13,92,80,.1)}
.wtag-dot{width:6px;height:6px;background:var(--tl);border-radius:50%;flex-shrink:0}
.wtag-name{font-size:0.87rem;font-weight:600;color:var(--head)}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--bg2);border:1px solid var(--edge);border-radius:var(--rl);padding:44px 36px 48px;position:relative;overflow:hidden;transition:border-color .17s,transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s cubic-bezier(.16,1,.3,1)}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--edge);transition:background .22s}
.card:hover::before{background:var(--tl)}
.card:hover{border-color:rgba(13,92,80,.3);transform:translateY(-4px);box-shadow:0 24px 72px rgba(0,0,0,.38)}
.cn{font-family:'Cabinet Grotesk',sans-serif;font-size:3rem;font-weight:900;letter-spacing:-.07em;color:rgba(13,92,80,.1);line-height:1;display:block;margin-bottom:28px;transition:color .22s}
.card:hover .cn{color:rgba(13,92,80,.2)}
.card h3{margin-bottom:12px;line-height:1.2}
.card p{font-size:0.87rem;color:var(--body);line-height:1.72;margin-bottom:22px}
.chip{display:inline-block;padding:4px 11px;background:rgba(13,92,80,.18);border-radius:100px;font-size:0.63rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tl-lt)}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:var(--rl);overflow:hidden}
.step{background:var(--bg1);padding:48px 28px 56px;position:relative;transition:background .17s}
.step:hover{background:var(--bg3)}
.sn{font-family:'Cabinet Grotesk',sans-serif;font-size:4rem;font-weight:900;letter-spacing:-.07em;color:rgba(255,255,255,.04);line-height:1;display:block;margin-bottom:30px;transition:color .22s}
.step:hover .sn{color:rgba(13,92,80,.16)}
.step h3{font-size:0.93rem;margin-bottom:10px;line-height:1.3}
.step p{font-size:0.83rem;color:var(--body);line-height:1.68}
.step-tag{position:absolute;bottom:16px;right:18px;font-size:0.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ghost)}

/* PROBLEMS */
.probs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge2);border:1px solid var(--edge2);border-radius:var(--rl);overflow:hidden}
.prob{background:var(--bg1);padding:36px 28px 40px;transition:background .17s}
.prob:hover{background:var(--bg2)}
.prob:first-child{border-top:2px solid var(--tl)}
.pico{width:36px;height:36px;background:rgba(13,92,80,.18);border:1px solid rgba(13,92,80,.3);border-radius:6px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.pico svg{width:15px;height:15px;stroke:var(--tl-lt);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.prob h4{font-family:'Cabinet Grotesk',sans-serif;font-size:0.92rem;font-weight:700;color:var(--head);margin-bottom:9px;letter-spacing:-.01em;line-height:1.3}
.prob p{font-size:0.82rem;color:var(--body);line-height:1.68}

/* COMPARE */
.cmp-g{display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:start}
.cmp-l{position:sticky;top:88px}
.cmp-l h2{margin-bottom:14px}
.cmp-l p{color:var(--body);margin-bottom:0}
.cmp-t{border:1px solid var(--edge);border-radius:var(--rl);overflow:hidden}
.ct-head{display:grid;grid-template-columns:1fr 130px 140px;background:rgba(255,255,255,.025);border-bottom:1px solid var(--edge)}
.cth{padding:13px 20px;font-size:0.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cth:not(:first-child){border-left:1px solid var(--edge);text-align:center}
.cth.hl{color:var(--tl-lt);background:rgba(13,92,80,.07)}
.ct-row{display:grid;grid-template-columns:1fr 130px 140px;border-bottom:1px solid var(--edge2);transition:background .14s}
.ct-row:last-child{border-bottom:none}
.ct-row:hover{background:rgba(255,255,255,.02)}
.ctd{padding:15px 20px;font-size:0.85rem;display:flex;align-items:center;justify-content:center}
.ctd:first-child{font-weight:600;color:var(--head);justify-content:flex-start}
.ctd:not(:first-child){border-left:1px solid var(--edge2)}
.cno{color:var(--ghost);font-style:italic;font-size:0.79rem}
.cyes{color:var(--ok);font-weight:700;font-size:0.79rem;display:flex;align-items:center;gap:6px}
.cyes::before{content:'';width:6px;height:6px;background:var(--ok);border-radius:50%;flex-shrink:0}

/* TESTIMONIALS */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tc{background:var(--bg2);border:1px solid var(--edge);border-left:3px solid rgba(255,255,255,.07);border-radius:var(--rl);padding:40px 34px 36px;display:flex;flex-direction:column;gap:22px;transition:border-color .2s,box-shadow .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1)}
.tc:hover{border-left-color:var(--tl);box-shadow:0 20px 72px rgba(0,0,0,.42);transform:translateY(-3px)}
.tq{font-family:'Cabinet Grotesk',sans-serif;font-size:3.6rem;font-weight:900;line-height:.75;color:var(--tl);opacity:.2;user-select:none;display:block}
.tt{font-size:0.9rem;color:#9db0ab;line-height:1.78;flex:1}
.tdiv{height:1px;background:var(--edge)}
.ta{display:flex;align-items:center;gap:13px}
.tav{width:40px;height:40px;background:rgba(13,92,80,.18);border:1px solid rgba(13,92,80,.32);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tav span{font-family:'Cabinet Grotesk',sans-serif;font-size:0.95rem;font-weight:800;color:var(--tl-lt)}
.tn{display:block;font-size:0.82rem;font-weight:700;color:var(--head)}
.tco{display:block;font-size:0.72rem;color:var(--ghost);margin-top:2px}

/* CTA */
.cta-s{background:var(--bg1);padding:clamp(88px,11vw,148px) 0;position:relative;overflow:hidden}
.cta-s::before{content:'';position:absolute;top:-25%;left:50%;transform:translateX(-50%);width:850px;height:600px;background:radial-gradient(ellipse,rgba(13,92,80,.16) 0%,transparent 65%);pointer-events:none}
.cta-in{text-align:center;position:relative;z-index:1;max-width:680px;margin:0 auto}
.cta-in h2{margin-bottom:14px;font-size:clamp(2rem,5vw,3.8rem)}
.cta-in p{font-size:1.08rem;color:var(--body);line-height:1.72;margin-bottom:40px;max-width:460px;margin-left:auto;margin-right:auto}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-fn{margin-top:18px;font-size:0.7rem;color:var(--ghost);letter-spacing:.03em}

/* FOOTER */
.footer{background:#050c0c;border-top:1px solid var(--edge)}
.ft{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:60px;padding:clamp(60px,8vw,96px) 0 clamp(48px,6vw,72px);border-bottom:1px solid var(--edge2)}
.flogo{font-family:'Cabinet Grotesk',sans-serif;font-size:1.24rem;font-weight:900;letter-spacing:-.04em;color:var(--head);display:inline-block;margin-bottom:13px}
.flogo em{font-style:normal;color:rgba(15,138,120,.8)}
.ftag{font-size:0.83rem;color:var(--ghost);max-width:270px;line-height:1.68}
.fch{display:block;font-size:0.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ghost);margin-bottom:18px}
.fcol ul{display:flex;flex-direction:column;gap:12px}
.fcol ul a{font-size:0.83rem;color:var(--mute);transition:color .17s}
.fcol ul a:hover{color:var(--head)}
.fb{padding:22px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.fb p,.fb a{font-size:0.73rem;color:var(--ghost)}
.fb a:hover{color:var(--mute)}

/* ANIMATIONS */
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.ha{opacity:0;animation:up .85s cubic-bezier(.16,1,.3,1) forwards}
.a1{animation-delay:.04s}.a2{animation-delay:.15s}.a3{animation-delay:.26s}.a4{animation-delay:.38s}.a5{animation-delay:.5s}
.rev{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rev.in{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:1040px){
  .hero-g{grid-template-columns:1fr}
  .panel{display:none}
  .cmp-g{grid-template-columns:1fr}
  .cmp-l{position:static}
  .who-g{grid-template-columns:1fr;gap:44px}
}
@media(max-width:820px){
  .cards{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .steps{grid-template-columns:1fr 1fr}
  .probs{grid-template-columns:1fr 1fr}
  .tg{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .who-tags{grid-template-columns:1fr}
  .ft{grid-template-columns:1fr 1fr;gap:40px}
  .fbrand{grid-column:1/-1}
}
@media(max-width:660px){
  .nlinks,.nav-cta{display:none}
  .burger{display:flex}
  .sec{padding:72px 0}
  .hero{padding:120px 0 72px}
  .hero-ctas{flex-direction:column;align-items:flex-start}
  .steps{grid-template-columns:1fr}
  .probs{grid-template-columns:1fr}
  .ct-head,.ct-row{grid-template-columns:1fr 90px 110px}
  .cth,.ctd{padding:12px 14px;font-size:0.74rem}
  .cta-btns{flex-direction:column;align-items:center}
  .ft{grid-template-columns:1fr;gap:36px}
  .fbrand{grid-column:auto}
  .fb{flex-direction:column;align-items:flex-start}
}
/* CONTACT FORM */
.contact-wrap{
  max-width:860px;
  margin:40px auto 0;
  padding:32px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:24px;
  box-shadow:0 10px 40px rgba(0,0,0,.18);
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field label{
  font-size:.95rem;
  font-weight:600;
  color:#d8e3df;
  letter-spacing:.01em;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:15px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#f3f7f5;
  font:inherit;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-sizing:border-box;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:#8fa39d;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:#7fd1b9;
  box-shadow:0 0 0 4px rgba(127,209,185,.12);
  background:rgba(255,255,255,.06);
}

.contact-form select{
  appearance:none;
}

.contact-form textarea{
  resize:vertical;
  min-height:140px;
}

.form-submit{
  width:100%;
  justify-content:center;
  margin-top:6px;
}

@media (max-width: 768px){
  .contact-wrap{
    padding:22px;
    border-radius:18px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }
}
/* FIX DROPDOWN TEXT COLOR */
.contact-form select,
.contact-form select option {
  color: #000;
  background: #fff;
}