@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&family=Share+Tech+Mono&display=swap');

:root {
    --primary: #6a0dad;
    --primary-soft: rgba(106, 13, 173, 0.6);
    --accent: #00ff88;
    --accent-soft: rgba(0, 255, 136, 0.4);
    --danger: #ff0055;
    --warning: #ffb347;
    --bg-dark: #050713;
    --bg-elevated: #0b0f1f;
    --glass: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.1);
    --text-main: #ffffff;
    --text-sec: #aaaaaa;
    --border-radius: 15px;
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.3s ease;
}

/* RESET */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
}

/* Когда JS выключен */
body.no-js .global-bg-layer {
    display: none;
}

/* =========================
   PREMIUM PURPLE SPACE — CLEAN VERSION
   ========================= */

:root {
    --primary: #5e2ca5;
    --primary-soft: rgba(94, 44, 165, 0.5);
    --accent: #a88bff;
    --accent-soft: rgba(168, 139, 255, 0.35);
    --bg-dark: #04030c;
    --text-main: #e0dfff;
    --text-sec: #9999bb;
    --border: rgba(255,255,255,0.08);
}

/* Глобальный фон */
.global-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(circle at 50% 20%, #2a1455 0%, #04030c 70%);
}

/* Орбиты */
.orbit-system {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 700px;
    height: 700px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -2;
}

.orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(168,139,255,0.25);
    animation: orbitSpin linear infinite;
    mix-blend-mode: screen;
}

.orbit-1 { transform: scale(0.55); animation-duration: 38s; }
.orbit-2 { transform: scale(0.75); animation-duration: 52s; }
.orbit-3 { transform: scale(0.95); animation-duration: 68s; }

@keyframes orbitSpin {
    from { transform: rotate(0deg) scale(var(--scale)); }
    to   { transform: rotate(360deg) scale(var(--scale)); }
}

/* Падающие звезды */
#particles-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}


/* =========================
   ГЛОБАЛЬНЫЙ КОСМИЧЕСКИЙ ФОН
   ========================= */

.global-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    overflow: hidden;
}

/* Глубокий космический градиент ядра */
.bg-gradient-core {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 90% 10%, rgba(106, 13, 173, 0.45), transparent 60%),
        radial-gradient(circle at 50% 100%, rgba(0, 0, 40, 0.95), #02030a);
    filter: saturate(1.4);
    z-index: -4;
}

/* Canvas со звёздами */
#particles-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
}

/* Галактика (canvas) */
#galaxy-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -4;
}


/* Небулы / туманности (если захочешь добавить дивы) */
.cosmic-nebula {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    mix-blend-mode: screen;
    animation: nebulaDrift 40s ease-in-out infinite alternate;
}

.nebula-1 {
    top: -120px;
    left: -160px;
}

.nebula-2 {
    bottom: -160px;
    right: -120px;
    background: radial-gradient(circle, rgba(106,13,173,0.9), transparent 60%);
}

.nebula-3 {
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(0,191,255,0.8), transparent 60%);
    opacity: 0.25;
}

@keyframes nebulaDrift {
    0% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(40px, -20px, 0) scale(1.05); }
    100% { transform: translate3d(-20px, 30px, 0) scale(1.02); }
}

/* Центральное галактическое ядро */

.galaxy-core {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 50% 40%, #ffffff, rgba(255,255,255,0.6) 10%, transparent 55%),
        radial-gradient(circle at 30% 20%, rgba(0,255,136,0.9), transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(106,13,173,0.9), transparent 70%);
    box-shadow:
        0 0 60px rgba(0,255,136,0.7),
        0 0 120px rgba(106,13,173,0.7);
    mix-blend-mode: screen;
    opacity: 0.9;
    z-index: -2;
    overflow: visible;
}

.galaxy-core::before {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.35);
    box-shadow: 0 0 40px rgba(255,255,255,0.4);
    animation: galaxyHaloSpin 26s linear infinite;
    mix-blend-mode: screen;
}

.galaxy-core::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%);
    animation: galaxyPulse 5.5s ease-in-out infinite;
    mix-blend-mode: screen;
}

@keyframes galaxyHaloSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.03); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes galaxyPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.08); }
}

/* Орбитальная система вокруг ядра */

.orbit-system {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 720px;
    height: 720px;
    pointer-events: none;
    z-index: -1;
}

.orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.18);
    box-shadow: 0 0 18px rgba(0,255,136,0.15);
    mix-blend-mode: screen;
    transform-origin: center center;
}

.orbit-1 { transform: scale(0.55); animation: orbitSpin1 32s linear infinite; }
.orbit-2 { transform: scale(0.75); animation: orbitSpin2 44s linear infinite reverse; }
.orbit-3 { transform: scale(0.95); animation: orbitSpin3 56s linear infinite; }
.orbit-4 { transform: scale(1.15); animation: orbitSpin4 70s linear infinite reverse; }

@keyframes orbitSpin1 {
    0% { transform: scale(0.55) rotate(0deg); }
    100% { transform: scale(0.55) rotate(360deg); }
}
@keyframes orbitSpin2 {
    0% { transform: scale(0.75) rotate(0deg); }
    100% { transform: scale(0.75) rotate(-360deg); }
}
@keyframes orbitSpin3 {
    0% { transform: scale(0.95) rotate(0deg); }
    100% { transform: scale(0.95) rotate(360deg); }
}
@keyframes orbitSpin4 {
    0% { transform: scale(1.15) rotate(0deg); }
    100% { transform: scale(1.15) rotate(-360deg); }
}

.orbit-dot {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff, #00ffcc 60%, transparent 100%);
    box-shadow:
        0 0 18px rgba(0,255,136,0.9),
        0 0 40px rgba(106,13,173,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit-dot::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(0,255,136,0.4);
    box-shadow: 0 0 18px rgba(0,255,136,0.5);
    opacity: 0.7;
}

/* Глич‑лейблы (поддержка твоего JS) */

.orbit-label {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(5, 5, 15, 0.95);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--accent);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-shadow:
        0 0 6px rgba(0,255,136,0.8),
        0 0 12px rgba(106,13,173,0.8);
    mix-blend-mode: screen;
}


/* Лёгкий звёздный слой поверх */

.starfield-overlay {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.18) 0, transparent 55%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.12) 0, transparent 55%);
    opacity: 0.18;
    mix-blend-mode: screen;
}

/* Неоновые свечения */

.ambient-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.5;
    mix-blend-mode: screen;
    pointer-events: none;
}

.glow-purple {
    right: -120px;
    top: 10%;
    background: radial-gradient(circle, rgba(106,13,173,0.9), transparent 60%);
}

.glow-green {
    left: -120px;
    bottom: 0;
    background: radial-gradient(circle, rgba(168,139,255,0.9), transparent 60%)
}

/* Дополнительные фоновые орбы */

.bg-orb {
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.4), transparent 70%);
    opacity: 0.25;
    mix-blend-mode: screen;
    filter: blur(1px);
    animation: orbFloat 26s ease-in-out infinite alternate;
}

.orb-1 { top: 12%; left: 12%; }
.orb-2 { top: 70%; right: 10%; animation-delay: -6s; }
.orb-3 { top: 40%; right: 40%; animation-delay: -12s; }

@keyframes orbFloat {
    0% { transform: translate3d(0,0,0); opacity: 0.2; }
    50% { transform: translate3d(20px,-30px,0); opacity: 0.5; }
    100% { transform: translate3d(-10px,20px,0); opacity: 0.3; }
}

/* =========================
   ПЛАНЕТЫ-ЛОГОТИПЫ (КОНЦЕПТЫ)
   ========================= */

.planet-logo {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 30%, #ffffff 0%, rgba(255,255,255,0.2) 18%, transparent 40%),
        radial-gradient(circle at 50% 60%, #8c50c8 0%, #3c1e78 55%, #140a28 100%);
    background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
    filter:
        drop-shadow(0 0 25px rgba(0,255,136,0.7))
        drop-shadow(0 0 40px rgba(106,13,173,0.7));
    pointer-events: none;
    overflow: hidden; /* важно, чтобы всё лишнее обрезалось по кругу */
}

/* Внутренний объём, БЕЗ внешнего ореола */
/* Внутренний объём, строго по центру */
.planet-logo::after {
  content: "";
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 128px;
  height: 126px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.08) 0%,
      rgba(160,100,220,0.2) 30%,
      rgba(80,40,160,0.5) 60%,
      rgba(30,15,60,0.75) 100%);
  box-shadow:
    inset 0 0 14px rgba(140,80,200,0.3),
    0 0 18px rgba(106,13,173,0.3),
    0 0 24px rgba(106,13,173,0.2);
  animation: planetPulse 6s ease-in-out infinite;
  mix-blend-mode: screen;
  z-index: 1;
}


/* ВАЖНО: подставь свои пути к логотипам */
.planet-logo-main {
    left: 8%;
    top: 52%;
    transform: translateY(-50%);
    background-image: url("/static/img/logo-main.png"); /* заменишь на свой файл */
    animation: planetFloatLeft 18s ease-in-out infinite alternate;
}

.planet-logo-alt {
    right: 6%;
    top: 22%;
    background-image: url("/static/img/logo-alt.png"); /* заменишь на свой файл */
    animation: planetFloatRight 22s ease-in-out infinite alternate;
}

@keyframes planetRingSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes planetFloatLeft {
    0% { transform: translateY(-50%) translate3d(0,0,0) rotate(0deg); }
    50% { transform: translateY(-52%) translate3d(10px,-20px,0) rotate(3deg); }
    100% { transform: translateY(-48%) translate3d(-8px,16px,0) rotate(-2deg); }
}

@keyframes planetFloatRight {
    0% { transform: translate3d(0,0,0) rotate(0deg); }
    50% { transform: translate3d(-12px,-18px,0) rotate(-3deg); }
    100% { transform: translate3d(10px,14px,0) rotate(2deg); }
}

/* Полностью убираем псевдоэлементы у планет */


/* =========================
   ХЕДЕР
   ========================= */

.site-header {
    background: rgba(5, 6, 20, 0.96);
    backdrop-filter: blur(18px);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--border);
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #fff;
}

.logo-box {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    overflow: hidden;
    box-shadow: 0 0 16px rgba(106, 13, 173, 0.7);
    background: radial-gradient(circle at 30% 0%, rgba(0,255,136,0.4), transparent 60%);
}

.logo-box i {
    font-size: 1.4rem;
}

.logo-pulse {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(0,255,136,0.4), transparent 60%);
    opacity: 0;
    animation: logoPulse 3.2s ease-out infinite;
}

