/* ========================================
   NEBULA VPN — Основные стили
   ======================================== */

*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif}

:root{
 --bg-main:#140a2a;
 --bg-secondary:#1b1338;
 --pro-purple:#a855f7;
 --pro-purple-light:#c084fc;
 --accent-green:#22c55e;
 --accent-red:#ef4444;
 --panel-gray:#2a2a32;
}

body{
 background:radial-gradient(circle at 30% 20%,#1f1147 0%,#140a2a 60%,#0c061a 100%);
 color:white;
 overflow-x:hidden;
}

/* HEADER */
header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:20px 8%;
 position:fixed;
 width:100%;
 background:rgba(20,10,42,.8);
 backdrop-filter:blur(16px);
 z-index:100;
 border-bottom:1px solid rgba(168,85,247,.2);
}

.logo{
 font-size:22px;
 font-weight:800;
 background:linear-gradient(90deg,var(--pro-purple-light),var(--pro-purple));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 text-decoration:none;
}

nav{
 display:flex;
 align-items:center;
}

nav a{
 margin-left:30px;
 text-decoration:none;
 color:#b9b3d6;
 transition:.3s;
 font-weight:500;
}

nav a:hover{color:white}

.nav-cta{
 margin-left:30px;
 padding:10px 20px;
 border-radius:30px;
 background:var(--pro-purple);
 color:white;
 font-weight:700;
 text-decoration:none;
}

/* DROPDOWN */
.dropdown{
 position:relative;
 margin-left:30px;
}

.dropdown-toggle{
 cursor:pointer;
 color:#b9b3d6;
 font-weight:500;
 transition:.3s;
}

.dropdown-toggle:hover{color:white}

