/* ============================================================
 * Servegates — main_new design system v2.
 *
 * Elegant, professional, restrained. Two colors do the work:
 *   #232d3b — deep navy (chrome, headlines, structural mass)
 *   #F97316 — warm orange (the only accent, used sparingly)
 *
 * Tokens at :root drive the whole sheet — re-skin = single file.
 * ============================================================ */

:root {
    /* Brand */
    --sg-navy:        #232d3b;
    --sg-navy-dark:   #161e29;
    --sg-navy-2:      #374151;       /* lighter accent surface on dark bg */
    --sg-orange:      #F97316;
    --sg-orange-dark: #EA580C;
    --sg-orange-tint: #FFF7ED;

    /* Surfaces */
    --sg-body:        #FFFFFF;
    --sg-soft:        #FAFAF9;       /* warm off-white sections */
    --sg-soft-2:      #F4F4F5;

    /* Text */
    --sg-text:        #0F172A;
    --sg-text-muted:  #64748B;
    --sg-text-on-dark:#E5E7EB;

    /* Lines */
    --sg-border:      #E5E7EB;
    --sg-border-strong:#D1D5DB;
    --sg-border-dark: rgba(255,255,255,.08);

    /* Semantic */
    --sg-success:     #16A34A;
    --sg-warning:     #F59E0B;
    --sg-danger:      #DC2626;
    --sg-info:        #0284C7;

    /* Elevation — very restrained for elegance. */
    --sg-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --sg-shadow-sm: 0 2px 6px rgba(15, 23, 42, .06);
    --sg-shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
    --sg-shadow-lg: 0 18px 40px rgba(15, 23, 42, .12);

    /* Radius */
    --sg-r-sm:    4px;
    --sg-r:       6px;
    --sg-r-lg:    10px;
    --sg-r-pill:  999px;

    /* Container width */
    --sg-container: 1240px;
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--sg-text);
    background: var(--sg-body);
    line-height: 1.65;
    font-size: 16px;
    font-feature-settings: 'ss01', 'cv11';
    -webkit-font-smoothing: antialiased;
}
html[dir="rtl"] body { font-family: 'Cairo', 'Tahoma', sans-serif; }