@keyframes logoPulse {
    0% { transform: scale(0.4); opacity: 0.7; }
    60% { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

.brand h1 {
    font-size: 1.5rem;
    margin: 0;
}

.brand .subtitle {
    font-size: 0.8rem;
    color: var(--accent);
    font-family: 'Share Tech Mono', monospace;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-link {
    text-decoration: none;
    color: var(--text-sec);
    font-weight: 500;
    transition: var(--transition-normal);
    font-size: 1rem;
    position: relative;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-soft);
    transition: var(--transition-normal);
}

.nav-link:hover {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent-soft);
}

.nav-link:hover::after {
    width: 100%;
}

.header-actions .btn-outline-small {
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header-actions .btn-outline-small:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* =========================
   ОСНОВНОЙ КОНТЕНТ
   ========================= */

.main-wrapper {
    position: relative;
    z-index: 10;
    min-height: 60vh;
}

/* Flash-сообщения */

.flash-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flash-msg {
    min-width: 260px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(10,10,25,0.96);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.flash-msg .flash-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-soft);
}

.flash-msg.success { border-color: var(--accent); }
.flash-msg.error { border-color: var(--danger); }

/* =========================
   КНОПКИ
   ========================= */

.btn-main {
    display: inline-block;
    padding: 14px 36px;
    background: linear-gradient(135deg, var(--accent), #ffffff);
    color: #000;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    transition: var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    box-shadow: 0 0 18px var(--accent-soft);
    cursor: pointer;
}

.btn-main:hover {
    box-shadow: 0 0 26px var(--accent-soft);
    transform: translateY(-3px);
    background: #fff;
}

.btn-outline {
    display: inline-block;
    padding: 12px 32px;
    border: 2px solid #fff;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: var(--transition-normal);
}

.btn-outline:hover {
    background: #fff;
    color: #000;
}

.btn-small {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: var(--transition-normal);
    font-size: 0.9rem;
}

.btn-small:hover {
    border-bottom-color: var(--accent);
}

.btn-link {
    margin-left: 10px;
    color: var(--text-sec);
    text-decoration: none;
    font-size: 0.9rem;
}

.btn-link:hover {
    color: var(--accent);
}

/* =========================
   КАТАЛОГ
   ========================= */

.catalog-header {
    text-align: center;
    margin-bottom: 30px;
}

.page-title {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.highlight {
    color: var(--accent);
}

.filters-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.tab-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-sec);
    padding: 10px 25px;
    border-radius: 30px;
    cursor: pointer;
    transition: var(--transition-normal);
    font-size: 0.9rem;
}

.tab-btn.active,
.tab-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 15px var(--primary-soft);
}

.services-grid {
    max-width: 1200px;
    margin: 0 auto 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 40px;
    position: relative;
}

.services-grid::before {
    content: "";
    position: absolute;
    inset: -40px;
    border-radius: 30px;
    background: radial-gradient(circle at top, rgba(0,255,136,0.06), transparent 60%);
    opacity: 0.7;
    z-index: -1;
}

.service-card {
    display: flex;
    flex-direction: column;
    min-height: 380px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform var(--transition-fast), box-shadow var(--transition-normal), border-color var(--transition-normal);
    opacity: 0;
}

.service-card .card-img img,
.service-card .no-img-placeholder {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 18px;
}

.no-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.03);
    color: var(--text-sec);
    font-size: 2rem;
}

.card-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--accent);
    margin-bottom: 8px;
    font-family: 'Share Tech Mono', monospace;
}

.service-title {
    margin: 4px 0 4px;
    font-size: 1.2rem;
}

.short-desc {
    flex: 1;
    color: var(--text-sec);
    margin-top: 6px;
    font-size: 0.95rem;
}

.card-tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.card-tags span {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-sec);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.card-bottom {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.price {
    font-size: 1.3rem;
    font-weight: 700;
}

.tech-line-top {
    position: absolute;
    top: 0;
    left: 20px;
    width: 2px;
    height: 0;
    background: var(--accent);
    transition: 0.5s;
    opacity: 0;
}

.service-card:hover .tech-line-top {
    height: 100%;
    opacity: 0.3;
}

/* =========================
   DETAIL PAGE
   ========================= */

.detail-container {
    max-width: 1200px;
    margin: 40px auto;
}

.detail-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.back-link {
    color: var(--text-sec);
    text-decoration: none;
    font-size: 0.9rem;
}

.back-link:hover {
    color: var(--accent);
}

.category-badge {
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.detail-content-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
    gap: 30px;
}

.detail-image img,
.no-img-placeholder.large {
    width: 100%;
    border-radius: 14px;
}

.no-img-placeholder.large {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.03);
    font-size: 3rem;
}

.main-title {
    margin-top: 0;
    margin-bottom: 10px;
}

.price-large {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.full-text-content {
    line-height: 1.8;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.02);
    padding: 24px;
    border-radius: var(--border-radius);
    border-left: 3px solid var(--accent);
    margin-top: 10px;
}

.cta-block {
    margin-top: 30px;
}

/* =========================
   ABOUT
   ========================= */

.about-hero {
    padding: 80px 20px 40px;
}

.text-center {
    text-align: center;
}

.glitch-text {
    font-size: 3.2rem;
    font-weight: 800;
    position: relative;
    color: var(--text-main);
    text-shadow: 2px 2px 0px var(--primary);
}

.subtitle-text {
    font-size: 1.1rem;
    color: var(--text-sec);
    margin-top: 10px;
}

.about-philosophy .flex-row {
    display: flex;
    gap: 30px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.about-philosophy .text-content {
    flex: 2;
}

.about-philosophy .visual-content {
    flex: 1;
    display: flex;
    justify-content: center;
}

.huge-icon {
    font-size: 4rem;
    color: var(--accent);
}

.check-list {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.check-list li {
    margin-bottom: 8px;
}

.tech-battle .comparison-grid {
    max-width: 1100px;
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 20px;
    align-items: center;
}

.vs-badge {
    background: var(--accent);
    color: #000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-style: italic;
    box-shadow: 0 0 15px var(--accent);
}

.tech-card {
    display: flex;
    flex-direction: column;
    min-height: 260px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 1.3rem;
    font-weight: 700;
}

.python-card .card-header i { color: #ffd700; }
.tilda-card .card-header i { color: #f68c1f; }

.pros-list {
    list-style: none;
    padding: 0;
    margin: 14px 0;
}

.pros-list li {
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
}

.verdict {
    background: rgba(255,255,255,0.06);
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    margin-top: auto;
    border: 1px dashed var(--text-sec);
}

.tech-stack .stack-icons {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    font-size: 3rem;
    margin-top: 30px;
}

.stack-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-sec);
    transition: var(--transition-normal);
}

.stack-item span {
    font-size: 1rem;
    opacity: 0;
    transition: var(--transition-normal);
}

.stack-item:hover {
    color: var(--accent);
    transform: translateY(-8px);
}

.stack-item:hover span {
    opacity: 1;
}

/* Дополнительные блоки "О нас" */

.about-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    position: relative;
}

.about-grid::before {
    content: "";
    position: absolute;
    inset: -30px;
    border-radius: 30px;
    background: radial-gradient(circle at center, rgba(106,13,173,0.18), transparent 65%);
    opacity: 0.8;
    z-index: -1;
}

.about-stat-card {
    position: relative;
    padding: 20px;
    border-radius: 16px;
    background: rgba(10,10,25,0.96);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 14px 30px rgba(0,0,0,0.7);
}

.about-stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-sec);
}

.about-stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    margin-top: 6px;
}

.about-stat-desc {
    font-size: 0.9rem;
    color: var(--text-sec);
    margin-top: 8px;
}

.about-timeline {
    max-width: 1100px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 30px;
}

.timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 1px dashed rgba(255,255,255,0.25);
    padding-left: 18px;
}

.timeline-item {
    margin-bottom: 18px;
    position: relative;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-soft);
}

.timeline-year {
    font-size: 0.8rem;
    color: var(--text-sec);
}

.timeline-title {
    font-weight: 600;
    margin-top: 2px;
}

.timeline-text {
    font-size: 0.9rem;
    color: var(--text-sec);
    margin-top: 4px;
}

.about-side-panel {
    padding: 20px;
    border-radius: 16px;
    background: radial-gradient(circle at top, rgba(0,255,136,0.12), rgba(10,10,25,0.98));
    border: 1px solid rgba(0,255,136,0.3);
}

/* Контактный блок */

.contact-accent .contact-card {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.contact-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.contact-note {
    color: var(--text-sec);
    font-size: 0.9rem;
}

.neon-link {
    text-decoration: none;
}

/* =========================
   ФОРМЫ / АДМИН
   ========================= */

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
}

.admin-form-container h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-main);
    font-family: inherit;
}

.form-group label {
    font-size: 0.9rem;
    color: var(--text-sec);
}

/* Login */

.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
}

.login-card {
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.full-width {
    width: 100%;
    margin-top: 16px;
}

/* =========================
   САЙДБАРЫ
   ========================= */

.cyber-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 30;
    pointer-events: none;
}

.left-sidebar { left: 0; }
.right-sidebar { right: 0; }

.sidebar-content {
    position: absolute;
    top: 90px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.code-strip {
    height: 120px;
    border-left: 1px solid rgba(255,255,255,0.15);
    margin-left: 10px;
}

/* Системный виджет */

.sys-widget {
    background: radial-gradient(circle at top left, rgba(0,255,136,0.18), rgba(5,5,10,0.98));
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    padding: 12px 14px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    pointer-events: auto;
    box-shadow: 0 0 22px rgba(0,0,0,0.8);
    min-width: 220px;
}

.sys-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sys-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sys-main-icon {
    font-size: 1.1rem;
    color: var(--accent);
}

.sys-header-text {
    display: flex;
    flex-direction: column;
}

.sys-title {
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: var(--text-sec);
}

.sys-subtitle {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.6);
}

.sys-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-soft);
    animation: sysDotPulse 1.8s ease-in-out infinite;
}

@keyframes sysDotPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.4); opacity: 1; }
}

.sys-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 8px;
}

.sys-metric {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.sys-metric-label {
    font-size: 0.7rem;
    color: var(--text-sec);
}

.sys-metric-value {
    font-size: 0.8rem;
    color: #fff;
}

.sys-footer-buttons {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
}

.sys-chip {
    flex: 1;
    font-size: 0.6rem;
    padding: 3px 4px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.6);
    color: var(--text-sec);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sys-chip-active {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 10px var(--accent-soft);
}

/* Правый сайдбар */

.social-dock {
    position: absolute;
    bottom: 80px;
    right: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    pointer-events: auto;
}

.dock-btn {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 1.5rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    transition: var(--transition-normal);
}

.dock-btn:hover {
    transform: translateX(-4px) scale(1.05);
    box-shadow: 0 0 18px rgba(0,255,136,0.4);
}

.dock-btn.vk:hover {
    background: rgba(0,119,255,0.25);
    border-color: #0077ff;
}

.dock-btn.tg:hover {
    background: rgba(36,161,222,0.25);
    border-color: #24A1DE;
}


/* =========================
   FOOTER
   ========================= */

footer {
    position: relative;
    z-index: 10;
    padding: 40px 40px 20px;
    background: radial-gradient(circle at top, rgba(0,0,0,0.9), rgba(0,0,0,0.98));
    border-top: 1px solid var(--border);
    margin-top: 40px;
}

.footer-top-cta {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 24px 26px;
    border-radius: 18px;
    background: radial-gradient(circle at top left, rgba(0,255,136,0.12), rgba(10,10,25,0.98));
    border: 1px solid rgba(0,255,136,0.3);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.footer-top-text h2 {
    margin: 6px 0 8px;
}

.footer-top-text p {
    margin: 0;
    color: var(--text-sec);
}

.badge-shine {
    background: linear-gradient(90deg, var(--accent), #ffffff);
    color: #000;
}

.footer-top-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto 20px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
    gap: 30px;
}

.footer-col h3,
.footer-col h4 {
    margin-top: 0;
}

.footer-col p {
    color: var(--text-sec);
    font-size: 0.95rem;
}

.footer-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.metric-item {
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    padding: 10px;
    font-size: 0.85rem;
}

.metric-label {
    color: var(--text-sec);
    font-size: 0.8rem;
}

.metric-value {
    font-weight: 700;
}

.contact-col ul {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}

.contact-col li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--text-sec);
}

