/* ============================================================
   HOPE TECH ZONE — Light Luxury Theme (ivory + gold)
   Overrides the legacy dark theme. Loaded after style.css.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
    --ink: #201a12;
    --ink-2: #2a241a;
    --ink-3: #342c20;
    --cream: #f7f2ea;
    --paper: #ffffff;
    --gold: #b98d1f;
    --gold-light: #e0b43c;
    --gold-deep: #96710e;
    --text: #4c443a;
    --text-strong: #241c12;
    --text-muted: #7d7465;
    --line: rgba(38, 30, 18, .14);
    --line-light: rgba(38, 30, 18, .10);
    --grad-gold: linear-gradient(120deg, #e6bd45 0%, #d2a428 55%, #bd8f15 100%);
    --grad-soft: linear-gradient(180deg, #f2ece0 0%, #faf6ef 100%);
    --shadow-sm: 0 4px 14px rgba(32, 26, 18, .10);
    --shadow: 0 16px 40px rgba(32, 26, 18, .14);
    --shadow-lg: 0 28px 70px rgba(32, 26, 18, .18);
}

html { background: var(--cream); }
body {
    color: var(--text);
    background: var(--cream);
}
h1, h2, h3, h4, h5, h6 { color: var(--text-strong); }
::selection { background: var(--gold); color: #fff; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: #d8cfa8; border: 3px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---------- Preloader ---------- */
#pagePreloader.preloader,
.preloader {
    background: var(--cream);
    color: var(--text);
}
.preloader-logo::after,
.preloader-orbit span { border-color: rgba(185, 141, 31, .5); }
.preloader-orbit span:nth-child(1) { border-color: rgba(185, 141, 31, .18); }
.preloader-orbit span:nth-child(2) { border-color: rgba(185, 141, 31, .30); }
.preloader-orbit span:nth-child(3) { border-color: rgba(185, 141, 31, .42); }
.preloader-name span { color: var(--text-strong); }
.preloader-name span.gap { color: transparent; }
.preloader-tag { color: var(--gold-deep); }
.preloader-bar { background: rgba(185, 141, 31, .18); }
.preloader-bar span { background: var(--grad-gold); }

