@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap');
:root{--g1:linear-gradient(135deg,#0b3fc9 0%,#1f7bff 55%,#22c7ff 100%);--hot:linear-gradient(135deg,#f7941d,#e02b20)}
h1,.sec-t,.box h2,.doc h2{font-family:"Sora","Poppins",system-ui,sans-serif}
body{background:radial-gradient(800px 480px at 100% 0,rgba(34,199,255,.2),transparent 60%),radial-gradient(640px 480px at 0 45%,rgba(247,148,29,.12),transparent 60%),#f3f7ff}
body>header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:0;box-shadow:0 10px 30px -18px rgba(6,26,92,.55)}
body>header::after{content:"";display:block;height:3px;background:linear-gradient(90deg,#22c7ff,#f7941d,#e02b20)}
.hero{background:radial-gradient(520px 320px at 88% 10%,rgba(247,148,29,.38),transparent 65%),linear-gradient(115deg,#04113d 0%,#0b3fc9 64%,#1f7bff 100%);padding-bottom:clamp(96px,12vw,130px)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(46px,7vw,84px);background:#f3f7ff;clip-path:polygon(0 100%,100% 0,100% 100%)}
.hero .wrap{animation:hin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes hin{from{opacity:0;transform:translateY(26px)}}
.hero h1{font-size:clamp(2.1rem,6vw,3.5rem);line-height:1.05;letter-spacing:-.035em}
.hero .tag{background:var(--hot);border:0;color:#fff;text-transform:none;letter-spacing:.02em;font-size:.84rem;padding:.35rem 1rem;box-shadow:0 10px 22px -10px rgba(224,43,32,.8)}
.chips li{background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card{position:relative;z-index:2;border:0;border-radius:32px;box-shadow:0 44px 90px -40px rgba(6,26,92,.6),0 0 0 1px rgba(11,63,201,.07)}
.sec{border-top:0;background:linear-gradient(90deg,#cfdcf7,transparent) top/100% 1px no-repeat;padding-top:1.7rem}
.hp+.sec{background:none}
.sn{width:38px;height:38px;border-radius:14px;background:var(--hot);box-shadow:0 12px 20px -10px rgba(224,43,32,.75);font-family:"Sora",sans-serif}
.sec-t{font-size:1.25rem}
label,.lbl{color:#16224a}
input,select,.cc-current{background:#fff;border:1.5px solid #d3def5;box-shadow:0 1px 0 rgba(6,26,92,.03),0 8px 18px -14px rgba(6,26,92,.35)}
input:hover,select:hover,.cc-current:hover{border-color:#8fb0f0}
input:focus,select:focus,.cc-current:focus{border-color:#1f7bff;box-shadow:0 0 0 4px rgba(31,123,255,.16),0 12px 24px -12px rgba(11,63,201,.55)}
.photo{border:2px dashed #7fa4ee;background:linear-gradient(135deg,#f4f8ff,#e9f1ff)}
.avatar{background:var(--g1);box-shadow:0 0 0 3px #fff,0 0 0 6px #f7941d,0 18px 30px -14px rgba(11,63,201,.8)}
.pick{background:var(--hot);box-shadow:0 10px 18px -8px rgba(224,43,32,.7)}
.btn{background:var(--hot);box-shadow:0 18px 32px -14px rgba(224,43,32,.75)}
.btn:hover{box-shadow:0 22px 38px -14px rgba(224,43,32,.85)}
.btn.o{background:#fff;box-shadow:inset 0 0 0 2px #0b3fc9}
.chk:has(input:checked){box-shadow:0 10px 24px -16px rgba(11,63,201,.6)}
.box{border-radius:30px;box-shadow:0 50px 100px -30px rgba(0,0,0,.65)}
.top{background:linear-gradient(90deg,#04113d,#061a5c)}
header a.call{background:var(--hot)}
.doc{background:#fff;border-radius:28px;box-shadow:0 36px 80px -44px rgba(6,26,92,.55);padding:clamp(1.2rem,4vw,2.6rem)}
.doc h2{border-left:5px solid #f7941d;padding-left:.8rem}
footer{border-top:1px solid #d9e4fb;padding-top:1.4rem}
@media(prefers-reduced-motion:reduce){.hero .wrap{animation:none}}

/* ===== small-screen safety: nothing is cut off or pushed sideways ===== */
html,body{max-width:100%;overflow-x:hidden}
*{min-width:0}
h1,h2,h3,p,li,label,span,a,small,b,strong,td,th,button,.err,.hint,.ref,.chips li,.tag{overflow-wrap:anywhere;word-wrap:break-word}
img,svg,video,canvas{max-width:100%}
input,select,button,textarea{max-width:100%}
input::placeholder{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.doc table,.doc pre{display:block;max-width:100%;overflow-x:auto}
.chips li,.tag{white-space:normal}
.ref{max-width:100%;word-break:break-all}
@media(max-width:640px){
 .hero h1{font-size:clamp(1.65rem,8.2vw,2.3rem)}
 .hero p{font-size:.95rem}
 .card,.doc{padding:1.05rem}
 .box{padding:1.6rem 1.1rem}
 .box h2{font-size:1.35rem}
 .steps{flex-wrap:wrap}
 .top .wrap{font-size:.78rem}
}
@media(max-width:360px){
 body{font-size:15px}
 .sec{gap:.55rem}.sec-t{font-size:1.05rem}
 .btn{padding:1rem 1rem;font-size:1rem}
 header img{height:32px}
}

/* ===== compact hero: form starts on the first screen (phone + PC) ===== */
.hero{padding:clamp(16px,2.6vw,26px) 0 clamp(62px,7vw,78px)}
.hero::after{height:clamp(26px,3.5vw,40px)}
.hero::before{width:300px;top:-90%}
.hero .tag{font-size:.74rem;padding:.25rem .8rem}
.hero h1{font-size:clamp(1.45rem,3.6vw,2.15rem);margin:.45rem 0 .25rem;letter-spacing:-.03em}
.hero p{font-size:.88rem;line-height:1.45;max-width:64ch}
.chips{margin:.6rem 0 0;gap:.4rem}
.chips li{font-size:.72rem;padding:.2rem .65rem}
.hero p[style]{margin:.5rem 0 0!important;font-size:.82rem}
.card{margin-top:-46px}
body>header img{height:44px}
body>header .wrap{padding:.45rem 0}
.top .wrap{padding:.25rem 0}
@media(max-width:640px){
 .hero{padding:12px 0 52px}
 .hero h1{font-size:clamp(1.3rem,6.2vw,1.6rem)}
 .hero p{font-size:.8rem;line-height:1.4}
 .hero>.wrap>p:not([style]){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .chips{display:none}
 .card{margin-top:-38px}
 body>header img{height:34px}
 .top{display:none}
}

/* ===== even smaller sub-heading + description ===== */
.hero h1{font-size:clamp(1.15rem,2.4vw,1.55rem);margin:.35rem 0 .2rem;line-height:1.15}
.hero p{font-size:.78rem;line-height:1.4}
.hero p[style]{font-size:.74rem}
.hero .tag{font-size:.68rem;padding:.18rem .65rem}
.chips li{font-size:.68rem}
@media(max-width:640px){
 .hero{padding:10px 0 44px}
 .hero h1{font-size:1.1rem;margin:.2rem 0 .15rem}
 .hero p{font-size:.72rem;line-height:1.35}
 .hero p[style]{font-size:.7rem}
 .hero .tag{display:none}
 .card{margin-top:-32px}
}

/* ===== phone: country code never cut off (stacked, full width) ===== */
@media(max-width:560px){
 .phone{grid-template-columns:minmax(0,1fr)!important;gap:.6rem}
 .cc-current{white-space:normal;text-overflow:clip;overflow:visible;height:auto;min-height:52px;padding:.8rem 1rem;font-size:.95rem}
 .cc-menu{width:100%}
}
/* ===== smaller sub-headings on PC + phone ===== */
.hero h1{font-size:clamp(1.05rem,1.8vw,1.3rem)}
.hero p{font-size:.74rem}
.sec-t{font-size:1.02rem}
.sec-s{font-size:.76rem}
.sn{width:32px;height:32px;font-size:.85rem;border-radius:11px}
@media(max-width:640px){.hero h1{font-size:1rem}.sec-t{font-size:.98rem}.sec-s{font-size:.74rem}}

/* ===== phone: smaller consent box ===== */
@media(max-width:640px){
 .chk{padding:.55rem .65rem;gap:.5rem;font-size:.72rem;line-height:1.35;border-radius:12px}
 .chk .cbx{width:20px;height:20px;border-radius:6px;margin-top:0}
 .chk .cbx svg{width:13px;height:13px}
 .chk input:checked+.cbx{transform:none}
 .consent .err{font-size:.74rem}
}