*{ margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;}
body{background:#f8fafc;color:#0f172a;overflow-x:hidden;}
.background{position:fixed;width:100%;height:100%;top:0;left:0;z-index:-2;
  background:
    radial-gradient(circle at 20% 30%, #6366f1 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, #0ea5e9 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, #a855f7 0%, transparent 40%);
  animation:moveBg 18s infinite alternate ease-in-out;}
@keyframes moveBg{0%{background-position:20% 30%,80% 70%,50% 50%;}100%{background-position:30% 40%,70% 60%,60% 40%;}}
.orb{position:absolute;border-radius:50%;backdrop-filter:blur(80px);background:rgba(255,255,255,0.4);animation:float 12s infinite alternate ease-in-out;z-index:-1;}
.orb1{width:250px;height:250px;top:5%;left:5%;}
.orb2{width:350px;height:350px;bottom:5%;right:5%;animation-delay:3s;}
@keyframes float{to{transform:translateY(50px);}}
nav{position:fixed;width:100%;height:75px;padding:0 6%;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,0.8);backdrop-filter:blur(16px);z-index:1000;}
.logo-wrap{height:80%;display:flex;align-items:center;}
.logo-wrap img{height:70%;object-fit:contain;}
.logo-text{font-weight:800;letter-spacing:2px;}
.menu{display:flex;gap:35px;font-weight:600;}
.menu div{cursor:pointer;position:relative;transition:.3s;}
.menu div::after{content:"";position:absolute;width:0%;height:2px;background:#6366f1;left:0;bottom:-6px;transition:.3s;}
.menu div:hover::after{width:100%;}
.menu div:hover{color:#6366f1;}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:space-between;padding:120px 8% 80px 8%;}
.hero.products-mode{flex-direction:column;align-items:stretch;}
.hero-content{max-width:650px;transition:.5s ease;}
.hero h1{font-size:65px;font-weight:900;line-height:1.1;background:linear-gradient(90deg,#0f172a,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero p{margin-top:25px;font-size:20px;opacity:.8;}
.btn{margin-top:40px;padding:18px 50px;border-radius:50px;border:none;font-weight:600;cursor:pointer;background:#6366f1;color:white;transition:.3s;box-shadow:0 15px 35px rgba(99,102,241,.35);}
.btn:hover{transform:translateY(-6px);box-shadow:0 25px 50px rgba(99,102,241,.45);}
.hero-logo{width:420px;filter:drop-shadow(0 80px 120px rgba(0,0,0,.25));animation:floatLogo 6s ease-in-out infinite;}
@keyframes floatLogo{0%{transform:translateY(0px);}50%{transform:translateY(-15px);}100%{transform:translateY(0px);}}
.text-flow{background:linear-gradient(90deg,#0ea5e9,#a855f7,#0ea5e9);background-size:200% auto;background-clip:text;
  -webkit-background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;animation:textMove 3s linear infinite;}
@keyframes textMove{0%{background-position:0% center;}100%{background-position:200% center;}}
.hero-content p{margin-top:18px;font-size:18px;line-height:1.8;opacity:.85;}
.hero-content p:first-of-type{margin-top:25px;}
.hero-content{max-width:700px;}
.hero.products-mode{align-items:flex-start;padding-top:120px;}
.products-wrapper{width:100%;}
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:25px;margin-top:40px;}
.product-card{position: relative;overflow: hidden;}
.corner-ribbon{position:absolute;top:20px;right:-60px;width:220px;background:linear-gradient(135deg,#0ea5e9,#a855f7);color:#fff;transform:rotate(45deg);
  text-align:center;padding:8px 0;box-shadow:0 5px 15px rgba(0,0,0,0.15);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;}
.ribbon-small{font-size:12px;font-weight:600;letter-spacing:1px;}
.ribbon-big{font-size:20px;font-weight:800;}
.product-card::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(120deg,transparent,rgba(99,102,241,.25),transparent);transition:.6s;}
.product-card:hover::before{left:100%;}
.product-card:hover{transform:translateY(-10px);box-shadow:0 25px 50px rgba(99,102,241,.25);color:#6366f1;}
.section-title{margin-top:60px;font-size:24px;font-weight:800;}
.method-list,
.benefit-list{margin-top:20px;line-height:2;font-size:17px;background:rgba(255,255,255,0.75);padding:25px;border-radius:18px;backdrop-filter:blur(20px);box-shadow:0 15px 35px rgba(0,0,0,.06);}
.products-wrapper h1{font-size:48px;font-weight:900;margin-bottom:20px;}
.hero.products-mode .hero-content{max-width:100%;width:100%;}
.product-card{background:#fff;padding:24px;border-radius:18px;box-shadow:0 10px 25px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:14px;transition:.3s;}
.product-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(99,102,241,.2);}
.product-title{font-size:20px;font-weight:800;}
.product-price{font-size:15px;font-weight:900;color:#0f172a;}
.product-features{list-style:none;padding:0;font-size:14px;opacity:.8;}
.product-features li{margin-bottom:6px;}
.price-wrapper{margin-top:18px;display:flex;flex-direction:column;gap:6px;}
.price-normal{font-size:14px;color:#94a3b8;text-decoration:line-through;}
.price-discount{font-size:16px;font-weight:900;color:#0f172a;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;text-align:center;flex-direction:column;align-items:center; }
.promo-text{margin-top:6px;font-size:12px;color:#ef4444;font-weight:600;}
.vip-card{margin-top:40px;padding:35px;border-radius:22px;background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;position:relative;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.25);}
.vip-card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);transition:.6s;}
.vip-card:hover::before{transform:translateX(100%);}
.vip-badge{position:absolute;top:20px;right:20px;background:linear-gradient(135deg,#facc15,#f59e0b);color:#000;font-weight:800;font-size:12px;padding:6px 14px;border-radius:50px;letter-spacing:1px;}
.vip-title{font-size:22px;font-weight:900;margin-bottom:15px;}
.vip-desc{font-size:15px;opacity:.85;line-height:1.7;margin-bottom:20px;}
.vip-price{font-size:15px;margin-bottom:25px;}
.vip-price span{font-size:15px;font-weight:900;color:#facc15;}
.vip-btn{padding:14px 35px;border:none;border-radius:50px;background:linear-gradient(135deg,#facc15,#f59e0b);color:#000;font-weight:700;cursor:pointer;transition:.3s;}
.vip-btn:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(250,204,21,.4);}
.promo-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(1px);display:flex;justify-content:center;align-items:center;z-index:9999;opacity:0;visibility:hidden;transition:0.4s ease;}
.promo-overlay.active{opacity:1;visibility:visible;}
.promo-box{position:relative;max-width:500px;width:90%;animation:popupScale 0.4s ease;}
.promo-box img{width:100%;border-radius:20px;box-shadow:0 25px 60px rgba(0,0,0,0.4);}
.promo-close{position:absolute;top:-15px;right:-15px;width:35px;height:35px;border:none;border-radius:50%;background:#fdfdfd;color:#000000;font-size:16px;font-weight:bold;cursor:pointer;box-shadow:0 5px 15px rgba(0,0,0,0.3);transition:0.3s;}
.promo-close:hover{transform:scale(1.1);}
@keyframes popupScale{from{transform:scale(0.8);opacity:0;}to{transform:scale(1);opacity:1;}}
@media (max-width: 1024px){.hero h1{font-size:48px;}.hero-logo{width:320px;}}
@media (max-width: 768px){
  nav{height:auto;padding:15px 5%;flex-direction:column;align-items:center;}
  .logo-wrap{height:auto;margin-bottom:10px;}
  .logo-wrap img{height:40px;}
  .menu{width:100%;display:flex;justify-content:space-around;gap:10px;font-size:14px;}
}
@media (max-width: 480px){
  .hero h1{font-size:28px;}
  .hero p{font-size:14px;}
  .btn{width:100%;}
}