.dropdown-menu{
 position:absolute;
 top:40px;
 left:0;
 background:rgba(27,19,56,.98);
 border:1px solid rgba(168,85,247,.3);
 border-radius:16px;
 padding:10px 0;
 display:none;
 flex-direction:column;
 min-width:220px;
 box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.dropdown-menu a{
 padding:12px 20px;
 color:#c4b5fd;
 text-decoration:none;
 font-size:14px;
 transition:.3s;
}

.dropdown-menu a:hover{
 background:rgba(168,85,247,.15);
 color:white;
}

.dropdown.active .dropdown-menu{
 display:flex;
}

/* HERO */
.hero{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:180px 8% 140px;
 position:relative;
 overflow:hidden;
}

.hero-text{
 max-width:55%;
 z-index:2;
}

.hero-title-wrapper{
 display:flex;
 align-items:center;
 gap:20px;
 margin-bottom:25px;
}

.hero-title-wrapper h1{
 font-size:72px;
 line-height:1.05;
 font-weight:800;
 background:linear-gradient(180deg,#ffffff,var(--pro-purple-light));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 margin:0;
}

.tray-icon{
 width:65vw;
 height:65vw;
 max-width:800px;
 max-height:800px;
 flex-shrink:0;
 position:absolute;
 right:8%;
 top:50%;
 transform:translateY(-50%);
 opacity:0.75;
 transition:all 0.3s ease;
}

.tray-icon:hover{
 opacity:1;
 transform:translateY(-50%) scale(1.05);
}

.tray-svg{
 width:100%;
 height:100%;
 filter:drop-shadow(0 0 60px rgba(168,85,247,.6));
 animation:float 6s ease-in-out infinite;
}

.tray-stripe{
 fill:#455FE9;
 transition:all 0.3s ease;
 transform-origin:center;
}

.tray-icon:hover .tray-svg{
 filter:drop-shadow(0 0 80px rgba(168,85,247,.9))
        drop-shadow(0 0 120px rgba(192,132,252,.7))
        drop-shadow(0 0 160px rgba(168,85,247,.5));
 animation:float 4s ease-in-out infinite, glow 2s ease-in-out infinite alternate;
}

.tray-icon:hover .tray-stripe-1{
 fill:#c084fc;
 transform:translateX(-10px) skewX(-5deg);
 filter:drop-shadow(0 0 20px rgba(192,132,252,.8));
}

.tray-icon:hover .tray-stripe-2{
 fill:#a855f7;
 transform:translateX(-5px) skewX(-3deg);
 filter:drop-shadow(0 0 20px rgba(168,85,247,.8));
}

.tray-icon:hover .tray-stripe-3{
 fill:#7c3aed;
 transform:translateX(5px) skewX(3deg);
 filter:drop-shadow(0 0 20px rgba(124,58,237,.8));
}

@keyframes glow{
 0%{
   filter:drop-shadow(0 0 80px rgba(168,85,247,.9))
          drop-shadow(0 0 120px rgba(192,132,252,.7))
          drop-shadow(0 0 160px rgba(168,85,247,.5));
 }
 100%{
   filter:drop-shadow(0 0 100px rgba(168,85,247,1))
          drop-shadow(0 0 150px rgba(192,132,252,.9))
          drop-shadow(0 0 200px rgba(168,85,247,.7))
          drop-shadow(0 0 250px rgba(192,132,252,.5));
 }
}

@keyframes float{
 0%,100%{transform:translateY(0)}
 50%{transform:translateY(-20px)}
}

.hero-text p{
 color:#c4b5fd;
 margin-bottom:40px;
 font-size:20px;
}

.trust{
 display:flex;
 gap:15px;
 margin-bottom:40px;
 flex-wrap:wrap;
}

.trust span{
 background:rgba(168,85,247,.1);
 border:1px solid rgba(168,85,247,.4);
 padding:8px 16px;
 border-radius:40px;
 font-size:13px;
 color:var(--pro-purple-light);
}

.buttons{display:flex;gap:20px;flex-wrap:wrap}

/* ========================================
   БАЗОВАЯ КНОПКА
   ======================================== */
.btn{
 padding:18px 36px;
 border-radius:18px;
 font-weight:700;
 text-decoration:none;
 transition:.3s;
 display:inline-block;
 text-align:center;
}

.btn-primary{
 background:linear-gradient(135deg,var(--pro-purple-light),var(--pro-purple));
 color:white;
 box-shadow:0 20px 60px rgba(168,85,247,.5);
}

.btn-secondary{
 background:rgba(255,255,255,.05);
 border:1px solid rgba(255,255,255,.1);
 color:white;
}

.btn-disabled{
 background:#1a152b;
 color:#555;
 border:1px solid rgba(255,255,255,.05);
 cursor:not-allowed;
}

/* ========================================
   BRUTALIST BUTTON — WINDOWS
   ======================================== */
.brutalist-button{
 display:flex;
 align-items:center;
 cursor:pointer;
 width:169px;
 height:60px;
 background-color:#000;
 color:#fff;
 text-decoration:none;
 font-family:Arial,sans-serif;
 font-weight:bold;
 border:3px solid #fff;
 outline:3px solid #000;
 box-shadow:6px 6px 0 #00a4ef;
 transition:all 0.1s ease-out;
 padding:0 15px;
 box-sizing:border-box;
 position:relative;
 overflow:hidden;
}

.brutalist-button::before{
 content:"";
 position:absolute;
 top:0;
 left:-100%;
 width:100%;
 height:100%;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,0.8),transparent);
 z-index:1;
 transition:none;
 opacity:0;
}

@keyframes slide{
 0%{left:-100%}
 100%{left:100%}
}

.brutalist-button:hover::before{
 opacity:1;
 animation:slide 2s infinite;
}

.brutalist-button:hover{
 transform:translate(-4px,-4px);
 box-shadow:10px 10px 0 #000;
 background-color:#000;
 color:#fff;
}

.brutalist-button:active{
 transform:translate(4px,4px);
 box-shadow:0px 0px 0 #00a4ef;
 background-color:#fff;
 color:#000;
 border-color:#000;
}

.ms-logo{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:1px;
 width:26px;
 height:26px;
 margin-right:8px;
 flex-shrink:0;
 transition:transform 0.2s ease-out;
 position:relative;
 z-index:1;
}

.brutalist-button:hover .ms-logo{
 transform:rotate(-10deg) scale(1.1);
}

.brutalist-button:active .ms-logo{
 transform:rotate(10deg) scale(0.9);
}

.ms-logo-square{
 width:100%;
 height:100%;
}