.contact-col a {
    color: var(--text-main);
    text-decoration: none;
}

.contact-col a:hover {
    color: var(--accent);
}

.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.footer-socials a {
    color: var(--text-sec);
    font-size: 1.2rem;
    text-decoration: none;
}

.footer-socials a:hover {
    color: var(--accent);
}

.stack-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.stack-tags span {
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text-sec);
}

.footer-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.mini-card {
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    padding: 10px;
    font-size: 0.85rem;
}

.mini-label {
    color: var(--text-sec);
    font-size: 0.8rem;
}

.mini-value {
    font-weight: 700;
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 0.85rem;
    color: var(--text-sec);
}

.status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    border: 1px solid var(--border);
}

.status-pill-green {
    border-color: var(--accent);
    color: var(--accent);
}

.footer-bottom-quote {
    max-width: 1200px;
    margin: 8px auto 0;
    font-size: 0.85rem;
    color: var(--text-sec);
    font-style: italic;
}


/* =========================
   АНИМАЦИЯ ДЛЯ SCROLL REVEAL
   ========================= */

.about-block,
.service-card,
.tech-card,
.contact-card,
.section-title,
.about-stat-card {
    opacity: 0;
}

/* ============================================================
   COSMIC V2 — ГЛУБОКИЙ ФОН, НОВАЯ ГАЛАКТИКА, ПЛАНЕТЫ, ТУМАННОСТИ
   ============================================================ */

/* Усиливаем общую палитру под фиолетовый + бирюзовый */
:root {
    --cosmic-purple-core: #6a0dad;
    --cosmic-purple-soft: #b36bff;
    --cosmic-teal-core: #00ffc8;
    --cosmic-teal-soft: #00e0a8;
    --cosmic-deep-space: #02030a;
}

/* Глобальный слой фона — чуть сильнее глубина и насыщенность */
.global-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    overflow: hidden;
    transform: translate3d(0,0,0);
    will-change: transform;
}

/* Обновлённый градиент ядра — более глубокий и фиолетово‑бирюзовый */
.bg-gradient-core {
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(circle at 15% 0%, rgba(0, 255, 200, 0.22), transparent 60%),
        radial-gradient(circle at 85% 10%, rgba(179, 107, 255, 0.55), transparent 65%),
        radial-gradient(circle at 50% 100%, rgba(2, 3, 20, 1), #02030a);
    filter: saturate(1.5) contrast(1.05);
    z-index: -6;
}

/* Canvas слои оставляем, но уточняем z-index для глубины */
#galaxy-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
}

#particles-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -4;
}

/* =========================
   НОВЫЕ ТУМАННОСТИ
   ========================= */

.nebula-layer {
    position: absolute;
    inset: -10%;
    z-index: -3;
    pointer-events: none;
    mix-blend-mode: screen;
}

.nebula {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    animation: nebulaDriftV2 40s ease-in-out infinite alternate;
}

.nebula-a {
    top: -120px;
    left: -160px;
    background:
        radial-gradient(circle, rgba(0, 255, 200, 0.9), transparent 60%);
}

.nebula-b {
    bottom: -160px;
    right: -120px;
    background:
        radial-gradient(circle, rgba(179, 107, 255, 0.95), transparent 60%);
    animation-delay: -10s;
}

.nebula-c {
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background:
        radial-gradient(circle, rgba(0, 191, 255, 0.8), transparent 60%);
    opacity: 0.25;
    animation-duration: 55s;
}

@keyframes nebulaDriftV2 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.25;
    }
    50% {
        transform: translate3d(40px, -30px, 0) scale(1.08);
        opacity: 0.5;
    }
    100% {
        transform: translate3d(-30px, 30px, 0) scale(1.02);
        opacity: 0.3;
    }
}

/* =========================
   НОВЫЕ ОБЛАКА ГАЛАКТИКИ
   ========================= */

.galaxy-clouds {
    position: absolute;
    inset: -10%;
    z-index: -2;
    pointer-events: none;
    mix-blend-mode: screen;
}

.galaxy-cloud {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 70%);
    animation: galaxyCloudSpin 60s linear infinite;
}

.cloud-1 {
    top: 20%;
    left: 20%;
    animation-duration: 70s;
}

.cloud-2 {
    top: 55%;
    right: 18%;
    animation-duration: 80s;
    animation-direction: reverse;
}

.cloud-3 {
    top: 35%;
    left: 55%;
    animation-duration: 90s;
}

@keyframes galaxyCloudSpin {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
        opacity: 0.25;
    }
    50% {
        transform: translate3d(10px, -15px, 0) rotate(180deg) scale(1.05);
        opacity: 0.45;
    }
    100% {
        transform: translate3d(-10px, 10px, 0) rotate(360deg) scale(1);
        opacity: 0.3;
    }
}



/* =========================
   ОБНОВЛЁННОЕ ГАЛАКТИЧЕСКОЕ ЯДРО
   ========================= */

.galaxy-core {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 50% 40%, #ffffff, rgba(255, 255, 255, 0.7) 10%, transparent 55%),
        radial-gradient(circle at 30% 20%, rgba(0, 255, 200, 0.95), transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(179, 107, 255, 0.95), transparent 70%);
    box-shadow:
        0 0 60px rgba(0, 255, 200, 0.8),
        0 0 120px rgba(179, 107, 255, 0.8);
    mix-blend-mode: screen;
    opacity: 0.95;
    z-index: -2;
    overflow: visible;
}

.galaxy-core::before {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
    animation: galaxyHaloSpinV2 26s linear infinite;
    mix-blend-mode: screen;
}

.galaxy-core::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
    animation: galaxyPulseV2 5.5s ease-in-out infinite;
    mix-blend-mode: screen;
}

@keyframes galaxyHaloSpinV2 {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.05);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes galaxyPulseV2 {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.95;
        transform: scale(1.1);
    }
}

/* =========================
   ОБНОВЛЁННЫЕ ОРБИТЫ
   ========================= */

.orbit-system {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 760px;
    height: 760px;
    pointer-events: none;
    z-index: -1;
}

.orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 18px rgba(0, 255, 200, 0.18);
    mix-blend-mode: screen;
    transform-origin: center center;
}

.orbit-1 {
    transform: scale(0.55);
    animation: orbitSpin1V2 32s linear infinite;
}
.orbit-2 {
    transform: scale(0.75);
    animation: orbitSpin2V2 44s linear infinite reverse;
}
.orbit-3 {
    transform: scale(0.95);
    animation: orbitSpin3V2 56s linear infinite;
}
.orbit-4 {
    transform: scale(1.15);
    animation: orbitSpin4V2 70s linear infinite reverse;
}

@keyframes orbitSpin1V2 {
    0% { transform: scale(0.55) rotate(0deg); }
    100% { transform: scale(0.55) rotate(360deg); }
}
@keyframes orbitSpin2V2 {
    0% { transform: scale(0.75) rotate(0deg); }
    100% { transform: scale(0.75) rotate(-360deg); }
}
@keyframes orbitSpin3V2 {
    0% { transform: scale(0.95) rotate(0deg); }
    100% { transform: scale(0.95) rotate(360deg); }
}
@keyframes orbitSpin4V2 {
    0% { transform: scale(1.15) rotate(0deg); }
    100% { transform: scale(1.15) rotate(-360deg); }
}

.orbit-dot {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff, #00ffcc 60%, transparent 100%);
    box-shadow:
        0 0 18px rgba(0, 255, 200, 0.9),
        0 0 40px rgba(179, 107, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit-dot::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 200, 0.4);
    box-shadow: 0 0 18px rgba(0, 255, 200, 0.5);
    opacity: 0.7;
}

/* Глич‑лейблы — чуть ярче и более неоновые */
.orbit-label {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(5, 5, 15, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--cosmic-teal-core);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-shadow:
        0 0 6px rgba(0, 255, 200, 0.9),
        0 0 12px rgba(179, 107, 255, 0.9);
    mix-blend-mode: screen;
}

/* Анимации планет */

@keyframes planetRingSpinV2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes planetMainFloat {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    40% {
        transform: translate3d(10px, -18px, 0) rotate(2deg) scale(1.03);
    }
    100% {
        transform: translate3d(-8px, 12px, 0) rotate(-2deg) scale(1.02);
    }
}

@keyframes planetAltFloat {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    50% {
        transform: translate3d(-12px, -16px, 0) rotate(-3deg) scale(1.04);
    }
    100% {
        transform: translate3d(10px, 14px, 0) rotate(2deg) scale(1.02);
    }
}

/* =========================
   ЛЁГКАЯ АДАПТИВНОСТЬ ДЛЯ МОБИЛЫ
   ========================= */

@media (max-width: 992px) {
    .planet-logo {
        width: 190px;
        height: 190px;
    }
    .planet-logo-main {
        left: -20px;
        top: 6%;
    }
    .planet-logo-alt {
        right: -10px;
        bottom: 2%;
    }
    .galaxy-core {
        width: 380px;
        height: 380px;
        top: 48%;
    }
    .orbit-system {
        width: 560px;
        height: 560px;
    }
}

@media (max-width: 768px) {
    .planet-logo {
        display: none; /* если захочешь — можно включить, но для производительности лучше скрыть */
    }
    .galaxy-core {
        width: 320px;
        height: 320px;
        top: 50%;
    }
}
/* ============================================================
   DOT&CRAFT COLOR MATCH — LOGO-BASED COSMIC PALETTE
   ============================================================ */

/* Основная палитра под логотип */
:root {
    --accent: #00ffc8; /* бирюзовый как в лого */
    --accent-soft: rgba(0, 255, 200, 0.35);

    --primary: #6a0dad; /* фиолетовый ядро */
    --primary-soft: rgba(106, 13, 173, 0.55);

    --purple-light: #b46cff; /* светлый фиолетовый */
    --purple-glow: rgba(180, 108, 255, 0.55);

    --bg-dark: #0a0314; /* тёмно-фиолетовый фон */
}

