/* ================================================================
   Zente Code — Front-end design system
   Luxury · clean · interactive · soft shadows · gradients · motion
   ================================================================ */

/* ----------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------- */
:root {
    --ink: #0b0f16;
    --ink-2: #0e1420;
    --ink-3: #131a28;
    --cream: #05070c;
    --paper: #0c111c;
    /* Luxury gold accent palette */
    --gold: #F5B800;
    --gold-light: #FFD200;
    --gold-deep: #B98700;
    --text: #cdd5e3;
    --text-strong: #f2f5fa;
    --text-muted: #8a96ad;
    --line: rgba(255, 255, 255, .12);
    --line-light: rgba(255, 255, 255, .16);

    --font-serif: "Playfair Display", Georgia, serif;
    --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;

    --grad-gold: linear-gradient(120deg, #FFD200 0%, #F5B800 55%, #B98700 100%);
    --grad-dark: linear-gradient(160deg, #070b12 0%, #0c1220 70%, #101a2e 100%);
    --grad-soft: linear-gradient(180deg, #06090f 0%, #0b1019 100%);

    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .4);
    --shadow: 0 16px 40px rgba(0, 0, 0, .45);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, .55);
    --radius: 16px;
    --radius-lg: 24px;
    --transition: all .35s cubic-bezier(.22, .61, .36, 1);
}

/* ----------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------- */
html { scroll-behavior: smooth; background: var(--cream); }
body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--cream);
    overflow-x: hidden;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    color: var(--text-strong);
    font-weight: 700;
    line-height: 1.2;
}
a { text-decoration: none; color: var(--gold-deep); transition: var(--transition); }
a:hover { color: var(--gold); }
img { max-width: 100%; }
::selection { background: var(--gold); color: #fff; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: #2a3345; border-radius: 20px; border: 3px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ----------------------------------------------------------------
   3. Topbar
   ---------------------------------------------------------------- */
.topbar {
    background: var(--ink);
    color: #c8cdd8;
    font-size: .82rem;
    padding: 9px 0;
    position: relative;
    z-index: 1040;
}
.topbar-inner { display: flex; justify-content: space-between; align-items: center; }
.topbar a { color: #c8cdd8; margin-right: 20px; }
.topbar a:hover { color: var(--gold-light); }
.topbar i { color: var(--gold-light); margin-right: 6px; }
.topbar-social a { margin-right: 12px; }
.topbar-social a:last-child { margin-right: 0; }

/* ----------------------------------------------------------------
   4. Navbar
   ---------------------------------------------------------------- */
.site-nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    transition: var(--transition);
    padding: 12px 0;
}
.site-nav:not(.scrolled) { background: transparent; }
.site-nav.scrolled {
    background: rgba(10, 14, 22, .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
    padding: 8px 0;
}
.site-nav.on-dark { color: #fff; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-logo {
    width: 46px; height: 46px;
    flex: 0 0 auto;
    display: inline-block;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(245, 184, 0, .30);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.brand:hover .brand-logo { transform: translateY(-2px) scale(1.04); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-serif); font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: .2px; }
.brand-tag { font-size: .66rem; text-transform: uppercase; letter-spacing: 2.5px; color: var(--gold-deep); }
.brand-light .brand-name { color: #fff; }
.brand-light .brand-tag { color: var(--gold-light); }

/* On dark hero pages the navbar text starts white */
.site-nav.on-dark .brand-name { color: #fff; }
.site-nav.on-dark .brand-tag { color: var(--gold-light); }

/* Scrolled over light background — gold links stay consistent, active persists */
.site-nav.scrolled .brand-name, .site-nav.on-dark.scrolled .brand-name { color: #fff; }
.site-nav.scrolled .brand-tag, .site-nav.on-dark.scrolled .brand-tag { color: var(--gold-light); }
.site-nav.scrolled .nav-menu a, .site-nav.on-dark.scrolled .nav-menu a { color: var(--gold); }
.site-nav.scrolled .nav-menu a:hover, .site-nav.on-dark.scrolled .nav-menu a:hover,
.site-nav.scrolled .nav-menu a.active, .site-nav.on-dark.scrolled .nav-menu a.active { color: var(--gold-light); }

/* Nav menu (rendered from DB) */
.nav-menu-wrap { display: flex; align-items: center; }
.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.nav-menu > li { position: relative; flex-shrink: 0; }
.nav-menu a {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    font-size: .96rem;
    font-weight: 600;
    color: var(--gold);
    position: relative;
    white-space: nowrap;
    transition: color .3s ease;
}
.site-nav.on-dark .nav-menu a { color: var(--gold-light); }
.nav-menu a::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 4px;
    width: 18px; height: 2px;
    border-radius: 2px;
    background: var(--gold);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .3s ease;
}
.nav-menu a:hover::after, .nav-menu a.active::after { transform: translateX(-50%) scaleX(1); }
.nav-menu a:hover, .nav-menu a.active { color: var(--gold-light); }

/* Dropdowns */
.nav-menu .submenu {
    list-style: none;
    margin: 0; padding: 10px;
    min-width: 220px;
    background: var(--ink-3);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    position: absolute;
    top: calc(100% + 8px);
    left: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: var(--transition);
}
.nav-menu li:hover > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu .submenu a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-weight: 500;
}
.nav-menu .submenu a:hover { background: rgba(245, 184, 0, .10); color: var(--gold-light); }
.nav-menu .submenu a::after { display: none; }

.navbar-toggler { border: 0; box-shadow: none !important; position: relative; }
.navbar-toggler span {
    display: block;
    width: 26px; height: 2px;
    background: #fff;
    margin: 5px auto;
    border-radius: 4px;
    transition: var(--transition);
}
.site-nav.on-dark .navbar-toggler span { background: #fff; }

.nav-admin-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 15px;
    border: 1.5px solid rgba(245, 184, 0, .55);
    border-radius: 999px;
    color: #f5b800;
    font-size: .80rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none;
    background: rgba(245, 184, 0, .08);
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.nav-admin-link i { font-size: .88rem; }
.nav-admin-link:hover, .nav-admin-link:focus {
    background: var(--grad-gold);
    border-color: transparent;
    color: #4b3b16;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(245, 184, 0, .38);
}
.site-nav.on-dark .nav-admin-link { color: var(--gold-light); }
.site-nav.on-dark .nav-admin-link:hover { color: #4b3b16; }
.site-nav.scrolled .nav-admin-link { color: #f5b800; }
.site-nav.scrolled .nav-admin-link:hover { color: #4b3b16; }

.nav-cta { flex-shrink: 0; white-space: nowrap; }
.nav-cta .btn, .nav-admin-link { white-space: nowrap; }
.nav-cta .btn i, .btn-gold i, .nav-admin-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   5. Buttons
   ---------------------------------------------------------------- */
.btn { border-radius: 999px; font-weight: 600; transition: var(--transition); }
.btn-gold {
    background: var(--grad-gold);
    border: 0;
    color: #4b3b16;
    box-shadow: 0 10px 26px rgba(245, 184, 0, .38);
}
.btn-gold:hover, .btn-gold:focus { color: #4b3b16; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(245, 184, 0, .5); }
.btn-warm {
    background: linear-gradient(135deg, #ff9f43, #f5b800);
    border: 0;
    color: #1a1608;
    box-shadow: 0 10px 26px rgba(255, 159, 67, .4);
}
.btn-warm:hover, .btn-warm:focus { color: #1a1608; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255, 159, 67, .55); }
.btn-ghost {
    background: transparent;
    border: 1.5px solid rgba(245, 184, 0, .55);
    color: #fff;
}
.btn-ghost:hover, .btn-ghost:focus { background: rgba(245, 184, 0, .12); border-color: #f5b800; color: #f5b800; transform: translateY(-2px); }
.btn-outline-dark {
    border: 1.5px solid rgba(255, 255, 255, .7);
    color: #fff;
    background: transparent;
}
.btn-outline-dark:hover { background: rgba(255, 255, 255, .12); color: #fff; transform: translateY(-2px); }
.btn-outline-light { border: 1.5px solid rgba(245, 184, 0, .55); color: #F5B800; }
.btn-outline-light:hover { background: var(--grad-gold); color: #4b3b16; transform: translateY(-2px); }
.btn-dark-solid { background: var(--ink-3); color: #fff; border: 0; }
.btn-dark-solid:hover { background: #1a2333; color: #fff; transform: translateY(-2px); }
.btn-light-solid { background: var(--grad-gold); color: #4b3b16; border: 0; box-shadow: var(--shadow-sm); }
.btn-light-solid:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-lg { padding: 14px 30px; font-size: 1rem; }
.btn-sm { padding: 8px 20px; font-size: .86rem; }

/* ----------------------------------------------------------------
   6. Section scaffolding
   ---------------------------------------------------------------- */
.section { padding: 96px 0; position: relative; scroll-margin-top: 84px; }
.section-sm { padding: 64px 0; }
.bg-soft { background: var(--grad-soft); }
.bg-dark { background: var(--grad-dark); }
.bg-dark h2, .bg-dark h3, .bg-dark .lead { color: #fff; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--gold-deep);
    margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--grad-gold); border-radius: 2px; }
.eyebrow.light { color: var(--gold-light); }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ""; width: 34px; height: 2px; background: var(--grad-gold); }

.section-title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -.5px; }
.section-subtitle { color: var(--text-muted); max-width: 640px; }
.section-head { margin-bottom: 52px; }
.section-head.center { text-align: center; }
.section-head.center .section-subtitle { margin-inline: auto; }

.text-gold { color: var(--gold-deep); }

/* ----------------------------------------------------------------
   7. Hero
   ---------------------------------------------------------------- */
.hero {
    position: relative;
    color: #fff;
    min-height: calc(100vh - 165px);
    min-height: calc(100dvh - 165px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(10px, 1.8vh, 22px) 0 clamp(16px, 2.5vh, 30px);
    overflow: hidden;
    background: var(--grad-dark);
    isolation: isolate;
    box-sizing: border-box;
}
.hero > .container {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.15));
    z-index: 0;
}
/* Animated aurora gradients */
.hero-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
    animation: auroraDrift 18s ease-in-out infinite alternate;
}
.hero-aurora.one { width: 460px; height: 460px; background: radial-gradient(circle, #F5B800 0%, rgba(245,184,0,0) 70%); top: -140px; right: -100px; }
.hero-aurora.two { width: 420px; height: 420px; background: radial-gradient(circle, #B98700 0%, rgba(185,135,0,0) 70%); bottom: -160px; left: -110px; animation-delay: -6s; }
.hero-aurora.three { width: 320px; height: 320px; background: radial-gradient(circle, #FFD200 0%, rgba(245,184,0,0) 70%); top: 30%; left: 38%; animation-delay: -11s; opacity: .35; }
@keyframes auroraDrift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.08); }
    100% { transform: translate(-24px, 18px) scale(.96); }
}

/* Floating decorative shapes */
.hero-shape { position: absolute; z-index: 0; pointer-events: none; opacity: .5; }
.hero-shape.ring { width: 90px; height: 90px; top: 18%; left: 6%; border: 2px solid rgba(255, 210, 0, .35); border-radius: 50%; animation: shapeFloat 9s ease-in-out infinite alternate; }
.hero-shape.dots { width: 140px; height: 140px; bottom: 12%; right: 34%; background-image: radial-gradient(rgba(255,210,0,.5) 2px, transparent 2px); background-size: 18px 18px; animation: shapeFloat 13s ease-in-out infinite alternate; }
@keyframes shapeFloat {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(18px, -22px) rotate(14deg); }
}

/* Particle canvas */
.hero-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Subtle glowing gradient + circuit grid overlays */
.hero-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse at 30% 40%, rgba(245, 184, 0, .11) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 60%, rgba(255, 255, 255, .04) 0%, transparent 55%);
    animation: goldShift 26s ease-in-out infinite alternate;
}
@keyframes goldShift {
    0% { background: radial-gradient(ellipse at 30% 40%, rgba(245, 184, 0, .11) 0%, transparent 60%), radial-gradient(ellipse at 70% 60%, rgba(255, 255, 255, .03) 0%, transparent 55%); }
    50% { background: radial-gradient(ellipse at 65% 35%, rgba(245, 184, 0, .13) 0%, transparent 60%), radial-gradient(ellipse at 35% 60%, rgba(255, 255, 255, .05) 0%, transparent 55%); }
    100% { background: radial-gradient(ellipse at 40% 55%, rgba(245, 184, 0, .10) 0%, transparent 60%), radial-gradient(ellipse at 70% 45%, rgba(255, 255, 255, .04) 0%, transparent 55%); }
}
.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(245, 184, 0, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 184, 0, .04) 1px, transparent 1px);
    background-size: 38px 38px;
    opacity: .8;
}
.hero-inner { position: relative; z-index: 2; }
.hero-title {
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    font-weight: 800;
    letter-spacing: -1px;
    color: #fff;
    line-height: 1.15;
}
.hero-title .text-gold {
    color: #f5b800;
    text-shadow: 0 0 30px rgba(245, 184, 0, .35);
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(245, 184, 0, .35);
    background: rgba(245, 184, 0, .08);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: #f5b800;
    text-transform: uppercase;
    margin-bottom: clamp(8px, 1.3vh, 12px);
    backdrop-filter: blur(6px);
}
.hero-badge .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #f5b800; box-shadow: 0 0 12px rgba(245, 184, 0, .9); animation: dotPulse 2.4s ease-in-out infinite; }
@keyframes dotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }
.hero-sub { color: #d7dce6; font-size: clamp(.95rem, 1.4vw, 1.05rem); max-width: 560px; padding-top: 2px; }
.hero-lead { color: #cdd5e3; font-size: clamp(.9rem, 1.3vw, 1rem); max-width: 540px; line-height: 1.65; margin-bottom: 4px; }
.hero-lead-link { display: block; max-width: 540px; text-decoration: none; border-radius: 10px; transition: none; }
.hero-lead-link:hover { background: transparent; }
.hero-lead-link .hero-lead { margin-bottom: 4px; }
.hero-lead-link .hero-lead i { font-size: .85em; margin-left: 8px; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.hero-lead-link:hover .hero-lead { color: #eef1f7; }
.hero-lead-link:hover .hero-lead i { opacity: 1; transform: translateX(0); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(10px, 1.5vh, 14px); }

.about-preview { position: relative; cursor: pointer; transition: box-shadow .35s ease, background-color .35s ease; }
.about-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(245, 184, 0, .07) 0%, transparent 65%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.about-preview:hover::before { opacity: 1; }
.about-preview:hover { box-shadow: inset 0 0 0 1px rgba(245, 184, 0, .18), 0 18px 48px rgba(14, 20, 32, .10); }
.about-preview:focus-visible { outline: 2px solid rgba(245, 184, 0, .55); outline-offset: -2px; }

.about-lead-link { display: block; max-width: 620px; text-decoration: none; border-radius: 12px; transition: background .25s ease, transform .25s ease; }
.about-lead-link:hover { background: rgba(245, 184, 0, .06); transform: translateY(-2px); }
.about-lead-link .about-lead { margin-bottom: 24px; color: #fff; }
.about-lead-link:hover .about-lead { color: #f2f4f8; }
.about-lead-link .about-lead i { font-size: .85em; margin-left: 8px; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.about-lead-link:hover .about-lead i { opacity: 1; transform: translateX(0); }

/* Trust indicators below CTAs */
.hero-trust {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
    margin-top: clamp(12px, 1.8vh, 18px); color: #c3c9d6; font-size: .85rem;
}
.trust-sep { width: 3px; height: 22px; background: var(--gold); border-radius: 3px; }
.trust-item strong { color: var(--gold-light); font-weight: 700; }

.hero-visual {
    position: relative;
    min-height: clamp(260px, 32vh, 380px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
}

/* WebGL laptop scene (Three.js) */
.hero3d-canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    pointer-events: none;
}
.hero3d-active .laptop-wrap,
.hero3d-active .orb { display: none; }
.hero3d-fallback .hero3d-canvas { display: none; }

/* Golden energy orbs in background */
.orb {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    filter: blur(6px);
}
.orb-a {
    width: 200px; height: 200px;
    top: 6%; right: 4%;
    background: radial-gradient(circle, rgba(245, 184, 0, .5) 0%, rgba(245, 184, 0, .12) 38%, transparent 70%);
    box-shadow: 0 0 60px rgba(245, 184, 0, .25);
    animation: orbPulse 9s ease-in-out infinite alternate;
}
.orb-b {
    width: 140px; height: 140px;
    bottom: 18%; left: 2%;
    background: radial-gradient(circle, rgba(255, 210, 0, .38) 0%, rgba(245, 184, 0, .08) 40%, transparent 70%);
    box-shadow: 0 0 46px rgba(255, 210, 0, .18);
    animation: orbPulse 11s ease-in-out infinite alternate-reverse;
}
@keyframes orbPulse {
    0% { transform: scale(.92); opacity: .7; }
    100% { transform: scale(1.12); opacity: 1; }
}

/* ---- Floating 3D holographic UI cards ---- */
.hud-card {
    position: absolute;
    z-index: 4;
    background: linear-gradient(150deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    border: 1px solid rgba(245, 184, 0, .34);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 22px rgba(245, 184, 0, .12);
    transform-style: preserve-3d;
}
.hud-card::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, .12), transparent 42%);
    border-radius: 14px;
    pointer-events: none;
}
/* code card — left of laptop */
.hud-code {
    width: 132px;
    top: 16%; left: -6%;
    z-index: 2;
    padding: 16px 14px;
    display: flex; flex-direction: column; gap: 10px;
    animation: floatY 6s ease-in-out infinite;
}
.hud-code .hud-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #f5b800, #b98700);
    color: #241a05;
    font-size: 1.25rem;
    box-shadow: 0 8px 20px rgba(245, 184, 0, .4);
}
.hud-lines { display: flex; flex-direction: column; gap: 6px; }
.hud-lines i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.hud-lines i:nth-child(1) { width: 88%; }
.hud-lines i:nth-child(2) { width: 64%; background: rgba(245, 184, 0, .45); }
.hud-lines i:nth-child(3) { width: 76%; }
.hud-tag {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .66rem;
    color: #f5b800;
    letter-spacing: 1px;
}
/* code panel — above/behind laptop */
.hud-panel {
    width: 150px;
    top: 2%; left: 30%;
    padding: 12px;
    z-index: 1;
    animation: floatX 8s ease-in-out infinite;
}
.panel-head { display: flex; align-items: center; gap: 6px; font-size: .62rem; color: #a7b2c6; letter-spacing: 1px; text-transform: uppercase; }
.panel-head .dot { width: 6px; height: 6px; border-radius: 50%; background: #f5b800; box-shadow: 0 0 8px rgba(245, 184, 0, .9); }
.panel-head span { flex: 1; }
.panel-head .stat { width: 8px; height: 8px; border-radius: 50%; background: rgba(40, 200, 64, .8); }
.panel-code { display: flex; flex-direction: column; gap: 5px; margin: 9px 0; }
.panel-code i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.panel-code i:nth-child(1) { width: 92%; background: rgba(245, 184, 0, .4); }
.panel-code i:nth-child(2) { width: 70%; }
.panel-code i:nth-child(3) { width: 84%; }
.panel-code i:nth-child(4) { width: 58%; }
.panel-meta { display: flex; justify-content: space-between; font-size: .6rem; color: #8b94a7; }
.panel-meta em { color: #f5b800; font-style: normal; }
/* analytics card — right of laptop */
.hud-analytics {
    width: 128px;
    top: 24%; right: -6%;
    z-index: 2;
    padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
    animation: floatZ 7s ease-in-out infinite;
}
.hud-analytics .hud-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(245, 184, 0, .14);
    color: #f5b800;
    border: 1px solid rgba(245, 184, 0, .3);
}
.chart { display: flex; align-items: flex-end; gap: 5px; height: 52px; }
.chart b { flex: 1; border-radius: 3px 3px 1px 1px; background: rgba(255, 255, 255, .16); }
.chart b.gold { background: linear-gradient(180deg, #f5b800, #a88414); box-shadow: 0 0 10px rgba(245, 184, 0, .35); }
.hud-metric { font-size: .64rem; color: #a7b2c6; display: flex; align-items: center; gap: 6px; }
.hud-metric em { color: #f5b800; font-style: normal; font-weight: 700; }
/* metric card — lower left */
.hud-metric {
    width: 108px;
    bottom: 6%; left: 0;
    z-index: 2;
    padding: 12px;
    animation: floatX 9s ease-in-out infinite-reverse;
}
.hud-metric i { font-size: 1.15rem; color: #f5b800; }
.metric-num { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 800; color: #fff; margin-top: 6px; }
.metric-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: 1.5px; color: #8b94a7; }

/* ---- Hero Solar System & Mini Laptop Group ---- */
.hero-solar-laptop-group {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 8px auto 0;
}

.hero-laptop-mini {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    animation: laptopMiniFloat 4.6s ease-in-out infinite;
}

.mini-laptop-img {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 16px rgba(245, 184, 0, 0.25));
    transition: transform 0.3s ease, filter 0.3s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.hero-laptop-mini:hover .mini-laptop-img {
    transform: translateY(-3px) scale(1.04);
    filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 24px rgba(245, 184, 0, 0.4));
}

.hero-solar-canvas-wrap {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: clamp(150px, 19vh, 180px);
    margin-top: -18px; /* Calibrated visual gap from laptop to solar system */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

#solarSystem {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes laptopMiniFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}

@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes floatX { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } }
@keyframes floatZ {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-12px) scale(1.04); }
}

/* ---- Main 3D laptop wrapper ---- */
.laptop-wrap {
    position: relative;
    z-index: 3;
    width: min(420px, 92%);
    transform-style: preserve-3d;
    transform: rotateY(-8deg) rotateX(2deg);
}
.laptop {
    position: relative;
    width: 100%;
    animation: laptopFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .55));
}
@keyframes laptopFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* screen bezel + glass */
.laptop-screen {
    position: relative;
    background: linear-gradient(165deg, #232a35 0%, #0c1016 70%);
    border: 1px solid rgba(245, 184, 0, .35);
    border-radius: 18px;
    padding: 10px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .05),
        0 0 46px rgba(245, 184, 0, .12),
        0 0 0 2px rgba(255, 255, 255, .04);
    transform-style: preserve-3d;
}
.laptop-screen::before { /* glass reflection sweep */
    content: "";
    position: absolute;
    top: -60%; left: -30%;
    width: 45%; height: 220%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent);
    transform: rotate(12deg);
    animation: screenSheen 7s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes screenSheen {
    0%, 60% { left: -40%; }
    85% { left: 130%; }
    100% { left: 130%; }
}
.laptop-screen::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(245, 184, 0, .07), transparent 45%);
    border-radius: 18px;
    pointer-events: none;
}
.screen-topbar { display: flex; align-items: center; gap: 6px; padding: 4px 4px 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); position: relative; z-index: 1; }
.screen-topbar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.screen-topbar i:nth-child(2) { background: #febc2e; }
.screen-topbar i:nth-child(3) { background: #28c840; }
.screen-topbar span { flex: 1; height: 8px; margin: 0 10px; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.screen-body { display: flex; gap: 12px; padding: 14px 4px 8px; position: relative; z-index: 1; }
.screen-nav { display: flex; flex-direction: column; gap: 8px; width: 26%; }
.screen-nav span { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.screen-nav span.gold { background: linear-gradient(90deg, #f5b800, #F5B800); width: 80%; }
.screen-copy { flex: 1; }
.mini-kicker { width: 34%; height: 7px; border-radius: 4px; background: rgba(245, 184, 0, .55); margin-bottom: 10px; }
.mini-title { width: 92%; height: 13px; border-radius: 5px; background: rgba(255, 255, 255, .34); margin-bottom: 10px; }
.mini-para { width: 100%; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .14); margin-bottom: 6px; }
.mini-para.w2 { width: 78%; }
.mini-para.w3 { width: 88%; }
.mini-btn { width: 44%; height: 16px; border-radius: 8px; background: linear-gradient(90deg, #f5b800, #e2a500); margin-top: 12px; }
.screen-chart { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 0 2px; border-top: 1px solid rgba(255, 255, 255, .06); margin-top: 12px; }
.screen-chart .bar { flex: 1; border-radius: 4px 4px 2px 2px; background: rgba(255, 255, 255, .16); }
.screen-chart .bar.gold { background: linear-gradient(180deg, #f5b800, #b98a12); box-shadow: 0 0 12px rgba(245, 184, 0, .35); }

/* laptop deck — metallic body + keyboard + trackpad */
.laptop-base {
    position: relative;
    width: 116%;
    margin: -2px auto 0;
    margin-left: -8%;
    padding: 14px 14px 0;
    background: linear-gradient(180deg, #3a414d 0%, #232830 30%, #12151b 100%);
    border-radius: 0 0 18px 18px;
    border-top: 2px solid rgba(245, 184, 0, .4);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}
.laptop-base::after { /* metallic sheen on deck */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent);
    border-radius: 0 0 50% 50%;
    opacity: .5;
    pointer-events: none;
}
.kb-row { display: flex; gap: 5px; margin-bottom: 6px; }
.kb-row i {
    flex: 1;
    height: 8px;
    border-radius: 3px;
    background: linear-gradient(180deg, #262c36, #12161c);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.kb-row.short i:last-child { flex: 1.6; }
.trackpad {
    width: 34%;
    height: 34px;
    margin: 10px auto 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #1d222a, #0e1218);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .08);
}

/* ---- Golden holographic platform rings ---- */
.platform {
    position: absolute;
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%) rotateX(72deg);
    width: 130%;
    height: 130%;
    z-index: 0;
    transform-style: preserve-3d;
    pointer-events: none;
}
.ring {
    position: absolute;
    left: 50%; top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.ring.r1 { width: 100%; height: 100%; border: 1.5px solid rgba(245, 184, 0, .4); box-shadow: 0 0 22px rgba(245, 184, 0, .25); }
.ring.r2 { width: 74%; height: 74%; border: 1px dashed rgba(245, 184, 0, .5); animation: ringSpin 22s linear infinite; }
.ring.r3 { width: 46%; height: 46%; border: 1px solid rgba(255, 210, 0, .6); box-shadow: 0 0 18px rgba(245, 184, 0, .4), inset 0 0 14px rgba(245, 184, 0, .2); }
.ring-light {
    position: absolute;
    left: 50%; top: 50%;
    width: 100%; height: 100%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, rgba(245, 184, 0, .35) 0%, transparent 32%),
        conic-gradient(from 0deg, transparent 0deg, rgba(245, 184, 0, .9) 40deg, transparent 90deg, transparent 220deg, rgba(245, 184, 0, .5) 270deg, transparent 320deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    animation: ringSpin 8s linear infinite;
    filter: drop-shadow(0 0 10px rgba(245, 184, 0, .5));
}
@keyframes ringSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    z-index: 3;
    color: #8b94a7;
    font-size: 1.15rem;
    animation: bounceY 2s infinite;
}
@keyframes bounceY { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }

/* ----------------------------------------------------------------
   8. Marquee band
   ---------------------------------------------------------------- */
.marquee {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding: 0;
    height: 48px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
}
.marquee-badge-wrap {
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    height: 100%;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, var(--ink) 85%, rgba(14, 20, 32, 0) 100%);
    padding-right: 18px;
}
.marquee-badge {
    position: relative;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: linear-gradient(90deg, rgba(245, 184, 0, 0.22) 0%, rgba(245, 184, 0, 0.12) 100%);
    color: #f5b800;
    text-decoration: none;
    cursor: pointer;
    padding: 0 clamp(24px, 3.5vw, 32px) 0 clamp(16px, 3vw, 24px);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
    user-select: none;
    transition: background 0.25s ease, filter 0.25s ease, color 0.25s ease;
}
.marquee-badge .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f5b800;
    box-shadow: 0 0 8px rgba(245, 184, 0, 0.9);
    animation: dotPulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
}
.marquee-badge .badge-text {
    display: inline-block;
    line-height: 1;
    font-weight: 700;
}
.marquee-badge:hover,
.marquee-badge:focus {
    color: #ffd24d;
    text-decoration: none;
    background: linear-gradient(90deg, rgba(245, 184, 0, 0.28) 0%, rgba(245, 184, 0, 0.16) 100%);
    filter: drop-shadow(0 0 10px rgba(245, 184, 0, 0.35));
}
.marquee-track {
    display: flex;
    gap: 48px;
    white-space: nowrap;
    animation: marquee 160s linear infinite;
    width: max-content;
    will-change: transform;
}
.marquee:hover .marquee-track {
    animation-play-state: paused;
}
.marquee-track span { font-family: var(--font-serif); font-size: 1.15rem; color: rgba(255,255,255,.75); }
.marquee-track span i { color: var(--gold); margin-right: 32px; font-style: normal; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----------------------------------------------------------------
   9. Service cards
   ---------------------------------------------------------------- */
.service-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px 30px;
    height: 100%;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(245, 184, 0, .35);
}
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
    width: 58px; height: 58px;
    border-radius: 16px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #f7f3e9, #efe7d2);
    color: var(--gold-deep);
    font-size: 1.5rem;
    margin-bottom: 20px;
    transition: var(--transition);
}
.service-card:hover .service-icon { background: var(--grad-gold); color: #4b3b16; box-shadow: 0 12px 28px rgba(245,184,0,.4); transform: rotate(-4deg) scale(1.06); }
.service-card h4 { font-size: 1.35rem; margin-bottom: 12px; }
.service-card p { color: var(--text-muted); font-size: .95rem; }
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--gold-deep);
    margin-top: 14px;
}
.card-link i { transition: transform .3s ease; }
.card-link:hover i { transform: translateX(5px); }

/* ----------------------------------------------------------------
   10. Portfolio cards
   ---------------------------------------------------------------- */
.work-card {
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    display: block;
    height: 340px;
    background: var(--ink-3);
    box-shadow: var(--shadow);
}
.work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.work-card:hover img { transform: scale(1.08); }
.work-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14,20,32,0) 30%, rgba(14,20,32,.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
    color: #fff;
}
.work-overlay .cat { font-size: .76rem; text-transform: uppercase; letter-spacing: 2px; color: var(--gold-light); margin-bottom: 6px; }
.work-overlay h4 { color: #fff; font-size: 1.4rem; margin-bottom: 8px; }
.work-overlay p { color: #c3c9d6; font-size: .9rem; margin: 0; max-height: 0; overflow: hidden; opacity: 0; transition: all .5s ease; }
.work-card:hover .work-overlay p { max-height: 80px; opacity: 1; }
.work-arrow {
    position: absolute;
    top: 20px; right: 20px;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--grad-gold);
    color: #4b3b16;
    opacity: 0;
    transform: translateY(-10px);
    transition: var(--transition);
}
.work-card:hover .work-arrow { opacity: 1; transform: translateY(0); }

/* Filter pills */
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 44px; }
.filter-pills .pill {
    padding: 9px 22px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--paper);
    color: var(--text);
    font-weight: 600;
    font-size: .9rem;
    transition: var(--transition);
}
.filter-pills .pill:hover, .filter-pills .pill.active { background: var(--grad-gold); color: #4b3b16; border-color: var(--gold); }

/* ----------------------------------------------------------------
   11. Blog cards
   ---------------------------------------------------------------- */
.blog-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.blog-thumb { height: 210px; overflow: hidden; position: relative; display: block; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.blog-card:hover .blog-thumb img { transform: scale(1.08); }
.blog-cat {
    position: absolute;
    top: 14px; left: 14px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(4px);
    color: var(--gold-deep);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 5px 12px;
    border-radius: 999px;
}
.blog-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { font-size: .82rem; color: var(--text-muted); margin-bottom: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.blog-meta i { color: var(--gold); margin-right: 4px; }
.blog-body h4 { font-size: 1.25rem; margin-bottom: 10px; }
.blog-body h4 a { color: var(--text-strong); }
.blog-body h4 a:hover { color: var(--gold-deep); }
.blog-body p { color: var(--text-muted); font-size: .93rem; flex: 1; }
.blog-more { color: var(--gold-deep); font-weight: 700; font-size: .9rem; }

/* Featured post */
.feature-post {
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.feature-post .feature-img { height: 100%; min-height: 320px; }
.feature-post .feature-img img { width: 100%; height: 100%; object-fit: cover; }
.feature-post .feature-body { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.feature-post .eyebrow { margin-bottom: 12px; }
.feature-post h2 { color: #fff; font-size: 1.9rem; }
.feature-post p { color: #c3c9d6; }

/* ----------------------------------------------------------------
   12. Testimonials
   ---------------------------------------------------------------- */
.section-testimonials {
    position: relative;
    background: radial-gradient(ellipse at 50% 40%, rgba(245, 184, 0, 0.08) 0%, rgba(8, 12, 20, 0.98) 75%);
    border-block: 1px solid rgba(245, 184, 0, 0.16);
    overflow: hidden;
}
.section-testimonials::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}
.testimonial-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    background: linear-gradient(165deg, rgba(16, 23, 37, 0.88) 0%, rgba(10, 14, 22, 0.94) 100%);
    border: 1px solid rgba(245, 184, 0, 0.28);
    border-radius: var(--radius-lg, 24px);
    padding: clamp(40px, 5.5vw, 64px) clamp(28px, 6.5vw, 80px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 45px rgba(245, 184, 0, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color .35s ease, box-shadow .35s ease;
}
.testimonial-shell:hover {
    border-color: rgba(245, 184, 0, 0.48);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), 0 0 55px rgba(245, 184, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.testimonial-shell::before {
    content: "“";
    position: absolute;
    top: 8px;
    left: 32px;
    font-family: var(--font-serif);
    font-size: 8rem;
    line-height: 1;
    color: rgba(245, 184, 0, 0.09);
    pointer-events: none;
    user-select: none;
    font-weight: 800;
}
.testimonial-shell::after {
    content: "”";
    position: absolute;
    bottom: -32px;
    right: 32px;
    font-family: var(--font-serif);
    font-size: 8rem;
    line-height: 1;
    color: rgba(245, 184, 0, 0.09);
    pointer-events: none;
    user-select: none;
    font-weight: 800;
}
.testimonial-content-box {
    position: relative;
    z-index: 2;
}
.testimonial-star {
    color: var(--gold);
    font-size: 1.35rem;
    letter-spacing: 6px;
    text-shadow: 0 0 16px rgba(245, 184, 0, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.testimonial-quote {
    font-family: var(--font-serif);
    font-size: clamp(1.22rem, 2.2vw, 1.55rem);
    font-style: italic;
    line-height: 1.75;
    color: #f3f6fc;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    max-width: 780px;
    margin: 0 auto;
}
.testimonial-shell .carousel-control-prev,
.testimonial-shell .carousel-control-next {
    width: 46px;
    height: 46px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    border-radius: 50%;
    background: rgba(245, 184, 0, 0.09);
    border: 1.5px solid rgba(245, 184, 0, 0.35);
    color: var(--gold);
    display: grid;
    place-items: center;
    transition: all 0.3s cubic-bezier(.22, .61, .36, 1);
    z-index: 10;
}
.testimonial-shell .carousel-control-prev {
    left: -23px;
}
.testimonial-shell .carousel-control-next {
    right: -23px;
}
.testimonial-shell .carousel-control-prev:hover,
.testimonial-shell .carousel-control-next:hover,
.testimonial-shell .carousel-control-prev:focus,
.testimonial-shell .carousel-control-next:focus {
    background: var(--grad-gold);
    border-color: transparent;
    color: #1a1405;
    box-shadow: 0 8px 24px rgba(245, 184, 0, 0.45);
    transform: translateY(-50%) scale(1.1);
}
.testimonial-shell .carousel-control-prev i,
.testimonial-shell .carousel-control-next i {
    font-size: 1.2rem;
    line-height: 1;
    color: inherit;
}
@media (max-width: 767.98px) {
    .testimonial-shell {
        padding: 34px 18px;
    }
    .testimonial-shell .carousel-control-prev {
        left: -12px;
        width: 38px;
        height: 38px;
    }
    .testimonial-shell .carousel-control-next {
        right: -12px;
        width: 38px;
        height: 38px;
    }
    .testimonial-shell .carousel-control-prev i,
    .testimonial-shell .carousel-control-next i {
        font-size: 1rem;
    }
}

/* ----------------------------------------------------------------
   13. Stats band
   ---------------------------------------------------------------- */
.stats-band { background: #07090d; color: #fff; padding: 36px 0; position: relative; overflow: hidden; border-block: 1px solid rgba(245, 184, 0, .12); }
.stats-band::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(245,184,0,.05) 1px, transparent 1px); background-size: 22px 22px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 2; }
.stats-grid .stat { text-align: center; position: relative; padding: 6px 18px; }
.stats-grid .stat + .stat::before {
    content: "";
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 56%;
    background: linear-gradient(180deg, transparent, rgba(245, 184, 0, .28), transparent);
}
.stat > i { font-size: 1.25rem; color: #f5b800; margin-bottom: 6px; display: inline-block; }
.stat .num { font-family: var(--font-serif); font-size: 2.45rem; font-weight: 800; color: #f5b800; line-height: 1; text-shadow: 0 0 20px rgba(245, 184, 0, .25); }
.stat .lbl { text-transform: uppercase; letter-spacing: 1.6px; font-size: .72rem; color: #9aa3b5; margin-top: 6px; }

/* ----------------------------------------------------------------
   14. Team cards
   ---------------------------------------------------------------- */
.team-card { text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 20px; transition: var(--transition); height: 100%; }
.team-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.team-avatar {
    width: 116px; height: 116px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 18px;
    border: 3px solid var(--cream);
    outline: 2px solid var(--gold);
    outline-offset: -3px;
    transition: var(--transition);
}
.team-card:hover .team-avatar { transform: scale(1.06); outline-color: var(--gold-deep); }
.team-card h5 { margin-bottom: 4px; }
.team-card .team-role { color: var(--gold-deep); font-size: .86rem; font-weight: 600; margin-bottom: 12px; }
.team-card p { color: var(--text-muted); font-size: .9rem; }
.team-social a { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--text); margin: 0 4px; font-size: .9rem; }
.team-social a:hover { background: var(--grad-gold); color: #4b3b16; transform: translateY(-2px); }

/* Team Showcase & Slider */
.team-showcase-wrap {
    position: relative;
    background: linear-gradient(160deg, rgba(14, 20, 32, 0.75) 0%, rgba(8, 12, 20, 0.95) 100%);
    border: 1px solid rgba(245, 184, 0, 0.2);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
@media (max-width: 767px) {
    .team-showcase-wrap { padding: 20px 16px; }
}

.team-showcase-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}
.team-lead-col {
    grid-column: 1;
    min-width: 0;
}
.team-slider-col {
    grid-column: 2 / -1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media (max-width: 1399px) {
    .team-showcase-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .team-slider-col { grid-column: 2 / -1; }
}
@media (max-width: 1199px) {
    .team-showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .team-slider-col { grid-column: 2 / -1; }
}
@media (max-width: 767.98px) {
    .team-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .team-slider-col { grid-column: 2 / -1; }
}

.team-fixed-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    min-height: 388px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.team-fixed-card:hover {
    transform: translateY(-5px);
    border-color: rgba(245, 184, 0, 0.45);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 24px rgba(245, 184, 0, 0.15);
}
.team-fixed-img-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
}
.team-fixed-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-fixed-card:hover .team-fixed-img {
    transform: scale(1.03);
}
.team-fixed-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 15, 22, 0) 45%, rgba(8, 12, 20, 0.82) 75%, rgba(6, 9, 15, 0.98) 100%);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.team-fixed-badge {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(14, 20, 32, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(245, 184, 0, 0.35);
    color: var(--gold-light);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.team-role-badge {
    color: var(--gold);
    font-size: 0.88rem;
    font-weight: 600;
}
.team-linkedin-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--grad-gold);
    color: #241a05;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    box-shadow: 0 8px 20px rgba(245, 184, 0, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}
.team-linkedin-btn:hover {
    color: #000;
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 12px 28px rgba(245, 184, 0, 0.55);
}

.team-slider-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}
.team-slider-hint {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-strong);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.team-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(245, 184, 0, 0.3);
    color: var(--gold);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: var(--transition);
}
.team-nav-btn:hover {
    background: var(--grad-gold);
    color: #241a05;
    border-color: transparent;
    transform: scale(1.08);
}

.team-slider-viewport {
    overflow: hidden;
    width: 100%;
    border-radius: 20px;
    margin-top: 8px;
}
.team-slider-track {
    display: flex;
    gap: 16px;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.team-slide-item {
    flex: 0 0 calc(25% - 12px);
    min-width: 0;
}
@media (max-width: 1399px) {
    .team-slide-item {
        flex: 0 0 calc(33.3333% - 10.7px);
    }
}
@media (max-width: 1199px) {
    .team-slide-item {
        flex: 0 0 calc(50% - 8px);
    }
}
@media (max-width: 767px) {
    .team-slide-item {
        flex: 0 0 100%;
    }
}

.team-slide-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    height: 388px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.team-slide-card:hover {
    transform: translateY(-5px);
    border-color: rgba(245, 184, 0, 0.45);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 24px rgba(245, 184, 0, 0.15);
}
.team-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.team-slide-card:hover .team-slide-img {
    transform: scale(1.05);
}
.team-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 15, 22, 0) 40%, rgba(8, 12, 20, 0.8) 70%, rgba(6, 9, 15, 0.98) 100%);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.team-one-line-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.team-one-line-info {
    min-width: 0;
    flex: 1;
}
.team-slide-name {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
    line-height: 1.25;
}
.team-slide-role {
    font-size: 0.83rem;
    color: var(--gold);
    font-weight: 500;
    line-height: 1.2;
}
.team-slide-linkedin {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--grad-gold);
    color: #241a05;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(245, 184, 0, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.team-slide-linkedin:hover {
    color: #000;
    transform: scale(1.12);
    box-shadow: 0 8px 22px rgba(245, 184, 0, 0.55);
}

/* Founder section image */
.founder-image-container {
    position: relative;
    max-width: 590px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}
.founder-image-container:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: none;
}
.founder-image-container img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 540px;
    border-radius: 24px;
    display: block;
    background: transparent;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.founder-image-container:hover img {
    transform: scale(1.02);
}

/* Video Placeholder */
.video-placeholder-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    max-width: 590px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(245, 184, 0, 0.2);
    cursor: pointer;
    background: #0d131f;
    min-height: 380px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s ease;
}
.video-placeholder-card:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.4), 0 0 35px rgba(245, 184, 0, 0.3);
    border-color: rgba(245, 184, 0, 0.45);
}
.video-placeholder-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
    filter: brightness(0.95) contrast(1.03);
}
.video-placeholder-card:hover img {
    transform: scale(1.045);
    filter: brightness(1) contrast(1.05);
}
.video-overlay-gradient {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 50% 50%, rgba(245, 184, 0, 0.08) 0%, transparent 65%),
        linear-gradient(180deg, rgba(13, 19, 31, 0.25) 0%, rgba(13, 19, 31, 0.35) 45%, rgba(13, 19, 31, 0.85) 100%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.video-placeholder-card:hover .video-overlay-gradient {
    background: 
        radial-gradient(circle at 50% 50%, rgba(245, 184, 0, 0.15) 0%, transparent 65%),
        linear-gradient(180deg, rgba(13, 19, 31, 0.15) 0%, rgba(13, 19, 31, 0.25) 45%, rgba(13, 19, 31, 0.8) 100%);
}
.video-play-btn {
    position: absolute;
    z-index: 2;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--grad-gold, linear-gradient(135deg, #f5b800, #d99c00));
    color: #1a1608;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    padding-left: 5px;
    box-shadow: 0 12px 32px rgba(245, 184, 0, 0.45);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, background 0.4s ease;
}
.video-play-btn::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: rgba(245, 184, 0, 0.25);
    animation: playPulse 2.4s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    pointer-events: none;
    z-index: -1;
}
@keyframes playPulse {
    0% { transform: scale(0.85); opacity: 0.8; }
    50% { transform: scale(1.25); opacity: 0; }
    100% { transform: scale(0.85); opacity: 0; }
}
.video-placeholder-card:hover .video-play-btn {
    transform: scale(1.14);
    box-shadow: 0 16px 40px rgba(245, 184, 0, 0.65), 0 0 25px rgba(245, 184, 0, 0.4);
}
.video-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    background: rgba(13, 19, 31, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 30px;
    border: 1px solid rgba(245, 184, 0, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.video-placeholder-card:hover .video-badge {
    transform: translateY(-2px);
    border-color: rgba(245, 184, 0, 0.6);
}

/* ----------------------------------------------------------------
   15. Timeline (about / process)
   ---------------------------------------------------------------- */
.timeline { position: relative; padding-left: 30px; max-width: 760px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--gold), transparent); }
.timeline-item { position: relative; padding-bottom: 34px; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -27px; top: 5px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(245, 184, 0, .22);
}
.timeline-item .t-step { font-size: .76rem; text-transform: uppercase; letter-spacing: 2px; color: var(--gold-deep); font-weight: 700; }
.timeline-item h5 { margin: 6px 0 8px; }
.timeline-item p { color: var(--text-muted); margin: 0; }

/* ----------------------------------------------------------------
   16. FAQ accordion
   ---------------------------------------------------------------- */
.accordion-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px !important;
    overflow: hidden;
    margin-bottom: 14px;
}
.accordion-button {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--text-strong);
    background: transparent;
    padding: 20px 22px;
    font-size: 1.02rem;
    box-shadow: none !important;
    border-bottom: 0 !important;
}
.accordion-button:not(.collapsed) { color: var(--gold-deep); background: transparent; box-shadow: none; }
.accordion-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23c9a227' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E"); transition: transform .3s ease; }
.accordion-button:not(.collapsed)::after { transform: rotate(45deg); }
.accordion-body { padding: 0 22px 20px; color: var(--text-muted); }

/* ----------------------------------------------------------------
   17. Careers
   ---------------------------------------------------------------- */
.job-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; transition: var(--transition); margin-bottom: 16px; }
.job-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.job-card .job-title { font-size: 1.2rem; margin-bottom: 8px; }
.job-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-muted); background: var(--cream); border: 1px solid var(--line); padding: 4px 12px; border-radius: 999px; margin-right: 8px; }
.job-badge i { color: var(--gold-deep); }

.culture-chip { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px; text-align: center; font-weight: 600; color: var(--text-strong); height: 100%; }
.culture-chip i { color: var(--gold-deep); font-size: 1.4rem; display: block; margin-bottom: 8px; }

/* ----------------------------------------------------------------
   18. Contact
   ---------------------------------------------------------------- */
.contact-info-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; height: 100%; transition: var(--transition); }
.contact-info-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.contact-info-card .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-gold); color: #4b3b16; font-size: 1.15rem; flex-shrink: 0; }
.contact-info-card h6 { font-family: var(--font-sans); font-weight: 700; font-size: .98rem; }
.contact-info-card p, .contact-info-card a { color: var(--text-muted); font-size: .9rem; margin: 0; word-break: break-word; }
.contact-info-card a:hover { color: var(--gold-deep); }

.contact-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 44px; box-shadow: var(--shadow); }
.comment-form-panel { background: transparent; border: none; padding: 0; box-shadow: none; }
.comment-box { background: transparent; border: none; padding: 18px 0; border-bottom: 1px solid var(--line); }

/* ----------------------------------------------------------------
   19. Forms
   ---------------------------------------------------------------- */
.form-control, .form-select {
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: .95rem;
    color: var(--text);
    background: var(--paper);
    transition: var(--transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(245, 184, 0, .15);
}
.form-label { font-weight: 600; font-size: .9rem; color: var(--text-strong); }
::placeholder { color: #a7adbb; }

/* ----------------------------------------------------------------
   20. Page hero (inner pages)
   ---------------------------------------------------------------- */
.page-hero {
    background: var(--grad-dark);
    color: #fff;
    padding: 84px 0 88px;
    position: relative;
    overflow: hidden;
}
.page-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
    z-index: 0;
    opacity: .85;
    transform: scale(1.02);
}
.page-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(8, 12, 19, 0.94) 0%,
        rgba(8, 12, 19, 0.75) 45%,
        rgba(8, 12, 19, 0.2) 80%,
        rgba(8, 12, 19, 0.35) 100%
    );
}
.page-hero-bg::before {
    display: none;
}
.page-hero::before {
    display: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.5px; }
.page-hero .crumb { color: #9aa3b5; font-size: .86rem; margin-bottom: 10px; }
.page-hero .crumb a { color: var(--gold-light); }
.page-hero .crumb i { font-size: .7rem; margin: 0 6px; }

/* Rich content (blog post / page body) */
.rich-content h2, .rich-content h3, .rich-content h4 { margin: 34px 0 14px; }
.rich-content p { margin-bottom: 18px; color: var(--text); }
.rich-content ul, .rich-content ol { margin-bottom: 20px; padding-left: 22px; }
.rich-content li { margin-bottom: 8px; }
.richtext blockquote, .rich-content blockquote {
    border-left: 4px solid var(--gold);
    background: rgba(245, 184, 0, .08);
    padding: 20px 26px;
    border-radius: 0 14px 14px 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--text-strong);
    margin: 26px 0;
}
.rich-content img { border-radius: var(--radius); box-shadow: var(--shadow); margin: 20px 0; }

.post-hero-img { width: 100%; height: 420px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.sidebar-widget { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin-bottom: 26px; }
.sidebar-widget h5 { font-size: 1.15rem; margin-bottom: 18px; position: relative; padding-bottom: 12px; }
.sidebar-widget h5::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--grad-gold); }
.sidebar-cat a { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--line); color: var(--text); font-size: .95rem; }
.sidebar-cat a:hover { color: var(--gold-deep); }
.sidebar-cat a .count { color: var(--gold-deep); font-weight: 700; }

.comment-box { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.comment-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--grad-gold); color: #4b3b16; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.comment-box h6 { font-family: var(--font-sans); font-size: 1rem; }
.comment-box .c-time { color: var(--text-muted); font-size: .8rem; }
.comment-box p { color: var(--text-muted); margin: 6px 0 0; }

.tags .tag { display: inline-block; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; font-size: .84rem; color: var(--text); margin: 0 6px 8px 0; }
.tags .tag:hover { background: var(--grad-gold); color: #4b3b16; border-color: var(--gold); }

.related-posts .blog-card { background: transparent; border: none; box-shadow: none; }

/* ----------------------------------------------------------------
   21. CTA banner ("Ready when you are")
   ---------------------------------------------------------------- */
.cta-banner {
    margin-top: 0.5in;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    z-index: 2;
}
.cta-card {
    background: var(--grad-dark);
    border-radius: var(--radius-lg);
    color: #fff;
    padding: 54px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
.cta-card > * { position: relative; z-index: 2; }
.cta-card h2 { color: #fff; }
.cta-card p { color: #c3c9d6; }

/* ----------------------------------------------------------------
   21b. Google Map Section
   ---------------------------------------------------------------- */
.section-map {
    margin-top: 0.5in;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}
.map-card {
    border-radius: var(--radius-lg, 24px);
    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 16px 40px rgba(0,0,0,0.08));
    border: 1px solid var(--line, rgba(0,0,0,0.08));
    background: var(--paper, #fff);
    position: relative;
    transition: var(--transition, all .3s ease);
}
.map-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border-color: rgba(245, 184, 0, 0.35);
}
.map-card iframe {
    width: 100%;
    height: 380px;
    display: block;
    border: 0;
}

/* ----------------------------------------------------------------
   22. Footer
   ---------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #b9c0cf; padding: 84px 0 0; margin-top: 0.5in; }
.footer-top { padding-bottom: 56px; }
.footer-about { font-size: .94rem; }
.footer-title { color: #fff; font-family: var(--font-sans); font-size: 1rem; font-weight: 700; margin-bottom: 22px; letter-spacing: .4px; }
.site-footer .nav-menu { display: block; }
.site-footer .nav-menu a { color: #b9c0cf; padding: 6px 0; display: inline-block; font-weight: 500; font-size: .94rem; }
.site-footer .nav-menu a::after { display: none; }
.site-footer .nav-menu a:hover { color: var(--gold-light); }
.footer-contact { list-style: none; padding: 0; margin: 0 0 20px; }
.footer-contact li { display: flex; gap: 12px; margin-bottom: 12px; font-size: .93rem; }
.footer-contact i { color: var(--gold); }
.footer-contact a { color: #b9c0cf; }
.footer-contact a:hover { color: var(--gold-light); }
.footer-social a {
    width: 40px; height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    display: inline-grid; place-items: center;
    color: #cdd3df;
    margin-right: 8px;
    font-size: .95rem;
    transition: var(--transition);
}
.footer-social a:hover { background: var(--grad-gold); color: #4b3b16; border-color: transparent; transform: translateY(-3px); }
.newsletter .form-control { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; }
.newsletter .form-control::placeholder { color: #8b94a7; }
.newsletter .form-control:focus { border-color: var(--gold); background: rgba(255,255,255,.1); }
.newsletter .form-label { color: #fff; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-legal .nav-menu { display: flex; gap: 20px; }
.footer-legal .nav-menu a { color: #8b94a7; padding: 4px 0; font-size: .85rem; }
.footer-legal .nav-menu a:hover { color: var(--gold-light); }
.copyright { color: #8b94a7; font-size: .86rem; margin: 0; }

/* ----------------------------------------------------------------
    22c. Newsletter CTA
   ---------------------------------------------------------------- */
.newsletter-cta { padding: 96px 0 0; }
.newsletter-card {
    background: var(--grad-dark);
    border-radius: var(--radius-lg);
    color: #fff;
    padding: 60px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.newsletter-card::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,210,0,.12) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
.newsletter-card::after {
    content: "";
    position: absolute;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,184,0,.5), rgba(245,184,0,0) 70%);
    filter: blur(30px);
    top: -120px; right: -80px;
    animation: auroraDrift 14s ease-in-out infinite alternate;
    pointer-events: none;
}
.newsletter-card .container { position: relative; z-index: 2; }
.newsletter-card h2 { color: #fff; }
.newsletter-card p { color: #c3c9d6; max-width: 560px; margin: 0 auto 28px; }
.newsletter-card .nl-form { max-width: 460px; margin: 0 auto; }
.newsletter-card .form-control {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 14px 22px;
    color: #fff;
}
.newsletter-card .form-control::placeholder { color: #8fa2c4; }
.newsletter-card .form-control:focus { border-color: #FFD200; box-shadow: 0 0 0 4px rgba(245,184,0,.18); background: rgba(255,255,255,.12); }
.newsletter-card .nl-hint { font-size: .78rem; color: #8fa2c4; margin-top: 12px; }

/* Mobile app-style bottom nav — hidden by default (desktop unchanged) */
.mobile-bottom-nav,
.mobile-more-sheet,
.mobile-menu-backdrop { display: none; }

/* ----------------------------------------------------------------
   23. Back to top
   ---------------------------------------------------------------- */
.back-to-top {
    position: fixed;
    right: 26px;
    bottom: 26px;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 0;
    background: var(--grad-gold);
    color: #4b3b16;
    font-size: 1.1rem;
    box-shadow: 0 12px 30px rgba(245,184,0,.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: var(--transition);
    z-index: 1000;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-4px); }

/* ----------------------------------------------------------------
   24. Toast / flash messages
   ---------------------------------------------------------------- */
.toast-message {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 2000;
    padding: 14px 22px;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    box-shadow: var(--shadow-lg);
    animation: toastIn .5s ease forwards;
    max-width: 420px;
}
.toast-success { background: linear-gradient(120deg, #178f52, #0e6f3e); }
.toast-error { background: linear-gradient(120deg, #d64545, #a92d2d); }
.toast-info { background: linear-gradient(120deg, #2d6cb0, #1f4f86); }
.toast-message::after { content: "âÅ“”¢"; position: absolute; top: 8px; right: 12px; opacity: .6; cursor: pointer; }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

/* ----------------------------------------------------------------
   25. 404
   ---------------------------------------------------------------- */
.error-wrap { text-align: center; padding: 110px 0 130px; }
.error-code {
    font-family: var(--font-serif);
    font-size: clamp(6rem, 18vw, 11rem);
    font-weight: 800;
    line-height: 1;
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.error-wrap h2 { font-size: 2rem; }
.error-wrap p { color: var(--text-muted); max-width: 460px; margin: 0 auto 28px; }

/* ----------------------------------------------------------------
   26. Utilities
   ---------------------------------------------------------------- */
.rounded-lg { border-radius: var(--radius-lg) !important; }
.shadow-luxe { box-shadow: var(--shadow-lg) !important; }
.divider-gold { width: 70px; height: 3px; background: var(--grad-gold); border-radius: 3px; }
.pagination .page-link { border-radius: 10px !important; margin: 0 4px; color: var(--text); border: 1px solid var(--line); font-weight: 600; background: var(--paper); }
.pagination .page-item.active .page-link { background: var(--grad-gold); border-color: var(--gold); color: #4b3b16; }
.pagination .page-item.disabled .page-link { background: transparent; color: var(--text-muted); border-color: var(--line); }
.img-lazy { background: #e7e4da; }

/* ----------------------------------------------------------------
   27. Responsive
   ---------------------------------------------------------------- */
/* Header responsive sizing for mid-range desktop & tablet screens (992px to 1200px) */
@media (min-width: 992px) and (max-width: 1200px) {
    .site-nav .container { max-width: 100%; padding-left: 16px; padding-right: 16px; }
    .brand { gap: 8px; }
    .brand-logo { width: 38px; height: 38px; }
    .brand-name { font-size: 1.08rem; }
    .brand-tag { font-size: .56rem; letter-spacing: 1.2px; }
    .nav-menu { gap: 2px; }
    .nav-menu a { padding: 8px 10px; font-size: .86rem; }
    .nav-cta { gap: 6px !important; }
    .nav-cta .btn { padding: 5px 10px; font-size: .78rem; }
    .nav-admin-link { padding: 4px 10px; font-size: .74rem; }
}

/* Drawer-only "Download App" button (never shown on desktop) */
.mobile-app-download { display: none; }

@media (min-width: 1201px) and (max-width: 1400px) {
    .nav-menu { gap: 6px; }
    .nav-menu a { padding: 9px 13px; font-size: .92rem; }
    .nav-cta { gap: 10px !important; }
}

@media (max-width: 991.98px) {
    .section { padding: 64px 0; }
    .hero { min-height: auto; padding: 32px 0 42px; }
    .hero-visual { min-height: 310px; margin-top: 20px; }
    /* Slimmer fixed header on mobile: less empty dark space, same visual style */
    .site-nav { padding-top: 8px; padding-bottom: 8px; }
    .navbar { --bs-navbar-padding-y: 0; padding-top: 0; padding-bottom: 0; }
    /* ============ MOBILE NAV REDESIGN (app-style drawer) ============ */

    /* Branding: compact & aligned so it always fits next to the toggle */
    .brand { gap: 10px; min-width: 0; }
    .brand-logo { width: 40px; height: 40px; border-radius: 11px; }
    .brand-text { min-width: 0; align-self: center; }
    .brand-name {
        font-size: clamp(1rem, 4.6vw, 1.22rem);
        letter-spacing: .1px;
        line-height: 1.15;
        white-space: nowrap;
    }
    .brand-tag {
        font-size: clamp(.5rem, 2.1vw, .62rem);
        letter-spacing: 1px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Hamburger button: modern gold pill, clean focus, won't wrap */
    .navbar-toggler {
        flex: 0 0 auto;
        margin-left: auto;
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0;
        gap: 0;
        z-index: 1040;
        border: 1px solid rgba(245, 184, 0, .38);
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(245, 184, 0, .16), rgba(245, 184, 0, .05));
        box-shadow: 0 6px 18px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .04);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        cursor: pointer;
        transition: background .35s cubic-bezier(.22,.61,.36,1),
                    box-shadow .35s ease,
                    transform .2s ease;
    }
    .navbar-toggler:hover {
        background: linear-gradient(135deg, rgba(245, 184, 0, .3), rgba(245, 184, 0, .14));
        box-shadow: 0 8px 22px rgba(245, 184, 0, .3);
    }
    .navbar-toggler:active { transform: scale(.94); }
    .navbar-toggler span {
        width: 22px;
        height: 2px;
        margin: 4px 0;
        background: #fff;
        border-radius: 999px;
        transform-origin: center;
        transition: transform .38s cubic-bezier(.34, 1.56, .64, 1),
                    opacity .25s ease,
                    background .3s ease;
    }
    /* Hamburger → X when menu open */
    .navbar-toggler[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .navbar-toggler[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .navbar-toggler[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Backdrop overlay behind the drawer */
    .mobile-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1035;
        background: rgba(5, 8, 15, .55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s ease, visibility .35s ease;
    }
    body.mobile-menu-open .mobile-menu-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* Collapse panel — glass card drawer (custom-animated, .show driven) */
    .navbar-collapse {
        display: block !important; /* override Bootstrap's display:none so we control animation */
        position: relative;
        z-index: 1036;
        background: linear-gradient(180deg, rgba(19, 26, 40, .92) 0%, rgba(14, 20, 32, .96) 100%);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(245, 184, 0, .14);
        border-radius: 20px;
        padding: 0 18px;
        box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .03);
        margin-top: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-16px) scale(.98);
        transform-origin: top center;
        transition: max-height .45s cubic-bezier(.16, 1, .3, 1),
                    padding .35s cubic-bezier(.16, 1, .3, 1),
                    transform .38s cubic-bezier(.16, 1, .3, 1),
                    opacity .3s ease,
                    visibility .38s;
    }
    .navbar-collapse.show {
        padding: 22px 18px 18px;
        margin-top: 12px;
        max-height: 75vh;
        overflow-y: auto;
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }
    .navbar-collapse.collapsing { height: auto !important; }

    /* Menu links: moderate font, clean spacing, stagger entrance */
    .nav-menu { flex-direction: column; align-items: stretch; gap: 2px; }
    .nav-menu > li { width: 100%; }
    .nav-menu a {
        padding: 12px 14px;
        font-size: 1.02rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .nav-menu a::after { display: none; }
    .nav-menu a:hover,
    .nav-menu a.active {
        background: rgba(245, 184, 0, .10);
        color: var(--gold-light);
    }
    .has-dropdown > a::after { /* chevron for parent items on mobile */
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        margin-right: 4px;
        opacity: .7;
        background: transparent;
        transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
    }
    .has-dropdown.open > a::after { transform: rotate(225deg); opacity: 1; }

    /* Staggered fade-slide entrance for top-level menu items */
    @keyframes menuItemIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .navbar-collapse.show .nav-menu > li {
        opacity: 0;
        animation: menuItemIn .5s cubic-bezier(.16, 1, .3, 1) forwards;
    }
    .navbar-collapse.show .nav-menu > li:nth-child(1) { animation-delay: .06s; }
    .navbar-collapse.show .nav-menu > li:nth-child(2) { animation-delay: .12s; }
    .navbar-collapse.show .nav-menu > li:nth-child(3) { animation-delay: .18s; }
    .navbar-collapse.show .nav-menu > li:nth-child(4) { animation-delay: .24s; }
    .navbar-collapse.show .nav-menu > li:nth-child(5) { animation-delay: .30s; }
    .navbar-collapse.show .nav-menu > li:nth-child(n+6) { animation-delay: .36s; }

    /* Submenus: slide + fade via max-height */
    .nav-menu .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        margin: 2px 0 4px 14px;
        padding-left: 6px;
        border-left: 1px solid rgba(245, 184, 0, .2);
        max-height: 0;
        overflow: hidden;
        transition: max-height .45s cubic-bezier(.16, 1, .3, 1), opacity .35s ease;
        opacity: 0;
    }
    .nav-menu .submenu a {
        padding: 10px 12px;
        font-size: .95rem;
        font-weight: 500;
    }
    .nav-menu li.has-dropdown.open > .submenu {
        display: block;
        max-height: 600px;
        opacity: 1;
    }

    .nav-cta { flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.09); }
    .nav-cta .btn, .nav-admin-link { white-space: nowrap; }

    /* Download App action in the mobile drawer */
    .mobile-app-download {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 16px;
        margin-top: 14px;
        border: 0;
        border-radius: 13px;
        background: linear-gradient(135deg, #f5b800, #d99c00);
        color: #1a1608;
        font-size: .92rem;
        font-weight: 700;
        letter-spacing: .3px;
        cursor: pointer;
        box-shadow: 0 10px 24px rgba(245, 184, 0, .28);
        transition: transform .2s ease, box-shadow .25s ease, opacity .25s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-app-download i { font-size: 1.15rem; }
    .mobile-app-download:hover { box-shadow: 0 12px 28px rgba(245, 184, 0, .4); }
    .mobile-app-download:active { transform: scale(.97); opacity: .92; }

    .site-nav.on-dark .navbar-collapse {
        background: linear-gradient(180deg, rgba(14, 20, 32, .94) 0%, rgba(10, 14, 22, .97) 100%);
    }
    .site-nav.on-dark .nav-menu a { color: var(--gold-light); }
    .site-nav.on-dark .nav-menu a:hover,
    .site-nav.on-dark .nav-menu a.active { color: #fff; }
    .cta-banner { margin-top: 0.5in; padding: 0; }
    .cta-card { padding: 34px 26px; }
    .section-map { margin-top: 0.5in; padding: 0; }
    .map-card iframe { height: 320px; }
    .post-hero-img { height: 260px; }
    .newsletter-card { padding: 44px 24px; }
    .hero-shape { display: none; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
    .stats-grid .stat + .stat::before { display: none; }
    .hud-code, .hud-metric { display: none; }
    .hud-card { --hud-scale: .9; }
    .hero-copy { position: relative; z-index: 10; }
    .hero-visual { position: absolute; inset: 0; z-index: 1; min-height: 100%; margin-top: 0; pointer-events: none; }
    .hero-solar-laptop-group { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); max-width: 380px; pointer-events: auto; }
    .mini-laptop-img { width: 100%; max-width: 360px; }
    .hero-solar-canvas-wrap { height: 165px; max-width: 360px; margin-top: -16px; }

    /* --- Mobile app-style bottom nav: hide full footer --- */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    body, html { overflow-x: hidden; }
    .cta-banner,
    .section-map,
    .site-footer { display: none !important; }
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        height: calc(62px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow: hidden;
        background: rgba(13, 18, 30, 0.97);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-top: 1px solid rgba(245, 184, 0, 0.18);
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
    }
    .m-nav-item {
        flex: 1 1 0;
        flex-shrink: 1;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: none;
        border: 0;
        padding: 6px 2px;
        color: #9aa3b5;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.2s ease, transform 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .m-nav-item .m-nav-icon {
        font-size: clamp(1.05rem, 5.5vw, 1.25rem);
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .m-nav-item .m-nav-label {
        font-size: clamp(0.56rem, 2.8vw, 0.68rem);
        font-weight: 600;
        letter-spacing: 0.3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        position: relative;
        z-index: 1;
    }
    .m-nav-item:active .m-nav-icon { transform: scale(0.88); }
    /* Active tab (e.g. Home on the homepage): professional gold pill highlight */
    .m-nav-item.active { color: #f5b800; }
    .m-nav-item.active::before {
        content: "";
        position: absolute;
        top: 4px;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: clamp(42px, 13vw, 56px);
        border-radius: 16px;
        background: rgba(245, 184, 0, 0.14);
        border: 1px solid rgba(245, 184, 0, 0.3);
        box-shadow: 0 4px 16px rgba(245, 184, 0, 0.22), inset 0 0 10px rgba(245, 184, 0, 0.1);
    }
    .m-nav-item.active .m-nav-icon {
        color: #f5b800;
        text-shadow: 0 0 16px rgba(245, 184, 0, 0.6);
        transform: translateY(-1px);
    }
    .m-nav-item.active .m-nav-label { color: #f5b800; font-weight: 700; }

    /* bottom-sheet "More" panel */
    .mobile-more-sheet {
        position: fixed;
        inset: 0;
        z-index: 1150;
        display: flex;
        align-items: flex-end;
        visibility: hidden;
        pointer-events: none;
    }
    .mobile-more-sheet.open { visibility: visible; pointer-events: auto; }
    .mobile-more-scrim {
        position: absolute;
        inset: 0;
        background: rgba(5, 8, 15, 0.55);
        opacity: 0;
        transition: opacity 0.3s ease;
        cursor: pointer;
    }
    .mobile-more-sheet.open .mobile-more-scrim { opacity: 1; }
    .mobile-more-panel {
        position: relative;
        width: 100%;
        background: linear-gradient(180deg, #131b2d 0%, #0d1424 100%);
        border-radius: 22px 22px 0 0;
        border-top: 1px solid rgba(245, 184, 0, 0.3);
        padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mobile-more-sheet.open .mobile-more-panel { transform: translateY(0); }
    .mobile-more-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
    }
    .mobile-more-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; color: #fff; }
    .mobile-more-close {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid rgba(245, 184, 0, 0.3);
        background: rgba(245, 184, 0, 0.08);
        color: #f5b800;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        cursor: pointer;
    }
    .mobile-more-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .mobile-more-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 16px 8px;
        border-radius: 14px;
        background: rgba(245, 184, 0, 0.06);
        border: 1px solid rgba(245, 184, 0, 0.14);
        color: #e4e8f0;
        text-decoration: none;
        font-size: 0.8rem;
        transition: background .25s ease, border-color .25s ease, transform .2s ease;
    }
    .mobile-more-link:hover,
    .mobile-more-link:active { background: rgba(245, 184, 0, 0.14); }
    .mobile-more-download {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: center;
        gap: 9px;
        padding: 14px 12px;
        background: linear-gradient(135deg, rgba(245, 184, 0, .18), rgba(245, 184, 0, .08));
        border-color: rgba(245, 184, 0, .45);
        color: #fff;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-more-download i { font-size: 1.15rem; color: #f5b800; }
    .mobile-more-download:hover,
    .mobile-more-download:active {
        background: linear-gradient(135deg, rgba(245, 184, 0, .3), rgba(245, 184, 0, .16));
        transform: scale(.98);
    }
    .mobile-more-link i { font-size: 1.3rem; color: #f5b800; }
    .mobile-more-link:active { transform: scale(0.94); background: rgba(245, 184, 0, 0.14); }
    .mobile-more-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 16px 0; }
    .mobile-more-action { display: flex; flex-direction: column; }

    /* Raise floating buttons above bottom nav on mobile */
    .wa-float { bottom: 90px; }
    .back-to-top { bottom: 90px; }
}

@media (max-width: 767.98px) {
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-legal .nav-menu { justify-content: center; }
    .hero { min-height: auto; padding: 24px 0 36px; }
    .hero-badge { margin-bottom: 10px; }
    .hero-services { gap: 8px; }
    .h-service { padding: 8px 12px; font-size: .8rem; }
    .hud-panel { display: none; }
    .laptop-wrap { width: 100%; transform: rotateY(-4deg) rotateX(1deg); }
    .hero-visual { min-height: 260px; margin-top: 16px; pointer-events: none; }
    .hero-solar-laptop-group { max-width: 320px; margin-top: 0; bottom: 0; }
    .hero-solar-canvas-wrap { height: 150px; max-width: 320px; margin-top: -12px; }
    .mini-laptop-img { width: 100%; max-width: 320px; }
    .platform { bottom: -20px; }
    .scroll-hint { display: none; }
    .stats-band { padding: 40px 0; }
    .cta-banner { margin-top: 0.5in; padding: 0; }
    .section-map { margin-top: 0.5in; padding: 0; }
    .map-card iframe { height: 280px; }
}

@media (max-width: 575.98px) {
    .hero { padding: 20px 0 28px; }
    .hero-visual { min-height: 220px; margin-top: 10px; pointer-events: none; }
    .hero-solar-laptop-group { max-width: 270px; margin-top: 0; bottom: 0; }
    .hero-laptop-mini { margin-bottom: 0; }
    .mini-laptop-img { width: 100%; max-width: 270px; }
    .hero-solar-canvas-wrap { height: 130px; max-width: 270px; margin-top: -10px; }
    .marquee-badge-wrap { padding-right: 12px; }
    .marquee-badge { font-size: .68rem; padding: 0 16px 0 12px; letter-spacing: .6px; gap: 6px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
    .cta-banner { margin-top: 0.5in; padding: 0; }
    .section-map { margin-top: 0.5in; padding: 0; }
    .map-card iframe { height: 240px; }
    .site-footer { margin-top: 0.5in; padding: 60px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .hero-particles { display: none; }
}

/* ================================================================
   Preloader — Zente Code brand intro before every page load
   ================================================================ */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    background: radial-gradient(1200px 800px at 50% 38%, #101a2e 0%, #0b1019 55%, #070b12 100%);
    overflow: hidden;
}
.preloader::before,
.preloader::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .35;
    animation: preloader-glow 6s ease-in-out infinite alternate;
}
.preloader::before {
    width: 480px; height: 480px;
    left: -120px; top: -120px;
    background: radial-gradient(circle, rgba(255, 210, 0, .5), transparent 70%);
}
.preloader::after {
    width: 520px; height: 520px;
    right: -140px; bottom: -140px;
    background: radial-gradient(circle, rgba(245, 184, 0, .42), transparent 70%);
    animation-delay: 2s;
}
@keyframes preloader-glow {
    from { transform: scale(.9) translateY(0); opacity: .28; }
    to   { transform: scale(1.15) translateY(-24px); opacity: .45; }
}

.preloader-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

/* Orbit rings */
.preloader-orbit {
    position: absolute;
    top: -78px;
    width: 240px; height: 240px;
    animation: preloader-spin 7s linear infinite;
}
.preloader-orbit span {
    position: absolute;
    border-radius: 50%;
}
.preloader-orbit span:nth-child(1) {
    inset: 12px;
    border: 1px solid rgba(245, 184, 0, .28);
    border-top-color: var(--gold-light);
    animation: preloader-orbit-ring 2.6s cubic-bezier(.65, .05, .36, 1) infinite;
}
.preloader-orbit span:nth-child(2) {
    inset: -14px;
    border: 1px dashed rgba(255, 255, 255, .18);
    animation: preloader-orbit-ring 4.2s linear infinite reverse;
}
.preloader-orbit span:nth-child(3) {
    inset: 38px;
    border: 2px dotted rgba(255, 210, 0, .35);
    animation: preloader-orbit-ring 1.8s linear infinite;
}
@keyframes preloader-orbit-ring {
    0%   { transform: rotate(0deg) scale(.96); }
    50%  { transform: rotate(180deg) scale(1.04); }
    100% { transform: rotate(360deg) scale(.96); }
}
@keyframes preloader-spin {
    to { transform: rotate(360deg); }
}

/* Logo mark */
.preloader-logo {
    position: relative;
    width: 104px; height: 104px;
    display: grid;
    place-items: center;
    animation: preloader-logo-float 2.4s ease-in-out infinite;
}
.preloader-logo-img {
    width: 104px; height: 104px;
    display: block;
    filter: drop-shadow(0 18px 50px rgba(245, 184, 0, .38));
    animation: preloader-mark-pop 2.4s ease-in-out infinite;
}
.preloader-logo::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 34px;
    border: 1px solid rgba(245, 184, 0, .35);
    animation: preloader-logo-pulse 2.4s ease-in-out infinite;
}
@keyframes preloader-logo-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-14px) scale(1.04); }
}
@keyframes preloader-logo-pulse {
    0%, 100% { transform: scale(1); opacity: .6; }
    50%      { transform: scale(1.22); opacity: 0; }
}
@keyframes preloader-mark-pop {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.08) rotate(-3deg); }
}

/* Name letters */
.preloader-name {
    display: flex;
    gap: 2px;
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: 5px;
    color: var(--text-strong);
}
.preloader-name span {
    display: inline-block;
    opacity: 0;
    transform: translateY(22px) rotateX(70deg);
    animation: preloader-letter 1.4s cubic-bezier(.22, .61, .36, 1) forwards;
}
.preloader-name span.gap { animation: none; opacity: 1; transform: none; }
.preloader-name span:nth-child(1)  { animation-delay: .25s; }
.preloader-name span:nth-child(2)  { animation-delay: .32s; }
.preloader-name span:nth-child(3)  { animation-delay: .39s; }
.preloader-name span:nth-child(4)  { animation-delay: .46s; }
.preloader-name span:nth-child(5)  { animation-delay: .53s; }
.preloader-name span:nth-child(7)  { animation-delay: .64s; }
.preloader-name span:nth-child(8)  { animation-delay: .71s; }
.preloader-name span:nth-child(9)  { animation-delay: .78s; }
.preloader-name span:nth-child(10) { animation-delay: .85s; }
@keyframes preloader-letter {
    to { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

/* Tagline */
.preloader-tag {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--gold-light);
    opacity: 0;
    animation: preloader-fade 1s ease 1.1s forwards;
}

/* Progress bar */
.preloader-bar {
    width: 190px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}
.preloader-bar span {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background: var(--grad-gold);
    transform-origin: left;
    transform: scaleX(0);
    animation: preloader-bar-grow 1.6s cubic-bezier(.65, .05, .36, 1) forwards;
}
@keyframes preloader-bar-grow {
    to { transform: scaleX(1); }
}
@keyframes preloader-fade {
    to { opacity: 1; }
}

/* Preloader exit state */
.preloader.done {
    animation: preloader-exit .7s cubic-bezier(.65, .05, .36, 1) forwards;
}
@keyframes preloader-exit {
    to { opacity: 0; visibility: hidden; }
}
.preloader.done .preloader-inner { animation: preloader-inner-exit .6s ease forwards; }
@keyframes preloader-inner-exit {
    to { transform: scale(.92) translateY(-18px); opacity: 0; }
}

/* ----------------------------------------------------------------
   WhatsApp floating button
   ---------------------------------------------------------------- */
.wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1090;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #34d17b 0%, #25d366 60%, #1da851 100%);
    color: #fff;
    font-size: 1.65rem;
    box-shadow: 0 10px 28px rgba(37, 211, 102, .42), inset 0 1px 0 rgba(255,255,255,.25);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(37, 211, 102, .5);
    animation: wa-pulse 2.2s ease-out infinite;
    z-index: -1;
}
.wa-float i { line-height: 1; }
.wa-float:hover, .wa-float:focus-visible {
    transform: translateY(-3px) scale(1.05);
    color: #fff;
    box-shadow: 0 14px 34px rgba(37, 211, 102, .5);
}
@keyframes wa-pulse {
    0% { transform: scale(1); opacity: .55; }
    70% { transform: scale(1.65); opacity: 0; }
    100% { transform: scale(1.65); opacity: 0; }
}
@media (max-width: 575.98px) {
    .wa-float { right: 16px; bottom: 90px; width: 52px; height: 52px; font-size: 1.5rem; }
}

/* ----------------------------------------------------------------
   25. Client Portal
   ---------------------------------------------------------------- */
.portal { padding-top: 28px; }
.portal-shell {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding-bottom: 20px;
}

/* Sidebar */
.portal-side {
    flex: 0 0 260px;
    background: linear-gradient(180deg, #141c2e 0%, #0d1424 100%);
    border: 1px solid rgba(245, 184, 0, 0.18);
    border-radius: 18px;
    padding: 20px 14px;
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
}
.portal-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 14px;
}
.portal-avatar {
    width: 46px; height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--grad-gold, linear-gradient(135deg, #f5b800, #d99c00));
    color: #1a1608;
    font-weight: 800;
    font-size: 1.15rem;
}
.portal-member strong { display: block; color: #fff; font-size: .95rem; line-height: 1.2; }
.portal-member small { color: #9aa3b5; font-size: .74rem; word-break: break-all; }
.portal-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.portal-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 11px;
    color: #c3c9d6;
    font-size: .93rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.portal-nav a i { font-size: 1.1rem; color: #8f98aa; }
.portal-nav a:hover { background: rgba(245, 184, 0, 0.08); color: #fff; }
.portal-nav a.active { background: var(--grad-gold, linear-gradient(135deg, #f5b800, #d99c00)); color: #1a1608; }
.portal-nav a.active i { color: #1a1608; }
.portal-nav a .nav-badge {
    margin-left: auto;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: .7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5b800;
    color: #1a1608;
}
.portal-nav a.active .nav-badge { background: #1a1608; color: #f5b800; }
.portal-side-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.portal-logout {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 11px;
    color: #f0766b; font-weight: 600; font-size: .93rem; text-decoration: none;
}
.portal-logout:hover { background: rgba(240, 118, 107, .1); color: #ff8b80; }

/* Main panel */
.portal-main { flex: 1 1 auto; min-width: 0; }

/* Stat cards */
.portal-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}
.pstat {
    background: linear-gradient(180deg, #141c2e 0%, #0d1424 100%);
    border: 1px solid rgba(245, 184, 0, 0.16);
    border-radius: 14px;
    padding: 18px 14px;
    text-align: center;
}
.pstat-num { display: block; font-size: 1.7rem; font-weight: 800; color: #f5b800; line-height: 1.1; }
.pstat-label { display: block; color: #9aa3b5; font-size: .76rem; margin-top: 4px; text-transform: uppercase; letter-spacing: .4px; }

/* Cards */
.portal-card {
    background: linear-gradient(180deg, #141c2e 0%, #0d1424 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 22px;
    height: 100%;
}
.portal-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.portal-card-head h5 { margin: 0; color: #fff; font-family: "Playfair Display", Georgia, serif; font-weight: 700; }
.portal-cards .portal-card { height: auto; }

/* Table */
.portal-table { --bs-table-bg: transparent; color: #e9edf5; }
.portal-table thead th { color: #9aa3b5; font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; border-color: rgba(255,255,255,.08); }
.portal-table td { border-color: rgba(255,255,255,.06); vertical-align: middle; }

/* Activity */
.portal-act { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.portal-act li { display: flex; gap: 10px; align-items: flex-start; }
.portal-act li.unread strong { color: #f5b800; }
.portal-act .act-dot { width: 10px; height: 10px; flex: 0 0 10px; margin-top: 5px; border-radius: 50%; background: #535d73; }
.portal-act li.unread .act-dot { background: #f5b800; box-shadow: 0 0 0 4px rgba(245,184,0,.15); }
.portal-act strong { display: block; color: #fff; font-size: .88rem; }
.portal-act small { color: #9aa3b5; font-size: .76rem; }

/* Messages */
.portal-thread { display: flex; flex-direction: column; gap: 12px; }
.pt-msg { display: flex; }
.pt-msg.in { justify-content: flex-start; }
.pt-msg.out { justify-content: flex-end; }
.pt-bubble {
    max-width: 78%;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.05);
    color: #e9edf5;
    font-size: .9rem;
}
.pt-msg.in .pt-bubble { border-bottom-left-radius: 4px; background: rgba(245,184,0,.10); border: 1px solid rgba(245,184,0,.18); }
.pt-msg.out .pt-bubble { border-bottom-right-radius: 4px; background: linear-gradient(135deg,#f5b800,#d99c00); color: #1a1608; }
.pt-msg.out .pt-bubble strong, .pt-msg.out .pt-bubble small { color: #3a2f0c; }
.pt-msg.out .pt-bubble .pt-subject { font-weight: 700; }
.pt-subject { display: block; color: #c3c9d6; font-size: .84rem; margin: 2px 0 6px; }
.pt-bubble p { margin: 0 0 6px; }
.pt-bubble small { color: #9aa3b5; }

/* Files */
.file-grid { display: flex; flex-direction: column; gap: 10px; }
.file-item {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 12px 14px;
}
.file-ic { font-size: 1.6rem; color: #f5b800; }
.file-meta { flex: 1; min-width: 0; }
.file-meta strong { display: block; color: #fff; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta small { color: #9aa3b5; font-size: .76rem; }
.file-actions { display: flex; gap: 6px; }

/* Notifications */
.portal-notif { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.portal-notif li {
    display: flex; gap: 12px; padding: 14px 6px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.portal-notif li.unread { background: rgba(245,184,0,.05); border-radius: 10px; }
.notif-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(245,184,0,.12); color: #f5b800; font-size: 1.1rem; }
.notif-body strong { color: #fff; font-size: .92rem; }
.notif-body p { margin: 2px 0 4px; color: #c3c9d6; font-size: .85rem; }
.notif-body small { color: #9aa3b5; font-size: .75rem; }

/* Settings */
.portal-account-info { list-style: none; margin: 0; padding: 0; }
.portal-account-info li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); color: #c3c9d6; font-size: .9rem; }
.portal-account-info li strong { color: #fff; }

/* Login page */
.portal-mark { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--grad-gold, linear-gradient(135deg,#f5b800,#d99c00)); color: #1a1608; font-size: 1.5rem; }

/* Portal modal */
.portal-modal { background: #0d1424; color: #e9edf5; border: 1px solid rgba(245,184,0,.25); }
.portal-modal .modal-header { border-bottom: 1px solid rgba(255,255,255,.08); }
.portal-modal .btn-close { filter: invert(1) grayscale(100%) brightness(2); }
.portal-modal .modal-title { font-family: "Playfair Display", Georgia, serif; font-weight: 700; }

/* Responsive */
@media (max-width: 991.98px) {
    .portal-shell { flex-direction: column; }
    .portal-side { flex: none; width: 100%; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
    .portal-member { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; margin-right: auto; }
    .portal-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .portal-nav a { padding: 9px 11px; font-size: .84rem; }
    .portal-side-foot { margin-top: 0; padding-top: 0; border-top: 0; }
    .portal-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
    .portal-stats { grid-template-columns: repeat(2, 1fr); }
    .portal-member { width: 100%; }
    .portal-card { padding: 16px; }
    .pt-bubble { max-width: 92%; }
}

/* ================================================================
   26. Client Portal — Professional Dashboard
   ================================================================ */
.cp {
    display: flex;
    min-height: 100vh;
    position: relative;
}
.cp-page { background: #0a0f1a; min-height: 100vh; }
.cp-body-open { overflow: hidden; }

/* ---------- Sidebar ---------- */
.cp-sidebar {
    flex: 0 0 264px;
    width: 264px;
    background: linear-gradient(180deg, #101828 0%, #0b1120 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 30;
}
.cp-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 20px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.cp-brand-mark {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f5b800, #ff9f43);
    color: #1a1608; font-size: 1.25rem;
    box-shadow: 0 6px 16px rgba(245, 184, 0, .35);
}
.cp-brand-txt { line-height: 1.15; }
.cp-brand-txt strong { display: block; color: #fff; font-size: 1.02rem; letter-spacing: .3px; }
.cp-brand-txt small { color: #8f98aa; font-size: .73rem; text-transform: uppercase; letter-spacing: 1.2px; }
.cp-close-side {
    display: none; margin-left: auto; border: 0; background: transparent;
    color: #9aa3b5; font-size: 1.1rem; padding: 4px;
}
.cp-side-label {
    padding: 20px 22px 8px; color: #5d6679; font-size: .68rem;
    text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700;
}
.cp-nav { display: flex; flex-direction: column; gap: 3px; padding: 0 12px; }
.cp-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 10px;
    color: #b9c0cf; font-size: .92rem; font-weight: 600; text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
    position: relative;
}
.cp-nav a i { font-size: 1.12rem; color: #7c8597; width: 20px; text-align: center; transition: color .18s ease; }
.cp-nav a span { flex: 1 1 auto; }
.cp-nav a:hover { background: rgba(245, 184, 0, 0.08); color: #fff; transform: translateX(3px); }
.cp-nav a:hover i { color: #f5b800; }
.cp-nav a.active { background: linear-gradient(135deg, rgba(245,184,0,.16), rgba(245,184,0,.07)); color: #ffd14d; }
.cp-nav a.active::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 3px; background: linear-gradient(180deg,#f5b800,#ff9f43);
}
.cp-nav a.active i { color: #f5b800; }
.cp-badge {
    font-style: normal; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: #232c3f; color: #aab3c5;
    font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.cp-badge.hot { background: linear-gradient(135deg, #f5b800, #ff9f43); color: #1a1608; }
.cp-side-foot {
    margin-top: auto; padding: 16px 14px; border-top: 1px solid rgba(255,255,255,.07);
    display: flex; flex-direction: column; gap: 10px;
}
.cp-side-user { display: flex; align-items: center; gap: 11px; padding: 4px 8px; }
.cp-side-user-txt { min-width: 0; line-height: 1.2; }
.cp-side-user-txt strong { display: block; color: #fff; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-side-user-txt small { color: #8f98aa; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.cp-logout {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
    color: #f0766b; font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .18s ease;
}
.cp-logout i { width: 20px; text-align: center; }
.cp-logout:hover { background: rgba(240, 118, 107, .12); color: #ff8b80; }

/* ---------- Avatar ---------- */
.cp-avatar {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f5b800, #ff9f43); color: #1a1608;
    font-weight: 800; font-size: 1rem;
}
.cp-avatar-sm { width: 34px; height: 34px; flex-basis: 34px; font-size: .85rem; }

/* ---------- Main area & topbar ---------- */
.cp-main {
    flex: 1 1 auto; min-width: 0;
    background: #0a0f1a;
    display: flex; flex-direction: column;
}
.cp-topbar {
    position: sticky; top: 0; z-index: 29;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 26px;
    background: rgba(10, 15, 26, 0.82); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.cp-topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cp-hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
    background: transparent; color: #e9edf5; font-size: 1.2rem;
}
.cp-home-link {
    display: inline-flex; align-items: center; gap: 7px; color: #9aa3b5;
    font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.cp-home-link i { font-size: 1rem; }
.cp-home-link:hover { color: #f5b800; }
.cp-topbar-sep { width: 1px; height: 26px; background: rgba(255,255,255,.12); }
.cp-page-head { min-width: 0; }
.cp-page-head h1 { margin: 0; font-size: 1.15rem; font-weight: 700; color: #fff; line-height: 1.2; }
.cp-page-head p { margin: 2px 0 0; color: #8f98aa; font-size: .78rem; }
.cp-topbar-right { display: flex; align-items: center; gap: 10px; }
.cp-icon-btn {
    position: relative; width: 42px; height: 42px; border-radius: 11px;
    border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
    color: #cdd3df; font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.cp-icon-btn:hover { background: rgba(245,184,0,.1); color: #f5b800; border-color: rgba(245,184,0,.3); }
.cp-dot {
    position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: linear-gradient(135deg, #f5b800, #ff9f43); color: #1a1608;
    font-size: .66rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #0a0f1a;
}
.cp-profile-btn {
    display: inline-flex; align-items: center; gap: 9px; padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: transparent;
    color: #e9edf5; transition: background .18s ease, border-color .18s ease;
}
.cp-profile-btn:hover { background: rgba(255,255,255,.06); border-color: rgba(245,184,0,.3); }
.cp-profile-btn::after { display: none; }
.cp-profile-meta { flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.cp-profile-meta strong { color: #fff; font-size: .86rem; }
.cp-profile-meta small { color: #8f98aa; font-size: .72rem; }

/* ---------- Dropdowns ---------- */
.cp-drop, .cp-drop-menu {
    background: #111a2c; border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0,0,0,.5); padding: 0; overflow: hidden;
}
.cp-drop { width: 330px; max-width: calc(100vw - 24px); }
.cp-drop-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.cp-drop-head strong { color: #fff; font-size: .92rem; }
.cp-drop-link { background: none; border: 0; color: #f5b800; font-size: .76rem; font-weight: 600; }
.cp-drop-link:hover { text-decoration: underline; }
.cp-drop-body { max-height: 340px; overflow-y: auto; }
.cp-drop-empty { padding: 28px 16px; text-align: center; color: #8f98aa; font-size: .85rem; }
.cp-drop-empty i { display: block; font-size: 1.6rem; margin-bottom: 8px; color: #5d6679; }
.cp-drop-item {
    display: flex; gap: 11px; align-items: flex-start; padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.05); text-decoration: none; transition: background .15s ease;
}
.cp-drop-item:last-child { border-bottom: 0; }
.cp-drop-item:hover { background: rgba(255,255,255,.04); }
.cp-drop-item.unread { background: rgba(245,184,0,.05); }
.cp-drop-ic {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(245,184,0,.12); color: #f5b800; font-size: .98rem;
}
.cp-drop-txt { min-width: 0; }
.cp-drop-txt strong { display: block; color: #fff; font-size: .83rem; line-height: 1.3; }
.cp-drop-txt small { color: #8f98aa; font-size: .72rem; }
.cp-drop-item.unread .cp-drop-txt strong { color: #ffe08a; }
.cp-drop-foot {
    display: block; text-align: center; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08);
    color: #f5b800; font-size: .82rem; font-weight: 600; text-decoration: none;
}
.cp-drop-foot:hover { background: rgba(245,184,0,.06); }
.cp-drop-menu { min-width: 230px; padding: 8px; }
.cp-drop-mine { display: flex; align-items: center; gap: 11px; padding: 8px 10px 12px; }
.cp-drop-mine div { min-width: 0; line-height: 1.2; }
.cp-drop-mine strong { display: block; color: #fff; font-size: .9rem; }
.cp-drop-mine small { color: #8f98aa; font-size: .75rem; }
.cp-drop-item-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: #cdd3df; font-size: .86rem; font-weight: 600; }
.cp-drop-item-link i { width: 18px; text-align: center; color: #8f98aa; }
.cp-drop-item-link:hover { background: rgba(245,184,0,.1); color: #ffd14d; }
.cp-drop-item-link:hover i { color: #f5b800; }
.cp-drop-item-link.danger { color: #f0766b; }
.cp-drop-item-link.danger i { color: #f0766b; }
.cp-drop-item-link.danger:hover { background: rgba(240,118,107,.12); color: #ff8b80; }
.cp-drop-menu .dropdown-divider { border-color: rgba(255,255,255,.09); margin: 6px 0; }

/* ---------- Content ---------- */
.cp-content { padding: 24px 26px 40px; min-height: 100%; }
.cp-alert { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }

/* Stat cards */
.cp-stat {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(180deg, #111a2c 0%, #0d1526 100%);
    border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
    padding: 18px;
    transition: transform .18s ease, border-color .18s ease;
    height: 100%;
}
.cp-stat:hover { transform: translateY(-3px); border-color: rgba(245,184,0,.3); }
.cp-stat-ic {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(245,184,0,.13); color: #f5b800; font-size: 1.3rem;
}
.cp-stat-ic.amber { background: rgba(255,159,67,.13); color: #ff9f43; }
.cp-stat-ic.blue { background: rgba(56,132,255,.14); color: #5ea0ff; }
.cp-stat-ic.green { background: rgba(46,204,113,.13); color: #3ddc84; }
.cp-stat-ic.purple { background: rgba(160,104,255,.14); color: #ab7cff; }
.cp-stat div { line-height: 1.1; min-width: 0; }
.cp-stat em { display: block; font-style: normal; font-size: 1.65rem; font-weight: 800; color: #fff; }
.cp-stat small { color: #8f98aa; font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; }

/* Panels */
.cp-panel {
    background: linear-gradient(180deg, #111a2c 0%, #0d1526 100%);
    border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
    padding: 22px; height: 100%;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.cp-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.cp-panel-head h3 { margin: 0; color: #fff; font-size: 1.02rem; font-weight: 700; }
.cp-link { color: #f5b800; font-size: .82rem; font-weight: 600; text-decoration: none; }
.cp-link:hover { text-decoration: underline; }

/* Activity list */
.cp-act { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cp-act li { display: flex; gap: 11px; align-items: flex-start; }
.cp-act li.unread strong { color: #ffd14d; }
.cp-act-dot { width: 10px; height: 10px; flex: 0 0 10px; margin-top: 6px; border-radius: 50%; background: #3a4358; }
.cp-act li.unread .cp-act-dot { background: #f5b800; box-shadow: 0 0 0 4px rgba(245,184,0,.16); }
.cp-act strong { display: block; color: #fff; font-size: .87rem; }
.cp-act small { color: #8f98aa; font-size: .74rem; }

/* Empty states */
.cp-empty { text-align: center; padding: 42px 16px; color: #8f98aa; }
.cp-empty i { display: block; font-size: 2.4rem; color: #3a4358; margin-bottom: 12px; }
.cp-empty p { margin-bottom: 14px; }

/* Upload zone */
.cp-upload-zone {
    border: 1.5px dashed rgba(245,184,0,.35); border-radius: 12px;
    padding: 26px; text-align: center; margin-bottom: 12px; background: rgba(245,184,0,.03);
}
.cp-upload-zone i { font-size: 1.9rem; color: #f5b800; display: block; margin-bottom: 6px; }
.cp-upload-zone p { color: #9aa3b5; font-size: .85rem; margin-bottom: 12px; }

/* Order status pills */
.cp-status {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px; border-radius: 20px; font-size: .75rem; font-weight: 700;
    text-transform: capitalize; background: rgba(255,255,255,.05);
}
.cp-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #8f98aa; }
.cp-status.st-pending { color: #ffb84d; background: rgba(255,184,77,.12); }
.cp-status.st-pending .cp-status-dot { background: #ffb84d; box-shadow: 0 0 0 3px rgba(255,184,77,.18); }
.cp-status.st-reviewed, .cp-status.st-in-progress, .cp-status.st-active { color: #5ea0ff; background: rgba(86,132,255,.12); }
.cp-status.st-reviewed .cp-status-dot, .cp-status.st-in-progress .cp-status-dot, .cp-status.st-active .cp-status-dot { background: #5ea0ff; box-shadow: 0 0 0 3px rgba(86,132,255,.18); }
.cp-status.st-approved, .cp-status.st-completed { color: #3ddc84; background: rgba(61,220,132,.12); }
.cp-status.st-approved .cp-status-dot, .cp-status.st-completed .cp-status-dot { background: #3ddc84; box-shadow: 0 0 0 3px rgba(61,220,132,.18); }
.cp-status.st-cancelled { color: #f0766b; background: rgba(240,118,107,.12); }
.cp-status.st-cancelled .cp-status-dot { background: #f0766b; box-shadow: 0 0 0 3px rgba(240,118,107,.18); }

/* Notifications unread dot */
.notif-unread-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #f5b800; align-self: center; box-shadow: 0 0 0 3px rgba(245,184,0,.2); }

/* Overlay (mobile) */
.cp-overlay {
    display: none; position: fixed; inset: 0; z-index: 28;
    background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .cp-content { padding: 20px; }
}
@media (max-width: 991.98px) {
    .cp-sidebar {
        position: fixed; left: 0; top: 0; height: 100vh; z-index: 40;
        transform: translateX(-105%); transition: transform .28s ease;
        box-shadow: 12px 0 40px rgba(0,0,0,.45);
    }
    .cp-body-open .cp-sidebar { transform: translateX(0); }
    .cp-body-open .cp-overlay { display: block; }
    .cp-close-side { display: inline-flex; }
    .cp-main { min-height: calc(100vh - 80px); }
}
@media (max-width: 767.98px) {
    .cp-topbar { padding: 12px 16px; }
    .cp-content { padding: 18px 14px 32px; }
    .cp-home-link span { display: none; }
    .cp-topbar-sep { display: none; }
    .cp-page-head p { display: none; }
    .cp-topbar-left { gap: 10px; }
}
@media (max-width: 480px) {
    .cp-profile-meta, .cp-profile-btn .bi-chevron-down { display: none !important; }
}

/* ---------- Client Portal & Start Project High Contrast & Legibility ---------- */
.cp-panel .form-label,
.portal-modal .form-label {
    color: #e2e8f0;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.cp-panel .form-control,
.cp-panel .form-select,
.portal-modal .form-control,
.portal-modal .form-select {
    background-color: #111a2c;
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    font-size: 0.92rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.cp-panel .form-control:focus,
.cp-panel .form-select:focus,
.portal-modal .form-control:focus,
.portal-modal .form-select:focus {
    background-color: #141f36;
    color: #ffffff;
    border-color: #f5b800;
    box-shadow: 0 0 0 0.25rem rgba(245, 184, 0, 0.22);
    outline: 0;
}

/* Force visible dropdown option colors across operating systems & browser themes */
.cp-panel select option,
.portal-modal select option,
.form-select option {
    background-color: #111a2c !important;
    color: #ffffff !important;
    padding: 10px;
}

.cp-panel select option:hover,
.cp-panel select option:focus,
.portal-modal select option:hover,
.portal-modal select option:focus {
    background-color: #1d293d !important;
    color: #f5b800 !important;
}

/* Placeholders contrast */
.cp-panel .form-control::placeholder,
.portal-modal .form-control::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

/* Alert Note Box readability */
.alert-dark.border-gold {
    background-color: rgba(245, 184, 0, 0.08) !important;
    border: 1px solid rgba(245, 184, 0, 0.35) !important;
    color: #f8fafc !important;
}

/* Light Theme / White State Overrides if active */
body.light-theme .cp-panel,
body.light-mode .cp-panel {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
}

body.light-theme .cp-panel .form-control,
body.light-theme .cp-panel .form-select,
body.light-mode .cp-panel .form-control,
body.light-mode .cp-panel .form-select {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

body.light-theme .cp-panel select option,
body.light-mode .cp-panel select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}