@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* =========================================================================
   GMS — dark techno redesign of the PUBLIC site only.
   Every rule is scoped under body.gms-public so the admin control panel
   (modules/control), which reuses the same TopMenu widget/footer markup
   and the same AppAsset bundle, keeps its original look untouched.
   ========================================================================= */

body.gms-public {
    --gms-bg: #080b12;
    --gms-bg-soft: #0b0f1a;
    --gms-surface: #0f1524;
    --gms-surface-2: #141c30;
    --gms-surface-hover: #182038;
    --gms-border: rgba(148, 163, 184, .14);
    --gms-border-strong: rgba(148, 163, 184, .28);
    --gms-ink: #eef1f8;
    --gms-ink-soft: #c7cee0;
    --gms-muted: #8791a8;

    --gms-primary: #4f7dfb;
    --gms-primary-2: #8b5cf6;
    --gms-primary-dark: #3660e0;
    --gms-primary-light: rgba(79, 125, 251, .14);

    --gms-accent: #2fe6a8;
    --gms-accent-light: rgba(47, 230, 168, .14);

    --gms-danger: #ff5d78;
    --gms-warning: #ffb545;

    --gms-radius-sm: 10px;
    --gms-radius: 18px;
    --gms-radius-lg: 26px;

    --gms-shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);
    --gms-shadow: 0 18px 44px rgba(0, 0, 0, .5);
    --gms-shadow-lg: 0 30px 70px rgba(0, 0, 0, .55);
    --gms-glow: 0 0 0 1px rgba(79, 125, 251, .35), 0 18px 46px rgba(79, 125, 251, .22);
    --gms-glow-accent: 0 0 0 1px rgba(47, 230, 168, .3), 0 16px 40px rgba(47, 230, 168, .18);

    --gms-gradient: linear-gradient(135deg, var(--gms-primary), var(--gms-primary-2));
    --gms-gradient-accent: linear-gradient(135deg, var(--gms-accent), var(--gms-primary));
    --gms-font-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
}

/* ===== Base / background ===== */
body.gms-public {
    background-color: var(--gms-bg);
    color: var(--gms-ink);
    background-image:
        radial-gradient(60% 46% at 82% 0%, rgba(139, 92, 246, .16) 0%, rgba(139, 92, 246, 0) 60%),
        radial-gradient(46% 40% at 8% 18%, rgba(79, 125, 251, .14) 0%, rgba(79, 125, 251, 0) 60%),
        radial-gradient(40% 34% at 90% 70%, rgba(47, 230, 168, .08) 0%, rgba(47, 230, 168, 0) 60%),
        repeating-linear-gradient(0deg, rgba(148, 163, 184, .035) 0, rgba(148, 163, 184, .035) 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(90deg, rgba(148, 163, 184, .035) 0, rgba(148, 163, 184, .035) 1px, transparent 1px, transparent 40px);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}

/* The template's "boxed" layout mode paints #layout-wrapper near-white
   via an ID selector (body[data-layout-size=boxed] #layout-wrapper) —
   override it here or the hero/features sections show through white. */
body.gms-public #layout-wrapper {
    background-color: var(--gms-bg);
    box-shadow: none;
}

body.gms-public .main-content,
body.gms-public .page-content {
    background: transparent;
}

body.gms-public h1, body.gms-public h2, body.gms-public h3,
body.gms-public h4, body.gms-public h5, body.gms-public h6 {
    font-family: var(--gms-font-display);
    color: var(--gms-ink);
    letter-spacing: -.2px;
}

body.gms-public p { color: var(--gms-ink-soft); }

body.gms-public a:not(.btn) { color: var(--gms-primary); }
body.gms-public a:not(.btn):hover { color: var(--gms-accent); }

body.gms-public .text-muted { color: var(--gms-muted) !important; }
body.gms-public hr { border-color: var(--gms-border); opacity: 1; }

body.gms-public code {
    background: rgba(148, 163, 184, .12);
    color: #ffd479;
    padding: .15em .4em;
    border-radius: 6px;
    font-size: .9em;
}

