/* ================================================================
   BuildXpert ERP — Enterprise Premium Theme v3.0
   Royal Design System | Dual Mode: Dark (default) + Light
   ================================================================ */

/* ── THEME TOKENS ── */
:root,
[data-theme="dark"] {
    --bg:           #040d1a;
    --bg-2:         #071120;
    --bg-card:      rgba(10, 22, 44, 0.82);
    --bg-soft:      rgba(14, 28, 54, 0.90);
    --bg-glass:     rgba(255,255,255,0.04);
    --text:         #e6eff9;
    --text-2:       #8faabb;
    --text-3:       #4d6375;
    --border:       rgba(201,170,113,0.16);
    --border-2:     rgba(255,255,255,0.07);
    --gold:         #c9aa71;
    --gold-2:       #e8cc84;
    --gold-glow:    rgba(201,170,113,0.22);
    --gold-bg:      rgba(201,170,113,0.10);
    --primary:      #38bdf8;
    --primary-2:    #0ea5e9;
    --primary-deep: #0369a1;
    --primary-glow: rgba(56,189,248,0.22);
    --primary-bg:   rgba(56,189,248,0.10);
    --accent:       #a78bfa;
    --accent-2:     #8b5cf6;
    --success:      #34d399;
    --success-bg:   rgba(52,211,153,0.12);
    --warning:      #fbbf24;
    --danger:       #f87171;
    --shadow-sm:    0 4px 24px rgba(0,0,0,0.32);
    --shadow:       0 20px 64px rgba(0,0,0,0.48);
    --shadow-lg:    0 32px 96px rgba(0,0,0,0.56);
    --shadow-gold:  0 12px 44px rgba(201,170,113,0.20);
    --shadow-blue:  0 12px 44px rgba(56,189,248,0.20);
    --radius-xs:    8px;
    --radius-sm:    14px;
    --radius:       22px;
    --radius-lg:    32px;
    --radius-pill:  999px;
    --navbar-bg:    rgba(4,13,26,0.78);
    --navbar-border:rgba(201,170,113,0.12);
    --on-cta:       #ffffff;
    --on-cta-muted: rgba(255,255,255,0.72);
    color-scheme: dark;
}
[data-theme="light"] {
    --bg:           #f4f7fd;
    --bg-2:         #eaeff9;
    --bg-card:      #ffffff;
    --bg-soft:      rgba(234,239,249,0.95);
    --bg-glass:     rgba(255,255,255,0.80);
    --text:         #0a1628;
    --text-2:       #4a5c72;
    --text-3:       #8a9db5;
    --border:       rgba(30,64,175,0.12);
    --border-2:     rgba(0,0,0,0.08);
    --gold:         #b45309;
    --gold-2:       #d97706;
    --gold-glow:    rgba(180,83,9,0.15);
    --gold-bg:      rgba(180,83,9,0.08);
    --primary:      #1e40af;
    --primary-2:    #2563eb;
    --primary-deep: #1e3a8a;
    --primary-glow: rgba(37,99,235,0.18);
    --primary-bg:   rgba(37,99,235,0.08);
    --accent:       #7c3aed;
    --accent-2:     #6d28d9;
    --success:      #059669;
    --success-bg:   rgba(5,150,105,0.10);
    --warning:      #d97706;
    --danger:       #dc2626;
    --shadow-sm:    0 4px 24px rgba(0,0,0,0.07);
    --shadow:       0 20px 64px rgba(0,0,0,0.10);
    --shadow-lg:    0 32px 96px rgba(0,0,0,0.14);
    --shadow-gold:  0 12px 44px rgba(180,83,9,0.12);
    --shadow-blue:  0 12px 44px rgba(37,99,235,0.12);
    --radius-xs:    8px;
    --radius-sm:    14px;
    --radius:       22px;
    --radius-lg:    32px;
    --radius-pill:  999px;
    --navbar-bg:    rgba(244,247,253,0.92);
    --navbar-border:rgba(30,64,175,0.10);
    --on-cta:       #ffffff;
    --on-cta-muted: rgba(255,255,255,0.82);
    color-scheme: light;
}

/* ── BASE ── */
*, *::before, *::after {
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease, box-shadow 0.3s ease;
}
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
h1,h2,h3,h4,h5,h6 {
    font-family: 'Playfair Display','Inter',serif;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 99px; }
::selection { background: var(--primary-glow); color: var(--text); }

/* ── UTILITIES ── */
.py-6  { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.py-7  { padding-top: 7rem; padding-bottom: 7rem; }
.pt-navbar { padding-top: 86px; }
.text-gold  { color: var(--gold) !important; }
.text-muted { color: var(--text-2) !important; }
.shadow-premium { box-shadow: var(--shadow) !important; }
.rounded-premium { border-radius: var(--radius) !important; }
.glass-card { background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: var(--radius); }

/* ── ROYAL DIVIDER ── */
.royal-divider { display: block; width: 64px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--primary)); margin: 1.2rem 0; }
.royal-divider.center { margin: 1.2rem auto; }

/* ── SECTION BADGE ── */
.section-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: 'Inter', sans-serif;
    font-size: .74rem; font-weight: 700; letter-spacing: .10em; text-transform: uppercase;
    padding: .55rem 1.1rem; border-radius: var(--radius-pill);
    background: var(--gold-bg); color: var(--gold); border: 1px solid var(--border);
}
.section-badge.badge-blue { background: var(--primary-bg); color: var(--primary); border-color: rgba(56,189,248,.20); }
.section-badge.light { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.25); }

/* ── SECTION TITLES ── */
.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.85rem, 4vw, 3.1rem);
    font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; color: var(--text);
}
.section-copy { font-size: 1.04rem; line-height: 1.85; color: var(--text-2); max-width: 640px; }
.section-intro { max-width: 840px; }

/* ── EYEBROW ── */
.eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    color: var(--gold); border: 1px solid var(--border); border-radius: var(--radius-pill);
    padding: .6rem 1.2rem; background: var(--gold-bg); font-weight: 600; font-size: .9rem; backdrop-filter: blur(10px);
}
.eyebrow::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(1.4); } }

/* ================================================================
   NAVBAR
   ================================================================ */
.nav-glass {
    background: var(--navbar-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--navbar-border); transition: background .3s, border-color .3s;
}
[data-theme="dark"] .nav-glass { box-shadow: 0 4px 30px rgba(0,0,0,.25); }
[data-theme="light"] .nav-glass { box-shadow: 0 4px 30px rgba(30,64,175,.07); }

.brand-mark {
    width: 46px; height: 46px; border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--gold), var(--primary-2));
    color: #fff; font-size: 1.2rem; box-shadow: var(--shadow-gold); flex-shrink: 0;
}
.brand-mark.has-logo {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.brand-logo-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
    padding: 4px;
}
.navbar-brand strong { font-family: 'Playfair Display',serif; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.navbar-brand small { color: var(--text-2); font-size: .74rem; }
.navbar .nav-link { font-weight: 600; font-size: .88rem; padding: .6rem .9rem !important; border-radius: var(--radius-sm); color: var(--text-2); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--gold); background: var(--gold-bg); }

