*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:#17263c;background:#f5f7fb;line-height:1.5}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
img{max-width:100%;display:block}
:root{
    --navy:#0d1c34;
    --blue:#1f77ff;
    --cyan:#24d7d3;
    --white:#fff;
    --text:#17263c;
    --muted:#6d7b91;
    --line:#dce5f1;
    --soft:#eef4fb;
    --shadow:0 18px 50px rgba(13,28,52,.12);
    --radius:24px;
}
.container{width:min(1240px,calc(100% - 40px));margin:0 auto}
.sr-only{position:absolute;left:-9999px}
.topbar{background:linear-gradient(90deg,var(--navy),#133867);color:#fff;font-size:13px;font-weight:700;padding:10px 0;text-align:center}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(220,229,241,.75);transition:all .25s ease}
.site-header.scrolled{box-shadow:0 10px 30px rgba(13,28,52,.08)}
.nav-wrap{display:flex;align-items:center;gap:20px;min-height:86px}
.brand{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto}
.brand-logo{display:block;width:92px;height:68px;object-fit:contain;filter:drop-shadow(0 8px 13px rgba(14,76,145,.12));transition:transform .25s ease,filter .25s ease}
.brand:hover .brand-logo{transform:translateY(-2px) scale(1.025);filter:drop-shadow(0 12px 17px rgba(14,76,145,.20))}
.footer-brand-logo{width:118px;height:112px}
.footer-logo-link{display:inline-flex}
.brand-mark{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;font-size:28px;font-weight:900;color:#fff;background:linear-gradient(135deg,#f2a91a,#ffcd4f 40%,#1f77ff 75%,#164fab);box-shadow:0 10px 24px rgba(31,119,255,.25)}
.brand-text strong{display:block;font-size:24px;line-height:1;color:#f0a82a;letter-spacing:-.04em}
.brand-text em{display:block;font-style:normal;font-size:16px;line-height:1.1;color:#1f77ff;font-weight:800;letter-spacing:-.02em}
.main-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.main-nav > a,.dropdown-trigger{position:relative;background:none;border:0;padding:0;color:#314154;font-weight:700;cursor:pointer}
.main-nav > a:after,.dropdown-trigger:after{content:"";position:absolute;left:0;bottom:-10px;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .2s ease}
.main-nav > a:hover:after,.dropdown-trigger:hover:after{transform:scaleX(1)}
.nav-item{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + 14px);left:-14px;min-width:235px;padding:14px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow);display:block;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity .18s ease,visibility .18s ease,transform .18s ease}
.dropdown-menu:before{content:"";position:absolute;left:0;right:0;top:-15px;height:15px}
.dropdown-menu a{display:block;padding:10px 12px;border-radius:12px;color:#33455a;font-weight:600}
.dropdown-menu a:hover{background:#f5f8fd;color:var(--blue)}
.nav-item:hover .dropdown-menu,.nav-item.open .dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.nav-item.open .dropdown-trigger{color:var(--blue)}
.dropdown-trigger{display:inline-flex;align-items:center;gap:7px}
.dropdown-trigger:before{content:"";order:2;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
.nav-item.open .dropdown-trigger:before{transform:rotate(225deg) translate(-1px,-1px)}
@keyframes dropdownIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.nav-actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:14px;display:grid;place-items:center;color:#23324a;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.icon-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(13,28,52,.08);border-color:#b7c7da}
.icon-btn svg{width:20px;height:20px}
.lang-switch select{height:42px;padding:0 12px;border:1px solid var(--line);border-radius:14px;background:#fff;color:#23324a;font-weight:800;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:16px;font-weight:800;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-small{min-height:42px;padding:0 16px}
.btn-dark{background:var(--navy);color:#fff;box-shadow:0 12px 26px rgba(13,28,52,.14)}
.btn-light{background:#fff;color:var(--navy);box-shadow:0 14px 32px rgba(255,255,255,.18)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-shine{position:relative;overflow:hidden}
.btn-shine:before{content:"";position:absolute;top:0;left:-80px;width:60px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 3.3s infinite}
@keyframes shine{0%,76%{left:-80px}100%{left:130%}}
.mobile-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:14px;cursor:pointer;padding:10px;flex-direction:column;justify-content:center;gap:5px}
.mobile-toggle span{display:block;height:2px;background:#26364e;border-radius:10px}
.hero{position:relative;min-height:700px;display:flex;align-items:center;overflow:hidden;background:#081525}
.hero-media,.hero-overlay,.hero-particles{position:absolute;inset:0}
.hero-media{background-size:cover;background-position:center center;animation:heroZoom 20s ease-in-out infinite alternate;transform:scale(1.05)}
.hero-overlay{background:linear-gradient(90deg,rgba(5,16,35,.76) 0%,rgba(5,16,35,.4) 42%,rgba(5,16,35,.18) 100%)}
.hero-particles:before,.hero-particles:after{content:"";position:absolute;border-radius:50%;filter:blur(15px);opacity:.28}
.hero-particles:before{width:280px;height:280px;left:-80px;top:80px;background:radial-gradient(circle,#24d7d3,transparent 70%);animation:float1 10s ease-in-out infinite}
.hero-particles:after{width:340px;height:340px;right:-90px;bottom:20px;background:radial-gradient(circle,#1f77ff,transparent 70%);animation:float2 13s ease-in-out infinite}
@keyframes heroZoom{from{transform:scale(1.05) translateY(0)}to{transform:scale(1.13) translateY(-8px)}}
@keyframes float1{50%{transform:translate(25px,30px)}}
@keyframes float2{50%{transform:translate(-20px,-18px)}}
.hero-content{position:relative;z-index:2;padding:120px 0 88px}
.hero-copy{max-width:700px;color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.eyebrow.dark{background:#eaf1fa;color:var(--blue)}
.hero h1{font-size:clamp(46px,7vw,84px);line-height:.98;letter-spacing:-.06em;margin:18px 0 18px}
.hero p{max-width:610px;margin:0;color:rgba(255,255,255,.86);font-size:18px}
.hero-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-badges span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.17);font-weight:700;font-size:13px}
.usp-section{margin-top:-45px;position:relative;z-index:4}
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.usp-card{padding:26px;border:1px solid var(--line);border-radius:26px;background:rgba(255,255,255,.96);box-shadow:var(--shadow)}
.usp-card h3{margin:0 0 8px;font-size:20px;color:var(--navy);letter-spacing:-.03em}
.usp-card p{margin:0;color:var(--muted)}
.section{padding:95px 0}
.section-heading{max-width:760px;margin-bottom:34px}
.section-heading.narrow-center{margin-left:auto;margin-right:auto;text-align:center}
.section-heading h2{margin:12px 0 12px;color:var(--navy);font-size:clamp(34px,4.6vw,58px);line-height:1.05;letter-spacing:-.05em}
.section-heading p{margin:0;color:var(--muted);font-size:17px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature-card{padding:30px;border:1px solid var(--line);background:#fff;border-radius:26px;box-shadow:0 14px 34px rgba(13,28,52,.06);transition:transform .25s ease,box-shadow .25s ease}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 24px 44px rgba(13,28,52,.12)}
.feature-card.alt{background:linear-gradient(180deg,#fff,#f7fbff)}
.feature-icon{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;margin-bottom:18px;background:linear-gradient(135deg,#1f77ff,#24d7d3);color:#fff;font-weight:900;box-shadow:0 14px 30px rgba(31,119,255,.2)}
.feature-card h3{margin:0 0 10px;font-size:22px;color:var(--navy);letter-spacing:-.03em}
.feature-card p{margin:0;color:var(--muted)}
.section-plans{background:#fff}
.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.plan-card{background:#fff;border-radius:32px;overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(220,229,241,.7);transition:transform .28s ease,box-shadow .28s ease}
.plan-card:hover{transform:translateY(-10px);box-shadow:0 28px 50px rgba(13,28,52,.16)}
.plan-image-wrap{position:relative;overflow:hidden;background:#ddd}
.plan-image-wrap img{width:100%;height:340px;object-fit:cover;transition:transform .6s ease}
.plan-card:hover .plan-image-wrap img{transform:scale(1.07)}
.plan-overlay{position:absolute;inset:auto 0 0 0;height:80px;background:linear-gradient(180deg,transparent,rgba(13,28,52,.16))}
.plan-body{padding:18px 4px 0}
.plan-body h3{margin:0;color:var(--navy);font-size:19px;padding:0 6px}
.plan-body .price{margin-top:10px;font-size:19px;font-weight:800;color:#28364f;padding:0 6px}
.plan-link{display:inline-flex;margin-top:14px;margin-left:6px;padding:12px 16px;border-radius:14px;background:#eef5ff;color:var(--blue);font-weight:800}
.plan-link:hover{background:#deebff}
.section-regions{background:linear-gradient(180deg,#f7fbff,#eef4fb)}
.region-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.region-card{min-height:170px;border-radius:28px;padding:28px;display:flex;align-items:flex-end;overflow:hidden;position:relative;color:#fff;font-size:30px;font-weight:800;letter-spacing:-.04em;box-shadow:var(--shadow)}
.region-card:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-60px;top:-80px;background:rgba(255,255,255,.13)}
.region-card span{position:relative;z-index:2;max-width:200px}
.gradient-one{background:linear-gradient(135deg,#155de2,#20d4d9)}
.gradient-two{background:linear-gradient(135deg,#f29025,#ff6b6b)}
.gradient-three{background:linear-gradient(135deg,#6338f6,#21c4a5)}
.gradient-four{background:linear-gradient(135deg,#0d1c34,#1f77ff)}
.compat-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.check-list{list-style:none;padding:0;margin:24px 0 28px}
.check-list li{position:relative;padding-left:34px;margin:12px 0;color:#304259;font-weight:600}
.check-list li:before{content:"✓";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e8fff5;color:#119c6e;font-weight:900}
.compat-visual{display:grid;place-items:center;min-height:350px}
.device-stack{position:relative;width:340px;height:300px}
.device-card{position:absolute;border:10px solid #fff;border-radius:28px;box-shadow:0 28px 54px rgba(13,28,52,.17);display:grid;place-items:center;color:#fff;font-weight:900}
.phone-card-visual{width:150px;height:270px;left:45px;top:0;background:linear-gradient(160deg,#24d7d3,#1f77ff);transform:rotate(-10deg)}
.tablet-card-visual{width:220px;height:170px;right:0;bottom:10px;background:linear-gradient(160deg,#1f3e8f,#7f55ff);transform:rotate(8deg);font-size:36px}
.phone-card-visual span{font-size:24px}
.orbit{position:absolute;border-radius:50%;border:1px dashed rgba(31,119,255,.25)}
.orbit-1{width:270px;height:270px;left:40px;top:10px;animation:rotate 18s linear infinite}
.orbit-2{width:190px;height:190px;left:95px;top:50px;animation:rotate 14s linear infinite reverse}
@keyframes rotate{to{transform:rotate(360deg)}}
.section-faq{background:#fff}
.faq-list{max-width:860px;margin:0 auto}
.faq-item{border:1px solid var(--line);background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 10px 24px rgba(13,28,52,.04);margin-bottom:14px}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;background:#fff;border:0;color:var(--navy);font-weight:800;text-align:left;cursor:pointer}
.faq-question i{width:32px;height:32px;border-radius:12px;background:#edf4ff;color:var(--blue);display:grid;place-items:center;font-style:normal;font-size:20px;transition:transform .2s ease}
.faq-answer{display:none;padding:0 24px 22px;color:var(--muted)}
.faq-item.open .faq-answer{display:block}
.faq-item.open .faq-question i{transform:rotate(45deg)}
.section-b2b{background:linear-gradient(180deg,#f7fbff,#f1f7ff)}
.contact-box{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:42px;border-radius:30px;background:linear-gradient(135deg,#fff,#f7fbff);border:1px solid var(--line);box-shadow:var(--shadow)}
.contact-copy h2{margin:12px 0 12px;color:var(--navy);font-size:clamp(32px,4vw,52px);line-height:1.04;letter-spacing:-.05em}
.contact-copy p{margin:0;color:var(--muted);font-size:17px}
.contact-info{display:flex;align-items:flex-end;flex-wrap:wrap;gap:18px}
.contact-item{min-width:220px}
.contact-item small{display:block;margin-bottom:6px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.contact-item a{font-size:22px;font-weight:900;color:var(--navy)}
.site-footer{padding:34px 0;background:var(--navy);color:#fff}
.footer-wrap{display:flex;justify-content:space-between;gap:20px;align-items:center}
.footer-brand p{max-width:650px;color:#b6c5d8;font-size:14px}
.footer-copy{color:#b6c5d8;font-size:14px}
@media(max-width:1180px){
    .main-nav{gap:18px}
    .plans-grid{grid-template-columns:repeat(2,1fr)}
    .region-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:940px){
    .nav-wrap{min-height:76px}
    .mobile-toggle{display:flex;margin-left:auto}
    .main-nav{position:fixed;top:76px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:18px 20px;display:none;flex-direction:column;align-items:flex-start;gap:14px;box-shadow:0 20px 30px rgba(13,28,52,.08)}
    .main-nav.open{display:flex}
    .nav-item{width:100%}
    .dropdown-trigger{display:block;width:100%;text-align:left;padding:0}
    .dropdown-menu{position:static;display:block;margin-top:10px;box-shadow:none;border:1px solid var(--line);width:100%;max-height:0;padding-top:0;padding-bottom:0;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;transform:none;transition:max-height .25s ease,opacity .2s ease,padding .25s ease}
    .nav-item.open .dropdown-menu{max-height:320px;padding-top:14px;padding-bottom:14px;opacity:1;visibility:visible;pointer-events:auto}
    .nav-actions{margin-left:0}
    .nav-actions .btn-small{display:none}
    .compat-grid,.contact-box,.footer-wrap{grid-template-columns:1fr;display:grid}
    .hero{min-height:620px}
}
@media(max-width:760px){
    .container{width:min(100% - 28px,700px)}
    .nav-actions{gap:8px}
    .nav-actions .icon-btn:nth-child(1),.nav-actions .icon-btn:nth-child(2),.nav-actions .icon-btn:nth-child(3){display:none}
    .usp-grid,.feature-grid,.plans-grid,.region-grid{grid-template-columns:1fr}
    .hero-content{padding-top:95px}
    .hero p{font-size:16px}
    .hero-buttons .btn{width:100%}
    .contact-item a{font-size:18px}
}

.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:16px}
.footer-legal a{color:#dce8f5;font-size:13px;font-weight:700}
.footer-legal a:hover{color:#fff;text-decoration:underline}
@media(max-width:940px){
    .footer-right{align-items:flex-start}
    .footer-legal{justify-content:flex-start}
}
@media(max-width:520px){
    .brand-logo{width:76px;height:58px}
    .footer-brand-logo{width:108px;height:100px}
}