
:root{--navy:#001d31;--ink:#071931;--red:#ff1738;--cyan:#00e0e7;--blue:#078df9;--teal:#00b7a6}*{box-sizing:border-box}body{margin:0;background:white;color:var(--ink);font-family:Poppins,Arial,sans-serif}main{width:100%;max-width:1440px;margin:auto;overflow:hidden}.hero{height:44vw;max-height:635px;min-height:400px;position:relative;background:radial-gradient(ellipse at 72% 90%,#04516b 0%,#013049 45%,#001a2b 100%);color:white;overflow:hidden}.hero-art{height:100%;width:63.2%;position:absolute;left:0;top:0;object-fit:fill}.hero-copy{position:absolute;left:64.2%;top:19.1%;width:34%;z-index:2}.hero h1{font-size:clamp(30px,4.05vw,58px);font-weight:800;letter-spacing:-1.5px;line-height:1.08;margin:0 0 26px}.red{color:var(--red)}.red-line{height:6px;width:64px;background:var(--red);margin:0 0 16px}.hero p{font-size:clamp(13px,1.64vw,22px);line-height:1.43;margin:0;font-weight:400}.hero::after{content:"";position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 80px 145px;border-color:transparent transparent #00dbe8 transparent}
.intro{min-height:406px;padding:13px 2.7% 12px 4.5%;display:grid;grid-template-columns:28% 72%;gap:0;align-items:start}.intro h2{font-size:clamp(32px,3.85vw,53px);font-weight:800;letter-spacing:-1.5px;line-height:1.08;margin:16px 0}.intro p{font-size:clamp(13px,1.46vw,19px);line-height:1.46;margin:18px 0}.app-img{width:100%;display:block;filter:drop-shadow(0 8px 12px #98c3dc);border-radius:16px}.contact{font:600 clamp(12px,1.36vw,17px) Arial,sans-serif;color:#071931;border:1.8px solid var(--red);display:inline-flex;align-items:center;gap:9px;border-radius:28px;padding:5px 9px 5px 6px;text-decoration:none;white-space:nowrap}.phone{width:24px;height:24px;display:grid;place-items:center;background:#ff172c;color:white;border-radius:50%;font-size:15px}.contact:hover{background:#fff0f2}
.benefits{display:grid;grid-template-columns:repeat(5,1fr);padding:15px 4% 30px;text-align:center;gap:0}.benefit{padding:0 12px;border-right:1px solid #dbe2e9;min-height:94px}.benefit:last-child{border:0}.benefit svg{height:54px;width:54px;margin:0 auto 3px;display:block}.benefit strong{display:block;font-size:clamp(11px,1.42vw,18px);line-height:1.24;letter-spacing:-.35px;color:#06142b}
.how{margin:0 1.65% 15px;border-radius:20px;background:#f4f7fc;padding:7px 28px 20px;text-align:center}.how h2{font-size:clamp(31px,3.7vw,48px);line-height:1.3;letter-spacing:-1.4px;margin:0;font-weight:800}.how .subtitle{font-size:clamp(13px,1.56vw,20px);margin:0 0 9px}.steps{display:grid;grid-template-columns:1fr 42px 1fr 42px 1fr;gap:10px;align-items:center}.step .circle{display:flex;align-items:center;justify-content:center;width:75px;height:75px;color:white;border-radius:50%;margin:0 auto 4px;font-size:39px;line-height:1}.upload{background:#0796fe}.ask{background:#ff1738}.answer{background:linear-gradient(135deg,#00a2d5,#00c690)}.step h3{font-weight:800;font-size:clamp(17px,2.05vw,26px);letter-spacing:-.7px;margin:4px 0 2px;color:#060606}.step p{font-size:clamp(12px,1.5vw,19px);line-height:1.34;margin:0 auto;max-width:270px}.arrow{font-size:34px;color:#001a69;margin-top:-40px}
.footer{min-height:259px;color:white;position:relative;display:grid;grid-template-columns:48% 52%;padding:21px 4.5% 23px;background:radial-gradient(ellipse at 85% 10%,#005063,#00344d 39%,#00213a 68%,#001b31 100%);overflow:hidden}.footer::before{content:"";position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 92px 210px;border-color:transparent transparent #00dce8 transparent}.footer::after{content:"";position:absolute;right:0;top:0;border-style:solid;border-width:0 100px 45px 0;border-color:transparent #ff183f transparent transparent}.footer h2{font-size:clamp(27px,3.24vw,44px);line-height:1.12;letter-spacing:-1px;margin:0 0 10px;font-weight:800}.footer p{font-size:clamp(13px,1.5vw,20px);line-height:1.38;margin:0}.footer-metrics{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;z-index:1}.metric{text-align:center;border-left:1px solid #9db1c2;min-height:140px;padding:0 12px}.metric .symbol{font-size:41px;line-height:1.2}.metric h3{font-size:clamp(19px,2.35vw,30px);line-height:1.1;margin:5px 0 0}.metric p{font-size:clamp(11px,1.36vw,18px);margin:3px 0}.footer .red-line{margin-bottom:13px}
@media(min-width:1440px){.hero{height:635px}.hero h1{font-size:58px}.hero p{font-size:22px}.intro{min-height:570px}.benefits{padding-top:20px;padding-bottom:43px}.how{padding:16px 28px 32px}.footer{min-height:365px;padding-top:38px}.footer h2{font-size:44px}}@media(max-width:720px){.hero{min-height:0;height:63vw}.hero-art{width:66%}.hero-copy{left:64%;top:18%;width:34%}.hero h1{font-size:clamp(17px,4.1vw,30px);letter-spacing:-.5px;margin-bottom:10px}.hero p{font-size:clamp(8px,1.6vw,12px)}.hero .red-line{height:4px;width:35px;margin-bottom:9px}.intro{min-height:0;padding:15px 3% 6px 4%;grid-template-columns:29% 71%}.intro h2{font-size:clamp(18px,3.7vw,28px);letter-spacing:-.8px;margin:4px 0 9px}.intro p{font-size:clamp(9px,1.55vw,13px);margin:8px 0}.intro .red-line{width:32px;height:4px;margin:0}.contact{font-size:9px;padding:3px;gap:3px}.phone{width:17px;height:17px;font-size:10px}.benefits{padding:12px 2% 18px}.benefit{padding:0 4px;min-height:75px}.benefit svg{height:35px;width:35px}.benefit strong{font-size:clamp(8px,1.5vw,12px)}.how{padding:5px 10px 15px}.how h2{font-size:28px}.how .subtitle{font-size:11px}.steps{gap:2px;grid-template-columns:1fr 20px 1fr 20px 1fr}.step .circle{width:52px;height:52px;font-size:29px}.step h3{font-size:14px}.step p{font-size:10px}.arrow{font-size:18px;margin-top:-25px}.footer{min-height:180px;padding:17px 3%;grid-template-columns:48% 52%}.footer h2{font-size:clamp(18px,3.2vw,26px)}.footer p{font-size:10px}.metric{min-height:100px;padding:0 4px}.metric .symbol{font-size:23px}.metric h3{font-size:14px}.metric p{font-size:9px}}@media(max-width:460px){.hero{height:72vw}.hero-art{width:65%;object-fit:fill}.hero-copy{top:14%;left:64.7%}.hero h1{font-size:4.05vw}.hero p{font-size:1.9vw}.hero::after{border-width:0 0 35px 70px}.intro{grid-template-columns:30% 70%}.intro h2{font-size:4vw}.intro p{font-size:2vw}.contact{font-size:1.8vw}.benefit strong{font-size:1.8vw}.how h2{font-size:6vw}.footer{min-height:165px}.footer::before{border-width:0 0 45px 105px}}