body.gms-public::-webkit-scrollbar { width: 10px; height: 10px; }
body.gms-public::-webkit-scrollbar-track { background: var(--gms-bg); }
body.gms-public::-webkit-scrollbar-thumb {
    background: var(--gms-surface-2);
    border: 2px solid var(--gms-bg);
    border-radius: 20px;
}
body.gms-public::-webkit-scrollbar-thumb:hover { background: var(--gms-primary); }

body.gms-public ::selection {
    background: var(--gms-primary);
    color: #fff;
}

/* ===== Header ===== */
body.gms-public #page-topbar {
    background: rgba(8, 11, 18, .78) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--gms-border) !important;
}

body.gms-public .logo-icon {
    width: 40px;
    height: 40px;
    background: var(--gms-gradient);
    box-shadow: 0 6px 18px rgba(79, 125, 251, .35);
    border-radius: 12px;
}

body.gms-public .logo-icon svg { display: block; }

body.gms-public .logo-text {
    font-family: var(--gms-font-display);
    background: linear-gradient(135deg, #ffffff 20%, var(--gms-ink-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

body.gms-public .profile-btn {
    background: var(--gms-surface);
    border: 1px solid var(--gms-border);
    color: var(--gms-ink);
}
body.gms-public .profile-btn:hover { background: var(--gms-surface-hover); }
body.gms-public .profile-btn .email { color: var(--gms-ink-soft); }
body.gms-public .profile-btn .mdi { color: var(--gms-muted); }

body.gms-public .btn-light.profile-btn { color: var(--gms-ink); }

body.gms-public #page-topbar .btn-primary {
    background: var(--gms-gradient);
    border: none;
    box-shadow: 0 8px 20px rgba(79, 125, 251, .3);
}

/* ===== Nav ===== */
body.gms-public .navbar {
    background: rgba(11, 15, 26, .82) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--gms-border) !important;
}

body.gms-public .navbar .nav-link {
    color: var(--gms-ink-soft);
}

body.gms-public .navbar .nav-link:hover,
body.gms-public .navbar .nav-link.active {
    background: var(--gms-primary-light);
    color: #fff;
}

body.gms-public .navbar .nav-link .badge {
    background: var(--gms-gradient) !important;
}

body.gms-public .dropdown-menu {
    background: var(--gms-surface-2);
    border: 1px solid var(--gms-border-strong);
    box-shadow: var(--gms-shadow);
}

body.gms-public .dropdown-item {
    color: var(--gms-ink-soft);
}

body.gms-public .dropdown-item:hover,
body.gms-public .dropdown-item:focus {
    background: var(--gms-surface-hover);
    color: #fff;
}

body.gms-public .dropdown-item.text-danger:hover { color: var(--gms-danger) !important; }

body.gms-public .dropdown-divider { border-color: var(--gms-border); }

/* ===== Buttons ===== */
body.gms-public .btn-primary {
    background: var(--gms-gradient);
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(79, 125, 251, .28);
}

body.gms-public .btn-primary:hover,
body.gms-public .btn-primary:focus {
    background: linear-gradient(135deg, var(--gms-primary-2), var(--gms-primary));
    box-shadow: 0 14px 32px rgba(139, 92, 246, .35);
    transform: translateY(-2px);
}

body.gms-public .btn-outline-primary {
    color: var(--gms-primary);
    border-color: var(--gms-border-strong);
}
body.gms-public .btn-outline-primary:hover {
    background: var(--gms-primary-light);
    border-color: var(--gms-primary);
    color: #fff;
}

body.gms-public .btn-outline-secondary,
body.gms-public .btn-outline-light {
    color: var(--gms-ink);
    border-color: var(--gms-border-strong);
}
body.gms-public .btn-outline-secondary:hover,
body.gms-public .btn-outline-light:hover {
    background: var(--gms-surface-hover);
    border-color: var(--gms-border-strong);
    color: #fff;
}

body.gms-public .btn-outline-success {
    color: var(--gms-accent);
    border-color: rgba(47, 230, 168, .4);
}
body.gms-public .btn-outline-success:hover {
    background: var(--gms-accent-light);
    color: #fff;
    border-color: var(--gms-accent);
}

