.hero{padding:28px 0 56px}
.hero-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:24px;align-items:center}
.hero h1{font-size:clamp(42px,6.2vw,80px);line-height:1.02;letter-spacing:-0.035em}
.hero .sub{font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:var(--muted);margin:26px 0 34px;max-width:520px}
.search{position:relative;max-width:610px}
.search form{display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid #c4daff;border-radius:20px;padding:6px 6px 6px 22px;box-shadow:0 0 0 5px rgba(21,112,239,.07),0 14px 34px rgba(21,112,239,.1)}
.search svg{color:var(--ink);flex-shrink:0}
.search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;font-size:16px;color:var(--ink);padding:16px 12px}
.search input::placeholder{color:#8a95a8}
.search .btn{padding:17px 34px;font-size:16px;border-radius:15px}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 50px rgba(15,23,42,.14);padding:8px;display:none;z-index:5}
.suggest.open{display:block}
.suggest button{display:flex;width:100%;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:12px;font-size:15px;font-weight:600;color:var(--ink)}
.suggest button:hover{background:var(--blue-soft)}
.suggest small{margin-left:auto;font-weight:500;color:var(--muted)}
.trust{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}
.trust div{display:flex;align-items:center;gap:14px;font-size:15px;line-height:1.35;color:var(--text)}
.visual{position:relative;container-type:inline-size;width:100%;aspect-ratio:554/550}
.visual>*{position:absolute}
.vb1{left:6.3%;width:43.9%;top:.4%;height:54.5%;background:#e1ecff;border-radius:30px}
.vb2{left:63.2%;width:32.9%;top:23.3%;height:75.3%;background:#e8f0ff;border-radius:30px}
.vb3{left:10.5%;width:24%;top:73%;height:27%;background:#edf3ff;border-radius:26px}
.vphoto{left:18.2%;width:66.8%;top:12.2%;height:78.4%;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px rgba(12,34,76,.18)}
.vphoto img{width:100%;height:100%;object-fit:cover}
.badge{background:#fff;border-radius:20px;box-shadow:0 18px 40px rgba(12,34,76,.14);display:flex;align-items:center;gap:4.2cqw;padding:0 3.4cqw;font-size:2.7cqw;line-height:1.35;color:var(--ink)}
.badge b{display:block;font-weight:700;font-size:2.8cqw}
.badge span{display:block;color:var(--muted);font-weight:500}
.badge svg{width:7.6cqw;height:7.6cqw;color:var(--blue);flex-shrink:0}
.badge1{left:-.6%;width:39.4%;top:14.6%;height:15.6%}
.badge2{left:66.5%;width:33.8%;top:48.6%;height:15.8%}
.badge3{left:21.6%;width:35.4%;top:82.4%;height:15.8%}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .vslider{max-width:520px;margin:12px auto 34px}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(38px,11vw,52px)}
  .search form{flex-wrap:wrap;padding:8px}
  .search input{padding:12px 8px;flex-basis:calc(100% - 40px)}
  .search .btn{width:100%}
  .trust{gap:16px;margin-top:30px}
  .trust div{flex:1 1 100%}
  .badge{border-radius:14px}
}
@keyframes aLeft{from{opacity:0;transform:translateX(-44px) scale(.92)}to{opacity:1;transform:none}}
@keyframes aRight{from{opacity:0;transform:translateX(44px) scale(.92)}to{opacity:1;transform:none}}
@keyframes aBottom{from{opacity:0;transform:translateY(44px) scale(.92)}to{opacity:1;transform:none}}
@keyframes aWipe{from{opacity:1;clip-path:inset(100% 0 0 0 round 28px)}to{opacity:1;clip-path:inset(0 0 0 0 round 28px)}}
@keyframes aSlideA{from{opacity:0;transform:translate(-34px,-34px)}to{opacity:1;transform:none}}
@keyframes aSlideB{from{opacity:0;transform:translate(34px,24px)}to{opacity:1;transform:none}}
@keyframes aSlideC{from{opacity:0;transform:translate(-24px,34px)}to{opacity:1;transform:none}}
@keyframes aFloat{from{translate:0 0}to{translate:0 -9px}}
@keyframes aKen{from{transform:scale(1)}to{transform:scale(1.07)}}
.s1.on .vb1{animation:aSlideA .9s cubic-bezier(.2,.8,.2,1) 0s both}
.s1.on .vb2{animation:aSlideB .9s cubic-bezier(.2,.8,.2,1) .1s both}
.s1.on .vb3{animation:aSlideC .9s cubic-bezier(.2,.8,.2,1) .2s both}
.s1.on .vphoto{animation:aWipe 1.1s cubic-bezier(.65,0,.2,1) .25s both}
.s1.on .vphoto img{animation:aKen 14s ease-in-out 1.2s infinite alternate}
.s1.on .badge1{animation:aLeft .8s cubic-bezier(.2,1.35,.4,1) 1.2s both,aFloat 5s ease-in-out 2.1s infinite alternate}
.s1.on .badge2{animation:aRight .8s cubic-bezier(.2,1.35,.4,1) 1.9s both,aFloat 6s ease-in-out 2.8s infinite alternate}
.s1.on .badge3{animation:aBottom .8s cubic-bezier(.2,1.35,.4,1) 2.6s both,aFloat 5.5s ease-in-out 3.5s infinite alternate}
.vslider{position:relative;display:grid;width:100%}
.vslider .slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.vslider .slide.on{opacity:1;visibility:visible;transition:opacity .6s ease}
.vdots{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;z-index:5}
.vdots button{width:10px;height:10px;border-radius:999px;background:#c5d4f4;transition:width .3s ease,background .3s ease}
.vdots button:hover{background:#9fb8ee}
.vdots button.on{width:30px;background:var(--blue)}
.wb{border-radius:30px}
.wb1{left:22%;width:36%;top:2%;height:38%;background:#e1ecff}
.wb2{left:62%;width:36%;top:8%;height:52%;background:#e8f0ff}
.wb3{left:0;width:19%;top:38%;height:42%;background:#edf3ff}
.wb4{left:50%;width:40%;top:86%;height:14%;background:#e6efff}
.mapcard{left:14%;width:74%;top:26%;height:46%;border-radius:7cqw;overflow:hidden;box-shadow:0 26px 54px rgba(12,34,76,.16);background:#edf1f9}
.mapcard svg{width:100%;height:100%;display:block}
.st b{font-size:2.6cqw}
.st span{font-size:2.3cqw}
.st1{left:0;top:5%;width:55%;height:17%}
.st2{left:66%;top:28%;width:34%;height:17.5%}
.st3{left:3%;top:70%;width:53%;height:28%;gap:3.2cqw}
.st4{left:58%;top:76%;width:42%;height:21%}
.st3 .st-ava{width:11.5cqw;height:11.5cqw;border-radius:50%;object-fit:cover;flex-shrink:0}
.stars{display:flex;gap:.6cqw;margin-top:1cqw;color:#f5a623}
.stars .star{width:3cqw;height:3cqw}
.badge .ck{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes aPopIn{from{opacity:0;transform:scale(.9) translateY(16px)}to{opacity:1;transform:none}}
@keyframes aPin{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes aDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes aRing{0%{opacity:.35;transform:scale(.9)}100%{opacity:0;transform:scale(1.9)}}
@keyframes aStar{from{opacity:0;transform:scale(.2) rotate(-40deg)}to{opacity:1;transform:none}}
@keyframes aFadeIn{from{opacity:0}to{opacity:1}}
.hpin,.hring,.star{transform-box:fill-box;transform-origin:center}
.s2 #mpin{opacity:0}
.s2.on .wb1{animation:aSlideA .9s cubic-bezier(.2,.8,.2,1) 0s both}
.s2.on .wb2{animation:aSlideB .9s cubic-bezier(.2,.8,.2,1) .1s both}
.s2.on .wb3{animation:aSlideC .9s cubic-bezier(.2,.8,.2,1) .2s both}
.s2.on .wb4{animation:aSlideB .9s cubic-bezier(.2,.8,.2,1) .3s both}
.s2.on .mapcard{animation:aPopIn .9s cubic-bezier(.2,.8,.2,1) .15s both}
.s2.on .st1{animation:aLeft .8s cubic-bezier(.2,1.35,.4,1) 1s both,aFloat 5s ease-in-out 1.9s infinite alternate}
.s2.on .hpin{animation:aPin .7s cubic-bezier(.2,1.3,.4,1) 1.6s both}
.s2.on .hring{animation:aRing 2.4s ease-out 2.3s infinite}
.s2.on .rm{stroke-dasharray:1;stroke-dashoffset:1;animation:aDraw 1.5s cubic-bezier(.5,0,.3,1) 2s forwards}
.s2.on .st2{animation:aRight .8s cubic-bezier(.2,1.35,.4,1) 2.3s both,aFloat 6s ease-in-out 3.2s infinite alternate}
.s2.on #mpin{animation:aFadeIn .4s ease-out 2.45s both}
.s2.on .st3{animation:aBottom .8s cubic-bezier(.2,1.35,.4,1) 3.6s both,aFloat 5.5s ease-in-out 4.5s infinite alternate}
.s2.on .star:nth-child(1){animation:aStar .45s cubic-bezier(.2,1.4,.4,1) 4.2s both}
.s2.on .star:nth-child(2){animation:aStar .45s cubic-bezier(.2,1.4,.4,1) 4.4s both}
.s2.on .star:nth-child(3){animation:aStar .45s cubic-bezier(.2,1.4,.4,1) 4.6s both}
.s2.on .star:nth-child(4){animation:aStar .45s cubic-bezier(.2,1.4,.4,1) 4.8s both}
.s2.on .star:nth-child(5){animation:aStar .45s cubic-bezier(.2,1.4,.4,1) 5s both}
.s2.on .st4{animation:aRight .8s cubic-bezier(.2,1.35,.4,1) 5.2s both,aFloat 5s ease-in-out 6.1s infinite alternate}
.s2.on .ck{stroke-dasharray:1;stroke-dashoffset:1;animation:aDraw .6s ease-out 5.7s forwards}
@media (max-width:640px){
  .st b{font-size:2.9cqw}
  .st span{font-size:2.5cqw}
}
@media (prefers-reduced-motion:reduce){
  .s2 #mpin{opacity:1}
  .rm{stroke-dashoffset:0 !important}
}
@media (prefers-reduced-motion:reduce){
  .visual *{animation:none !important}
}