/* Theme Toggle */
.theme-toggle-btn {
    width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-glass); color: var(--text-2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; backdrop-filter: blur(10px); font-size: .95rem; transition: all .25s ease;
    outline: none;
}
.theme-toggle-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-bg); box-shadow: var(--shadow-gold); }
[data-theme="dark"] .theme-icon-sun  { display: inline-block; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-sun  { display: none; }
[data-theme="light"] .theme-icon-moon { display: inline-block; }

.btn-navbar-cta {
    background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #1a0f00 !important;
    border: none; font-weight: 700; padding: .6rem 1.4rem !important;
    border-radius: var(--radius-sm) !important; font-size: .86rem;
    box-shadow: var(--shadow-gold); transition: all .25s ease;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    line-height: 1;
}
.btn-navbar-cta:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 16px 44px rgba(201,170,113,.32); }

.btn-client-login {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 55%, #f3dfab 100%);
    color: #1a0f00 !important;
    border: 1px solid rgba(201,170,113,.28);
    font-weight: 700;
    padding: .6rem 1.35rem !important;
    border-radius: var(--radius-sm) !important;
    font-size: .86rem;
    box-shadow: var(--shadow-gold), 0 0 0 1px rgba(255,255,255,.10);
    text-transform: none;
    isolation: isolate;
    transition: all .28s ease;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    line-height: 1;
}
.btn-client-login::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(120deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.58) 50%, rgba(255,255,255,0) 72%);
    transform: translateX(-120%) skewX(-18deg);
    opacity: .55;
    pointer-events: none;
    animation: client-login-shine 4.5s ease-in-out infinite;
    z-index: -1;
}
.btn-client-login::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.12);
    pointer-events: none;
}
.btn-client-login:hover,
.btn-client-login:focus {
    color: #1a0f00 !important;
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 16px 48px rgba(201,170,113,.34), 0 0 0 1px rgba(255,255,255,.12);
    filter: brightness(1.04) saturate(1.03);
}
.btn-client-login:active {
    transform: translateY(0) scale(.99);
}
.btn-client-login-mobile {
    display: inline-flex;
    justify-content: center;
    width: 100%;
}

@keyframes client-login-shine {
    0%, 52% { transform: translateX(-120%) skewX(-18deg); }
    65% { transform: translateX(120%) skewX(-18deg); }
    100% { transform: translateX(120%) skewX(-18deg); }
}

[data-theme="light"] .btn-client-login {
    border-color: rgba(180,83,9,.16);
    box-shadow: 0 14px 44px rgba(180,83,9,.16), 0 0 0 1px rgba(255,255,255,.34);
}
.btn-client-login .fa-solid,
.btn-navbar-cta .fa-solid {
    position: relative;
    z-index: 1;
    margin-right: 0 !important;
    width: 1em;
    text-align: center;
}
.navbar-toggler { border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-2); padding: .4rem .65rem; background: transparent; }
.navbar-toggler-icon { filter: invert(.6); }
[data-theme="light"] .navbar-toggler-icon { filter: none; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn { font-weight: 700; border-radius: var(--radius-sm); transition: all .25s ease; letter-spacing: .01em; }
.btn-primary { background: linear-gradient(135deg, var(--primary-2) 0%, var(--accent-2) 100%); border: none; color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, #0284c7 0%, #7c3aed 100%); transform: translateY(-2px); box-shadow: 0 16px 48px rgba(56,189,248,.30); color: #fff; }
.btn-primary:active { transform: translateY(0); }
.btn-gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%); border: none; color: #1a0f00; font-weight: 800; box-shadow: var(--shadow-gold); }
.btn-gold:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 16px 48px rgba(201,170,113,.35); color: #1a0f00; }
.btn-outline-light { border: 1px solid var(--border); color: var(--text-2); background: var(--bg-glass); backdrop-filter: blur(10px); }
.btn-outline-light:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-bg); }
[data-theme="light"] .btn-outline-light { border-color: var(--border); color: var(--text-2); background: transparent; }
[data-theme="light"] .btn-outline-light:hover { border-color: var(--primary-2); color: var(--primary-2); background: var(--primary-bg); }
.btn-outline-primary { border: 1px solid var(--primary-2); color: var(--primary); background: transparent; }
.btn-outline-primary:hover { background: var(--primary-bg); color: var(--primary); border-color: var(--primary); }
.btn-success { background: linear-gradient(135deg, var(--success), #059669); border: none; color: #fff; box-shadow: 0 10px 32px rgba(52,211,153,.22); }
.btn-danger { background: linear-gradient(135deg, var(--danger), #b91c1c); border: none; color: #fff; }
.btn-light { background: #fff; color: var(--primary-deep); font-weight: 700; border: none; box-shadow: var(--shadow); }
.btn-light:hover { background: var(--gold); color: #1a0f00; transform: translateY(-2px); }

/* ================================================================
   FORMS
   ================================================================ */
.form-label { font-weight: 600; font-size: .875rem; color: var(--text-2); margin-bottom: .45rem; letter-spacing: .01em; }
.form-control, .form-select {
    border-radius: var(--radius-sm); padding: .85rem 1.1rem; font-size: .95rem;
    border: 1.5px solid var(--border-2); background: var(--bg-card); color: var(--text); transition: all .2s ease;
}
.form-control::placeholder { color: var(--text-3); }
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem var(--gold-glow); background: var(--bg-card); color: var(--text); outline: none; }
.form-control.is-invalid { border-color: var(--danger); }
.form-select { cursor: pointer; }
.form-select option { background: var(--bg-2); color: var(--text); }
[data-theme="light"] .form-control, [data-theme="light"] .form-select { border-color: #d1daea; background: #ffffff; color: var(--text); }
textarea.form-control { resize: vertical; min-height: 120px; }
.invalid-feedback { font-size: .82rem; color: var(--danger); margin-top: .3rem; }

/* ================================================================
   CARDS
   ================================================================ */
.metric-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.4rem 1.6rem; backdrop-filter: blur(12px); position: relative; overflow: hidden;
}
.metric-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--gold-glow) 0%, transparent 60%); pointer-events: none; }
.metric-card strong { display: block; font-family: 'Playfair Display',serif; font-size: 1.25rem; font-weight: 800; color: var(--gold); line-height: 1.2; }
.metric-card span { color: var(--text-2); font-size: .87rem; margin-top: .2rem; display: block; }

.feature-highlight-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.8rem; backdrop-filter: blur(14px); transition: all .3s ease; position: relative; overflow: hidden; height: 100%;
}
.feature-highlight-card:hover { border-color: var(--primary-2); box-shadow: var(--shadow-blue); transform: translateY(-3px); }
.feature-highlight-card h3 { font-size: 1.05rem; color: var(--text); margin-bottom: .6rem; font-weight: 700; }
.feature-highlight-card p { color: var(--text-2); line-height: 1.75; margin: 0; font-size: .93rem; }

.module-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.8rem; transition: all .3s ease; height: 100%; position: relative; overflow: hidden;
}
.module-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--primary-2)); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.module-card:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-4px); }
.module-card:hover::before { transform: scaleX(1); }
.module-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; color: var(--text); }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.feature-list li { display: flex; gap: .75rem; align-items: flex-start; color: var(--text-2); font-size: .9rem; }
.feature-list li i { color: var(--success); margin-top: .25rem; flex-shrink: 0; }