a {
    color: var(--sg-orange);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover, a:focus { color: var(--sg-orange-dark); text-decoration: none; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
    color: var(--sg-navy);
    font-weight: 700;
    letter-spacing: -.015em;
    margin-top: 0;
}
h1 { font-size: 3.25rem; line-height: 1.1;  font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: 2.25rem; line-height: 1.18; letter-spacing: -.02em; }
h3 { font-size: 1.4rem;  line-height: 1.3; }
h4 { font-size: 1.1rem;  line-height: 1.35; }
.text-muted { color: var(--sg-text-muted) !important; }

@media (max-width: 767px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
}

/* Container reflow — slightly narrower than BS4 default for an
   editorial, breathable feel. */
@media (min-width: 1200px) {
    .container { max-width: var(--sg-container); }
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    font-weight: 500;
    border-radius: var(--sg-r);
    padding: .65rem 1.4rem;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid transparent;
    transition: background-color .18s ease, color .18s ease,
                border-color .18s ease, transform .18s ease,
                box-shadow .18s ease;
    letter-spacing: .005em;
}
.btn:focus { box-shadow: none; outline: 0; }
.btn-lg { padding: .9rem 1.85rem; font-size: 15px; }
.btn-sm { padding: .45rem 1rem;   font-size: 13px; }
.btn > i.fa:first-child,
.btn > i.fas:first-child,
.btn > i.far:first-child,
.btn > i.fab:first-child { margin-right: .55rem; }

/* Primary — orange (action). Used for the main CTA on every page. */
.btn-primary,
.btn-primary:focus {
    background: var(--sg-orange);
    border-color: var(--sg-orange);
    color: #fff;
}
.btn-primary:hover {
    background: var(--sg-orange-dark);
    border-color: var(--sg-orange-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(249, 115, 22, .26);
}
.btn-primary:active,
.btn-primary.active {
    background: #B43F0F !important;
    border-color: #B43F0F !important;
    transform: translateY(0);
    box-shadow: none;
}

/* Dark — navy. Used for secondary CTAs and structural elements. */
.btn-dark,
.btn-dark:focus {
    background: var(--sg-navy);
    border-color: var(--sg-navy);
    color: #fff;
}
.btn-dark:hover {
    background: var(--sg-navy-dark);
    border-color: var(--sg-navy-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(35, 45, 59, .22);
}

/* Outline (low-emphasis). */
.btn-outline,
.btn-outline:focus {
    background: transparent;
    color: var(--sg-navy);
    border-color: var(--sg-border-strong);
}
.btn-outline:hover {
    background: var(--sg-navy);
    color: #fff;
    border-color: var(--sg-navy);
}

/* On-dark variant — for hero CTAs over the navy background. */
.btn-on-dark,
.btn-on-dark:focus {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.32);
}
.btn-on-dark:hover {
    background: #fff;
    color: var(--sg-navy);
    border-color: #fff;
}

/* Bootstrap mappings used by the auth templates. */
.btn-secondary,
.btn-secondary:focus {
    background: transparent;
    color: var(--sg-navy);
    border-color: var(--sg-border-strong);
}
.btn-secondary:hover {
    background: var(--sg-soft);
    color: var(--sg-navy);
    border-color: var(--sg-border-strong);
}

.btn[disabled],
.btn.disabled,
fieldset[disabled] .btn { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Block helper to keep parity with BS3-style btn-block usage. */
.btn-block { display: block; width: 100%; }

/* ── Top utility strip ─────────────────────────────────────── */
.sg-topbar {
    background: var(--sg-soft);
    border-bottom: 1px solid var(--sg-border);
    font-size: 13px;
    color: var(--sg-text-muted);
    padding: 9px 0;
}
.sg-topbar a { color: var(--sg-text-muted); }
.sg-topbar a:hover { color: var(--sg-navy); }
.sg-topbar .sg-divider {
    display: inline-block; width: 1px; height: 14px;
    background: var(--sg-border); margin: 0 14px; vertical-align: middle;
}
.sg-topbar .sg-lang a {
    padding: 2px 10px; border-radius: var(--sg-r-sm); font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.sg-topbar .sg-lang a.is-active { background: var(--sg-navy); color: #fff; }
.sg-topbar .dropdown-menu { font-size: 13px; border: 1px solid var(--sg-border); border-radius: var(--sg-r); box-shadow: var(--sg-shadow-md); padding: .35rem 0; }
.sg-topbar .dropdown-item { padding: .45rem 1rem; font-size: 13px; }
.sg-topbar .dropdown-item.active,
.sg-topbar .dropdown-item:active { background: var(--sg-orange-tint); color: var(--sg-orange); }

/* ── Main navbar (sticky) ─────────────────────────────────── */
.sg-nav {
    background: var(--sg-navy);
    position: sticky; top: 0; z-index: 1000;
    border-bottom: 1px solid var(--sg-border-dark);
}
.sg-nav .navbar { padding: .35rem 0; }
.sg-nav .navbar-brand { padding: 0; margin-right: 2.5rem; }
.sg-nav .navbar-brand img { height: 56px; width: auto; display: block; transition: opacity .2s ease; }
.sg-nav .navbar-brand:hover img { opacity: .85; }

.sg-nav .navbar-nav .nav-link {
    color: var(--sg-text-on-dark) !important;
    font-weight: 500;
    font-size: 14px;
    padding: 1.4rem 1.05rem !important;
    position: relative;
    transition: color .15s ease;
    letter-spacing: .005em;
}
.sg-nav .navbar-nav .nav-link:hover,
.sg-nav .navbar-nav .nav-link:focus,
.sg-nav .navbar-nav .nav-item.active > .nav-link,
.sg-nav .navbar-nav .nav-item.show > .nav-link { color: #fff !important; }

.sg-nav .navbar-nav .nav-link::after {
    content: ''; position: absolute;
    left: 1.05rem; right: 1.05rem; bottom: 1.05rem;
    height: 2px; background: var(--sg-orange);
    transform: scaleX(0); transform-origin: center;
    transition: transform .18s ease;
}
.sg-nav .navbar-nav .nav-item:hover .nav-link::after,
.sg-nav .navbar-nav .nav-item.active .nav-link::after,
.sg-nav .navbar-nav .nav-item.show .nav-link::after { transform: scaleX(1); }

/* Dropdown caret + bootstrap toggle quirk */
.sg-nav .nav-link.dropdown-toggle::after { vertical-align: .15em; margin-left: .35em; }

/* Orange "Get a quote" CTA. */
.sg-nav .nav-cta .nav-link {
    background: var(--sg-orange);
    color: #fff !important;
    border-radius: var(--sg-r);
    padding: .55rem 1.25rem !important;
    margin: .7rem 0 .7rem 1rem;
    font-weight: 600;
    box-shadow: 0 2px 0 rgba(0,0,0,.08);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sg-nav .nav-cta .nav-link:hover {
    background: var(--sg-orange-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(249, 115, 22, .35);
}
.sg-nav .nav-cta .nav-link::after { display: none !important; }

/* Hamburger */
.sg-nav .navbar-toggler {
    border: 0; padding: .55rem;
    background: rgba(255,255,255,.06);
    border-radius: var(--sg-r-sm);
    color: #fff;
}
.sg-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.12); outline: 0; }
.sg-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3e%3cpath stroke='rgba%28255,255,255,0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 8h22M4 14h22M4 20h22'/%3e%3c/svg%3e");
}

/* Dropdown menus */
.sg-nav .dropdown-menu {
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-r);
    box-shadow: var(--sg-shadow-md);
    margin-top: .35rem;
    padding: .35rem 0;
    min-width: 240px;
    animation: sg-drop .18s ease-out;
}
@keyframes sg-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sg-nav .dropdown-item {
    padding: .6rem 1.1rem;
    color: var(--sg-text);
    font-weight: 500;
    font-size: 14px;
    transition: background .12s ease, color .12s ease;
}
.sg-nav .dropdown-item:hover,
.sg-nav .dropdown-item:focus {
    background: var(--sg-orange-tint);
    color: var(--sg-orange-dark);
}

/* ── Hero ─────────────────────────────────────────────────── */
.sg-hero {
    background: var(--sg-navy);
    color: #fff;
    padding: 96px 0 110px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--sg-border-dark);
}
/* Orange spotlight in the upper-right — soft, elegant. */
.sg-hero::before {
    content: '';
    position: absolute; top: -200px; right: -200px;
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(249,115,22,.22) 0%, rgba(249,115,22,0) 65%);
    pointer-events: none;
}
.sg-hero::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--sg-orange) 50%, transparent 100%);
    opacity: .8;
}
.sg-hero h1 {
    color: #fff;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.03em;
    margin-bottom: 1.25rem;
}
.sg-hero .sg-eyebrow {
    color: var(--sg-orange);
    background: rgba(249, 115, 22, .14);
    border: 1px solid rgba(249, 115, 22, .26);
}
.sg-hero .sg-lead {
    font-size: 1.125rem;
    color: rgba(255,255,255,.78);
    max-width: 560px;
    margin-bottom: 2.25rem;
    line-height: 1.7;
}
.sg-hero .sg-hero-img { max-width: 100%; max-height: 460px; }
.sg-hero .sg-hero-visual {
    position: relative;
}
.sg-hero .sg-hero-visual::before {
    content: '';
    position: absolute;
    inset: 8% 12%;
    background: radial-gradient(circle, rgba(249,115,22,.16) 0%, transparent 70%);
    pointer-events: none;
}
@media (max-width: 767px) {
    .sg-hero { padding: 64px 0 72px; }
    .sg-hero h1 { font-size: 2.25rem; }
}