/* Градиент ядра — теперь фиолетовый */
.bg-gradient-core {
    background:
        radial-gradient(circle at 20% 0%, rgba(180,108,255,0.25), transparent 60%),
        radial-gradient(circle at 80% 10%, rgba(106,13,173,0.55), transparent 65%),
        radial-gradient(circle at 50% 100%, rgba(20,0,40,1), #050012);
    filter: saturate(1.4) brightness(1.1);
}

/* Туманности — фиолетовые */
.nebula,
.nebula-a,
.nebula-b,
.nebula-c,
.nebula-d {
    background: radial-gradient(circle, rgba(180,108,255,0.85), transparent 60%) !important;
    opacity: 0.35 !important;
}

/* Бирюзовые туманности — мягче */
.nebula-b {
    background: radial-gradient(circle, rgba(0,255,200,0.55), transparent 60%) !important;
}

/* Облака галактики — бело-фиолетовые */
.galaxy-cloud {
    background: radial-gradient(circle, rgba(200,160,255,0.35), transparent 70%) !important;
}

/* Галактическое ядро — бело-фиолетовое */
.galaxy-core {
    background:
        radial-gradient(circle at 50% 40%, #ffffff, rgba(255,255,255,0.7) 10%, transparent 55%),
        radial-gradient(circle at 30% 20%, rgba(180,108,255,0.95), transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(106,13,173,0.95), transparent 70%) !important;

    box-shadow:
        0 0 60px rgba(180,108,255,0.8),
        0 0 120px rgba(106,13,173,0.8) !important;
}

/* Орбиты — фиолетово-бирюзовые */
.orbit {
    border-color: rgba(180,108,255,0.25) !important;
    box-shadow: 0 0 18px rgba(180,108,255,0.25) !important;
}

.orbit-dot {
    background: radial-gradient(circle, #ffffff, #b46cff 60%, transparent 100%) !important;
    box-shadow:
        0 0 18px rgba(180,108,255,0.9),
        0 0 40px rgba(106,13,173,0.7) !important;
}

/* Глич-лейблы — бирюза + фиолетовый */
.orbit-label {
    color: #00ffc8 !important;
    text-shadow:
        0 0 6px rgba(0,255,200,0.9),
        0 0 12px rgba(180,108,255,0.9) !important;
}

/* Световые волны — фиолетовые */
.wave {
    background: radial-gradient(circle, rgba(180,108,255,0.18), transparent 70%) !important;
}

.wave-2 {
    background: radial-gradient(circle, rgba(0,255,200,0.18), transparent 70%) !important;
}

/* Приглушение центра */
.galaxy-core {
    opacity: 0.6;
    box-shadow:
        0 0 40px rgba(125,223,255,0.4),
        0 0 80px rgba(94,44,165,0.4);
}
.galaxy-core::after {
    animation: galaxyPulse 6.5s ease-in-out infinite;
    background: radial-gradient(circle, rgba(125,223,255,0.2), transparent 70%);
}

/* Мягкие свечения */
.ambient-glow {
    opacity: 0.3;
    filter: blur(100px);
}
.glow-purple {
    background: radial-gradient(circle, rgba(94,44,165,0.7), transparent 60%);
}
.glow-green {
    background: radial-gradient(circle, rgba(125,223,255,0.7), transparent 60%);
}

/* Орбитальные точки — мягче */
.orbit-dot {
    background: radial-gradient(circle, #ffffff, #7ddfff 60%, transparent 100%);
    box-shadow:
        0 0 12px rgba(125,223,255,0.6),
        0 0 30px rgba(94,44,165,0.5);
}
.orbit-dot::before {
    border-color: rgba(125,223,255,0.3);
    box-shadow: 0 0 12px rgba(125,223,255,0.4);
}

/* Фоновый градиент — мягче */
.bg-gradient-core {
    background:
        radial-gradient(circle at 10% 0%, rgba(125,223,255,0.12), transparent 55%),
        radial-gradient(circle at 90% 10%, rgba(94,44,165,0.35), transparent 60%),
        radial-gradient(circle at 50% 100%, rgba(0,0,40,0.9), #0a0a13);
    filter: saturate(1.2);
}

/* Карточки — менее яркие */
.glass-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(94, 44, 165, 0.2);
}

/* Кнопки — фиолетово‑голубые */
.btn-main {
    background: linear-gradient(135deg, var(--accent), #ffffff);
    color: #000;
}
.btn-main:hover {
    background: #fff;
    box-shadow: 0 0 20px var(--accent-soft);
}
/* === Dot&Craft Фиолетовая тема === */
:root {
    --primary: #5e2ca5;
    --primary-soft: rgba(94, 44, 165, 0.5);
    --accent: #a88bff;
    --accent-soft: rgba(168, 139, 255, 0.3);
    --bg-dark: #0a0a13;
    --bg-elevated: #121222;
    --text-main: #e0e0ff;
    --text-sec: #9999bb;
    --border: rgba(255, 255, 255, 0.08);
}

/* Убираем внешние круги у планет */
.planet-logo::before{
    display: none;
}

/* Фиолетовые планеты */
.planet-logo {
    filter:
        drop-shadow(0 0 20px rgba(168,139,255,0.5))
        drop-shadow(0 0 40px rgba(94,44,165,0.6));
    mix-blend-mode: screen;
}

/* Центр галактики — мягче */
.galaxy-core {
    opacity: 0.6;
    box-shadow:
        0 0 40px rgba(168,139,255,0.3),
        0 0 80px rgba(94,44,165,0.3);
}
.galaxy-core::after {
    background: radial-gradient(circle, rgba(168,139,255,0.2), transparent 70%);
    animation: galaxyPulse 6.5s ease-in-out infinite;
}

/* Фоновый градиент — фиолетовый */
.bg-gradient-core {
    background:
        radial-gradient(circle at 10% 0%, rgba(168,139,255,0.12), transparent 55%),
        radial-gradient(circle at 90% 10%, rgba(94,44,165,0.35), transparent 60%),
        radial-gradient(circle at 50% 100%, rgba(0,0,40,0.9), #0a0a13);
    filter: saturate(1.2);
}

/* Орбитальные точки — фиолетовые */
.orbit-dot {
    background: radial-gradient(circle, #ffffff, #a88bff 60%, transparent 100%);
    box-shadow:
        0 0 12px rgba(168,139,255,0.6),
        0 0 30px rgba(94,44,165,0.5);
}
.orbit-dot::before {
    border-color: rgba(168,139,255,0.3);
    box-shadow: 0 0 12px rgba(168,139,255,0.4);
}

/* Свечение — фиолетовое */
.ambient-glow {
    opacity: 0.3;
    filter: blur(100px);
}
.glow-purple {
    background: radial-gradient(circle, rgba(94,44,165,0.7), transparent 60%);
}
.glow-green {
    background: radial-gradient(circle, rgba(168,139,255,0.6), transparent 60%);
}

/* Кнопки — фиолетово-белые */
.btn-main {
    background: linear-gradient(135deg, var(--accent), #ffffff);
    color: #000;
}
.btn-main:hover {
    background: #fff;
    box-shadow: 0 0 20px var(--accent-soft);
}
/* === Dot&Craft: Фиолетовая тема === */
:root {
  --primary: #5e2ca5;
  --primary-soft: rgba(94, 44, 165, 0.5);
  --accent: #a88bff;
  --accent-soft: rgba(168, 139, 255, 0.3);
  --bg-dark: #0b0715;
  --bg-elevated: #140c22;
  --text-main: #e0dfff;
  --text-sec: #9999bb;
  --border: rgba(255, 255, 255, 0.08);
}

/* Фон сайта — насыщенно фиолетовый */
body {
  background-color: var(--bg-dark);
}

/* Удаление потертостей */
.starfield-overlay {
  display: none;
}

/* Туманности — меньше и темно-фиолетовые */
.cosmic-nebula {
  width: 320px;
  height: 320px;
  filter: blur(80px);
  opacity: 0.2;
}
.nebula-1 {
  background: radial-gradient(circle, rgba(94,44,165,0.6), transparent 60%);
}
.nebula-2 {
  background: radial-gradient(circle, rgba(60,30,120,0.5), transparent 60%);
}
.nebula-3 {
  background: radial-gradient(circle, rgba(120,90,200,0.4), transparent 60%);
}

/* Центр галактики — мягче */
.galaxy-core {
  opacity: 0.6;
  box-shadow:
    0 0 40px rgba(168,139,255,0.3),
    0 0 80px rgba(94,44,165,0.3);
}
.galaxy-core::after {
  background: radial-gradient(circle, rgba(168,139,255,0.2), transparent 70%);
}

/* Градиенты карточек — фиолетовые */
.holo-card {
  background: radial-gradient(circle at top, rgba(94,44,165,0.12), rgba(20,10,40,0.98));
  border: 1px solid rgba(168,139,255,0.25);
}
.holo-card::after {
  background: conic-gradient(from 180deg, rgba(94,44,165,0.1), transparent, rgba(168,139,255,0.18), transparent);
}

/* Карточки teaser — фиолетовые */
.glass-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 20px rgba(94, 44, 165, 0.2);
}
/* === Dot&Craft: фиолетовая тема === */
:root {
  --primary: #5e2ca5;
  --primary-soft: rgba(94, 44, 165, 0.5);
  --accent: #a88bff;
  --accent-soft: rgba(168, 139, 255, 0.3);
  --bg-dark: #0b0715;
  --bg-elevated: #140c22;
  --text-main: #e0dfff;
  --text-sec: #9999bb;
  --border: rgba(255, 255, 255, 0.08);
}

/* Удаление зелёных свечений */
.glow-green {
  display: none;
}

/* Туманности — уменьшены и фиолетовые */
.cosmic-nebula {
  width: 280px;
  height: 280px;
  filter: blur(80px);
  opacity: 0.18;
}
.nebula-1,
.nebula-2,
.nebula-3 {
  background: radial-gradient(circle, rgba(94,44,165,0.4), transparent 60%);
}

/* Центр галактики — мягче */
.galaxy-core {
  opacity: 0.6;
  box-shadow:
    0 0 40px rgba(168,139,255,0.3),
    0 0 80px rgba(94,44,165,0.3);
}
.galaxy-core::after {
  background: radial-gradient(circle, rgba(168,139,255,0.2), transparent 70%);
}

/* Карточки — фиолетовые градиенты */
.holo-card {
  background: radial-gradient(circle at top, rgba(94,44,165,0.12), rgba(20,10,40,0.98));
  border: 1px solid rgba(168,139,255,0.25);
}
.holo-card::after {
  background: conic-gradient(from 180deg, rgba(94,44,165,0.1), transparent, rgba(168,139,255,0.18), transparent);
}

/* Каталог — фиолетовый фон */
.services-grid::before {
  background: radial-gradient(circle at top, rgba(94,44,165,0.06), transparent 60%);
}

/* =========================
   АНИМАЦИИ ПЛАНЕТЫ И КОЛЬЦА
   ========================= */

.planet-logo {
    animation: planetBreath 12s ease-in-out infinite;
}

/* АНИМАЦИИ */

@keyframes orbitSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes corePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

@keyframes planetBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
.planet-logo::before {
    display: none !important;
    content: none !important;
    border: none !important;
    box-shadow: none !important;
    animation: none !important;
}

/* ============================
   1) ПАРАЛЛАКС‑СДВИГ (эффект глубины)
   ============================ */
.planet-logo.parallax {
  animation: planetParallax 12s ease-in-out infinite alternate;
}

@keyframes planetParallax {
  0%   { transform: translateX(-6px) translateY(3px); }
  50%  { transform: translateX(4px) translateY(-4px); }
  100% { transform: translateX(-3px) translateY(2px); }
}


/* ============================
   2) ГЛОУ‑ПЕРЕЛИВ (неоновое свечение)
   ============================ */
.planet-logo.glow {
  animation: planetGlow 4s ease-in-out infinite;
}

@keyframes planetGlow {
  0% {
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.2))
            drop-shadow(0 0 22px rgba(106,13,173,0.4));
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(255,255,255,0.4))
            drop-shadow(0 0 42px rgba(106,13,173,0.8));
  }
  100% {
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.2))
            drop-shadow(0 0 22px rgba(106,13,173,0.4));
  }
}


/* ============================
   3) ПЛАВАНИЕ В ПРОСТРАНСТВЕ (микро‑дрейф)
   ============================ */
.planet-logo.drift {
  animation: planetDrift 18s ease-in-out infinite alternate;
}

@keyframes planetDrift {
  0%   { transform: translateY(0px) translateX(0px); }
  50%  { transform: translateY(-10px) translateX(6px); }
  100% { transform: translateY(6px) translateX(-4px); }
}


/* ============================
   4) ПЕРЕЛИВ ЦВЕТА (фиолетовый → ярче → темнее)
   ============================ */
.planet-logo.color-shift {
  animation: planetColorShift 10s ease-in-out infinite;
}

@keyframes planetColorShift {
  0% {
    background:
      radial-gradient(circle at 40% 30%, #ffffff 0%, rgba(255,255,255,0.2) 18%, transparent 40%),
      radial-gradient(circle at 50% 60%, #8c50c8 0%, #3c1e78 55%, #140a28 100%);
  }
  50% {
    background:
      radial-gradient(circle at 40% 30%, #ffffff 0%, rgba(255,255,255,0.25) 18%, transparent 40%),
      radial-gradient(circle at 50% 60%, #a060e8 0%, #4a26a0 55%, #1a0d38 100%);
  }
  100% {
    background:
      radial-gradient(circle at 40% 30%, #ffffff 0%, rgba(255,255,255,0.2) 18%, transparent 40%),
      radial-gradient(circle at 50% 60%, #8c50c8 0%, #3c1e78 55%, #140a28 100%);
  }
}


/* ============================
   6) ПАРАЛЛАКС ДЛЯ ВНУТРЕННЕГО ЯДРА
   ============================ */
.planet-logo::after.inner-parallax {
  animation: innerParallax 14s ease-in-out infinite alternate;
}

@keyframes innerParallax {
  0%   { transform: translate(-50%, -50%) translateX(0px) translateY(0px); }
  50%  { transform: translate(-50%, -50%) translateX(4px) translateY(-3px); }
  100% { transform: translate(-50%, -50%) translateX(-3px) translateY(2px); }
}

@keyframes magneticPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(0,255,136,0.3), 0 0 80px rgba(106,13,173,0.4); }
  50% { box-shadow: 0 0 60px rgba(0,255,136,0.5), 0 0 140px rgba(106,13,173,0.6); }
}


/* ============================
   8) ПЛАВАЮЩИЕ ЧАСТИЦЫ ВОКРУГ ПЛАНЕТЫ
   ============================ */
.planet-logo::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  animation: particleFloat 12s ease-in-out infinite;
  border-radius: 50%;
  mix-blend-mode: screen;
}

@keyframes particleFloat {
  0% { transform: scale(1) translateX(0); opacity: 0.3; }
  50% { transform: scale(1.1) translateX(10px); opacity: 0.6; }
  100% { transform: scale(1) translateX(-6px); opacity: 0.3; }
}


/* ============================
   9) ЭЛЕКТРИЧЕСКИЕ ВСПЫШКИ (нервные импульсы)
   ============================ */
.planet-logo.spark {
  animation: electricSpark 3.5s ease-in-out infinite;
}

@keyframes electricSpark {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.3); }
  50% { filter: brightness(0.8); }
  55% { filter: brightness(1.2); }
}


/* ============================
   10) РЕАКЦИЯ НА HOVER (вспышка при наведении)
   ============================ */
.planet-logo:hover {
  filter: drop-shadow(0 0 30px rgba(255,255,255,0.4))
          drop-shadow(0 0 60px rgba(106,13,173,0.6));
  transform: scale(1.05);
  transition: 0.4s ease;
}

/* =========================
   DOT&CRAFT — УЛУЧШЕННЫЕ КАРТОЧКИ, ДЕТАЛЬ, АДМИНКА, НАВИГАЦИЯ
   ========================= */

/* Карточки услуг — чуть крупнее, акцент на цене */

.services-grid .card-wrap {
    text-decoration: none;
    color: inherit;
}

.service-card {
    transform-style: preserve-3d;
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal);
    opacity: 1 !important;
}

.service-card:hover {
    border-color: var(--primary);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
    background: radial-gradient(circle at top, rgba(94,44,165,0.18), rgba(10,10,25,0.98));
}

.price-pill {
    padding: 6px 14px;
    border-radius: 999px;
    background: radial-gradient(circle at top, rgba(168,139,255,0.25), rgba(20,10,40,0.95));
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.price-pill::before {
    content: "●";
    font-size: 0.6rem;
    color: var(--accent);
}

/* Теги на карточках */

.card-tags span {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.18);
    color: var(--text-sec);
}

.card-tags span i {
    font-size: 0.7rem;
    color: var(--accent);
}

/* Инфо о фильтре по тегу */

.tag-filter-info {
    max-width: 1200px;
    margin: 16px auto 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-sec);
}

.tag-filter-pill {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: 'Share Tech Mono', monospace;
}

.tag-filter-reset {
    color: var(--text-sec);
    text-decoration: none;
    font-size: 0.85rem;
}

.tag-filter-reset:hover {
    color: var(--accent);
}

/* Детальная страница услуги */

.detail-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.detail-main {
    display: flex;
    flex-direction: column;
}

.detail-tags {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.detail-tag-pill {
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text-sec);
    text-decoration: none;
}

.detail-tag-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.detail-note {
    font-size: 0.9rem;
    color: var(--text-sec);
    margin-bottom: 10px;
}

.order-form {
    margin-top: 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 14px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.08);
}

