/* ========== style.css — ПОЛНЫЙ ФАЙЛ ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Rajdhani', 'JetBrains Mono', sans-serif;
  background: #060210;
  color: #e0e0e0;
  overflow-x: hidden;
  position: relative;
}

/* Линии фона */
.circuit-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
}
.circuit-bg svg { width: 100%; height: 100%; }
.bg-path {
  fill: none;
  stroke: rgba(244, 60, 118, 0.25);
  stroke-width: 1.2;
  stroke-dasharray: 700;
  animation: circuitFlow 14s linear infinite;
}
.bg-path:nth-child(1) { animation-delay: 0s; }
.bg-path:nth-child(2) { animation-delay: -3.5s; }
.bg-path:nth-child(3) { animation-delay: -7s; }
.bg-path:nth-child(4) { animation-delay: -10.5s; }
.bg-path:nth-child(5) { animation-delay: -1.75s; }
.bg-path:nth-child(6) { animation-delay: -5.25s; }
.bg-path:nth-child(7) { animation-delay: -8.75s; }
.bg-path:nth-child(8) { animation-delay: -12.25s; }

@keyframes circuitFlow {
  0% { stroke-dashoffset: 700; }
  100% { stroke-dashoffset: -700; }
}

:root {
  --primary: #422170;
  --accent: #f43c76;
  --neon-pink: 0 0 10px rgba(244, 60, 118, 0.7), 0 0 40px rgba(244, 60, 118, 0.3);
}

@keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } }
@keyframes neon-pulse { 0%,100%{opacity:0.7;filter:brightness(1) drop-shadow(0 0 25px rgba(244,60,118,0.7));} 50%{opacity:1;filter:brightness(1.4) drop-shadow(0 0 45px rgba(244,60,118,0.95));} }
@keyframes float-hi-tech { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@keyframes text-float-left { 0%,100%{transform:translateX(0) translateY(0);} 30%{transform:translateX(-6px) translateY(-5px);} 60%{transform:translateX(4px) translateY(3px);} }

.full-width { width: 100%; max-width: 100%; padding: 0; position: relative; z-index: 1; }

/* Шапка */
.header { display: flex; align-items: center; justify-content: flex-end; padding: 22px 60px; flex-wrap: wrap; position: relative; z-index: 10; border-bottom: 1px solid rgba(244,60,118,0.18); backdrop-filter: blur(20px); gap: 30px; }
.header-logo { display: none; height: 42px; filter: drop-shadow(0 0 10px rgba(244,60,118,0.6)); }
.nav { display: flex; gap: 35px; font-weight: 600; align-items: center; flex-wrap: wrap; }
.nav .menu-link { color: #9977aa; text-decoration: none; position: relative; transition: all 0.3s; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; letter-spacing: 2px; cursor: pointer; padding: 5px 0; }
.nav .menu-link::before { content:'['; position:absolute; left:-18px; top:50%; transform:translateY(-50%); color:var(--accent); opacity:0; transition:all 0.3s; text-shadow:0 0 10px rgba(244,60,118,0.7); font-size:0.85rem; }
.nav .menu-link::after { content:']'; position:absolute; right:-18px; top:50%; transform:translateY(-50%); color:var(--accent); opacity:0; transition:all 0.3s; text-shadow:0 0 10px rgba(244,60,118,0.7); font-size:0.85rem; }
.nav .menu-link:hover { color:#fff; text-shadow:0 0 12px rgba(244,60,118,0.6); }
.nav .menu-link:hover::before,.nav .menu-link:hover::after { opacity:1; }
.nav .menu-link:hover::before { left:-14px; }
.nav .menu-link:hover::after { right:-14px; }
.nav-icons { display:flex; gap:18px; align-items:center; margin-left:10px; flex-wrap:wrap; }
.nav-icon { color:#9977aa; font-size:1.3rem; transition:all 0.3s; text-decoration:none; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:4px; }
.nav-icon:hover { color:var(--accent); text-shadow:0 0 12px rgba(244,60,118,0.7); transform:scale(1.1); background:rgba(244,60,118,0.08); }
.nav-icon img { width:21px; height:21px; filter:brightness(0.7); transition:all 0.3s; }
.nav-icon:hover img { filter:brightness(1); }

/* Херо */
.hero { display:flex; align-items:center; justify-content:center; min-height:68vh; position:relative; overflow:hidden; gap:80px; padding:40px 60px; }
.hero::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at 25% 35%, rgba(66,33,112,0.18) 0%, transparent 55%), radial-gradient(circle at 75% 65%, rgba(244,60,118,0.1) 0%, transparent 55%); pointer-events:none; }
.scanline-effect { position:absolute; top:-100%; left:0; width:100%; height:100%; background:linear-gradient(to bottom, transparent, rgba(244,60,118,0.03), transparent); animation:scanline 7s linear infinite; pointer-events:none; z-index:1; }

/* Услуги */
.hero-services-cascade { z-index:2; display:flex; flex-direction:column; gap:15px; animation:text-float-left 8s ease-in-out infinite; }
.service-cascade-item { font-family:'JetBrains Mono',monospace; font-size:5.5rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:#bb99dd; transition:all 0.35s; cursor:default; position:relative; width:fit-content; white-space:nowrap; line-height:1.05; padding:0 5px; }
.service-cascade-item:nth-child(2){margin-left:45px;}
.service-cascade-item:nth-child(3){margin-left:90px;}
.service-cascade-item:nth-child(4){margin-left:135px;}
.service-cascade-item::before,.service-cascade-item::after{content:'';position:absolute;top:50%;transform:translateY(-50%);font-family:'JetBrains Mono',monospace;font-size:5.5rem;font-weight:800;color:var(--accent);opacity:0;transition:all 0.35s;text-shadow:0 0 18px rgba(244,60,118,0.9);}
.service-cascade-item::before{content:'[';left:-45px;}
.service-cascade-item::after{content:']';right:-45px;}
.service-cascade-item:hover{color:#fff;text-shadow:0 0 30px rgba(244,60,118,0.8);transform:translateX(12px);}
.service-cascade-item:hover::before,.service-cascade-item:hover::after{opacity:1;}
.service-cascade-item:hover::before{left:-40px;}
.service-cascade-item:hover::after{right:-40px;}

/* Логотип */
.hero-visual { z-index:2; position:relative; display:flex; justify-content:center; align-items:center; animation:float-hi-tech 6s ease-in-out infinite; }
.logo-main { width:520px; max-width:100%; height:auto; filter:drop-shadow(0 0 55px rgba(244,60,118,0.9)) drop-shadow(0 0 110px rgba(66,33,112,0.7)); animation:neon-pulse 2.8s infinite; z-index:5; }

/* Галереи */
.gallery-section { padding: 70px 60px 90px; }
.gallery-section .section-title { text-align:left; margin-bottom:30px; font-size:2rem; font-family:'Orbitron',sans-serif; text-transform:uppercase; letter-spacing:5px; color:#fff; text-shadow:0 0 15px rgba(244,60,118,0.4); }

/* Карусели */
.works-carousel,.templates-carousel { overflow:hidden; width:100%; cursor:grab; user-select:none; border:1px solid rgba(244,60,118,0.12); background:rgba(8,4,20,0.6); backdrop-filter:blur(15px); position:relative; border-radius:4px; }
.works-carousel:active,.templates-carousel:active { cursor:grabbing; }
.works-track,.templates-track { display:flex; gap:22px; padding:12px; transition:transform 0.05s linear; will-change:transform; }
.work-item,.template-item { min-width:310px; max-width:400px; background:rgba(12,7,28,0.75); border:1px solid rgba(244,60,118,0.18); clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); cursor:pointer; transition:all 0.35s; flex-shrink:0; }
.work-item:hover,.template-item:hover { transform:translateY(-6px); border-color:#f43c76; box-shadow:0 0 35px rgba(244,60,118,0.4); }
.work-item img,.template-item img { width:100%; height:240px; object-fit:cover; display:block; filter:grayscale(25%) brightness(0.8); transition:all 0.4s; }
.work-item img { object-position:0% 0%; }
.work-item:hover img,.template-item:hover img { filter:grayscale(0%) brightness(1.05); }
.work-info,.template-info { padding:20px; font-family:'JetBrains Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:1.2px; background:rgba(8,4,20,0.85); border-top:1px solid rgba(244,60,118,0.12); color:#aabbcc; }
.template-info { display:flex; justify-content:space-between; align-items:center; }
.template-price { color:#f43c76; font-weight:700; font-size:0.9rem; text-shadow:0 0 10px rgba(244,60,118,0.5); }

/* Модальное окно */
.template-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000; background:rgba(0,0,0,0.88); backdrop-filter:blur(12px); justify-content:center; align-items:center; }
.template-modal.active { display:flex; }
.template-card { background:rgba(12,7,28,0.96); border:1px solid rgba(244,60,118,0.5); max-width:620px; width:92%; padding:40px; position:relative; box-shadow:0 0 60px rgba(244,60,118,0.35); animation:modalIn 0.3s ease; }
@keyframes modalIn { from{transform:scale(0.9);opacity:0;} to{transform:scale(1);opacity:1;} }
.template-card img { width:100%; margin-bottom:25px; border:1px solid rgba(244,60,118,0.2); }
.template-card h3 { font-family:'Orbitron',sans-serif; font-size:1.8rem; color:#fff; margin-bottom:12px; letter-spacing:2px; }
.template-card .modal-price { font-size:2.2rem; color:#f43c76; font-weight:800; margin-bottom:25px; text-shadow:0 0 15px rgba(244,60,118,0.5); }
.template-card .btn-order { display:inline-block; padding:14px 35px; background:#f43c76; color:#fff; text-decoration:none; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.9rem; letter-spacing:2px; transition:0.3s; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); }
.template-card .btn-order:hover { box-shadow:0 0 30px rgba(244,60,118,0.8); background:#ff3c66; }
.modal-close { position:absolute; top:18px; right:22px; font-size:2.2rem; color:#ccc; cursor:pointer; transition:0.3s; line-height:1; }
.modal-close:hover { color:#f43c76; transform:rotate(90deg); }

/* Футер */
footer { text-align:center; padding:45px; color:#775588; border-top:1px solid rgba(244,60,118,0.12); font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:2px; font-size:0.72rem; position:relative; }
footer::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:180px; height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent); }
.footer-social { display:flex; justify-content:center; gap:16px; margin-bottom:28px; align-items:center; flex-wrap:wrap; }
.social-btn { width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:rgba(12,7,28,0.8); border:1px solid rgba(244,60,118,0.35); color:#ddd; text-decoration:none; font-size:1.2rem; transition:all 0.3s; clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%); }
.social-btn:hover { background:rgba(244,60,118,0.2); border-color:#f43c76; box-shadow:0 0 25px rgba(244,60,118,0.7); transform:scale(1.1); color:#f43c76; }
.social-btn img { width:20px; height:20px; filter:brightness(0.8); }
.social-btn:hover img { filter:brightness(1); }

/* ========== АДАПТИВ ========== */
@media (max-width: 1100px) {
  .header { justify-content:space-between; padding:18px 25px; }
  .header-logo { display:block; }
  .nav { gap:20px; }
  .nav .menu-link { font-size:0.8rem; }
  .hero { flex-direction:column; align-items:flex-start; gap:30px; padding:40px 25px; min-height:auto; }
  .hero-services-cascade { animation:none; }
  .service-cascade-item { font-size:3rem; white-space:normal; }
  .service-cascade-item::before,.service-cascade-item::after { font-size:3rem; }
  .service-cascade-item:nth-child(2),.service-cascade-item:nth-child(3),.service-cascade-item:nth-child(4) { margin-left:0; }
  .hero-visual { display:none; }
  .gallery-section { padding:40px 25px 50px; }
  .gallery-section .section-title { font-size:1.5rem; letter-spacing:3px; }
}

@media (max-width: 768px) {
  .header { padding:12px 15px; gap:10px; }
  .nav { gap:12px; }
  .nav .menu-link { font-size:0.7rem; letter-spacing:1px; }
  .nav .menu-link::before,.nav .menu-link::after { font-size:0.7rem; left:-14px; right:-14px; }
  .nav-icons { gap:8px; }
  .nav-icon { width:28px; height:28px; font-size:1rem; }
  .nav-icon img { width:16px; height:16px; }
  .hero { padding:30px 15px; gap:20px; }
  .service-cascade-item { font-size:2.2rem; }
  .service-cascade-item::before,.service-cascade-item::after { font-size:2.2rem; left:-30px; right:-30px; }
  .gallery-section { padding:30px 15px 40px; }
  .gallery-section .section-title { font-size:1.2rem; letter-spacing:2px; }
  .work-item,.template-item { min-width:240px; }
  .work-item img,.template-item img { height:160px; }
  .work-info,.template-info { padding:12px; font-size:0.6rem; }
  .template-price { font-size:0.7rem; }
  .template-card { padding:20px; }
  .template-card h3 { font-size:1.2rem; }
  .template-card .modal-price { font-size:1.5rem; }
  .modal-close { top:10px; right:12px; font-size:1.5rem; }
  footer { padding:25px 15px; font-size:0.6rem; }
  .social-btn { width:34px; height:34px; font-size:0.9rem; }
  .social-btn img { width:16px; height:16px; }
}

@media (max-width: 400px) {
  .nav .menu-link { font-size:0.6rem; }
  .service-cascade-item { font-size:1.6rem; }
  .service-cascade-item::before,.service-cascade-item::after { font-size:1.6rem; left:-24px; right:-24px; }
  .work-item,.template-item { min-width:200px; }
  .work-item img,.template-item img { height:130px; }
}