/* ---------- Navbar ---------- */
.site-nav { color: var(--text); }
.site-nav .nav-menu > li > a { color: var(--text-strong); }
.site-nav .nav-menu > li > a:hover,
.site-nav .nav-menu > li > a.active { color: var(--gold-deep); }
.nav-menu .submenu {
    background: #fffdf8;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}
.nav-menu .submenu a { color: var(--text); }
.nav-menu .submenu a:hover { background: rgba(185, 141, 31, .08); color: var(--gold-deep); }
.site-nav .brand-name { color: var(--text-strong); }
.site-nav .brand-tag { color: var(--gold-deep); }
.site-nav .nav-admin-link { color: var(--text-strong); }
.site-nav .nav-admin-link:hover { color: var(--gold-deep); }
.site-nav .navbar-toggler span { background: var(--text-strong); }

.site-nav.scrolled,
.site-nav.on-dark,
.site-nav.on-dark.scrolled {
    background: rgba(255, 253, 248, .88);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(32, 26, 18, .08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.site-nav.on-dark .nav-menu > li > a,
.site-nav.scrolled .nav-menu > li > a { color: var(--text-strong); }
.site-nav.on-dark .nav-menu > li > a:hover,
.site-nav.scrolled .nav-menu > li > a:hover,
.site-nav.on-dark .nav-menu > li > a.active,
.site-nav.scrolled .nav-menu > li > a.active { color: var(--gold-deep); }
.site-nav.on-dark .brand-name,
.site-nav.scrolled .brand-name { color: var(--text-strong); }
.site-nav.on-dark .brand-tag,
.site-nav.scrolled .brand-tag { color: var(--gold-deep); }
.site-nav.on-dark .nav-admin-link,
.site-nav.scrolled .nav-admin-link { color: var(--text-strong); }
.site-nav.on-dark .nav-admin-link:hover,
.site-nav.scrolled .nav-admin-link:hover { color: var(--gold-deep); }
.site-nav.on-dark .navbar-toggler span,
.site-nav.scrolled .navbar-toggler span { background: var(--text-strong); }

/* Buttons inside the nav */
.nav-cta .btn-gold { border: 0; }

/* ---------- Hero (light) ---------- */
.hero { background:
    radial-gradient(1200px 600px at 85% -10%, rgba(224, 180, 60, .22), transparent 60%),
    radial-gradient(900px 520px at -10% 110%, rgba(185, 141, 31, .12), transparent 55%),
    linear-gradient(160deg, #faf6ee 0%, #f3ece0 55%, #ede4d2 100%);
}
.hero-aurora.one { background: radial-gradient(circle, rgba(224, 180, 60, .35) 0%, rgba(224,180,60,0) 70%); }
.hero-aurora.two { background: radial-gradient(circle, rgba(185, 141, 31, .28) 0%, rgba(185,141,31,0) 70%); }
.hero-aurora.three { background: radial-gradient(circle, rgba(230, 189, 69, .30) 0%, rgba(230,189,69,0) 70%); }
.hero-shape.ring { border-color: rgba(150, 113, 14, .35); }
.hero-shape.dots { background-image: radial-gradient(rgba(150, 113, 14, .45) 2px, transparent 2px); }
.hero-grid { opacity: .06; }
.hero-title, .hero h1 { color: var(--text-strong); }
.hero-title .text-gold { color: var(--gold-deep); }
.hero-badge {
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(185, 141, 31, .35);
    color: var(--text-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.hero-badge .badge-dot { background: var(--gold); box-shadow: 0 0 12px rgba(185, 141, 31, .8); }
.hero-sub { color: var(--text-muted); font-weight: 500; }
.hero-lead { color: var(--text); font-weight: 500; }
.hero-lead-link:hover .hero-lead { color: var(--gold-deep); }
.hero-trust { color: var(--text-muted); }
.trust-item strong { color: var(--gold-deep); }
.hero-cta .btn-ghost { color: var(--text-strong); border-color: var(--line-light); }
.hero-cta .btn-ghost:hover { background: rgba(185, 141, 31, .08); color: var(--gold-deep); }

.orb-a { background: radial-gradient(circle, rgba(224, 180, 60, .45) 0%, rgba(224,180,60,.10) 40%, transparent 70%); box-shadow: 0 0 60px rgba(224, 180, 60, .25); }
.orb-b { background: radial-gradient(circle, rgba(230, 189, 69, .32) 0%, rgba(224,180,60,.06) 40%, transparent 70%); box-shadow: 0 0 46px rgba(224, 180, 60, .15); }

.hud-card {
    background: linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .62));
    border: 1px solid rgba(185, 141, 31, .35);
    box-shadow: 0 18px 40px rgba(32, 26, 18, .18), 0 0 22px rgba(224, 180, 60, .18);
}
.hud-card::after { background: linear-gradient(120deg, rgba(255,255,255,.55), transparent 42%); }
.hud-lines i { background: rgba(38, 30, 18, .16); }
.hud-lines i:nth-child(2) { background: rgba(185, 141, 31, .55); }
.hud-tag { color: var(--gold-deep); }
.hud-metric { color: var(--text-muted); }
.hud-metric em { color: var(--gold-deep); }
.metric-num { color: var(--text-strong); }
.metric-lbl { color: var(--text-muted); }
.panel-head { color: var(--text-muted); }
.panel-code i { background: rgba(38, 30, 18, .14); }
.panel-code i:nth-child(1) { background: rgba(185, 141, 31, .5); }
.panel-meta { color: var(--text-muted); }
.panel-meta em { color: var(--gold-deep); }
.chart b { background: rgba(38, 30, 18, .16); }
.chart b.gold { background: linear-gradient(180deg, #e0b43c, #b98d1f); box-shadow: 0 0 10px rgba(185, 141, 31, .35); }

/* ---------- Buttons ---------- */
.btn-gold { color: #1f1808; }
.btn-outline-dark {
    color: var(--text-strong);
    border: 1px solid rgba(38, 30, 18, .35);
    background: transparent;
}
.btn-outline-dark:hover { background: var(--text-strong); color: #faf6ee; transform: translateY(-2px); }
.btn-dark-solid { background: var(--ink-2); color: #fff; }
.btn-dark-solid:hover { background: var(--ink-3); color: #fff; }
.btn-ghost { color: var(--text-strong); border-color: var(--line); }

/* ---------- Marquee (kept as a dark contrast band) ---------- */
.marquee { background: var(--ink); color: #fff; border-color: rgba(255,255,255,.08); }
.marquee-badge-wrap { background: linear-gradient(90deg, var(--ink) 85%, rgba(38, 30, 18, 0) 100%); }

/* ---------- Stats band ---------- */
.stats-band {
    background: linear-gradient(180deg, #fdf9f1 0%, #f6eeda 100%);
    color: var(--text-strong);
    border-block: 1px solid rgba(185, 141, 31, .22);
}
.stats-band::after { background-image: radial-gradient(rgba(185,141,31,.10) 1px, transparent 1px); }
.stat .num { color: var(--gold-deep); text-shadow: 0 0 20px rgba(185, 141, 31, .22); }
.stat .lbl { color: var(--text-muted); }

/* ---------- Section surfaces ---------- */
.section-title { color: var(--text-strong); }
.section-subtitle { color: var(--text-muted); }
.eyebrow { color: var(--gold-deep); }
.eyebrow.light { color: var(--gold-light); }

/* ---------- Blog / Work / Testimonial cards ---------- */
.blog-card { background: #fffdf8; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.blog-card:hover { box-shadow: var(--shadow-lg); }
.blog-body h4 a { color: var(--text-strong); }
.blog-body h4 a:hover { color: var(--gold-deep); }
.blog-meta { color: var(--text-muted); }
.blog-meta i { color: var(--gold-deep); }
.blog-more { color: var(--gold-deep); }
.work-card { background: #fffdf8; border: 1px solid var(--line); }
.work-overlay .cat { color: var(--gold-light); }
.testimonial-content-box {
    background: #fffdf8;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.testimonial-star { color: var(--gold); }
.testimonial-quote { color: var(--text-strong); }

/* ---------- FAQ accordion ---------- */
.accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
}
.accordion-button {
    color: var(--text-strong);
    background: transparent;
    box-shadow: none !important;
    font-family: var(--font-serif);
    font-weight: 600;
}
.accordion-button:not(.collapsed) { color: var(--gold-deep); }
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b98d1f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-body { color: var(--text); }

/* ---------- CTA banner (rich espresso + gold contrast) ---------- */
.cta-banner { background: transparent; }
.cta-card {
    background: linear-gradient(145deg, #241b10 0%, #1a140c 100%);
    border: 1px solid rgba(224, 180, 60, .35);
    box-shadow: 0 30px 80px rgba(32, 26, 18, .35);
}
.cta-card h2 { color: #fff; }
.cta-card p { color: #d9cdb4; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
    background: linear-gradient(165deg, #faf6ee 0%, #f1e9d8 100%);
}
.page-hero-bg::after { background: rgba(247, 243, 234, .82); }
.page-hero::before { background: radial-gradient(900px 420px at 85% 0%, rgba(224,180,60,.22), transparent 60%); }
.page-hero h1 { color: var(--text-strong); }
.page-hero .crumb { color: var(--text-muted); }
.page-hero .crumb a { color: var(--gold-deep); }
.page-hero .text-secondary { color: var(--text-muted) !important; }

/* ---------- Contact / forms ---------- */
.form-control, .form-select {
    background: #fffdf8;
    border-color: rgba(38, 30, 18, .18);
    color: var(--text);
}
.form-control:focus, .form-select:focus {
    background: #fffdf8;
    border-color: var(--gold);
    box-shadow: 0 0 0 .2rem rgba(185, 141, 31, .18);
}
.form-control::placeholder { color: var(--text-muted); }
.contact-combined-card { background: #fffdf8; }

/* ---------- Jobs / culture ---------- */
.job-card { background: #fffdf8; color: var(--text); }
.job-title { color: var(--text-strong); }
.culture-chip { background: #fffdf8; color: var(--text-strong); }

/* ---------- Mobile bottom nav ---------- */
.mobile-bottom-nav {
    background: rgba(255, 253, 248, .94);
    border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.m-nav-item { color: var(--text-muted); }
.m-nav-item.active { color: var(--gold-deep); }
.mobile-more-sheet .mobile-more-panel {
    background: #fffdf8;
    border-top: 1px solid var(--line);
}
.mobile-more-title { color: var(--text-strong); }
.mobile-more-link { color: var(--text); }
.mobile-more-divider { background: var(--line); }

/* ---------- Footer (kept dark for contrast) ---------- */
.site-footer { background: var(--ink); color: #cfc6b4; }

/* ---------- Rich content ---------- */
.rich-content p { color: var(--text); }
.rich-content h2, .rich-content h3, .rich-content h4 { color: var(--text-strong); }
.rich-content a { color: var(--gold-deep); }

/* ---------- Toast ---------- */
.toast-message { box-shadow: var(--shadow-lg); }

/* ---------- Video story modal inside the hero ---------- */
.zc-story-options { background: linear-gradient(180deg, rgba(255, 253, 248, .94) 0%, rgba(247, 243, 234, .97) 100%); }
.zc-story-options .zc-story-title { color: var(--text-strong); }
.zc-story-options .zc-story-subtitle { color: var(--text-muted); }
.zc-story-btn {
    border-color: rgba(185, 141, 31, .4);
    background: rgba(185, 141, 31, .10);
    color: var(--text-strong);
}
.zc-story-btn:hover {
    background: var(--grad-gold);
    color: #1f1808;
    box-shadow: 0 12px 30px rgba(185, 141, 31, .35);
}
.zc-video-modal .modal-content { background: #fff; color: var(--text); }
.zc-video-modal .modal-title { color: var(--text-strong); }
.zc-video-option { background: rgba(185, 141, 31, .07); border-color: rgba(185, 141, 31, .3); }
.zc-video-option .zc-vo-label { color: var(--text-strong); }
.zc-video-option .zc-vo-hint { color: var(--text-muted); }
.zc-video-option:hover { background: rgba(185, 141, 31, .14); }