.order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.order-form input,
.order-form textarea {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 10px;
    color: var(--text-main);
    font-family: inherit;
}

.order-form label {
    font-size: 0.85rem;
    color: var(--text-sec);
}

.honeypot-input {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.input-error {
    border-color: var(--danger) !important;
}


/* Навигация — чуть крупнее и разнесена */

.main-nav ul {
    gap: 40px;
}

.nav-link {
    font-size: 1.02rem;
}

/* Соц‑иконки справа — крупнее и под стиль */

.social-dock .dock-btn {
    width: 56px;
    height: 56px;
    font-size: 1.7rem;
    border-radius: 18px;
}

.social-dock .dock-btn:hover {
    box-shadow: 0 0 22px rgba(168,139,255,0.6);
}

/* Админ‑таблица */

.admin-table-wrapper {
    margin-top: 20px;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-table th {
    text-align: left;
    color: var(--text-sec);
    font-weight: 600;
}

.admin-tag-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 0.75rem;
    margin: 1px;
}

.admin-tag-empty {
    color: var(--text-sec);
    font-size: 0.8rem;
}

.admin-img-ok {
    color: var(--accent);
}

.admin-img-miss {
    color: var(--text-sec);
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.btn-danger {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.8rem;
}

.btn-danger:hover {
    background: var(--danger);
    color: #000;
}

/* Адаптив под мобилки */

@media (max-width: 900px) {
    .detail-content-wrapper {
        grid-template-columns: 1fr;
    }
    .order-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .services-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .footer-top-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* === Улучшенные кнопки навигации === */

.main-nav ul {
    display: flex;
    gap: 32px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-sec);
    transition: 0.25s ease;
    position: relative;
}

.nav-link i {
    font-size: 1.1rem;
}

.nav-link:hover {
    color: var(--accent);
    text-shadow: 0 0 12px var(--accent-soft);
    transform: translateY(-2px);
}

.nav-link.active {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--accent);
    color: var(--accent);
    box-shadow: 0 0 12px var(--accent-soft);
}
/* =========================
   SERVICE CARDS — UPGRADE
   ========================= */

.service-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.service-card {
    transform-origin: center center;
    opacity: 1; /* чтобы не конфликтовало с reveal */
}

.service-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
    border-color: var(--primary);
}

.price-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: radial-gradient(circle at top, rgba(94,44,165,0.4), rgba(10,10,25,0.98));
    border: 1px solid rgba(255,255,255,0.18);
    font-family: 'Share Tech Mono', monospace;
}

.price-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-sec);
}

.price-value {
    font-size: 1.2rem;
    font-weight: 800;
}

.price-currency {
    font-size: 0.8rem;
    color: var(--text-sec);
}

/* Теги */

.tag-pill {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text-sec);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: var(--transition-fast);
    background: rgba(5,5,15,0.9);
}

.tag-pill i {
    font-size: 0.7rem;
}

.tag-pill:hover {
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-soft);
}

.tag-pill-outline {
    background: transparent;
}

/* DETAIL TAGS */

.detail-tags {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ORDER FORM */

.order-form {
    margin-top: 16px;
    background: rgba(255,255,255,0.02);
    border-radius: 16px;
    padding: 18px 18px 16px;
    border: 1px solid var(--border);
}

.order-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.order-form .form-group input,
.order-form .form-group textarea {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
}

.order-form-footer {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.order-form-note {
    font-size: 0.8rem;
    color: var(--text-sec);
}

.input-hint {
    font-size: 0.75rem;
    color: var(--text-sec);
}

/* =========================
   ADMIN TABLE
   ========================= */

.admin-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}

.admin-section .section-title {
    margin-bottom: 10px;
}

.admin-table {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: rgba(5,5,15,0.96);
}

.admin-table-header,
.admin-table-row {
    display: grid;
    grid-template-columns: 60px minmax(0, 1.6fr) minmax(0, 1.2fr) 120px minmax(0, 1.4fr) 160px;
    gap: 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
}

.admin-table-header {
    background: rgba(255,255,255,0.03);
    font-weight: 600;
    color: var(--text-sec);
}

.admin-table-row:nth-child(odd) {
    background: rgba(255,255,255,0.01);
}

.admin-table-row:nth-child(even) {
    background: rgba(255,255,255,0.03);
}

.admin-tags-cell {
    font-size: 0.8rem;
    color: var(--text-sec);
}

.admin-actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.btn-small.danger {
    color: var(--danger);
}

.muted {
    color: var(--text-sec);
}

/* =========================
   NAV LINKS — UPGRADE
   ========================= */

.nav-link {
    position: relative;
    padding-bottom: 2px;
}

.nav-link-active,
.nav-link.nav-link-active {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent-soft);
}

.nav-link-active::after {
    width: 100%;
}

.main-nav ul {
    gap: 24px;
}

/* =========================
   FILTER TABS — ANIMATION
   ========================= */

.tab-btn {
    position: relative;
    overflow: hidden;
}

.tab-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.tab-btn:hover::before,
.tab-btn.active::before {
    opacity: 1;
}

.tab-btn:hover {
    transform: translateY(-2px);
}

/* =========================
   SOCIAL DOCK — BIGGER ICONS
   ========================= */

.dock-btn {
    width: 56px;
    height: 56px;
    font-size: 1.7rem;
}

/* =========================
   RESPONSIVE TWEAKS
   ========================= */

@media (max-width: 900px) {
    .admin-table-header,
    .admin-table-row {
        grid-template-columns: 40px minmax(0, 1.6fr) minmax(0, 1.2fr) 100px minmax(0, 1.4fr) 120px;
        font-size: 0.8rem;
    }

    .order-form .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .main-nav ul {
        gap: 14px;
    }
    .nav-link {
        font-size: 0.9rem;
    }
    .footer-top-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   DOT&CRAFT — УЛУЧШЕННЫЕ КАРТОЧКИ УСЛУГ И ПОРТФОЛИО
   ============================================================ */

/* Глобальная анимация появления */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* =========================
   ДЕТАЛЬНАЯ СТРАНИЦА ПОРТФОЛИО
   ========================= */

.detail-container {
    max-width: 1200px;
    margin: 0 auto;
}

.detail-content-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 40px;
    margin-top: 20px;
}