/* ── Sections ─────────────────────────────────────────────── */
.sg-section    { padding: 96px 0; }
.sg-section-sm { padding: 56px 0; }
.sg-section-soft { background: var(--sg-soft); }
@media (max-width: 767px) {
    .sg-section    { padding: 64px 0; }
    .sg-section-sm { padding: 40px 0; }
}

.sg-section-title {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.sg-section-title h2 { margin-bottom: .85rem; }
.sg-section-title p {
    color: var(--sg-text-muted);
    font-size: 1.05rem;
    margin: 0;
    line-height: 1.7;
}

/* Eyebrow label — orange, uppercase, pill. */
.sg-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    font-weight: 700;
    color: var(--sg-orange-dark);
    background: var(--sg-orange-tint);
    border: 1px solid #FED7AA;
    padding: .35rem .9rem;
    border-radius: var(--sg-r-pill);
    margin-bottom: 1rem;
}

/* Highlight word inside a heading. */
.sg-accent { color: var(--sg-orange); }

/* ── Feature tile (homepage) ──────────────────────────────── */
.sg-feature {
    text-align: center;
    padding: 2.5rem 1.5rem;
    height: 100%;
    border-radius: var(--sg-r-lg);
    border: 1px solid transparent;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.sg-feature:hover {
    border-color: var(--sg-border);
    background: #fff;
    transform: translateY(-3px);
    box-shadow: var(--sg-shadow-md);
}
.sg-feature .sg-feature-icon {
    width: 56px; height: 56px;
    margin: 0 auto 1.25rem;
    background: var(--sg-orange-tint);
    color: var(--sg-orange);
    border-radius: var(--sg-r);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    transition: transform .25s ease;
}
.sg-feature:hover .sg-feature-icon { transform: scale(1.06); }
.sg-feature h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; color: var(--sg-navy); }
.sg-feature p  { color: var(--sg-text-muted); font-size: 14.5px; margin: 0; line-height: 1.65; }