.roi-calculator-card {
    background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-soft) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem 1.2rem;
    box-shadow: var(--shadow-sm);
}
.roi-calculator-card h3 { color: var(--text); font-size: 1.08rem; }
.roi-calculator-card .form-label { color: var(--text-2); font-size: .86rem; font-weight: 700; }
.roi-calculator-card .form-control {
    border-color: rgba(201,170,113,.32);
    font-weight: 700;
    letter-spacing: .02em;
}
.roi-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(201,170,113,.35);
    background: rgba(201,170,113,.12);
    color: var(--gold-2);
    padding: .25rem .62rem;
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.roi-result-line {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    padding: .6rem .72rem;
    font-size: .84rem;
}
.roi-result-line span { color: var(--text-2); }
.roi-result-line strong { font-size: .94rem; color: var(--text); }
.roi-result-line.danger { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.08); }
.roi-result-line.danger i { color: var(--danger); font-size: .58rem; }
.roi-result-line.success { border-color: rgba(52,211,153,.32); background: rgba(52,211,153,.08); }
.roi-result-line.success i { color: var(--success); }
[data-theme="light"] .roi-calculator-card {
    background: linear-gradient(145deg, #ffffff 0%, #f4f8ff 100%);
    border-color: rgba(30,64,175,.16);
}

.screenshot-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; transition: all .3s ease; height: 100%; }
.screenshot-card:hover { border-color: var(--primary-2); box-shadow: var(--shadow-blue); transform: translateY(-3px); }
.screenshot-card img { width: 100%; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.screenshot-card h3 { font-size: 1.02rem; color: var(--text); margin-bottom: .5rem; }
.screenshot-card p { color: var(--text-2); font-size: .9rem; margin: 0; }

.screens-royal-shell {
    position: relative;
    border: 1px solid rgba(201,170,113,.32);
    border-radius: var(--radius-lg);
    background: linear-gradient(155deg, rgba(10,22,44,.95) 0%, rgba(6,16,34,.95) 100%);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(201,170,113,.18), 0 0 0 1px rgba(56,189,248,.10);
    overflow: hidden;
    padding: 1.05rem;
}
.screens-royal-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(201,170,113,.58), rgba(56,189,248,.32), rgba(201,170,113,.42));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
[data-theme="light"] .screens-royal-shell {
    border-color: rgba(30,64,175,.20);
    background: linear-gradient(155deg, #f7f9ff 0%, #edf3ff 100%);
    box-shadow: 0 24px 56px rgba(30,64,175,.14), inset 0 0 0 1px rgba(30,64,175,.08), 0 0 0 1px rgba(56,189,248,.10);
}
.screens-royal-carousel {
    border-radius: calc(var(--radius-lg) - .35rem);
    overflow: hidden;
    border: 1px solid rgba(201,170,113,.28);
    background: #070f1d;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -90px 120px rgba(0,0,0,.45);
}
[data-theme="light"] .screens-royal-carousel {
    background: #e3ecff;
    border-color: rgba(30,64,175,.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), inset 0 -90px 120px rgba(30,64,175,.08);
}
.screens-royal-slide {
    position: relative;
    min-height: clamp(420px, 72vh, 860px);
    max-height: 88vh;
    display: flex;
    align-items: stretch;
}
.screens-royal-fullscreen-btn {
    position: absolute;
    top: clamp(.95rem, 1.8vw, 1.4rem);
    right: clamp(.95rem, 1.8vw, 1.4rem);
    z-index: 3;
    border: 1px solid rgba(201,170,113,.34);
    background: rgba(6,14,30,.68);
    color: #f5d7a1;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .45rem .82rem;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: all .2s ease;
    box-shadow: var(--shadow-sm);
}
.screens-royal-fullscreen-btn:hover {
    border-color: var(--gold);
    background: rgba(201,170,113,.16);
    color: #ffe8bd;
}
[data-theme="light"] .screens-royal-fullscreen-btn {
    border-color: rgba(30,64,175,.22);
    background: rgba(255,255,255,.86);
    color: #1f3f88;
}
[data-theme="light"] .screens-royal-fullscreen-btn:hover {
    border-color: var(--primary-2);
    background: rgba(56,189,248,.12);
}
.screens-royal-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 15%, rgba(201,170,113,.20), transparent 40%), radial-gradient(circle at 85% 15%, rgba(56,189,248,.14), transparent 42%);
    pointer-events: none;
    z-index: 1;
}
.screens-royal-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: clamp(1.2rem, 2vw, 2rem);
    background: linear-gradient(180deg, rgba(6,11,24,.45) 0%, rgba(3,6,15,.78) 100%);
}
[data-theme="light"] .screens-royal-image {
    background: linear-gradient(180deg, rgba(250,252,255,.72) 0%, rgba(238,245,255,.95) 100%);
}
.screens-royal-overlay {
    position: absolute;
    left: clamp(1rem, 2vw, 1.6rem);
    right: clamp(1rem, 2vw, 1.6rem);
    bottom: clamp(1rem, 2vw, 1.6rem);
    z-index: 2;
    padding: clamp(.95rem, 1.8vw, 1.3rem);
    border-radius: var(--radius);
    border: 1px solid rgba(201,170,113,.26);
    background: linear-gradient(130deg, rgba(4,10,22,.72) 0%, rgba(4,10,22,.42) 100%);
    backdrop-filter: blur(10px);
}
[data-theme="light"] .screens-royal-overlay {
    border-color: rgba(30,64,175,.20);
    background: linear-gradient(130deg, rgba(255,255,255,.88) 0%, rgba(246,250,255,.84) 100%);
}
.screens-royal-overlay h3 {
    margin: .5rem 0 .45rem;
    color: var(--text);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 700;
}
[data-theme="light"] .screens-royal-overlay h3 { color: var(--text); }
.screens-royal-overlay p {
    margin: 0;
    color: var(--text-2);
    font-size: clamp(.88rem, 1.5vw, .96rem);
    max-width: 72ch;
    line-height: 1.7;
}
[data-theme="light"] .screens-royal-overlay p { color: var(--text-2); }
.screens-royal-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .32rem .75rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(201,170,113,.35);
    color: var(--gold-2);
    background: rgba(201,170,113,.12);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.screens-royal-control {
    width: 58px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}