.detail-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.6);
}

/* Теги */
.detail-tags .tag-pill {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Заголовок */
.main-title {
    font-size: 2.4rem;
    margin-bottom: 12px;
}

/* =========================
   RICH CONTENT (HTML, VIDEO, IFRAME)
   ========================= */

.full-text-content {
    margin-top: 30px;
    padding: 26px;
    background: rgba(255,255,255,0.03);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    line-height: 1.75;
    font-size: 1.1rem;
    color: var(--text-main);
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

/* Изображения */
.full-text-content img {
    width: 100%;
    border-radius: 18px;
    margin: 24px 0;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}

/* Видео */
.full-text-content video {
    width: 100%;
    border-radius: 18px;
    margin: 24px 0;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}

/* Iframe */
.full-text-content iframe {
    width: 100%;
    min-height: 380px;
    border-radius: 18px;
    margin: 24px 0;
    border: none;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}

/* Галерея */
.full-text-content .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.full-text-content .gallery img {
    border-radius: 16px;
    transition: 0.3s ease;
}

.full-text-content .gallery img:hover {
    transform: scale(1.05);
}

/* Заголовки */
.full-text-content h2,
.full-text-content h3 {
    margin-top: 30px;
    margin-bottom: 12px;
    color: var(--accent);
    text-shadow: 0 0 12px var(--accent-soft);
}

/* =========================
   КАРТОЧКИ УСЛУГ (улучшенные)
   ========================= */

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

.service-card {
    background: rgba(10,10,30,0.9);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 26px;
    min-height: 420px;
    transition: 0.35s ease;
    box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}

.service-card:hover {
    transform: translateY(-10px) scale(1.03);
    border-color: var(--primary);
    box-shadow: 0 28px 60px rgba(106,13,173,0.35);
}

.service-title {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.short-desc {
    font-size: 1rem;
    color: var(--text-sec);
    margin-bottom: 16px;
}

/* Цена */
.price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent);
    text-shadow: 0 0 12px var(--accent-soft);
}

/* =========================
   ДЕТАЛЬНАЯ СТРАНИЦА УСЛУГ
   ========================= */

.price-large {
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: var(--accent);
    text-shadow: 0 0 12px var(--accent-soft);
}

.full-text-content ul,
.full-text-content ol {
    margin-left: 20px;
}

.services-grid {
    margin-top: 60px; /* смещаем ниже */
}


/* =========================
   АНИМАЦИЯ ПО БУКВАМ
   ========================= */

.letter-animate span {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    animation: letterFadeUp 0.45s ease forwards;
}

@keyframes letterFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 40px;
  margin-top: 60px;
  padding: 0 20px;
  max-width: 1400px;
  margin-inline: auto;
}

.portfolio-card {
  background: rgba(10,10,30,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 26px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  transition: 0.35s ease;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}

.portfolio-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 28px 60px rgba(0,255,200,0.25);
  border-color: var(--accent);
}

.portfolio-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

.portfolio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-sec);
  margin-bottom: 10px;
}

.portfolio-title {
  font-size: 1.6rem;
  margin-bottom: 10px;
  color: var(--text-main);
}

.portfolio-short {
  font-size: 1rem;
  color: var(--text-sec);
  margin-bottom: 16px;
}

.card-tags {
  margin-bottom: 16px;
}

.card-tags .tag-pill {
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--accent);
  margin-right: 6px;
  display: inline-block;
}

.card-bottom {
  margin-top: auto;
}

.card-bottom .btn-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

/* === PORTFOLIO CARDS — CLEAN & ORDERED LIKE SERVICES === */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 40px;
    margin-top: 60px;
    padding: 0 20px;
    max-width: 1400px;
    margin-inline: auto;
    box-sizing: border-box;
}

.portfolio-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.portfolio-card {
    background: rgba(10,10,30,0.9);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 26px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    transition: 0.35s ease;
    box-shadow: 0 18px 40px rgba(0,0,0,0.6);
    transform-origin: center center;
}

.portfolio-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 28px 60px rgba(0,255,200,0.25);
    border-color: var(--accent);
}

.portfolio-image {
    margin-bottom: 18px;
}

.portfolio-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

.portfolio-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-sec);
    margin-bottom: 10px;
}

.portfolio-title {
    font-size: 1.6rem;
    margin-bottom: 10px;
    color: var(--text-main);
}

.portfolio-short {
    font-size: 1rem;
    color: var(--text-sec);
    margin-bottom: 16px;
    line-height: 1.5;
}

.card-tags {
    margin-bottom: 16px;
}

.card-tags .tag-pill {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: var(--accent);
    margin-right: 6px;
    display: inline-block;
    transition: background 0.3s ease;
}

.card-tags .tag-pill:hover {
    background: rgba(255,255,255,0.12);
}

.card-bottom {
    margin-top: auto;
}

.card-bottom .btn-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent-soft);
    transition: color 0.3s ease;
}

.card-bottom .btn-text:hover {
    color: var(--primary);
}

@media (max-width: 700px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-title {
        font-size: 1.4rem;
    }

    .portfolio-short {
        font-size: 0.95rem;
    }
}

/* === PORTFOLIO / SERVICE INTRO — PREMIUM DOT&CRAFT STYLE === */

.service-intro,
.portfolio-intro {
  max-width: 900px;
  margin: 0 auto 50px;
  padding: 28px 32px;
  background: linear-gradient(145deg, rgba(20,20,40,0.55), rgba(10,10,25,0.55));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
  color: var(--text-sec);
  line-height: 1.75;
  font-size: 1.15rem;
  position: relative;
  overflow: hidden;
}

/* Лёгкое свечение внутри блока */
.service-intro::before,
.portfolio-intro::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 70%);
  opacity: 0.35;
  pointer-events: none;
}

/* Анимация плавного появления */
.service-intro.fade-up,
.portfolio-intro.fade-up {
  animation: fadeUpIntro 0.9s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes fadeUpIntro {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Текстовые элементы */
.service-intro p,
.portfolio-intro p {
  margin-bottom: 14px;
}

.service-intro p:last-child,
.portfolio-intro p:last-child {
  margin-bottom: 0;
}

/* === Оутро партфолио === */
.why-us {
  text-align: center;
  margin-top: 80px;
}

.why-us .section-title {
  font-size: 2rem;
  margin-bottom: 40px;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.why-item {
  background: rgba(10,10,30,0.9);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  transition: 0.3s ease;
}

.why-item:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 20px 50px rgba(0,255,200,0.2);
}

.why-item h3 {
  margin-bottom: 10px;
  font-size: 1.3rem;
  color: var(--accent);
}
/* =========================================================
   HEADER REWORK — DOT&CRAFT PLANET LOGO / NO LOGIN / RESPONSIVE
   ========================================================= */

.site-header {
    padding: 10px 0;
    background: linear-gradient(180deg, rgba(5, 6, 20, 0.96), rgba(7, 8, 28, 0.92));
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(168, 139, 255, 0.16);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
}

.site-header::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: min(1180px, calc(100% - 80px));
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(168, 139, 255, 0.4),
        rgba(255, 255, 255, 0.24),
        rgba(168, 139, 255, 0.4),
        transparent
    );
    pointer-events: none;
}

.header-content {
    position: relative;
    max-width: 1400px;
    min-height: 68px;
    gap: 24px;
}

.brand-premium {
    min-width: 0;
    flex-shrink: 0;
    gap: 14px;
    transition: transform 0.25s ease;
}

.brand-premium:hover {
    transform: translateY(-1px);
}

.logo-box-planet {
    width: 60px;
    height: 60px;
    border: 1px solid rgba(168, 139, 255, 0.28);
    background:
        radial-gradient(circle at 30% 15%, rgba(255,255,255,0.14), transparent 34%),
        radial-gradient(circle at 70% 80%, rgba(168,139,255,0.22), transparent 45%),
        linear-gradient(180deg, rgba(18, 10, 34, 0.98), rgba(10, 7, 23, 0.98));
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 0 22px rgba(168, 139, 255, 0.22),
        0 0 40px rgba(94, 44, 165, 0.18);
}

.brand-logo-img {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter:
        drop-shadow(0 0 8px rgba(168, 139, 255, 0.28))
        drop-shadow(0 0 18px rgba(94, 44, 165, 0.18));
    animation: brandPlanetFloat 7s ease-in-out infinite;
}

.logo-box-planet .logo-pulse {
    background: radial-gradient(circle, rgba(168,139,255,0.26), transparent 65%);
    animation: brandPulse 3.8s ease-out infinite;
}

.logo-orbit-ring {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    pointer-events: none;
    opacity: 0.8;
}

.logo-orbit-ring::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border-top: 1px solid rgba(255,255,255,0.28);
    border-right: 1px solid rgba(168,139,255,0.18);
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    animation: logoOrbitSpin 9s linear infinite;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brand-title {
    margin: 0;
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
    text-shadow: 0 0 16px rgba(168, 139, 255, 0.15);
}

.brand .subtitle {
    margin-top: 4px;
    color: #9f86ff;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}

.main-nav-premium {
    margin-left: auto;
}

.main-nav-premium ul {
    display: flex;
    align-items: center;
    gap: 12px;
}

.main-nav-premium li {
    list-style: none;
}

.main-nav-premium .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    color: rgba(224, 223, 255, 0.74);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    overflow: hidden;
    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    border: 1px solid transparent;
    background: transparent;
}

.main-nav-premium .nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(168,139,255,0.16), rgba(255,255,255,0.02));
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.main-nav-premium .nav-link::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 8px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(168,139,255,0.0), rgba(168,139,255,0.95), rgba(168,139,255,0.0));
    transform: scaleX(0.35);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.main-nav-premium .nav-link:hover {
    color: #ffffff;
    transform: translateY(-1px);
    border-color: rgba(168, 139, 255, 0.18);
    background: rgba(255,255,255,0.03);
    box-shadow: 0 10px 26px rgba(94, 44, 165, 0.12);
}

.main-nav-premium .nav-link:hover::before {
    opacity: 1;
}

.main-nav-premium .nav-link:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.main-nav-premium .nav-link-active,
.main-nav-premium .nav-link.nav-link-active {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
    border-color: rgba(168, 139, 255, 0.24);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.03) inset,
        0 8px 26px rgba(94, 44, 165, 0.14);
}

.main-nav-premium .nav-link-active::before,
.main-nav-premium .nav-link.nav-link-active::before {
    opacity: 1;
}

.main-nav-premium .nav-link-active::after,
.main-nav-premium .nav-link.nav-link-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.nav-link-text {
    position: relative;
    z-index: 2;
}

.header-actions {
    display: none !important;
}

.nav-toggle-input {
    display: none;
}

.nav-toggle-btn {
    display: none;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border: 1px solid rgba(168, 139, 255, 0.18);
    background: rgba(255,255,255,0.03);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: 0.25s ease;
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

.nav-toggle-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(168, 139, 255, 0.28);
}

.nav-toggle-btn span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: #ffffff;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* desktop nav polish */
@media (min-width: 901px) {
    .main-nav-premium {
        display: flex !important;
    }
}