body.gms-public .btn-soft-primary {
    background: var(--gms-primary-light);
    color: #b9caff;
    border: 1px solid rgba(79, 125, 251, .3);
}
body.gms-public .btn-soft-primary:hover {
    background: var(--gms-gradient);
    color: #fff;
}

body.gms-public .btn-soft-success {
    background: var(--gms-accent-light);
    color: var(--gms-accent);
    border: 1px solid rgba(47, 230, 168, .3);
}
body.gms-public .btn-soft-success:hover {
    background: var(--gms-accent);
    color: #05130e;
}

body.gms-public .btn-soft-dark {
    background: var(--gms-surface-2);
    color: var(--gms-ink-soft);
    border: 1px solid var(--gms-border-strong);
}
body.gms-public .btn-soft-dark:hover {
    background: var(--gms-surface-hover);
    color: #fff;
}

/* ===== Cards ===== */
body.gms-public .card {
    background: var(--gms-surface);
    border: 1px solid var(--gms-border);
    border-radius: var(--gms-radius);
    box-shadow: var(--gms-shadow-sm);
    color: var(--gms-ink);
}

body.gms-public .card-header {
    background: rgba(255, 255, 255, .02);
    border-bottom: 1px solid var(--gms-border);
    color: var(--gms-ink);
}

body.gms-public .card-header .card-title,
body.gms-public .card-header b,
body.gms-public .card-header strong {
    color: var(--gms-ink);
}

body.gms-public .card-footer {
    background: rgba(255, 255, 255, .02);
    border-top: 1px solid var(--gms-border);
}

/* Nested cards (services list, etc.) get a lighter surface so they read as one level up */
body.gms-public .card .card {
    background: var(--gms-surface-2);
}

/* Generic prose coming from the CMS (page/product HTML content) */
body.gms-public .card-body h1, body.gms-public .card-body h2, body.gms-public .card-body h3,
body.gms-public .card-body h4, body.gms-public .card-body h5, body.gms-public .card-body h6 {
    margin-top: 1.4em;
}
body.gms-public .card-body h1:first-child, body.gms-public .card-body h2:first-child,
body.gms-public .card-body h3:first-child { margin-top: 0; }
body.gms-public .card-body ul, body.gms-public .card-body ol { color: var(--gms-ink-soft); }
body.gms-public .card-body img { border-radius: var(--gms-radius-sm); max-width: 100%; height: auto; }
body.gms-public .card-body blockquote {
    border-left: 3px solid var(--gms-primary);
    padding: .4em 1em;
    color: var(--gms-ink-soft);
    background: rgba(255, 255, 255, .02);
    border-radius: 0 10px 10px 0;
}

/* ===== Breadcrumbs ===== */
body.gms-public .page-breadcrumb {
    margin-bottom: 20px;
}
body.gms-public .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
}
body.gms-public .breadcrumb-item a {
    color: var(--gms-muted);
    text-decoration: none;
}
body.gms-public .breadcrumb-item a:hover { color: var(--gms-primary); }
body.gms-public .breadcrumb-item.active { color: var(--gms-ink-soft); }
body.gms-public .breadcrumb-item + .breadcrumb-item::before {
    color: var(--gms-border-strong);
}

/* ===== Forms ===== */
body.gms-public .form-control,
body.gms-public .form-select {
    background-color: var(--gms-surface-2);
    border: 1px solid var(--gms-border-strong);
    color: var(--gms-ink);
}
body.gms-public .form-control::placeholder { color: var(--gms-muted); }
body.gms-public .form-control:focus,
body.gms-public .form-select:focus {
    background-color: var(--gms-surface-2);
    border-color: var(--gms-primary);
    color: var(--gms-ink);
    box-shadow: 0 0 0 .2rem rgba(79, 125, 251, .18);
}
body.gms-public .form-label,
body.gms-public label { color: var(--gms-ink-soft); }
body.gms-public .form-text { color: var(--gms-muted); }
body.gms-public .invalid-feedback { color: var(--gms-danger); }
body.gms-public .is-invalid { border-color: var(--gms-danger) !important; }
body.gms-public .form-check-input {
    background-color: var(--gms-surface-2);
    border-color: var(--gms-border-strong);
}
body.gms-public .form-check-input:checked {
    background-color: var(--gms-primary);
    border-color: var(--gms-primary);
}
body.gms-public .form-check-label { color: var(--gms-ink-soft); }