.screens-royal-carousel:hover .screens-royal-control,
.screens-royal-carousel:focus-within .screens-royal-control {
    opacity: 1;
    pointer-events: auto;
}
.screens-royal-control .carousel-control-prev-icon,
.screens-royal-control .carousel-control-next-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28);
    background-color: rgba(4,10,22,.62);
    background-size: 45% 45%;
    box-shadow: var(--shadow-sm);
}
[data-theme="light"] .screens-royal-control .carousel-control-prev-icon,
[data-theme="light"] .screens-royal-control .carousel-control-next-icon {
    border-color: rgba(30,64,175,.22);
    background-color: rgba(255,255,255,.90);
}
.screens-royal-nav {
    margin-top: 1rem;
    display: grid;
    gap: .72rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.screens-royal-nav-btn {
    width: 100%;
    text-align: left;
    position: relative;
    border-radius: calc(var(--radius-sm) + 2px);
    border: 1px solid rgba(201,170,113,.22);
    background: linear-gradient(135deg, rgba(13,26,49,.78) 0%, rgba(7,15,31,.94) 100%);
    color: var(--text-2);
    padding: .78rem .9rem;
    transition: all .25s ease;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.22);
}
.screens-royal-nav-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, rgba(201,170,113,.16), transparent 45%, rgba(56,189,248,.12));
    opacity: .58;
    pointer-events: none;
}
.screens-royal-nav-btn:hover {
    border-color: rgba(56,189,248,.42);
    background: linear-gradient(135deg, rgba(20,40,74,.86) 0%, rgba(10,21,41,.96) 100%);
    color: var(--text);
    transform: translateY(-2px);
    box-shadow: var(--shadow-blue);
}
.screens-royal-nav-btn.active {
    border-color: rgba(201,170,113,.62);
    background: linear-gradient(135deg, rgba(201,170,113,.28) 0%, rgba(56,189,248,.14) 100%);
    box-shadow: var(--shadow-gold), inset 0 0 0 1px rgba(255,255,255,.08);
    color: var(--text);
    overflow: hidden;
    animation: screens-royal-breathe 3.6s ease-in-out infinite;
}
.screens-royal-nav-btn.active::after {
    content: '';
    position: absolute;
    top: -40%;
    left: -65%;
    width: 42%;
    height: 180%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.30) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: screens-royal-shine 4.8s ease-in-out infinite;
    pointer-events: none;
}
[data-theme="light"] .screens-royal-nav-btn {
    border-color: rgba(30,64,175,.20);
    background: linear-gradient(135deg, rgba(255,255,255,.94) 0%, rgba(241,246,255,.98) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 8px 16px rgba(30,64,175,.12);
}
[data-theme="light"] .screens-royal-nav-btn:hover {
    border-color: rgba(56,189,248,.44);
    background: linear-gradient(135deg, rgba(239,248,255,.95) 0%, rgba(229,239,255,.98) 100%);
}
[data-theme="light"] .screens-royal-nav-btn.active {
    border-color: rgba(180,83,9,.38);
    background: linear-gradient(135deg, rgba(255,237,213,.78) 0%, rgba(219,234,254,.84) 100%);
    box-shadow: 0 8px 18px rgba(30,64,175,.10), inset 0 0 0 1px rgba(255,255,255,.78);
    animation: screens-royal-breathe-light 4.2s ease-in-out infinite;
}
[data-theme="light"] .screens-royal-nav-btn.active::after {
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.20) 50%, rgba(255,255,255,0) 100%);
}
.screens-royal-nav-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.05rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(201,170,113,.45);
    background: rgba(201,170,113,.15);
    padding: .08rem .52rem;
    font-size: .7rem;
    letter-spacing: .08em;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--gold-2);
    margin-bottom: .35rem;
}
.screens-royal-nav-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .86rem;
    font-weight: 600;
    color: var(--text);
}

@keyframes screens-royal-shine {
    0% { left: -65%; }
    60% { left: 130%; }
    100% { left: 130%; }
}

@keyframes screens-royal-breathe {
    0%, 100% {
        border-color: rgba(201,170,113,.42);
        box-shadow: 0 10px 20px rgba(201,170,113,.14), inset 0 0 0 1px rgba(255,255,255,.05);
    }
    50% {
        border-color: rgba(201,170,113,.59);
        box-shadow: 0 12px 24px rgba(201,170,113,.20), 0 0 0 1px rgba(56,189,248,.13), inset 0 0 0 1px rgba(255,255,255,.10);
    }
}

@keyframes screens-royal-breathe-light {
    0%, 100% {
        border-color: rgba(180,83,9,.32);
        box-shadow: 0 8px 16px rgba(30,64,175,.08), inset 0 0 0 1px rgba(255,255,255,.72);
    }
    50% {
        border-color: rgba(180,83,9,.40);
        box-shadow: 0 9px 18px rgba(30,64,175,.11), 0 0 0 1px rgba(56,189,248,.11), inset 0 0 0 1px rgba(255,255,255,.82);
    }
}

.screens-royal-modal-dialog { margin: 0; }
.screens-royal-modal-content {
    background: radial-gradient(circle at top left, rgba(201,170,113,.18), transparent 38%), radial-gradient(circle at 80% 0, rgba(56,189,248,.14), transparent 34%), #030813;
    border: 0;
}
[data-theme="light"] .screens-royal-modal-content {
    background: radial-gradient(circle at top left, rgba(180,83,9,.10), transparent 35%), radial-gradient(circle at 80% 0, rgba(37,99,235,.10), transparent 35%), #f3f7ff;
}
.screens-royal-modal-header {
    border-bottom: 1px solid rgba(201,170,113,.22);
    padding: 1rem 1.25rem;
    background: rgba(2,7,17,.46);
    backdrop-filter: blur(8px);
}
[data-theme="light"] .screens-royal-modal-header {
    border-bottom-color: rgba(30,64,175,.16);
    background: rgba(255,255,255,.70);
}
.screens-royal-modal-header h3 { color: var(--text); }
[data-theme="light"] .screens-royal-modal-header h3 { color: var(--text); }
.screens-royal-modal-header .btn-close {
    filter: invert(1) grayscale(1);
    opacity: .9;
}
[data-theme="light"] .screens-royal-modal-header .btn-close {
    filter: none;
    opacity: .8;
}
.screens-royal-modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(.95rem, 2vw, 1.5rem);
}
.screens-royal-modal-viewport {
    width: 100%;
    max-height: calc(100vh - 140px);
    overflow: auto;
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: center;
    justify-content: center;
}
.screens-royal-modal-actions {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
}
.screens-royal-zoom-badge {
    min-width: 3.1rem;
    text-align: center;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(201,170,113,.34);
    background: rgba(8,18,37,.74);
    color: #f6ddab;
    padding: .3rem .58rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .03em;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.screens-royal-zoom-badge.is-zooming {
    animation: screens-royal-zoom-badge-pulse .44s ease-out;
}
[data-theme="light"] .screens-royal-zoom-badge {
    border-color: rgba(30,64,175,.20);
    background: rgba(255,255,255,.86);
    color: #1f3f88;
}

@keyframes screens-royal-zoom-badge-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(201,170,113,0);
        border-color: rgba(201,170,113,.34);
    }
    45% {
        transform: scale(1.03);
        box-shadow: 0 0 0 4px rgba(201,170,113,.10);
        border-color: rgba(201,170,113,.50);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(201,170,113,0);
        border-color: rgba(201,170,113,.34);
    }
}
.screens-royal-zoom-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid rgba(201,170,113,.34);
    background: rgba(8,18,37,.74);
    color: #f6ddab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}