/* ── Stat tile ────────────────────────────────────────────── */
.sg-stat {
    text-align: center;
    padding: 1.75rem 1rem;
}
.sg-stat .sg-stat-num {
    font-size: 2.5rem; font-weight: 800;
    color: var(--sg-navy);
    line-height: 1; margin-bottom: .55rem;
    letter-spacing: -.025em;
}
.sg-stat .sg-stat-num .sg-accent { color: var(--sg-orange); }
.sg-stat .sg-stat-label {
    color: var(--sg-text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}

/* ── Server / pricing card ───────────────────────────────── */
.sg-server-card {
    background: #fff;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-r-lg);
    padding: 1.75rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sg-server-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--sg-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.sg-server-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sg-shadow-md);
    border-color: #D6D3D1;
}
.sg-server-card:hover::before { transform: scaleX(1); }
.sg-server-card .sg-server-name {
    font-size: 1.15rem; font-weight: 700;
    color: var(--sg-navy);
    margin-bottom: .15rem;
    letter-spacing: -.01em;
}
.sg-server-card .sg-server-sku {
    font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sg-orange);
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.sg-server-card .sg-spec-list {
    list-style: none; padding: 0; margin: 0 0 1.5rem;
    font-size: 14px;
}
.sg-server-card .sg-spec-list li {
    padding: .55rem 0;
    border-bottom: 1px solid var(--sg-border);
    display: flex; justify-content: space-between;
}
.sg-server-card .sg-spec-list li:last-child { border-bottom: 0; }
.sg-server-card .sg-spec-list .sg-spec-k { color: var(--sg-text-muted); }
.sg-server-card .sg-spec-list .sg-spec-v { color: var(--sg-text); font-weight: 500; }
.sg-server-card .sg-price {
    font-size: 2rem; font-weight: 800;
    color: var(--sg-navy);
    line-height: 1;
    letter-spacing: -.02em;
}
.sg-server-card .sg-price small {
    font-size: 13px;
    color: var(--sg-text-muted);
    font-weight: 500;
    letter-spacing: 0;
}
.sg-server-card .sg-managed-tag {
    display: inline-block;
    background: var(--sg-orange-tint);
    color: var(--sg-orange-dark);
    border: 1px solid #FED7AA;
    padding: .15rem .55rem;
    border-radius: var(--sg-r-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ── Cards (generic) ─────────────────────────────────────── */
.card {
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-r-lg);
    box-shadow: var(--sg-shadow-xs);
}
.card-header {
    background: var(--sg-soft);
    border-bottom: 1px solid var(--sg-border);
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--sg-navy);
}
.card-body   { padding: 1.5rem; }
.card-footer {
    background: var(--sg-soft);
    border-top: 1px solid var(--sg-border);
    padding: .9rem 1.25rem;
}

