/*! CirkleHost template — CyberPulse (modern cyber hosting)
 * Loaded ONLY when active, AFTER custom.css, BEFORE the --ch-* overrides.
 * Design language: dark, glass, gradient borders, glow-on-hover, pill CTAs,
 * faint tech grid on sections. Consumes --ch-* so colours stay editable.
 * ======================================================================= */

/* ---- Buttons: pill, gradient fill, glow on hover -------------------- */
.btn-primary,
.btn-primary:focus,
.package .btn,
[data-chp-cta] {
    border-radius: 999px !important;
    background-image: linear-gradient(120deg, var(--ch-primary, #1566ff), var(--ch-accent, #38bdf8)) !important;
    border: 0 !important;
    color: #05121f !important;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 8px 22px rgba(56, 189, 248, .28);
    transition: transform .16s ease, box-shadow .22s ease, filter .2s ease;
}
.btn-primary:hover,
.package .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(56, 189, 248, .42), 0 0 0 1px rgba(56, 189, 248, .35) inset;
    filter: brightness(1.05);
}
.btn:not(.btn-primary) { border-radius: 999px !important; }

/* ---- Cards / panels: glass + gradient hairline border -------------- */
.panel, .card, .tile.tile-home,
.packages .package, .package,
.list-group-item-link:hover {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.82)) !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    background-clip: padding-box;
}
.panel::before, .card::before, .tile.tile-home::before, .package::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(130deg, var(--ch-accent, #38bdf8), var(--ch-accent-2, #8b5cf6));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .5; pointer-events: none;
}
.tile.tile-home:hover, .package:hover, .panel:hover {
    box-shadow: 0 22px 48px rgba(139, 92, 246, .18), 0 8px 22px rgba(56, 189, 248, .14) !important;
}

/* ---- Pricing: neon top-accent ------------------------------------- */
.package .package-name, .package h3, .packages .package h3 {
    position: relative; padding-top: 10px;
}
.package::after {
    content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--ch-accent, #38bdf8), var(--ch-accent-2, #8b5cf6));
    opacity: .85;
}

/* ---- Hero: centred + faint grid + scan sheen -------------------- */
.main-banner.banner-home, .main-banner {
    position: relative; overflow: hidden;
    border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;
}
.main-banner::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 42px 42px,
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 42px 42px;
    mask-image: radial-gradient(120% 80% at 50% 0%, #000 40%, transparent 78%);
}
.banner-title { font-weight: 800; letter-spacing: -.03em; }

/* ---- Domain search: one rounded bar, inset glow --------------- */
.search-group-combined {
    border-radius: 999px !important;
    box-shadow: 0 10px 30px rgba(11, 14, 21, .18), 0 0 0 1px rgba(56,189,248,.25) inset !important;
}

/* ---- Inputs, badges, alerts, breadcrumb, pagination ---------- */
.form-control { border-radius: 12px !important; }
.badge { border-radius: 999px !important; letter-spacing: .03em; }
.alert { border-radius: 14px !important; border-left: 3px solid var(--ch-accent, #38bdf8); }
.breadcrumb { background: transparent; }
.pagination .page-link { border-radius: 999px !important; margin: 0 3px; }
.modal-content { border-radius: 18px !important; }
.table thead th { text-transform: uppercase; letter-spacing: .06em; font-size: .78em; }

/* ---- Section micro-labels get a mono tint --------------------- */
.section .section-header .section-title small,
.announcement-date { font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; }

/* ---- Responsive ------------------------------------------------ */
@media (max-width: 1023px) {
    .main-banner.banner-home, .main-banner { border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; }
}
@media (max-width: 767px) {
    .panel::before, .card::before, .tile.tile-home::before, .package::before { opacity: .35; }
    .btn-primary { box-shadow: 0 6px 16px rgba(56,189,248,.24); }
}