.screens-royal-zoom-btn:hover {
    border-color: var(--gold);
    background: rgba(201,170,113,.20);
}
[data-theme="light"] .screens-royal-zoom-btn {
    border-color: rgba(30,64,175,.20);
    background: rgba(255,255,255,.86);
    color: #1f3f88;
}
[data-theme="light"] .screens-royal-zoom-btn:hover {
    border-color: var(--primary-2);
    background: rgba(56,189,248,.12);
}
.screens-royal-modal-image {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: var(--radius);
    border: 1px solid rgba(201,170,113,.24);
    background: linear-gradient(180deg, rgba(5,11,23,.72) 0%, rgba(3,8,18,.90) 100%);
    box-shadow: var(--shadow-lg);
    transition: transform .2s ease;
    transform-origin: center center;
    will-change: transform;
}
[data-theme="light"] .screens-royal-modal-image {
    border-color: rgba(30,64,175,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(241,246,255,.95) 100%);
}

.benefit-chip { display: flex; gap: .85rem; align-items: center; background: var(--bg-card); border: 1px solid var(--border); padding: 1rem 1.25rem; border-radius: var(--radius-sm); font-weight: 600; color: var(--text); font-size: .9rem; transition: all .25s ease; }
.benefit-chip:hover { border-color: var(--gold); background: var(--gold-bg); transform: translateX(4px); }
.benefit-chip i { color: var(--success); font-size: 1rem; flex-shrink: 0; }

.industry-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.8rem; transition: all .3s ease; text-align: center; height: 100%; }
.industry-card:hover { border-color: var(--gold); box-shadow: var(--shadow-gold); transform: translateY(-4px); }
.industry-card h3 { font-size: 1rem; color: var(--text); margin: 0; font-weight: 600; }

.testimonial-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; transition: all .3s ease; height: 100%; position: relative; overflow: hidden; }
.testimonial-card::before { content: '\201C'; font-family: 'Playfair Display',serif; font-size: 7rem; line-height: .8; color: var(--gold); opacity: .12; position: absolute; top: .5rem; left: 1.2rem; }
.testimonial-card:hover { border-color: var(--gold); box-shadow: var(--shadow-gold); }
.testimonial-card .stars { color: var(--gold); font-size: .95rem; margin-bottom: .8rem; }
.testimonial-card p { color: var(--text-2); font-size: .93rem; line-height: 1.8; position: relative; z-index: 1; }
.testimonial-card strong { color: var(--text); font-weight: 700; display: block; margin-top: 1rem; }
.testimonial-card .author-role { color: var(--text-3); font-size: .83rem; }

.info-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; backdrop-filter: blur(12px); }
.info-card .info-item { display: flex; align-items: center; gap: .9rem; padding: .75rem 0; border-bottom: 1px solid var(--border-2); color: var(--text-2); font-size: .93rem; }
.info-card .info-item:last-child { border-bottom: none; }
.info-card .info-item i { color: var(--gold); font-size: 1.05rem; width: 22px; text-align: center; flex-shrink: 0; }

.icon-pill, .module-icon, .industry-icon {
    width: 52px; height: 52px; border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1.1rem; color: white; font-size: 1.25rem;
    background: linear-gradient(135deg, var(--gold) 0%, var(--primary-2) 100%);
    box-shadow: var(--shadow-gold); flex-shrink: 0;
}

.form-shell { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; backdrop-filter: blur(16px); box-shadow: var(--shadow); }

.policy-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; backdrop-filter: blur(12px); }
.policy-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--text); margin-top: 1.8rem; margin-bottom: .65rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border-2); }
.policy-card h3:first-child { margin-top: 0; }
.policy-card p { color: var(--text-2); font-size: .93rem; line-height: 1.85; }
.policy-card a { color: var(--primary); }
.policy-card a:hover { color: var(--gold); }
.policy-shell { max-width: 900px; }

.contact-card-list { display: grid; gap: 1rem; }
.contact-card-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.4rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); transition: all .25s ease; }
.contact-card-item:hover { border-color: var(--gold); box-shadow: var(--shadow-gold); transform: translateX(3px); }
.contact-card-item i { color: var(--gold); font-size: 1.05rem; margin-top: .15rem; flex-shrink: 0; width: 20px; text-align: center; }
.contact-card-item strong { display: block; color: var(--text); font-size: .85rem; font-weight: 700; margin-bottom: .2rem; }
.contact-card-item p, .contact-card-item span { color: var(--text-2); font-size: .88rem; margin: 0; }
.contact-card-item a { color: var(--primary); font-size: .88rem; }
.contact-card-item a:hover { color: var(--gold); }

.map-placeholder { min-height: 260px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius); position: relative; overflow: hidden; }
.map-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border-2) 1px, transparent 1px), linear-gradient(90deg, var(--border-2) 1px, transparent 1px); background-size: 40px 40px; }
.map-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .75rem; font-weight: 700; color: var(--text-2); font-size: .93rem; }
.map-label i { color: var(--primary); font-size: 1.4rem; }

.cta-panel { background: linear-gradient(135deg, var(--bg-2) 0%, rgba(10,22,44,.95) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 3.5rem; box-shadow: var(--shadow); position: relative; overflow: hidden; }
[data-theme="light"] .cta-panel { background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 55%, #2563eb 100%); border-color: rgba(255,255,255,.15); }
.cta-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top left, var(--gold-glow), transparent 45%), radial-gradient(circle at bottom right, var(--primary-glow), transparent 45%); pointer-events: none; }
.cta-panel .section-badge { background: rgba(255,255,255,.10); color: var(--gold-2); border-color: rgba(255,255,255,.15); }
.cta-panel .section-title { color: var(--on-cta); }
.cta-copy { color: var(--on-cta-muted); max-width: 620px; }