/* tablet */
@media (max-width: 1100px) {
    .header-content {
        padding: 0 22px;
    }

    .brand-title {
        font-size: 1.65rem;
    }

    .main-nav-premium .nav-link {
        min-height: 42px;
        padding: 0 14px;
        font-size: 0.95rem;
    }
}

/* mobile */
@media (max-width: 900px) {
    .cyber-sidebar {
        display: none;
    }

    .site-header {
        padding: 10px 0;
    }

    .header-content {
        min-height: 72px;
        padding: 0 16px;
        gap: 14px;
        flex-wrap: wrap;
    }

    .brand-premium {
        flex: 1 1 auto;
        min-width: 0;
        gap: 12px;
    }

    .logo-box-planet {
        width: 54px;
        height: 54px;
    }

    .brand-logo-img {
        width: 36px;
        height: 36px;
    }

    .brand-title {
        font-size: 1.5rem;
    }

    .brand .subtitle {
        font-size: 0.72rem;
    }

    .nav-toggle-btn {
        display: inline-flex;
        flex: 0 0 auto;
        z-index: 60;
    }

    .main-nav-premium {
        width: 100%;
        order: 3;
        display: block;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: max-height 0.32s ease, opacity 0.25s ease, transform 0.25s ease;
    }

    .main-nav-premium ul {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 12px;
        padding: 14px;
        border-radius: 18px;
        border: 1px solid rgba(168, 139, 255, 0.14);
        background: linear-gradient(180deg, rgba(14,10,30,0.96), rgba(9,7,22,0.96));
        box-shadow:
            0 18px 34px rgba(0,0,0,0.28),
            0 0 0 1px rgba(255,255,255,0.03) inset;
    }

    .main-nav-premium .nav-link {
        width: 100%;
        justify-content: flex-start;
        min-height: 48px;
        padding: 0 16px;
        border-radius: 14px;
    }

    .nav-toggle-input:checked ~ .main-nav-premium {
        max-height: 420px;
        opacity: 1;
        transform: translateY(0);
    }

    .nav-toggle-input:checked + .nav-toggle-btn span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle-input:checked + .nav-toggle-btn span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle-input:checked + .nav-toggle-btn span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .global-bg-layer {
        overflow: hidden;
    }
}

@media (max-width: 560px) {
    .header-content {
        min-height: 68px;
        padding: 0 12px;
    }

    .brand-title {
        font-size: 1.38rem;
    }

    .brand .subtitle {
        font-size: 0.68rem;
    }

    .logo-box-planet {
        width: 50px;
        height: 50px;
    }

    .brand-logo-img {
        width: 33px;
        height: 33px;
    }

    .nav-toggle-btn {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .main-nav-premium ul {
        padding: 12px;
    }

    .main-nav-premium .nav-link {
        min-height: 46px;
        font-size: 0.95rem;
    }

    .footer-top-actions,
    .contact-row,
    .contact-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-top-actions .btn-main,
    .footer-top-actions .btn-outline,
    .contact-row .btn-main,
    .contact-row .btn-outline,
    .contact-actions .about-btn {
        width: 100%;
        justify-content: center;
    }
}

@keyframes brandPlanetFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-1.5px) scale(1.02);
    }
}

@keyframes brandPulse {
    0% {
        transform: scale(0.5);
        opacity: 0.45;
    }
    70% {
        transform: scale(1.45);
        opacity: 0;
    }
    100% {
        transform: scale(1.55);
        opacity: 0;
    }
}

@keyframes logoOrbitSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* =========================================================
   SUPPORT WIDGET — DOT&CRAFT PREMIUM
   ========================================================= */

.right-sidebar {
    pointer-events: none;
}

.support-widget {
    position: absolute;
    right: 14px;
    bottom: 34px;
    width: 380px;
    max-width: min(380px, calc(100vw - 24px));
    pointer-events: auto;
    z-index: 80;
}

.support-widget__trigger {
    width: 100%;
    border: 1px solid rgba(168, 139, 255, 0.18);
    border-radius: 22px;
    background:
        radial-gradient(circle at top left, rgba(168,139,255,0.16), transparent 34%),
        linear-gradient(180deg, rgba(19,12,38,0.96), rgba(10,8,24,0.96));
    backdrop-filter: blur(16px);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 16px;
    cursor: pointer;
    box-shadow:
        0 18px 44px rgba(0,0,0,0.4),
        0 0 0 1px rgba(255,255,255,0.03) inset;
    transition: 0.28s ease;
    position: relative;
    overflow: hidden;
}

.support-widget__trigger:hover {
    transform: translateY(-2px) scale(1.01);
    border-color: rgba(168, 139, 255, 0.28);
    box-shadow:
        0 24px 54px rgba(0,0,0,0.42),
        0 0 24px rgba(168,139,255,0.18);
}

.support-widget__trigger::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    transform: translateX(-100%);
    animation: supportTriggerSweep 8s linear infinite;
    pointer-events: none;
}

.support-widget__trigger-ring {
    position: absolute;
    width: 72px;
    height: 72px;
    right: -12px;
    top: -12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168,139,255,0.16), transparent 70%);
    pointer-events: none;
}

.support-widget__trigger-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2f7bff, #8b4dff);
    box-shadow: 0 12px 24px rgba(94,44,165,0.28);
    flex: 0 0 54px;
    font-size: 20px;
    position: relative;
    z-index: 2;
}

.support-widget__trigger-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    position: relative;
    z-index: 2;
}

.support-widget__trigger-text strong {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
}

.support-widget__trigger-text small {
    font-size: 12px;
    color: rgba(220,226,255,0.74);
}

.support-widget__panel {
    margin-top: 12px;
    border-radius: 26px;
    border: 1px solid rgba(168,139,255,0.16);
    background:
        radial-gradient(circle at top left, rgba(168,139,255,0.12), transparent 34%),
        linear-gradient(180deg, rgba(18,12,36,0.98), rgba(8,8,20,0.98));
    box-shadow:
        0 22px 60px rgba(0,0,0,0.46),
        0 0 0 1px rgba(255,255,255,0.03) inset;
    backdrop-filter: blur(18px);
    overflow: hidden;
    transform-origin: bottom right;
    transition: 0.32s ease;
    max-height: 760px;
    opacity: 1;
    transform: scale(1);
}

.support-widget.is-collapsed .support-widget__panel {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transform: scale(0.96);
    pointer-events: none;
    border-width: 0;
}

.support-widget__header {
    padding: 18px 18px 14px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.support-widget__header-info h3 {
    margin: 8px 0 6px;
    font-size: 20px;
    font-weight: 900;
    color: #fff;
}

.support-widget__header-info p {
    margin: 0;
    color: rgba(220,226,255,0.72);
    line-height: 1.55;
    font-size: 14px;
}

.support-widget__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(132,145,255,0.16);
    background: rgba(255,255,255,0.04);
    color: #b8c4ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.support-widget__status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8bffb7;
    box-shadow: 0 0 12px rgba(139,255,183,0.7);
    animation: supportDotPulse 1.8s ease-in-out infinite;
}

.support-widget__close {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    color: #fff;
    cursor: pointer;
    transition: 0.25s ease;
}

.support-widget__close:hover {
    background: rgba(255,255,255,0.08);
    transform: rotate(90deg);
}

.support-widget__tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px 18px 0;
}

.support-tab {
    min-height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(132,144,255,0.16);
    background: rgba(255,255,255,0.04);
    color: #d8deff;
    font-weight: 700;
    cursor: pointer;
    transition: 0.24s ease;
}

.support-tab:hover {
    background: rgba(255,255,255,0.07);
}

.support-tab.is-active {
    color: #fff;
    background: linear-gradient(90deg, #2f7bff, #8b4dff);
    box-shadow: 0 10px 24px rgba(80, 83, 255, 0.2);
}

.support-widget__body {
    padding: 18px;
}

.support-pane {
    display: none;
}

.support-pane.is-active {
    display: block;
    animation: supportPaneFade 0.28s ease;
}

.support-widget__intro-bubble {
    padding: 14px 16px;
    border-radius: 18px 18px 18px 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(132,145,255,0.12);
    color: rgba(223,229,255,0.82);
    line-height: 1.55;
    font-size: 14px;
}

.support-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    margin-bottom: 18px;
}

.support-chip {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(132,145,255,0.14);
    background: rgba(255,255,255,0.04);
    color: #d8deff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.22s ease;
}

.support-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(168,139,255,0.3);
    background: rgba(255,255,255,0.07);
}

.support-form {
    display: grid;
    gap: 14px;
}

.support-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.support-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.support-field label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(203,213,255,0.64);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.support-field input,
.support-field textarea {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(132,145,255,0.14);
    background: rgba(255,255,255,0.04);
    color: #fff;
    padding: 13px 14px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: 0.24s ease;
}

.support-field input:focus,
.support-field textarea:focus {
    border-color: rgba(168,139,255,0.28);
    box-shadow: 0 0 0 3px rgba(168,139,255,0.08);
    background: rgba(255,255,255,0.06);
}

.support-form__footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.support-submit-btn {
    min-height: 52px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(90deg, #2f7bff, #8b4dff);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 14px 30px rgba(75, 84, 255, 0.22);
    transition: 0.25s ease;
}

.support-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(75, 84, 255, 0.3);
}

.support-form__note {
    color: rgba(203,213,255,0.62);
    font-size: 12px;
    line-height: 1.45;
}

.support-form__status {
    min-height: 22px;
    font-size: 13px;
    color: #dbe3ff;
}

.support-form__status.is-success {
    color: #8bffb7;
}

.support-form__status.is-error {
    color: #ff90b7;
}

.support-faq-list {
    display: grid;
    gap: 10px;
}

.support-faq-item {
    border-radius: 16px;
    border: 1px solid rgba(132,145,255,0.12);
    background: rgba(255,255,255,0.04);
    overflow: hidden;
}

.support-faq-question {
    width: 100%;
    min-height: 54px;
    text-align: left;
    padding: 0 16px;
    background: transparent;
    border: 0;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    position: relative;
}

.support-faq-question::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #aab7ff;
    font-size: 18px;
    transition: 0.25s ease;
}

.support-faq-item.is-open .support-faq-question::after {
    transform: translateY(-50%) rotate(45deg);
}

.support-faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    color: rgba(220,226,255,0.74);
    line-height: 1.55;
    transition: max-height 0.28s ease, padding 0.28s ease;
}

.support-faq-item.is-open .support-faq-answer {
    max-height: 220px;
    padding: 0 16px 16px;
}

.support-contacts {
    display: grid;
    gap: 10px;
}

.support-contact-card {
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 68px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(132,145,255,0.14);
    background: rgba(255,255,255,0.04);
    text-decoration: none;
    color: #fff;
    transition: 0.24s ease;
}

.support-contact-card:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.06);
}

.support-contact-card i {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 20px;
    color: #fff;
    background: linear-gradient(135deg, #2f7bff, #8b4dff);
}

.support-contact-card strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
}

.support-contact-card span {
    display: block;
    margin-top: 2px;
    color: rgba(220,226,255,0.68);
    font-size: 13px;
}

.support-contact-card--tg:hover {
    border-color: rgba(36,161,222,0.4);
}

.support-contact-card--vk:hover {
    border-color: rgba(0,119,255,0.4);
}

.support-contact-card--mail:hover {
    border-color: rgba(168,139,255,0.4);
}

@media (max-width: 1200px) {
    .support-widget {
        right: 10px;
        bottom: 18px;
    }
}

