*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0a0a0f;color:#fff;line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:0 20px}.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 20px;background:rgba(10,10,15,0.95);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.08)}.nav-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.logo{font-size:22px;font-weight:800;color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px}.lang-switch{display:flex;gap:4px;flex-wrap:wrap;background:rgba(255,255,255,0.03);padding:4px;border-radius:12px}.lang-switch a{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;text-decoration:none;color:#a1a1aa;transition:all 0.3s}.lang-switch a.active,.lang-switch a:hover{background:var(--c1,#6C63FF);color:#fff}.hero{position:relative;min-height:100vh;display:flex;align-items:center;text-align:center;padding:120px 20px;background:linear-gradient(135deg,var(--c1,#6C63FF),var(--c2,#8B85FF));background-size:200% 200%;animation:gradient 8s ease infinite}.hero.preloaded{background-size:cover;animation:none}.hero-badge{background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);padding:8px 20px;border-radius:50px;font-size:14px;border:1px solid rgba(255,255,255,0.2)}.hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto}.hero h1{font-size:clamp(32px,7vw,64px);font-weight:900;margin-bottom:20px;text-shadow:0 2px 10px rgba(0,0,0,0.5)}.hero p{font-size:18px;opacity:0.95;max-width:600px;margin:0 auto 36px;text-shadow:0 1px 5px rgba(0,0,0,0.5)}.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:14px;font-weight:600;font-size:15px;text-decoration:none;margin:5px;color:#fff;transition:all 0.3s;backdrop-filter:blur(10px)}.btn-primary{background:linear-gradient(135deg,var(--c1,#6C63FF),var(--c2,#8B85FF));box-shadow:0 4px 15px rgba(0,0,0,0.3)}.btn-outline{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2)}.btn:hover{transform:translateY(-3px)}.section{padding:100px 20px}.section-dark{background:rgba(255,255,255,0.02)}.section-header{text-align:center;margin-bottom:60px}.section-badge{display:inline-block;padding:8px 20px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:50px;font-size:13px;font-weight:600;color:var(--c2,#8B85FF);margin-bottom:16px;text-transform:uppercase;letter-spacing:2px}.section h2{text-align:center;font-size:clamp(28px,5vw,48px);font-weight:800;margin-bottom:16px}.section-subtitle{text-align:center;color:#a1a1aa;font-size:18px;max-width:600px;margin:0 auto 60px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:40px 28px;text-align:center;transition:all 0.4s;backdrop-filter:blur(10px)}.card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,0.2)}.card-icon{font-size:48px;margin-bottom:20px}.card h3{font-size:22px;font-weight:700;margin-bottom:12px}.card p{color:#a1a1aa;font-size:15px}.card.featured{border:2px solid var(--c1,#6C63FF);position:relative}.card.featured::before{content:attr(data-badge);position:absolute;top:14px;right:14px;background:linear-gradient(135deg,var(--c1,#6C63FF),var(--c2,#8B85FF));padding:6px 16px;border-radius:20px;font-size:11px;font-weight:600;color:#fff}.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.gallery-item{background-size:cover;background-position:center;background-color:#1a1a2e;border-radius:20px;overflow:hidden;aspect-ratio:4/3;transition:background-image 0.6s ease;position:relative}.gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1a1a2e,#2a2a3e,#1a1a2e);animation:shimmer 1.5s infinite}.gallery-item.loaded::after{display:none}.form-input{width:100%;padding:16px 20px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:14px;color:#fff;font-size:16px;font-family:inherit;margin-bottom:16px}.form-input:focus{outline:none;border-color:var(--c2,#8B85FF)}.honeypot{position:absolute;left:-9999px;opacity:0}.footer{text-align:center;padding:60px 20px;border-top:1px solid rgba(255,255,255,0.08);color:#a1a1aa;font-size:14px}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@media(max-width:768px){.hero{padding:80px 20px}.section{padding:60px 20px}.card{padding:28px 20px}}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.demo-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:16px;overflow:hidden;transition:all 0.3s}
.demo-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.2)}
.demo-card iframe{width:100%;height:200px;border:none;pointer-events:none}
.demo-label{padding:10px;font-size:12px;color:#a1a1aa;text-align:center}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:20px;cursor:pointer;transition:all 0.3s}
.faq-item:hover{border-color:rgba(255,255,255,0.2)}
.faq-item summary{font-weight:600;font-size:16px;cursor:pointer}
.faq-item p{margin-top:12px;color:#a1a1aa;font-size:14px;line-height:1.7}

/* Градиенты Visib Studio */
.hero-visib {
  background: linear-gradient(135deg, #007aff 0%, #5856d6 50%, #af52de 100%);
  position: relative;
  overflow: hidden;
}
.hero-visib::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(255,255,255,0.08) 0%, transparent 50%);
  animation: heroFloat 20s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(1deg); }
  66% { transform: translate(-20px, 20px) rotate(-1deg); }
}