/* ── ACCORDION ── */
.accordion-premium .accordion-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius) !important; overflow: hidden; margin-bottom: .9rem; transition: border-color .3s ease; }
.accordion-premium .accordion-item:hover { border-color: var(--gold); }
.accordion-premium .accordion-button { background: transparent; color: var(--text); font-weight: 600; font-size: .95rem; box-shadow: none; padding: 1.3rem 1.5rem; border-radius: var(--radius) !important; }
.accordion-premium .accordion-button::after { filter: invert(.6) sepia(1) hue-rotate(10deg) saturate(2); }
.accordion-premium .accordion-button:not(.collapsed) { background: var(--gold-bg); color: var(--gold); box-shadow: none; }
.accordion-premium .accordion-button:not(.collapsed)::after { filter: none; }
.accordion-premium .accordion-body { background: transparent; color: var(--text-2); padding: .5rem 1.5rem 1.4rem; font-size: .93rem; line-height: 1.8; }

/* ── HERO ── */
.hero-section {
    position: relative; min-height: 100vh; display: flex; align-items: center;
    background: radial-gradient(ellipse at top left, rgba(201,170,113,.15) 0%, transparent 40%), radial-gradient(ellipse at 80% 20%, rgba(56,189,248,.12) 0%, transparent 35%), radial-gradient(ellipse at 20% 80%, rgba(139,92,246,.10) 0%, transparent 35%), var(--bg);
    overflow: hidden;
}
[data-theme="light"] .hero-section { background: radial-gradient(ellipse at top left, rgba(180,83,9,.07) 0%, transparent 40%), radial-gradient(ellipse at 80% 20%, rgba(37,99,235,.07) 0%, transparent 35%), var(--bg); }
.hero-orb { position: absolute; border-radius: 999px; filter: blur(56px); pointer-events: none; opacity: .5; }
.orb-one { width: 420px; height: 420px; background: radial-gradient(circle, rgba(201,170,113,.25), transparent); top: -5%; left: -8%; }
.orb-two { width: 360px; height: 360px; background: radial-gradient(circle, rgba(56,189,248,.20), transparent); right: 0; bottom: 0; }
.orb-three { width: 280px; height: 280px; background: radial-gradient(circle, rgba(139,92,246,.18), transparent); top: 40%; right: 15%; }
.hero-dashboard { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); backdrop-filter: blur(10px); box-shadow: var(--shadow-lg); }
.hero-subtitle, .hero-copy { max-width: 680px; }
.trust-metrics { display: flex; gap: .9rem; flex-wrap: wrap; }
.trust-metrics .metric-card { flex: 1; min-width: 120px; }
.hero-content-row { padding-top: 110px; padding-bottom: 80px; }
.hero-title { font-family: 'Playfair Display', serif; line-height: 1.1; letter-spacing: -0.03em; }
.hero-lead { color: var(--text-2); max-width: 640px; }
.hero-description { color: var(--text-2); max-width: 620px; line-height: 1.8; }

/* ── INNER HERO ── */
.inner-hero, .inner-hero-policy, .inner-hero-demo, .inner-hero-contact {
    background: radial-gradient(ellipse at top left, rgba(201,170,113,.12) 0%, transparent 35%), radial-gradient(ellipse at 80% 0%, rgba(56,189,248,.10) 0%, transparent 30%), var(--bg);
    padding-top: 86px;
}
[data-theme="light"] .inner-hero, [data-theme="light"] .inner-hero-policy, [data-theme="light"] .inner-hero-demo, [data-theme="light"] .inner-hero-contact {
    background: radial-gradient(ellipse at top left, rgba(180,83,9,.05) 0%, transparent 35%), var(--bg);
}

/* ── SECTION BACKGROUNDS ── */
.bg-dark-soft { background: var(--bg-2); border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); }
.bg-panel { background: var(--bg-2); border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); }
.contact-cta { background: var(--bg); border-top: 1px solid var(--border-2); }

/* ── STATS STRIP ── */
.stats-strip { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2rem 0; }
.stat-item { text-align: center; }
.stat-item .stat-number { font-family: 'Playfair Display',serif; font-size: 2.5rem; font-weight: 800; color: var(--gold); line-height: 1; display: block; }
.stat-item .stat-label { color: var(--text-2); font-size: .85rem; margin-top: .35rem; display: block; }

/* ── FOOTER ── */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--border); color: var(--text-2); }
.footer-brand strong { font-family: 'Playfair Display',serif; font-size: 1.05rem; color: var(--text); display: block; }
.footer-brand small { color: var(--text-3); font-size: .76rem; }
.footer-desc { color: var(--text-2); font-size: .88rem; line-height: 1.75; max-width: 340px; }
.footer-heading { font-family: 'Inter',sans-serif; font-size: .73rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; }
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.footer-links a { color: var(--text-2); font-size: .88rem; display: inline-flex; align-items: center; gap: .5rem; transition: color .2s, transform .2s; }
.footer-links a:hover { color: var(--gold); transform: translateX(4px); }
.footer-contact li { display: flex; gap: .85rem; align-items: flex-start; font-size: .88rem; color: var(--text-2); }
.footer-contact i { color: var(--gold); margin-top: .15rem; flex-shrink: 0; width: 16px; }
.footer-contact a { color: var(--text-2); }
.footer-contact a:hover { color: var(--gold); }
.social-links { display: flex; gap: .6rem; }
.social-links a { width: 38px; height: 38px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-2); font-size: .88rem; transition: all .25s ease; }
.social-links a:hover { background: var(--gold-bg); border-color: var(--gold); color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.footer-bottom { border-top: 1px solid var(--border-2); padding-top: 1.5rem; font-size: .83rem; color: var(--text-3); }
.footer-bottom a { color: var(--text-3); }
.footer-bottom a:hover { color: var(--gold); }

/* ── WHATSAPP ── */
.whatsapp-float { position: fixed; right: 20px; bottom: 20px; z-index: 1070; width: 54px; height: 54px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 1.6rem; background: linear-gradient(135deg, #25D366, #128C7E); box-shadow: 0 14px 44px rgba(37,211,102,.35); transition: all .3s ease; animation: float-pulse 3s infinite; }
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 20px 56px rgba(37,211,102,.50); color: white; }
@keyframes float-pulse { 0%,100% { box-shadow: 0 14px 44px rgba(37,211,102,.35); } 50% { box-shadow: 0 14px 60px rgba(37,211,102,.55); } }

/* ── SCROLL TOP ── */
.scroll-top-btn { position: fixed; right: 20px; bottom: 88px; z-index: 1060; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border); color: var(--text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .88rem; box-shadow: var(--shadow-sm); opacity: 0; visibility: hidden; transition: all .3s ease; }
.scroll-top-btn.visible { opacity: 1; visibility: visible; }
.scroll-top-btn:hover { background: var(--gold-bg); border-color: var(--gold); color: var(--gold); }

/* ── ALERTS ── */
.alert { border-radius: var(--radius-sm); border: 1px solid; font-weight: 500; }
.alert-success { background: var(--success-bg); border-color: rgba(52,211,153,.25); color: var(--success); }
.alert-danger { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.25); color: var(--danger); }

.log-console {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text);
}