/* ── Auth card (login / register) ─────────────────────────── */
.sg-auth {
    max-width: 440px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-r-lg);
    box-shadow: var(--sg-shadow-md);
    padding: 2.5rem 2.25rem;
}
.sg-auth h2 { font-size: 1.5rem; margin-bottom: .35rem; text-align: center; }
.sg-auth .sg-auth-sub { color: var(--sg-text-muted); text-align: center; margin-bottom: 1.75rem; }
.sg-auth .btn { width: 100%; }
.sg-auth .sg-auth-foot {
    text-align: center; margin-top: 1.25rem;
    font-size: 14px;
    color: var(--sg-text-muted);
    padding-top: 1.25rem;
    border-top: 1px solid var(--sg-border);
}
.sg-auth-mark { text-align: center; margin-bottom: 1.5rem; }
.sg-auth-mark img { height: 44px; }

/* ── Forms ────────────────────────────────────────────────── */
.form-control,
select.form-control {
    border: 1px solid var(--sg-border-strong);
    border-radius: var(--sg-r);
    padding: .75rem .95rem;
    font-size: 14px;
    height: auto;
    color: var(--sg-text);
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--sg-orange);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .18);
    outline: 0;
}
label, .form-group label {
    font-weight: 600;
    font-size: 13px;
    color: var(--sg-navy);
    margin-bottom: .4rem;
    letter-spacing: .01em;
}
.form-group { margin-bottom: 1.15rem; }
.form-group small { color: var(--sg-text-muted); font-size: 12.5px; }

.input-group-text {
    background: var(--sg-soft);
    border-color: var(--sg-border-strong);
    color: var(--sg-text-muted);
}