/* Blur градиенты для фона */
.blur-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  opacity: 0.5;
}
.blur-bg::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,122,255,0.3) 0%, transparent 70%);
  filter: blur(80px);
  top: 10%; left: -200px;
  animation: blurFloat 15s ease-in-out infinite;
}
.blur-bg::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(175,82,222,0.3) 0%, transparent 70%);
  filter: blur(80px);
  bottom: 10%; right: -150px;
  animation: blurFloat 18s ease-in-out infinite reverse;
}
@keyframes blurFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(40px, -40px); }
}

/* SVG фон из старых шаблонов */
.svg-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23007aff' stop-opacity='0.15'/%3E%3Cstop offset='100%25' stop-color='black' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='800' height='800' fill='black'/%3E%3Ccircle cx='200' cy='200' r='300' fill='url(%23g)'/%3E%3Ccircle cx='600' cy='600' r='250' fill='url(%23g)'/%3E%3C/svg%3E");
  background-size: cover;
  opacity: 0.5;
}
.demo-card{cursor:pointer}
.demo-preview{background:linear-gradient(135deg,#1a1a2e,#2a2a3e);height:140px;display:flex;align-items:center;justify-content:center;font-size:48px;border-radius:16px 16px 0 0;transition:all 0.3s}
.demo-card:hover .demo-preview{background:linear-gradient(135deg,#2a2a3e,#3a3a5e)}
.demo-link{display:block;padding:6px;text-align:center;color:#007aff;font-size:12px;text-decoration:none}
.demo-card:hover .demo-link{color:#fff}
.demo-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.demo-card{cursor:pointer}
.demo-preview{background:linear-gradient(135deg,#1a1a2e,#2a2a3e);height:120px;display:flex;align-items:center;justify-content:center;font-size:40px;border-radius:16px 16px 0 0;transition:all 0.3s}
.demo-card:hover .demo-preview{background:linear-gradient(135deg,#2a2a3e,#3a3a5e)}
.demo-link{display:block;padding:8px;text-align:center;color:#007aff;font-size:12px;text-decoration:none}
.demo-card:hover .demo-link{color:#fff}
.demo-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.demo-card{border-radius:16px;overflow:hidden;transition:all 0.3s}
.demo-card:hover{transform:translateY(-4px)}
.demo-card iframe{width:100%;height:180px;border:none;pointer-events:none}
.demo-label{padding:10px;font-size:12px;text-align:center;background:rgba(255,255,255,0.03)}
.demo-label a{color:#007aff;text-decoration:none}
.demo-label a:hover{color:#fff}
.demo-card-link{text-decoration:none;color:inherit}
.demo-card-link:hover{transform:translateY(-4px)}
.demo-preview{background:linear-gradient(135deg,#1a1a2e,#2a2a3e);height:140px;display:flex;align-items:center;justify-content:center;font-size:64px;border-radius:16px 16px 0 0;transition:all 0.3s}
.demo-card-link:hover .demo-preview{background:linear-gradient(135deg,#2a2a3e,#3a3a5e)}