/* ===== Alerts ===== */
body.gms-public .alert {
    border: 1px solid var(--gms-border-strong);
    border-radius: var(--gms-radius-sm);
}
body.gms-public .alert-danger {
    background: rgba(255, 93, 120, .1);
    color: #ffb0bf;
    border-color: rgba(255, 93, 120, .3);
}
body.gms-public .alert-success {
    background: var(--gms-accent-light);
    color: #8ff5d1;
    border-color: rgba(47, 230, 168, .3);
}
body.gms-public .alert-warning {
    background: rgba(255, 181, 69, .12);
    color: #ffd28c;
    border-color: rgba(255, 181, 69, .3);
}
body.gms-public .alert-info {
    background: var(--gms-primary-light);
    color: #b9caff;
    border-color: rgba(79, 125, 251, .3);
}

/* ===== Badges ===== */
body.gms-public .badge.bg-primary { background: var(--gms-gradient) !important; }
body.gms-public .badge.bg-success { background: var(--gms-accent) !important; color: #05130e !important; }

/* ===== Tables ===== */
body.gms-public .table {
    color: var(--gms-ink-soft);
    border-color: var(--gms-border);
}
body.gms-public .table thead th {
    color: var(--gms-ink);
    border-bottom-color: var(--gms-border-strong);
    font-family: var(--gms-font-display);
    font-weight: 600;
}
body.gms-public .table td, body.gms-public .table th { border-color: var(--gms-border); }
body.gms-public .table-hover tbody tr:hover {
    background-color: var(--gms-surface-hover);
    color: #fff;
}

/* ===== Pagination ===== */
body.gms-public .pagination .page-link {
    background: var(--gms-surface-2);
    border-color: var(--gms-border-strong);
    color: var(--gms-ink-soft);
}
body.gms-public .pagination .page-item.active .page-link {
    background: var(--gms-gradient);
    border-color: transparent;
    color: #fff;
}
body.gms-public .pagination .page-link:hover {
    background: var(--gms-surface-hover);
    color: #fff;
}

/* ===== Footer ===== */
body.gms-public .footer {
    background: linear-gradient(180deg, var(--gms-bg-soft) 0%, #05070c 100%);
    color: var(--gms-ink-soft);
    border-top: 1px solid var(--gms-border);
}
body.gms-public .footer::before {
    background: var(--gms-gradient);
}
body.gms-public .footer-title { color: var(--gms-ink); }
body.gms-public .footer-link { color: var(--gms-muted); }
body.gms-public .footer-link:hover { color: var(--gms-accent); }
body.gms-public .social-icon {
    background: var(--gms-surface-2);
    border: 1px solid var(--gms-border-strong);
    color: var(--gms-ink);
}
body.gms-public .social-icon:hover {
    background: var(--gms-gradient);
    border-color: transparent;
}
body.gms-public .footer small { color: var(--gms-muted); }

/* ===== Cookie consent ===== */
body.gms-public .cookie-consent {
    background: rgba(10, 14, 24, .96);
    border-top: 1px solid var(--gms-border-strong);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .4);
}
body.gms-public .cookie-consent__text { color: var(--gms-ink-soft); }

/* =========================================================================
   Homepage — the base template hardcodes #fff / light-ink gradients for
   these blocks (.soe-card, .hero-section, .info-card.dark, .about-section),
   so they need explicit dark overrides rather than just new tokens.
   ========================================================================= */

body.gms-public .soe-style .soe-card {
    background: var(--gms-surface);
    border-color: var(--gms-border);
}
body.gms-public .soe-style .soe-card:hover {
    border-color: var(--gms-primary);
}

body.gms-public .hero-section {
    background:
        radial-gradient(60% 100% at 100% 0%, rgba(139, 92, 246, .16) 0%, rgba(139, 92, 246, 0) 60%),
        radial-gradient(55% 90% at 0% 100%, rgba(79, 125, 251, .12) 0%, rgba(79, 125, 251, 0) 60%),
        transparent;
    border-bottom: 1px solid var(--gms-border);
}

body.gms-public .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--gms-surface-2);
    border: 1px solid var(--gms-border-strong);
    color: var(--gms-ink-soft);
}
body.gms-public .hero-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gms-accent);
    box-shadow: 0 0 0 0 rgba(47, 230, 168, .6);
    animation: gms-pulse 2s infinite;
}
body.gms-public .hero-eyebrow i { color: var(--gms-primary); }