/* ── TABLE ── */
.table-premium { color: var(--text); border-color: var(--border-2); }
.table-premium thead th { color: var(--gold); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; background: var(--bg-soft); border-color: var(--border); padding: .9rem 1rem; white-space: nowrap; }
.table-premium tbody tr { border-color: var(--border-2); transition: background .2s ease; }
.table-premium tbody tr:hover { background: var(--bg-soft); }
.table-premium td, .table-premium th { padding: .85rem 1rem; vertical-align: middle; }
/* Bootstrap table override */
.table { color: var(--text); }
.table thead th { color: var(--gold); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; background: var(--bg-soft); border-color: var(--border); }
.table td, .table th { vertical-align: middle; border-color: var(--border-2); color: var(--text-2); }
.table-striped>tbody>tr:nth-of-type(odd)>* { background-color: var(--bg-soft); color: var(--text-2); }

/* ── BADGES ── */
.badge { border-radius: var(--radius-xs); font-size: .72rem; font-weight: 700; padding: .35em .7em; }

/* ── 404 PAGE ── */
.error-page-404 { min-height: 70vh; display: flex; align-items: center; }
.error-code { font-family: 'Playfair Display',serif; font-size: clamp(6rem, 16vw, 12rem); font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--gold), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ── ADMIN ── */
.admin-body { background: var(--bg); }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar { width: 280px; background: var(--bg-2); border-right: 1px solid var(--border); padding: 1.75rem 1.4rem; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0; }
.admin-brand { display: flex; gap: .9rem; align-items: center; text-decoration: none; padding: .5rem; border-radius: var(--radius-sm); }
.admin-brand strong { color: var(--text); font-size: 1rem; font-family: 'Playfair Display',serif; }
.admin-brand small { color: var(--text-3); font-size: .74rem; }
.admin-nav { display: grid; gap: .3rem; }
.admin-nav a { display: flex; align-items: center; gap: .85rem; color: var(--text-2); padding: .8rem 1rem; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 600; transition: all .2s ease; text-decoration: none; }
.admin-nav a i { color: var(--text-3); font-size: .93rem; width: 18px; text-align: center; }
.admin-nav a.active, .admin-nav a:hover { background: var(--gold-bg); color: var(--gold); }
.admin-nav a.active i, .admin-nav a:hover i { color: var(--gold); }
.admin-content { flex: 1; padding: 1.75rem; overflow: hidden; }
.admin-topbar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.75rem; box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; }
.admin-topbar h1 { color: var(--text); font-size: 1.25rem; font-family: 'Playfair Display',serif; }
.admin-topbar .text-muted { color: var(--text-3) !important; font-size: .86rem; }
.admin-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-sm); }
.admin-stat-card { background: linear-gradient(135deg, var(--bg-2), var(--bg-soft)); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.admin-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--primary-2)); }
.admin-stat-card .stat-label { color: var(--text-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; display: block; margin-bottom: .4rem; }
.admin-stat-card .stat-value { font-size: 2.1rem; font-weight: 800; font-family: 'Playfair Display',serif; color: var(--text); line-height: 1; }
.admin-stat-card .stat-icon { position: absolute; right: 1.25rem; top: 1.25rem; font-size: 2rem; opacity: .12; color: var(--gold); }
/* legacy compat */
.admin-stat-card span { color: var(--text-3); display: block; margin-bottom: .35rem; font-size: .78rem; }
.admin-stat-card strong { font-size: 2rem; line-height: 1; font-weight: 800; color: var(--text); }
.admin-login-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, var(--bg-2) 0%, var(--bg) 70%); padding: 2rem; }

/* Keep admin pages visually consistent even when using plain Bootstrap components. */
.admin-content .table:not(.table-premium) { color: var(--text); border-color: var(--border-2); }
.admin-content .table:not(.table-premium) thead th { color: var(--gold); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; background: var(--bg-soft); border-color: var(--border); }
.admin-content .table:not(.table-premium) td,
.admin-content .table:not(.table-premium) th { vertical-align: middle; border-color: var(--border-2); color: var(--text-2); }
.admin-content .badge.text-bg-success { background: var(--success-bg) !important; color: var(--success) !important; border: 1px solid rgba(52,211,153,.25); }
.admin-content .badge.text-bg-secondary { background: var(--bg-soft) !important; color: var(--text-2) !important; border: 1px solid var(--border); }
.admin-content .btn-outline-secondary { border-color: var(--border); color: var(--text-2); background: transparent; }
.admin-content .btn-outline-secondary:hover { border-color: var(--primary-2); color: var(--primary); background: var(--primary-bg); }
.admin-content .btn-outline-danger { border-color: rgba(248,113,113,.45); color: var(--danger); background: transparent; }
.admin-content .btn-outline-danger:hover { background: rgba(248,113,113,.12); border-color: var(--danger); color: var(--danger); }
.admin-content .alert-info { background: var(--primary-bg); border-color: rgba(56,189,248,.25); color: var(--primary); }

