:root{
    --bg:#050b16;
    --panel:rgba(10,24,44,.72);
    --card:rgba(255,255,255,.065);
    --border:rgba(255,255,255,.13);
    --text:#eaf4ff;
    --muted:#9fb6cf;
    --blue:#2563eb;
    --cyan:#06b6d4;
    --green:#22c55e;
    --orange:#f59e0b;
    --red:#ef4444;
    --shadow:0 24px 80px rgba(0,0,0,.32);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    background:var(--bg);
    color:var(--text);
    font-family:Inter,Arial,sans-serif;
    line-height:1.6;
}
a{color:inherit;text-decoration:none}
.m360-shell{max-width:1220px;margin:0 auto;padding:0 24px}
.m360-header{
    position:sticky;top:0;z-index:999;
    background:rgba(5,11,22,.84);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
}
.m360-nav{min-height:78px;display:flex;align-items:center;gap:24px}
.m360-brand{display:flex;align-items:center;gap:12px;font-weight:950;color:#fff}
.m360-logo{
    width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
    background:radial-gradient(circle at 30% 20%,#67e8f9,transparent 42%),linear-gradient(135deg,var(--cyan),var(--blue));
    box-shadow:0 16px 42px rgba(37,99,235,.40);
    letter-spacing:-.08em;font-size:13px;
}
.m360-menu-wrap{margin-left:auto}
.m360-menu{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.m360-menu a{font-weight:800;font-size:14px;color:#dbeafe}
.m360-menu a:hover{color:#fff}
.m360-nav-cta,.m360-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 21px;border-radius:999px;font-weight:900;border:1px solid transparent;
    transition:.22s ease;white-space:nowrap;
}
.m360-nav-cta,.m360-btn.primary{
    color:#fff;background:linear-gradient(135deg,var(--cyan),var(--blue));
    box-shadow:0 16px 44px rgba(37,99,235,.34);
}
.m360-btn.secondary{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}
.m360-btn.light{color:#081426;background:#fff}
.m360-btn:hover,.m360-nav-cta:hover{transform:translateY(-2px)}
.m360-menu-toggle{display:none;margin-left:auto;border:1px solid var(--border);background:rgba(255,255,255,.08);color:#fff;border-radius:14px;padding:10px 13px}
.m360-site{background:var(--bg);overflow:hidden}
.m360-hero{
    position:relative;min-height:870px;display:flex;align-items:center;padding:100px 0 86px;
    background:
        radial-gradient(circle at 18% 20%,rgba(56,189,248,.30),transparent 31%),
        radial-gradient(circle at 75% 14%,rgba(34,197,94,.15),transparent 26%),
        radial-gradient(circle at 72% 82%,rgba(37,99,235,.24),transparent 28%),
        linear-gradient(135deg,#050b16 0%,#09224a 58%,#0e7490 100%);
}
.m360-grid-bg{
    position:absolute;inset:0;opacity:.55;
    background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
.m360-orb{
    position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(18px);opacity:.24;animation:m360Float 9s ease-in-out infinite;
}
.m360-orb.one{top:12%;right:8%;background:#38bdf8}
.m360-orb.two{bottom:8%;left:8%;background:#22c55e;animation-delay:-3s}
@keyframes m360Float{50%{transform:translateY(-28px) translateX(18px) scale(1.08)}}
.m360-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:58px;align-items:center}
.m360-badge,.m360-kicker{
    display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:999px;
    background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);
    color:#dff8ff;font-size:13px;font-weight:950;
}
.m360-kicker{background:transparent;border:0;padding:0;color:#67e8f9;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.m360-hero h1{
    margin:22px 0 20px;color:#fff;font-size:clamp(44px,7vw,88px);
    line-height:.94;letter-spacing:-.075em;max-width:900px;
}
.m360-hero p{max-width:760px;color:#d8ebff;font-size:21px;margin:0}
.m360-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.m360-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.m360-stats div,.m360-metrics div{
    background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.14);
    border-radius:20px;padding:16px;
}
.m360-stats strong{display:block;color:#fff;font-size:22px}
.m360-stats span{display:block;color:#c6dcf2;font-size:13px}
.m360-app-card{
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
    border-radius:36px;padding:28px;box-shadow:var(--shadow);backdrop-filter:blur(18px);
}
.m360-app-top{display:flex;justify-content:space-between;gap:16px;margin-bottom:18px;color:#fff}
.m360-app-top span{color:#bbf7d0;font-size:12px;font-weight:950}
.m360-radar,.m360-weather-visual{
    position:relative;height:390px;border-radius:28px;overflow:hidden;
    background:
        radial-gradient(circle at 52% 44%,rgba(239,68,68,.92),transparent 8%),
        radial-gradient(circle at 47% 48%,rgba(245,158,11,.82),transparent 16%),
        radial-gradient(circle at 58% 57%,rgba(34,197,94,.78),transparent 21%),
        radial-gradient(circle at 26% 32%,rgba(56,189,248,.34),transparent 25%),
        linear-gradient(135deg,#0b1220,#164e63 62%,#052e16);
}
.m360-radar:after,.m360-weather-visual:after{
    content:"";position:absolute;inset:0;
    background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.24) 0 1px,transparent 1px 36px);
    animation:m360Radar 4.5s ease-in-out infinite;
}
@keyframes m360Radar{50%{transform:scale(1.05);opacity:.55}}
.m360-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.m360-metrics span{display:block;color:#bad0e8;font-size:12px}
.m360-metrics strong{display:block;color:#fff;font-size:16px}
.m360-section{padding:92px 0}
.m360-section.alt{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)}
.m360-heading{max-width:850px;margin-bottom:36px}
.m360-heading.center{text-align:center;margin-left:auto;margin-right:auto}
.m360-heading.no-margin{margin-bottom:0}
.m360-heading span,.m360-band span{
    color:#67e8f9;font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-weight:950;
}
.m360-heading h2,.m360-band h2{
    color:#fff;font-size:clamp(34px,4vw,56px);line-height:1.05;letter-spacing:-.045em;margin:12px 0 14px;
}
.m360-heading p,.m360-service p,.m360-price p,.m360-band p{color:var(--muted);font-size:18px}
.m360-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.m360-service,.m360-price,.m360-weather-app,.m360-form-card,.m360-client-preview{
    background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
    border:1px solid var(--border);border-radius:32px;padding:30px;
    box-shadow:0 20px 60px rgba(0,0,0,.20);
}
.m360-service{position:relative;min-height:245px;overflow:hidden;transition:.22s ease}
.m360-service:before{
    content:"";position:absolute;width:180px;height:180px;right:-60px;top:-60px;border-radius:50%;
    background:rgba(56,189,248,.22);
}
.m360-service:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.28)}
.m360-service span{position:relative;z-index:2;font-size:36px}
.m360-service h3,.m360-service p{position:relative;z-index:2}
.m360-service h3,.m360-price h3{color:#fff;font-size:27px;margin:18px 0 8px;letter-spacing:-.035em}
.m360-band{
    padding:88px 0;background:linear-gradient(135deg,#0f172a,#1e3a8a 66%,#0891b2);
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.m360-band-grid{display:flex;align-items:center;justify-content:space-between;gap:32px}
.m360-band p{color:#d7e9ff;max-width:760px}
.m360-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.m360-price.featured{border-color:rgba(56,189,248,.58);box-shadow:0 25px 80px rgba(37,99,235,.25);transform:translateY(-8px)}
.m360-price > span{display:inline-flex;color:#bae6fd;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:950}
.m360-price ul{color:#d0e2f4;padding-left:20px}
.m360-two{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.m360-client-preview{display:grid;gap:14px}
.m360-client-preview div{
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:18px;background:rgba(255,255,255,.055);
}
.m360-client-preview b{color:#fff}.m360-client-preview span{color:#dbeafe;font-weight:900}
.m360-weather-top{display:flex;justify-content:space-between;gap:20px;margin-bottom:22px}
.m360-weather-top h2{color:#fff;margin:8px 0;font-size:38px;letter-spacing:-.04em}
.m360-live-dot{color:#bbf7d0;font-weight:950}
.m360-weather-form{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.m360-weather-form input,.m360-contact-form input,.m360-contact-form select,.m360-contact-form textarea{
    width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
    color:#fff;border-radius:18px;padding:14px 16px;outline:none;
}
.m360-weather-form input{flex:1;min-width:260px}
.m360-weather-form button,.m360-contact-form button{
    border:0;border-radius:999px;color:#fff;font-weight:950;padding:14px 22px;
    background:linear-gradient(135deg,var(--cyan),var(--blue));cursor:pointer;
}
.m360-weather-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
.m360-weather-current{
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:24px;
}
.m360-weather-current span{color:#67e8f9;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:950}
.m360-weather-current h3{color:#fff;font-size:30px;margin:10px 0 0}
.m360-current-temp{display:block;color:#fff;font-size:64px;line-height:1;margin:10px 0}
.m360-risk{margin-top:18px;padding:16px;border-radius:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.m360-risk b{display:block;color:#fff}.m360-risk small{display:block;color:#cfe1f4;margin-top:6px}
.m360-days{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:20px}
.m360-day{padding:16px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.m360-day b{display:block;color:#fff}.m360-day span{display:block;color:#a9bdd6;font-size:13px;margin-top:3px}
.m360-contact-form{display:grid;gap:14px}
.m360-contact-form label{display:grid;gap:7px;color:#dcecff;font-weight:800}
.m360-success{background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.35);color:#dcfce7;border-radius:16px;padding:14px;margin-bottom:14px}
.m360-error{background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.35);color:#fee2e2;border-radius:16px;padding:14px;margin-bottom:14px}
.m360-footer{background:#030712;border-top:1px solid var(--border);padding:58px 0 28px;color:#9fb3c8}
.m360-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.m360-footer strong{display:block;color:#fff;font-size:24px;margin-bottom:10px}
.m360-footer h4{color:#fff;margin:0 0 12px}
.m360-footer a{display:block;color:#9fb3c8;margin:7px 0}
.m360-footer-bottom{display:flex;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.08);margin-top:34px;padding-top:24px;font-size:14px}
.m360-page{padding:80px 0;min-height:55vh}
.m360-page-content{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:28px;padding:32px}
.m360-post{padding:20px;border-bottom:1px solid var(--border)}
@media(max-width:1020px){
    .m360-hero{min-height:auto}
    .m360-hero-grid,.m360-weather-layout,.m360-service-grid,.m360-pricing,.m360-two,.m360-footer-grid{grid-template-columns:1fr}
    .m360-stats,.m360-metrics,.m360-days{grid-template-columns:repeat(2,1fr)}
    .m360-band-grid{display:block}
    .m360-price.featured{transform:none}
    .m360-menu-wrap{display:none;position:absolute;top:78px;left:0;right:0;background:#050b16;border-bottom:1px solid var(--border);padding:18px 24px}
    body.m360-menu-open .m360-menu-wrap{display:block}
    .m360-menu{display:grid;gap:14px}
    .m360-menu-toggle{display:block}
    .m360-nav-cta{display:none}
}
@media(max-width:560px){
    .m360-shell{padding:0 18px}
    .m360-hero{padding:76px 0 56px}
    .m360-stats,.m360-metrics,.m360-days{grid-template-columns:1fr}
    .m360-radar,.m360-weather-visual{height:280px}
    .m360-footer-bottom{display:block}
}