@media (max-width: 900px) {
    .right-sidebar {
        display: block !important;
        width: auto;
        top: auto;
        bottom: 0;
        right: 0;
        left: auto;
    }

    .support-widget {
        position: fixed;
        right: 10px;
        left: 10px;
        bottom: 10px;
        width: auto;
        max-width: none;
    }

    .support-widget__panel {
        max-height: min(78vh, 760px);
    }
}

@media (max-width: 640px) {
    .support-widget__trigger {
        padding: 14px;
        border-radius: 20px;
    }

    .support-widget__trigger-text strong {
        font-size: 15px;
    }

    .support-widget__trigger-text small {
        font-size: 11px;
    }

    .support-form__grid {
        grid-template-columns: 1fr;
    }

    .support-widget__tabs {
        grid-template-columns: 1fr;
    }

    .support-tab {
        min-height: 40px;
    }

    .support-widget__body {
        padding: 14px;
    }
}

@keyframes supportTriggerSweep {
    100% {
        transform: translateX(100%);
    }
}

@keyframes supportPaneFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes supportDotPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.75;
    }
    50% {
        transform: scale(1.35);
        opacity: 1;
    }
}
/* =========================
   SUPPORT WIDGET MOBILE FIX
   ========================= */

.support-widget__panel {
    display: flex;
    flex-direction: column;
}

.support-widget__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 139, 255, 0.35) transparent;
}

.support-widget__body::-webkit-scrollbar {
    width: 6px;
}

.support-widget__body::-webkit-scrollbar-thumb {
    background: rgba(168, 139, 255, 0.35);
    border-radius: 999px;
}

.support-form {
    padding-bottom: 8px;
}

.support-form__footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 4px;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(9,8,20,0), rgba(9,8,20,0.96) 22%, rgba(9,8,20,0.98) 100%);
}

.support-submit-btn {
    width: 100%;
    min-height: 54px;
}

.support-form__status {
    margin-top: 6px;
}

@media (max-width: 900px) {
    .support-widget {
        right: 10px;
        left: 10px;
        bottom: 10px;
        width: auto;
        max-width: none;
    }

    .support-widget__panel {
        max-height: calc(100dvh - 92px);
        min-height: 420px;
    }

    .support-widget__body {
        padding-bottom: 10px;
    }
}

@media (max-width: 640px) {
    .support-widget {
        right: 8px;
        left: 8px;
        bottom: 8px;
    }

    .support-widget__panel {
        max-height: calc(100dvh - 86px);
        min-height: 400px;
        border-radius: 22px;
    }

    .support-widget__header {
        padding: 16px 14px 12px;
    }

    .support-widget__tabs {
        padding: 12px 14px 0;
    }

    .support-widget__body {
        padding: 14px;
    }

    .support-form__footer {
        padding-bottom: 4px;
    }

    .support-submit-btn {
        min-height: 52px;
        font-size: 14px;
    }
}
/* ============================================================
   CONSULT PREMIUM SECTION — HOME / CATALOG / PORTFOLIO
   ============================================================ */

.consult-premium-section {
    padding-top: 30px;
    padding-bottom: 10px;
}

.consult-premium-section--compact {
    padding-top: 60px;
}

.consult-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 24px;
}

.consult-premium-card {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 24px;
    padding: 28px;
    border-radius: 26px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(168,139,255,0.18);
    background:
        radial-gradient(circle at top left, rgba(94,44,165,0.22), transparent 34%),
        radial-gradient(circle at bottom right, rgba(168,139,255,0.12), transparent 32%),
        linear-gradient(180deg, rgba(18,13,36,0.98), rgba(9,8,21,0.98));
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}

.consult-premium-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(95deg, transparent, rgba(255,255,255,0.05), transparent);
    transform: translateX(-100%);
    animation: consultSweep 8s linear infinite;
    pointer-events: none;
}

@keyframes consultSweep {
    100% {
        transform: translateX(100%);
    }
}

.consult-premium-copy,
.consult-form {
    position: relative;
    z-index: 2;
}

.consult-premium-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.consult-premium-badge {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(168,139,255,0.18);
    color: #b8c2ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    width: fit-content;
}

.consult-premium-copy h3 {
    margin: 18px 0 12px;
    font-size: clamp(24px, 3vw, 40px);
    line-height: 1.06;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.03em;
}

.consult-premium-copy p {
    margin: 0;
    color: rgba(224,223,255,0.76);
    line-height: 1.75;
    font-size: 15px;
}

.consult-benefits {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: grid;
    gap: 12px;
}

.consult-benefits li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: rgba(235,238,255,0.84);
    line-height: 1.6;
}

.consult-benefits i {
    color: #a88bff;
    margin-top: 2px;
}

.consult-form {
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(168,139,255,0.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.consult-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.consult-field {
    position: relative;
    min-height: 62px;
    border-radius: 16px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(168,139,255,0.14);
    transition: 0.25s ease;
    overflow: hidden;
}

.consult-field:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.055);
    border-color: rgba(168,139,255,0.22);
}

.consult-field:focus-within {
    border-color: rgba(168,139,255,0.35);
    box-shadow: 0 0 0 3px rgba(168,139,255,0.08);
}

.consult-field i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #a88bff;
    font-size: 15px;
    pointer-events: none;
}

.consult-field input,
.consult-field textarea {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    padding-left: 46px;
    padding-right: 16px;
}

.consult-field input {
    min-height: 62px;
}

.consult-field.textarea {
    min-height: 165px;
    margin-top: 14px;
}

.consult-field.textarea i {
    top: 20px;
    transform: none;
}

.consult-field textarea {
    min-height: 165px;
    resize: vertical;
    padding-top: 16px;
    padding-bottom: 16px;
    line-height: 1.72;
}

.consult-field input::placeholder,
.consult-field textarea::placeholder {
    color: rgba(219,224,255,0.46);
}

.consult-btn {
    width: 100%;
    min-height: 58px;
    margin-top: 18px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(90deg, #5f80ff 0%, #8b4dff 100%);
    color: #ffffff;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(88, 90, 255, 0.22);
    transition: 0.24s ease;
}

.consult-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(88, 90, 255, 0.32);
    filter: brightness(1.05);
}

.consult-btn:disabled {
    opacity: 0.75;
    cursor: not-allowed;
    transform: none;
}

.consult-note {
    margin-top: 14px;
    text-align: center;
    color: rgba(205,214,255,0.66);
    font-size: 13px;
}

.consult-status {
    min-height: 22px;
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
}

.consult-status.is-success {
    color: #8ff7b6;
}

.consult-status.is-error {
    color: #ff9ec1;
}

/* =========================
   Extra layout polish
   ========================= */

.portfolio-premium-img .no-img-placeholder,
.portfolio-image .no-img-placeholder {
    min-height: 240px;
    border-radius: 18px;
}

@media (max-width: 1100px) {
    .consult-premium-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .consult-form-grid {
        grid-template-columns: 1fr;
    }

    .consult-premium-card {
        padding: 18px;
        border-radius: 22px;
    }

    .consult-form {
        padding: 16px;
    }
}

@media (max-width: 640px) {
    .consult-premium-section {
        padding-top: 24px;
    }

    .consult-premium-copy h3 {
        font-size: 28px;
    }

    .consult-field,
    .consult-field input {
        min-height: 56px;
    }

    .consult-field input,
    .consult-field textarea {
        font-size: 14px;
    }

    .consult-field.textarea,
    .consult-field.textarea textarea {
        min-height: 148px;
    }

    .consult-btn {
        min-height: 54px;
        font-size: 15px;
    }

    .consult-note {
        font-size: 12px;
    }
}
/* =========================================================
   SUPPORT WIDGET — HARD MOBILE POSITION FIX
   вставить в САМЫЙ КОНЕЦ style.css
   ========================================================= */

@media (max-width: 900px) {
    .right-sidebar {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        pointer-events: none !important;
        z-index: 120 !important;
        display: block !important;
        overflow: visible !important;
    }

    .right-sidebar .support-widget {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        z-index: 121 !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .right-sidebar .support-widget.is-collapsed .support-widget__panel {
        display: none !important;
    }

    .right-sidebar .support-widget:not(.is-collapsed) .support-widget__trigger {
        display: none !important;
    }

    .right-sidebar .support-widget.is-collapsed .support-widget__trigger {
        display: flex !important;
        width: 100% !important;
    }

    .right-sidebar .support-widget__panel {
        width: 100% !important;
        max-height: min(78dvh, 720px) !important;
        min-height: 420px !important;
        overflow: hidden !important;
    }
}

@media (max-width: 640px) {
    .right-sidebar .support-widget {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    }

    .right-sidebar .support-widget__panel {
        max-height: min(76dvh, 680px) !important;
        min-height: 380px !important;
        border-radius: 22px !important;
    }

    .right-sidebar .support-widget__trigger {
        min-height: 74px !important;
        border-radius: 22px !important;
    }
}
/* =========================
   CLEAN PREMIUM FOOTER
   ========================= */

.footer-clean {
    padding: 120px 40px 60px;
    background: #050510;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-wrap {
    max-width: 1400px;
    margin: 0 auto;
}

/* =========================
   CTA
   ========================= */

.footer-cta {
    text-align: center;
    margin-bottom: 100px;
}

.footer-cta h2 {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 16px;
}

.footer-cta p {
    font-size: 18px;
    color: #9aa0b5;
    margin-bottom: 30px;
}

/* кнопки */
.footer-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-main {
    padding: 14px 26px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-main:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-3px);
}

/* =========================
   GRID
   ========================= */

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: 80px;
}

/* =========================
   BRAND
   ========================= */

.footer-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-logo img {
    width: 52px;
    height: 52px;
    object-fit: contain;

    /* ЖЕСТКО УБИРАЕМ ВСЕ ФИЛЬТРЫ */
    filter: none !important;
    mix-blend-mode: normal !important;
}

.footer-logo strong {
    font-size: 18px;
}

.footer-logo span {
    font-size: 14px;
    color: #8b8fa3;
}

.footer-brand p {
    margin-top: 20px;
    font-size: 16px;
    color: #9aa0b5;
    line-height: 1.7;
    max-width: 420px;
}

/* =========================
   NAV
   ========================= */

.footer-nav h4 {
    font-size: 16px;
    margin-bottom: 18px;
}

.footer-nav a {
    display: block;
    font-size: 16px;
    color: #8f93a8;
    margin-bottom: 12px;
    text-decoration: none;
    transition: 0.2s;
}

.footer-nav a:hover {
    color: #fff;
}

/* =========================
   CONTACTS
   ========================= */

.footer-contacts h4 {
    font-size: 16px;
    margin-bottom: 18px;
}

.contact-item {
    display: block;
    font-size: 16px;
    color: #8f93a8;
    margin-bottom: 12px;
    text-decoration: none;
    transition: 0.2s;
}

.contact-item:hover {
    color: #fff;
}

/* =========================
   BOTTOM
   ========================= */

.footer-bottom {
    margin-top: 80px;
    text-align: center;
    font-size: 14px;
    color: #666a80;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 900px) {

    .footer-clean {
        padding: 80px 20px 40px;
    }

    .footer-cta h2 {
        font-size: 28px;
    }

    .footer-cta p {
        font-size: 15px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-brand p {
        margin: 20px auto;
    }
}