.logo-preview-box {
    width: 86px;
    height: 86px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
.logo-preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}
.logo-upload-dropzone {
    position: relative;
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    cursor: pointer;
}
.logo-upload-dropzone:hover,
.logo-upload-dropzone:focus-within {
    border-color: var(--primary-2);
    box-shadow: var(--shadow-blue);
    background: var(--bg-card);
}
.logo-upload-dropzone.is-dragover {
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
    background: var(--gold-bg);
}
.logo-upload-input { background: var(--bg-card); }
.logo-drop-badge {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: inline-flex;
    align-items: center;
    padding: .28rem .65rem;
    border-radius: var(--radius-pill);
    background: var(--gold-bg);
    color: var(--gold);
    border: 1px solid var(--border);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    pointer-events: none;
}
.selected-file-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .8rem;
    border-radius: var(--radius-pill);
    background: var(--primary-bg);
    color: var(--primary);
    border: 1px solid rgba(56,189,248,.25);
    font-size: .82rem;
    font-weight: 700;
}
.clear-logo-selection {
    color: var(--danger);
    text-decoration: none;
    font-weight: 700;
}
.clear-logo-selection:hover { color: var(--gold); text-decoration: underline; }
.screenshot-sort-item {
    cursor: grab;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.screenshot-sort-item:active { cursor: grabbing; }
.screenshot-sort-item.is-dragging {
    opacity: .55;
    transform: scale(.985);
    box-shadow: var(--shadow-gold);
}
.screenshot-sort-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-2);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}
.screenshot-sort-handle:hover {
    color: var(--primary);
    border-color: var(--primary-2);
    background: var(--primary-bg);
}
.screenshot-sort-handle i { pointer-events: none; }
.drag-sort-index { min-width: 2.2rem; justify-content: center; }
.form-text { color: var(--text-3); }
.text-muted { color: var(--text-3) !important; }
/* ...existing code... */
@media (max-width: 1199.98px) { .py-6 { padding-top: 5rem; padding-bottom: 5rem; } .cta-panel { padding: 2.5rem; } }
@media (max-width: 991.98px) {
    .admin-shell { flex-direction: column; }
    .admin-sidebar { width: 100%; height: auto; position: relative; }
    .section-title { font-size: 1.95rem; }
    .py-6 { padding-top: 3.75rem; padding-bottom: 3.75rem; }
    .cta-panel { padding: 2rem 1.75rem; }
    .form-shell { padding: 1.75rem; }
    .hero-section { min-height: auto; padding-top: 100px; padding-bottom: 60px; }
    .hero-content-row { padding-top: 72px; padding-bottom: 24px; }
    .trust-metrics { gap: .75rem; }
    .navbar-collapse .navbar-nav {
        align-items: stretch;
        gap: .45rem !important;
        padding-top: .6rem;
    }
    .navbar-collapse .navbar-nav .nav-item {
        width: 100%;
    }
    .navbar-collapse .navbar-nav .nav-link {
        width: 100%;
        justify-content: flex-start;
    }
    .navbar-collapse .navbar-nav .btn {
        width: 100%;
        display: inline-flex;
        justify-content: center;
    }
    .btn-client-login,
    .btn-navbar-cta {
        padding: .5rem .95rem !important;
        font-size: .78rem;
        line-height: 1.1;
        border-radius: 12px !important;
        min-height: 38px;
    }
    .btn-client-login {
        box-shadow: 0 10px 30px rgba(201,170,113,.22), 0 0 0 1px rgba(255,255,255,.08);
    }
    .btn-navbar-cta {
        box-shadow: 0 10px 30px rgba(201,170,113,.20);
    }
}
@media (max-width: 767.98px) {
    .py-6 { padding-top: 3rem; padding-bottom: 3rem; }
    .section-title { font-size: 1.7rem; }
    .cta-panel, .form-shell, .policy-card { padding: 1.4rem; }
    .admin-panel { padding: 1.2rem; }
    .metric-card { padding: 1rem 1.2rem; }
    .hero-dashboard { margin-top: 2rem; }
    .scroll-top-btn { right: 16px; bottom: 88px; }
    .whatsapp-float { right: 16px; bottom: 16px; }
    .trust-metrics .metric-card { flex: 1 1 calc(33.333% - .5rem); }
    .error-code { font-size: 7rem; }
    .stat-item .stat-number { font-size: 2rem; }
    .hero-content-row { padding-top: 52px; padding-bottom: 12px; }
    .roi-calculator-card { padding: .95rem; }
    .roi-calculator-card .form-control { font-size: 1rem; }
    .roi-result-line { flex-direction: column; align-items: flex-start; }
    .roi-result-line strong { font-size: .9rem; }
    .screens-royal-shell { padding: .58rem; border-radius: var(--radius); }
    .screens-royal-carousel { border-radius: calc(var(--radius) - .18rem); }
    .screens-royal-slide { min-height: min(56vh, 420px); max-height: none; flex-direction: column; }
    .screens-royal-image { padding: .62rem .68rem .82rem; }
    .screens-royal-fullscreen-btn span { display: none; }
    .screens-royal-fullscreen-btn { top: .58rem; right: .58rem; padding: .42rem .5rem; }
    .screens-royal-modal-actions { gap: .28rem; }
    .screens-royal-zoom-badge { min-width: 2.8rem; padding: .28rem .5rem; font-size: .7rem; }
    .screens-royal-zoom-btn { width: 2rem; height: 2rem; }
    .screens-royal-overlay { position: relative; left: 0; right: 0; bottom: 0; width: 100%; border-radius: 0; border-left: none; border-right: none; border-bottom: none; padding: .78rem .84rem; }
    .screens-royal-overlay h3 { margin: .35rem 0 .32rem; font-size: .98rem; }
    .screens-royal-overlay p { font-size: .82rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .screens-royal-control { width: 46px; }
    .screens-royal-control .carousel-control-prev-icon,
    .screens-royal-control .carousel-control-next-icon { width: 1.8rem; height: 1.8rem; }
    .screens-royal-nav {
        display: flex;
        grid-template-columns: none;
        gap: .5rem;
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: .08rem .06rem .2rem;
    }
    .screens-royal-nav.has-swipe-hint::after {
        content: '';
        position: sticky;
        right: 0;
        top: 0;
        width: 38px;
        flex: 0 0 38px;
        margin-left: -38px;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        background: linear-gradient(90deg, rgba(6,16,34,0) 0%, rgba(6,16,34,.78) 100%);
        pointer-events: none;
    }
    [data-theme="light"] .screens-royal-nav.has-swipe-hint::after {
        background: linear-gradient(90deg, rgba(239,246,255,0) 0%, rgba(239,246,255,.92) 100%);
    }
    .screens-royal-nav-btn {
        flex: 0 0 min(78%, 260px);
        scroll-snap-align: start;
        padding: .62rem .72rem;
    }
    .screens-royal-nav-title { font-size: .8rem; }
}

@media (hover: none), (pointer: coarse) {
    .screens-royal-control {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .screens-royal-control { transition: none; }
    .screens-royal-nav-btn.active { animation: none; }
    .screens-royal-nav-btn.active::after { animation: none; }
    .screens-royal-zoom-badge { transition: none; }
    .screens-royal-zoom-badge.is-zooming { animation: none; }
}

@media (max-width: 575.98px) {
    .hero-section .display-4 { font-size: 2.1rem; }
    .cta-panel { text-align: center; }
    .trust-metrics .metric-card { flex: 1 1 calc(50% - .375rem); }
    .section-copy { font-size: .95rem; }
    .screens-royal-slide { min-height: min(50vh, 360px); }
    .screens-royal-overlay { padding: .72rem .78rem; }
    .screens-royal-overlay p { -webkit-line-clamp: 2; }
    .screens-royal-nav-btn { flex-basis: 84%; }
    .screens-royal-modal-header { padding: .82rem .9rem; }
    .screens-royal-modal-header .text-muted { font-size: .8rem; }
    .screens-royal-modal-dialog { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
    .screens-royal-modal-header { padding-top: calc(.82rem + env(safe-area-inset-top)); }
    .screens-royal-modal-body { padding: .72rem .65rem .9rem; }
    .screens-royal-modal-viewport { max-height: calc(100vh - 124px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    .screens-royal-modal-image { max-height: calc(100vh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}