/* ── Tables ───────────────────────────────────────────────── */
.table { color: var(--sg-text); border-color: var(--sg-border); }
.table thead th {
    background: var(--sg-soft);
    border-top: 0;
    border-bottom: 1px solid var(--sg-border);
    color: var(--sg-text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .1em;
    padding: .95rem 1rem;
    font-weight: 700;
}
.table td { padding: .85rem 1rem; vertical-align: middle; border-top: 1px solid var(--sg-border); }
.table-hover tbody tr:hover { background: var(--sg-soft); }

/* ── Badges / labels ──────────────────────────────────────── */
.badge {
    padding: .35em .7em;
    border-radius: var(--sg-r-pill);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.badge-primary { background: var(--sg-orange); color: #fff; }
.badge-success { background: var(--sg-success); color: #fff; }
.badge-warning { background: var(--sg-warning); color: #fff; }
.badge-info    { background: var(--sg-info); color: #fff; }
.badge-danger  { background: var(--sg-danger); color: #fff; }
.badge-secondary { background: var(--sg-text-muted); color: #fff; }
.badge-dark { background: var(--sg-navy); color: #fff; }

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    border-radius: var(--sg-r);
    padding: .9rem 1.1rem;
    border: 1px solid transparent;
    font-size: 14px;
}
.alert-success { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }
.alert-danger  { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.alert-warning { background: #FFFBEB; border-color: #FDE68A; color: #854D0E; }
.alert-info    { background: var(--sg-orange-tint); border-color: #FED7AA; color: var(--sg-orange-dark); }

/* ── CTA banner ───────────────────────────────────────────── */
.sg-cta {
    background: var(--sg-navy);
    color: #fff;
    padding: 56px 0;
    position: relative;
    overflow: hidden;
}
.sg-cta::before {
    content: '';
    position: absolute; top: -150px; right: -150px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(249,115,22,.18) 0%, transparent 65%);
    pointer-events: none;
}
.sg-cta::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--sg-orange) 50%, transparent 100%);
}
.sg-cta h3 { color: #fff; margin: 0; font-weight: 700; letter-spacing: -.015em; font-size: 1.6rem; }
.sg-cta p { color: rgba(255,255,255,.75); margin: .5rem 0 0; }

/* ── Solution detail page ────────────────────────────────── */
.sg-page-hero {
    background: var(--sg-soft);
    border-bottom: 1px solid var(--sg-border);
    padding: 64px 0;
}
.sg-page-hero h1 { color: var(--sg-navy); margin-bottom: .5rem; }
.sg-page-hero p { color: var(--sg-text-muted); margin: 0; font-size: 1.05rem; }
.sg-solution-body { padding: 64px 0 96px; font-size: 16px; line-height: 1.8; }
.sg-solution-body h2 { margin-top: 2.5rem; }
.sg-solution-body h3 { margin-top: 2rem; }
.sg-solution-body ul { padding-left: 1.25rem; }
.sg-solution-body ul li { padding: .2rem 0; }
.sg-solution-body ul li::marker { color: var(--sg-orange); }
.sg-solution-body img { max-width: 100%; height: auto; border-radius: var(--sg-r); margin: 1.5rem 0; }

/* Side rail card on solutions / quote */
.sg-sidecard {
    background: #fff;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-r-lg);
    box-shadow: var(--sg-shadow-xs);
    overflow: hidden;
}
.sg-sidecard .sg-sidecard-h {
    background: var(--sg-navy);
    color: #fff;
    padding: 1rem 1.25rem;
    font-weight: 600;
    border-bottom: 3px solid var(--sg-orange);
}
.sg-sidecard .sg-sidecard-b { padding: 1.5rem 1.25rem; }

/* ── Footer ───────────────────────────────────────────────── */
.sg-footer {
    background: var(--sg-navy);
    color: var(--sg-text-on-dark);
    padding: 72px 0 24px;
    position: relative;
}
.sg-footer::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--sg-orange) 50%, transparent 100%);
    opacity: .6;
}
.sg-footer h5 {
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 1.25rem;
    font-weight: 700;
}
.sg-footer ul { list-style: none; padding: 0; margin: 0; }
.sg-footer ul li { margin-bottom: .55rem; font-size: 14.5px; }
.sg-footer a { color: rgba(255,255,255,.72); transition: color .15s ease; }
.sg-footer a:hover { color: var(--sg-orange); }
.sg-footer .sg-brand-mark img { height: 52px; margin-bottom: 1.25rem; }
.sg-footer .sg-tagline { color: rgba(255,255,255,.6); font-size: 14.5px; line-height: 1.7; }
.sg-footer-bottom {
    border-top: 1px solid var(--sg-border-dark);
    margin-top: 56px;
    padding-top: 24px;
    font-size: 13px;
    color: rgba(255,255,255,.5);
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
}
.sg-footer-bottom .sg-mini-links a { margin-left: 1.25rem; }
html[dir="rtl"] .sg-footer-bottom .sg-mini-links a { margin-left: 0; margin-right: 1.25rem; }

/* ── Helpers / RTL ────────────────────────────────────────── */
.sg-divider-y { height: 1px; background: var(--sg-border); margin: 56px 0; }

html[dir="rtl"] .btn > i.fa:first-child,
html[dir="rtl"] .btn > i.fas:first-child,
html[dir="rtl"] .btn > i.far:first-child,
html[dir="rtl"] .btn > i.fab:first-child {
    margin-right: 0; margin-left: .55rem;
}
html[dir="rtl"] .sg-nav .nav-cta .nav-link { margin: .7rem 1rem .7rem 0; }
html[dir="rtl"] .sg-server-card::before { transform-origin: right; }
html[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
html[dir="rtl"] .text-left  { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left  !important; }
html[dir="rtl"] .sg-solution-body ul { padding-left: 0; padding-right: 1.25rem; }

/* ── Mobile responsive ────────────────────────────────────── */
@media (max-width: 991.98px) {
    .sg-nav .navbar-collapse {
        background: var(--sg-navy-dark);
        margin: .5rem -15px 0;
        padding: .5rem 1rem;
        border-top: 1px solid var(--sg-border-dark);
        max-height: 80vh;
        overflow-y: auto;
    }
    .sg-nav .navbar-nav .nav-link {
        padding: .85rem .25rem !important;
        border-bottom: 1px solid var(--sg-border-dark);
    }
    .sg-nav .navbar-nav .nav-link::after { display: none; }
    .sg-nav .dropdown-menu {
        background: rgba(0,0,0,.18);
        border: 0;
        box-shadow: none;
        margin-top: 0;
        animation: none;
        border-radius: 0;
    }
    .sg-nav .dropdown-item { color: var(--sg-text-on-dark); padding: .55rem 1.25rem; }
    .sg-nav .dropdown-item:hover, .sg-nav .dropdown-item:focus {
        background: rgba(255,255,255,.06); color: #fff;
    }
    .sg-nav .nav-cta .nav-link {
        margin: .55rem 0;
        text-align: center;
    }
}
@media (max-width: 575.98px) {
    .sg-nav .navbar-brand img { height: 44px; }
}