.ms-logo-square:nth-child(1){background-color:#f25022}
.ms-logo-square:nth-child(2){background-color:#7fba00}
.ms-logo-square:nth-child(3){background-color:#00a4ef}
.ms-logo-square:nth-child(4){background-color:#ffb900}

.button-text{
 display:flex;
 flex-direction:column;
 line-height:1.2;
 transition:transform 0.2s ease-out;
 position:relative;
 z-index:1;
}

.brutalist-button:hover .button-text{
 transform:skew(-5deg);
}

.brutalist-button:active .button-text{
 transform:skew(5deg);
}

.button-text span:first-child{
 font-size:11px;
 text-transform:uppercase;
}

.button-text span:last-child{
 font-size:16px;
 text-transform:uppercase;
}

/* ========================================
   BRUTALIST BUTTON — ANDROID
   ======================================== */
.brutalist-button-android{
 display:flex;
 align-items:center;
 cursor:pointer;
 width:169px;
 height:60px;
 background-color:#000;
 color:#fff;
 text-decoration:none;
 font-family:Arial,sans-serif;
 font-weight:bold;
 border:3px solid #fff;
 outline:3px solid #000;
 box-shadow:6px 6px 0 #3DDC84;
 transition:all 0.1s ease-out;
 padding:0 15px;
 box-sizing:border-box;
 position:relative;
 overflow:hidden;
}

.brutalist-button-android::before{
 content:"";
 position:absolute;
 top:0;
 left:-100%;
 width:100%;
 height:100%;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,0.8),transparent);
 z-index:1;
 transition:none;
 opacity:0;
}

.brutalist-button-android:hover::before{
 opacity:1;
 animation:slide 2s infinite;
}

.brutalist-button-android:hover{
 transform:translate(-4px,-4px);
 box-shadow:10px 10px 0 #000;
 background-color:#000;
 color:#fff;
}

.brutalist-button-android:active{
 transform:translate(4px,4px);
 box-shadow:0px 0px 0 #3DDC84;
 background-color:#fff;
 color:#000;
 border-color:#000;
}

.android-logo{
 width:26px;
 height:26px;
 margin-right:8px;
 flex-shrink:0;
 transition:transform 0.2s ease-out;
 position:relative;
 z-index:1;
}

.brutalist-button-android:hover .android-logo{
 transform:rotate(-10deg) scale(1.1);
}

.brutalist-button-android:active .android-logo{
 transform:rotate(10deg) scale(0.9);
}

.android-logo-head{
 width:16px;
 height:12px;
 background:#3DDC84;
 border-radius:4px;
 margin:0 auto 2px;
 position:relative;
}

.android-logo-head::before,
.android-logo-head::after{
 content:"";
 position:absolute;
 top:3px;
 width:3px;
 height:3px;
 background:#000;
 border-radius:50%;
}

.android-logo-head::before{left:3px}
.android-logo-head::after{right:3px}

.android-logo-body{
 width:20px;
 height:10px;
 background:#3DDC84;
 border-radius:3px;
 margin:0 auto;
 position:relative;
}

.android-logo-body::before,
.android-logo-body::after{
 content:"";
 position:absolute;
 top:0;
 width:4px;
 height:8px;
 background:#3DDC84;
 border-radius:2px;
}

.android-logo-body::before{left:-3px}
.android-logo-body::after{right:-3px}

/* ========================================
   BRUTALIST BUTTON — iOS (DISABLED)
   ======================================== */
.brutalist-button-ios{
 display:flex;
 align-items:center;
 cursor:not-allowed;
 width:169px;
 height:60px;
 background-color:#1a152b;
 color:#555;
 text-decoration:none;
 font-family:Arial,sans-serif;
 font-weight:bold;
 border:3px solid #444;
 outline:3px solid #000;
 box-shadow:6px 6px 0 #2a2a32;
 transition:all 0.1s ease-out;
 padding:0 15px;
 box-sizing:border-box;
 position:relative;
 overflow:hidden;
 opacity:0.6;
}

.brutalist-button-ios .button-text span:last-child{
 color:#777;
}

.ios-logo{
 width:24px;
 height:24px;
 margin-right:8px;
 flex-shrink:0;
 position:relative;
 z-index:1;
}

.ios-logo-apple{
 font-size:20px;
 color:#555;
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
}

.ios-lock{
 position:absolute;
 top:-5px;
 right:-5px;
 font-size:14px;
 color:#ef4444;
 z-index:2;
}

/* ========================================
   BRUTALIST BUTTON — LINUX (DISABLED)
   ======================================== */
.brutalist-button-linux{
 display:flex;
 align-items:center;
 cursor:not-allowed;
 width:169px;
 height:60px;
 background-color:#1a152b;
 color:#555;
 text-decoration:none;
 font-family:Arial,sans-serif;
 font-weight:bold;
 border:3px solid #444;
 outline:3px solid #000;
 box-shadow:6px 6px 0 #2a2a32;
 transition:all 0.1s ease-out;
 padding:0 15px;
 box-sizing:border-box;
 position:relative;
 overflow:hidden;
 opacity:0.6;
}

.brutalist-button-linux .button-text span:last-child{
 color:#777;
}

.linux-logo{
 width:26px;
 height:26px;
 margin-right:8px;
 flex-shrink:0;
 position:relative;
 z-index:1;
}

.linux-logo-penguin{
 width:20px;
 height:18px;
 background:#555;
 border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
 margin:0 auto;
 position:relative;
}

.linux-logo-penguin::before,
.linux-logo-penguin::after{
 content:"";
 position:absolute;
 top:5px;
 width:4px;
 height:4px;
 background:#1a152b;
 border-radius:50%;
}

.linux-logo-penguin::before{left:4px}
.linux-logo-penguin::after{right:4px}

.linux-logo-beak{
 position:absolute;
 top:10px;
 left:50%;
 transform:translateX(-50%);
 width:6px;
 height:4px;
 background:#ffb900;
 border-radius:0 0 3px 3px;
}

.linux-lock{
 position:absolute;
 top:-5px;
 right:-5px;
 font-size:14px;
 color:#ef4444;
 z-index:2;
}

/* ========================================
   SECTIONS
   ======================================== */
.section-title{text-align:center;font-size:48px;margin-bottom:60px}

/* Бегущие строки - разделители */
.marquee-divider{
 position:relative;
 height:60px;
 background:linear-gradient(90deg,transparent,rgba(168,85,247,.1),transparent);
 border-top:1px solid rgba(168,85,247,.2);
 border-bottom:1px solid rgba(168,85,247,.2);
 overflow:hidden;
 display:flex;
 align-items:center;
}

.marquee-divider::before,
.marquee-divider::after{
 content:'';
 position:absolute;
 top:0;
 width:150px;
 height:100%;
 z-index:2;
 pointer-events:none;
}

.marquee-divider::before{
 left:0;
 background:linear-gradient(90deg,#140a2a,transparent);
}

.marquee-divider::after{
 right:0;
 background:linear-gradient(-90deg,#140a2a,transparent);
}

.marquee-row{
 white-space:nowrap;
 display:flex;
 align-items:center;
 width:max-content;
 animation:marqueeLeft 60s linear infinite;
}

.marquee-item{
 display:inline-flex;
 align-items:center;
 gap:15px;
 color:rgba(196,181,253,.6);
 font-size:14px;
 font-weight:600;
 text-transform:uppercase;
 letter-spacing:2px;
}

.marquee-icon{
 width:24px;
 height:24px;
 flex-shrink:0;
}

.marquee-icon svg{
 width:100%;
 height:100%;
}

.marquee-icon path{
 fill:rgba(168,85,247,.8);
}

@keyframes marqueeLeft{
 0%{transform:translateX(0)}
 100%{transform:translateX(-50%)}
}

/* Разделители между секциями */
.features{
 padding:140px 8%;
 border-top:1px solid rgba(168,85,247,.15);
 background:linear-gradient(180deg,transparent,rgba(168,85,247,.03));
}

.pricing{
 padding:140px 8%;
 text-align:center;
 border-top:1px solid rgba(168,85,247,.25);
 background:linear-gradient(180deg,rgba(168,85,247,.05),transparent);
}

.cta{
 padding:160px 8%;
 text-align:center;
 border-top:1px solid rgba(168,85,247,.2);
}

.feature-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
 gap:40px;
}

.feature{
 background:rgba(168,85,247,.08);
 padding:50px;
 border-radius:30px;
 border:1px solid rgba(168,85,247,.15);
 transition:.4s;
}

.feature:hover{
 box-shadow:0 40px 120px rgba(168,85,247,.4);
}

/* ========================================
   PRICING
   ======================================== */
.pricing{padding:140px 8%;text-align:center}

.pricing-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
 gap:40px;
}

.plan{
 background:rgba(168,85,247,.06);
 padding:60px;
 border-radius:40px;
 border:1px solid rgba(168,85,247,.15);
 transition:.4s;
 position:relative;
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 gap:12px;
}

.plan h3{font-size:22px;font-weight:700;margin-bottom:10px}

.plan .price{
 font-size:44px;
 font-weight:800;
 color:var(--pro-purple-light);
 margin:10px 0;
}

.plan .plan-sub{color:#c4b5fd;font-weight:600}
.plan .plan-note{color:var(--pro-purple-light);opacity:0.85;font-size:14px}

.old-price{text-decoration:line-through;color:#888;font-size:18px}
.saving{color:var(--accent-green);font-weight:700;margin-top:10px}

.plan .btn{margin-top:20px;width:100%}

.plan:hover{
 transform:translateY(-10px);
 box-shadow:0 30px 120px rgba(168,85,247,.35);
}

.plan.popular{
 border:2px solid var(--pro-purple);
 transform:scale(1.05);
 box-shadow:0 40px 150px rgba(168,85,247,.6);
 background:linear-gradient(180deg,rgba(168,85,247,.15),rgba(168,85,247,.05));
}

.badge{
 position:absolute;
 top:-15px;
 left:50%;
 transform:translateX(-50%);
 background:var(--pro-purple);
 padding:8px 18px;
 border-radius:30px;
 font-size:12px;
 font-weight:700;
}

/* ========================================
   CTA
   ======================================== */
.cta{padding:160px 8%;text-align:center}
.cta h2{font-size:56px;margin-bottom:30px}

/* ========================================
   FOOTER
   ======================================== */
footer{
 padding:100px 8%;
 border-top:1px solid rgba(168,85,247,.2);
 display:flex;
 justify-content:space-between;
 flex-wrap:wrap;
 color:#9f9bbd;
 gap:30px;
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
}

.footer-link{
  color:#9f9bbd;
  text-decoration:none;
  transition:.3s;
  font-size:14px;
}

.footer-link:hover{
  color:var(--pro-purple-light);
}

.footer-contact{
  margin-top:10px;
  color:#9f9bbd;
  font-size:14px;
}

/* ========================================
   MEDIA QUERIES
   ======================================== */
@media (max-width:1400px){
 .tray-icon{
   width:55vw;
   height:55vw;
   max-width:650px;
   max-height:650px;
 }
}

@media (max-width:1200px){
 .tray-icon{
   width:50vw;
   height:50vw;
   max-width:550px;
   max-height:550px;
 }
 .hero-title-wrapper h1{
   font-size:60px;
 }
 .marquee-item{
   font-size:12px;
   gap:10px;
 }
 .marquee-icon{
   width:20px;
   height:20px;
 }
}

@media (max-width:992px){
 .hero-text{
   max-width:60%;
 }
 .tray-icon{
   width:45vw;
   height:45vw;
   max-width:450px;
   max-height:450px;
 }
 .hero-title-wrapper h1{
   font-size:52px;
 }
 .marquee-divider{
   height:50px;
 }
}

@media (max-width:768px){
 .dropdown-menu{left:auto;right:0}
 .footer-links{
   align-items:flex-start;
   margin-top:20px;
 }
 footer{
   flex-direction:column;
   gap:30px;
   text-align:left;
 }
 .hero-title-wrapper{
   flex-direction:column;
   align-items:flex-start;
   gap:10px;
 }
 .hero-title-wrapper h1{
   font-size:42px;
 }
 .hero{
   padding:140px 8% 100px;
 }
 .hero-text{
   max-width:100%;
 }
 .tray-icon{
   width:280px;
   height:280px;
   position:static;
   transform:none;
   margin:40px auto 0;
   display:block;
   opacity:1;
 }
 .marquee-divider{
   display:none;
 }
}

@media (max-width:480px){
 .hero-title-wrapper h1{
   font-size:36px;
 }
 .hero-text p{
   font-size:16px;
 }
 .tray-icon{
   width:220px;
   height:220px;
 }
}