@keyframes gms-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(47, 230, 168, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(47, 230, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 230, 168, 0); }
}

body.gms-public .hero-title {
    font-family: var(--gms-font-display);
    color: #fff;
}
body.gms-public .hero-title .text-gradient {
    background: var(--gms-gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.gms-public .hero-subtitle { color: var(--gms-muted); }

/* Decorative dashboard mockup replacing the plain giant icon */
body.gms-public .hero-mockup {
    background: var(--gms-surface);
    border: 1px solid var(--gms-border-strong);
    box-shadow: var(--gms-shadow-lg);
    padding: 0;
    height: auto;
    display: block;
    color: var(--gms-ink);
}
body.gms-public .hero-mockup::before { display: none; }

body.gms-public .mockup-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--gms-border);
    background: rgba(255, 255, 255, .02);
}
body.gms-public .mockup-titlebar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gms-border-strong);
}
body.gms-public .mockup-titlebar span:nth-child(1) { background: #ff5f57; }
body.gms-public .mockup-titlebar span:nth-child(2) { background: #febc2e; }
body.gms-public .mockup-titlebar span:nth-child(3) { background: #28c840; }
body.gms-public .mockup-titlebar small {
    margin-left: 10px;
    color: var(--gms-muted);
    font-size: 12px;
}

body.gms-public .mockup-body { padding: 20px; }

body.gms-public .mockup-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--gms-radius-sm);
    background: var(--gms-surface-2);
    border: 1px solid var(--gms-border);
    margin-bottom: 10px;
}
body.gms-public .mockup-row:last-child { margin-bottom: 0; }

body.gms-public .mockup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gms-accent);
    box-shadow: 0 0 8px rgba(47, 230, 168, .8);
    flex-shrink: 0;
}
body.gms-public .mockup-dot.is-warn {
    background: var(--gms-warning);
    box-shadow: 0 0 8px rgba(255, 181, 69, .8);
}

body.gms-public .mockup-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--gms-ink);
}
body.gms-public .mockup-meta {
    font-size: 12px;
    color: var(--gms-muted);
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.gms-public .mockup-bar {
    width: 54px;
    height: 5px;
    border-radius: 4px;
    background: rgba(148, 163, 184, .16);
    overflow: hidden;
}
body.gms-public .mockup-bar > span {
    display: block;
    height: 100%;
    background: var(--gms-gradient-accent);
    border-radius: 4px;
}

body.gms-public .info-card.dark {
    background: linear-gradient(160deg, #121a35 0%, #1c1440 100%);
    border-color: var(--gms-border-strong);
    color: #fff;
}
body.gms-public .info-card.dark p,
body.gms-public .info-card.dark .small { color: var(--gms-ink-soft); }
body.gms-public .info-card.dark h3 { color: #fff; }
body.gms-public .demo-credentials {
    background: rgba(255, 255, 255, .05);
    border-radius: var(--gms-radius-sm);
    padding: 12px 16px !important;
}
body.gms-public .demo-credentials li { color: var(--gms-ink-soft); }
body.gms-public .demo-credentials b { color: #fff; }

body.gms-public .info-card:not(.dark) h3 { color: var(--gms-ink); }
body.gms-public .info-card:not(.dark) p { color: var(--gms-ink-soft); }

body.gms-public .about-section {
    background: var(--gms-surface);
    border-color: var(--gms-border);
}
body.gms-public .about-section h2 { color: #fff; }

body.gms-public .vk-section h2 { color: #fff; }
body.gms-public .vk-section .soe-card { background: var(--gms-surface); }