body:before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(900px 500px at 85% -5%,color-mix(in srgb,var(--pri) 28%,transparent),transparent 70%),radial-gradient(700px 500px at 5% 30%,color-mix(in srgb,var(--pri2) 14%,transparent),transparent 70%)}
nav.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid var(--line)}
nav.bar .wrap{display:flex;align-items:center;gap:24px;height:68px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;text-decoration:none}
.logo{width:36px;height:36px;border-radius:11px;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 6px 20px -6px var(--pri)}
.links{display:flex;gap:22px;margin-inline-start:20px}.links a{color:var(--mut);text-decoration:none;font-weight:500}.links a:hover{color:var(--ink)}.sp{flex:1}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;padding:56px 0 30px;min-height:620px}
.hero h1{font-size:clamp(32px,5vw,56px);font-weight:900;letter-spacing:-.5px;line-height:1.25}
.hero p.lead{color:var(--mut);font-size:18px;max-width:30em;margin:20px 0 30px}
.cta{display:flex;gap:12px;flex-wrap:wrap}.cta .btn{padding:14px 28px;font-size:16px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}.chip{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;background:var(--glass);border:1px solid var(--line);color:var(--mut);font-size:13.5px}.chip svg{color:var(--pri2);width:17px;height:17px}
.globe{position:relative;aspect-ratio:1;width:100%;max-width:560px;margin:auto}.globe canvas{width:100%;height:100%}
.globe .tag{position:absolute;padding:6px 12px;border-radius:12px;background:var(--surf);border:1px solid var(--line);font-size:12.5px;box-shadow:var(--shadow);display:flex;gap:8px;align-items:center}
.globe .tag i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:ping 2s infinite}@keyframes ping{70%{box-shadow:0 0 0 9px transparent}}
.t1{top:12%;left:2%}.t2{bottom:16%;right:0}
section.s{padding:70px 0}.s h2{font-size:clamp(26px,3.4vw,38px);font-weight:800}.s .sub{color:var(--mut);margin:10px 0 36px;max-width:36em}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.bento .card{grid-column:span 2;position:relative;overflow:hidden;transition:border-color .25s,transform .25s}
.bento .card:hover{border-color:color-mix(in srgb,var(--pri) 55%,var(--line));transform:translateY(-3px)}
.bento .card.w{grid-column:span 3}.bento .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--pri) 18%,transparent);color:var(--pri2);margin-bottom:16px}
.bento h3{font-size:18px;margin-bottom:6px}.bento p{margin:0;color:var(--mut);font-size:14.5px}
.bento .card:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;left:-60px;bottom:-90px;background:radial-gradient(var(--pri),transparent 70%);opacity:.14}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:28px;border-radius:24px;background:var(--glass);border:1px solid var(--line);transition:transform .25s,border-color .25s}
.plan:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--pri) 50%,var(--line))}
.plan.pop{background:linear-gradient(var(--surf),var(--surf)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:0 30px 80px -30px var(--pri)}
.plan .badge{position:absolute;top:-13px;right:24px;background:var(--gold);color:#2b1d02;padding:2px 14px;border-radius:99px;font-weight:700;font-size:12.5px}
.plan h3{font-size:19px}.plan .d{color:var(--mut);font-size:14px;min-height:1.8em}
.plan .price{margin:20px 0 2px;display:flex;align-items:baseline;gap:8px}.plan .price b{font-size:38px;font-weight:900;letter-spacing:-1px}.plan .price span{color:var(--mut)}
.plan .per{color:var(--ok);font-size:13px;margin-bottom:18px}
.plan ul{list-style:none;padding:18px 0 0;margin:0 0 24px;border-top:1px dashed var(--line);display:grid;gap:10px}.plan li{display:flex;gap:10px;align-items:center}.plan li svg{color:var(--ok);width:18px;height:18px}
.plan button{margin-top:auto;padding:13px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s;position:relative}
.steps:before{content:"";position:absolute;top:27px;right:12%;left:12%;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}
.step{text-align:center;position:relative}.step .n{width:54px;height:54px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;background:var(--surf);border:1.5px solid var(--pri);font-weight:800;font-size:18px;color:var(--pri2);position:relative}
.step h4{font-size:16px;margin-bottom:4px}.step p{margin:0;color:var(--mut);font-size:14px}
details{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:0 20px;margin-bottom:10px;transition:border-color .2s}details[open]{border-color:color-mix(in srgb,var(--pri) 50%,var(--line))}
summary{cursor:pointer;padding:16px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}summary::-webkit-details-marker{display:none}summary:after{content:"+";font-size:22px;color:var(--pri2);line-height:1}details[open] summary:after{content:"−"}details p{margin:0 0 16px;color:var(--mut)}
footer{border-top:1px solid var(--line);padding:32px 0;color:var(--mut);text-align:center;margin-top:30px}
.sum{display:flex;justify-content:space-between;align-items:center;padding:14px;border-radius:14px;background:var(--glass2);border:1px solid var(--line);margin-bottom:6px}.sum b{font-size:20px}
@media(max-width:860px){.hero{grid-template-columns:1fr;padding-top:30px;min-height:0}.globe{max-width:380px;order:-1}.links{display:none}.bento .card,.bento .card.w{grid-column:span 6}.steps{grid-template-columns:1fr 1fr;row-gap:30px}.steps:before{display:none}}
@supports not (background:color-mix(in srgb,red 50%,blue)){
 body:before{background:radial-gradient(900px 500px at 85% -5%,rgba(116,102,255,.28),transparent 70%),radial-gradient(700px 500px at 5% 30%,rgba(34,211,238,.14),transparent 70%)}
 nav.bar{background:var(--bg)}.bento .ic{background:rgba(116,102,255,.18)}
 .bento .card:hover,.plan:hover,details[open]{border-color:var(--pri)}
}

.plan .pimg{margin:-28px -28px 20px;aspect-ratio:16/10;overflow:hidden;border-radius:24px 24px 0 0;background:var(--glass2)}
.plan .pimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.plan:hover .pimg img{transform:scale(1.04)}
.plan .badge{z-index:2}
a.adm{padding:7px 14px;font-size:14px;border-radius:11px;gap:6px}a.adm .i{width:17px;height:17px}
@media(max-width:560px){a.adm{font-size:0;gap:0;padding:0;width:40px;height:40px}a.adm .i{width:19px;height:19px}}