/* ============================================================
   TECHAGE PLATFORM - Public Site Stylesheet
   Shares the --navy/--orange brand tokens with admin.css and the
   source site's public/css/style.css (same hex values, confirmed).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Exo+2:wght@700;800;900&display=swap');

:root {
    --navy:         #000080;
    --navy-dark:    #000060;
    --navy-light:   #0000a8;
    --orange:       #FFA500;
    --orange-dark:  #e69400;
    --orange-light: #ffb733;
    --white:        #FFFFFF;
    --light-bg:     #f4f6fb;
    --dark-text:    #0d0d2b;
    --muted:        #6b7280;
    --border:       #e5e7eb;
    --card-shadow:  0 4px 24px rgba(0,0,128,0.08);
    --card-hover:   0 12px 40px rgba(0,0,128,0.16);
    --font-main:    'Space Grotesk', sans-serif;
    --font-display: 'Exo 2', sans-serif;
    --radius:    12px;
    --radius-lg: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-main); color: var(--dark-text); background: var(--white); line-height: 1.65; }
a { color: var(--navy); text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── Top utility bar (contact info + search + social links, above the main nav) ── */
.site-topbar { background: var(--navy-dark); color: rgba(255,255,255,0.85); }
.site-topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 6px 0; gap: 16px; flex-wrap: wrap; }
.site-topbar-contact { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; flex-shrink: 0; }
.site-topbar-contact a { color: rgba(255,255,255,0.85); display: flex; align-items: center; gap: 6px; font-size: 0.8rem; transition: color 0.2s; }
.site-topbar-contact a:hover { color: var(--orange-light); }
.site-topbar-contact i { color: var(--orange); font-size: 0.76rem; }
.site-topbar-socials { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.site-topbar-socials a {
    color: rgba(255,255,255,0.7); font-size: 0.76rem; width: 25px; height: 25px; border-radius: 50%;
    background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.site-topbar-socials a:hover { background: var(--orange); color: var(--navy); }
@media (max-width: 768px) { .site-topbar { display: none; } }

/* ── Site nav ── */
.site-nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--white); border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,128,0.04);
}
.site-nav-inner { display: flex; align-items: center; height: 64px; gap: 28px; }
.site-nav-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--navy); flex-shrink: 0; display: flex; align-items: center; }
.site-nav-brand span { color: var(--orange-dark); }
.site-nav-brand img { height: 36px; max-width: 180px; object-fit: contain; display: block; }
.site-nav-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-left: 12px; }
.site-nav-links a { font-size: 0.88rem; font-weight: 500; color: var(--dark-text); }
.site-nav-links a:hover, .site-nav-links a.active { color: var(--navy); }
.site-nav-cta {
    margin-left: 14px; flex-shrink: 0; background: var(--orange); color: var(--navy) !important;
    padding: 9px 18px; border-radius: 8px; font-weight: 700; font-size: 0.86rem;
}
.site-nav-cta:hover { background: var(--orange-dark); }

/* ── Search box — lives in the top utility bar on desktop (its own row, never
   competing with the main nav links for space) and in the mobile drawer below
   the breakpoint where the topbar itself disappears/the nav collapses to a
   hamburger. ── */
.site-nav-search {
    display: flex; align-items: center; gap: 8px; border-radius: 8px; transition: border-color 0.2s, background 0.2s;
}
.site-nav-search i { font-size: 0.78rem; flex-shrink: 0; }
.site-nav-search input {
    border: none; background: none; outline: none; font-size: 0.82rem; font-family: var(--font-main); width: 100%;
}
.site-topbar-search {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    padding: 6px 12px; flex: 1 1 auto; max-width: 320px; min-width: 140px; display: none;
}
.site-topbar-search i { color: rgba(255,255,255,0.55); }
.site-topbar-search input { color: #fff; }
.site-topbar-search input::placeholder { color: rgba(255,255,255,0.5); }
.site-topbar-search:focus-within { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.site-nav-search-drawer {
    background: var(--light-bg); border: 1px solid var(--border); padding: 8px 12px; margin: 6px 0 10px;
}
.site-nav-search-drawer i { color: var(--muted); }
.site-nav-search-drawer input { color: var(--dark-text); }
.site-nav-search-drawer input::placeholder { color: var(--muted); }
.site-nav-search-drawer:focus-within { border-color: var(--navy); background: var(--white); }
@media (min-width: 900.02px) {
    .site-topbar-search { display: flex; }
    .site-nav-search-drawer { display: none; }
}

/* ── Page hero (shared banner across interior pages) ── */
.page-hero {
    background: linear-gradient(135deg, var(--navy-dark), var(--navy));
    padding: 72px 0 52px; text-align: center;
}
.page-hero .tag {
    display: inline-block; background: rgba(255,165,0,0.15); color: var(--orange-light);
    font-size: 0.76rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 6px 16px; border-radius: 50px; margin-bottom: 16px;
}
.page-hero h1 { color: var(--white); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 12px; }
.page-hero h1 span { color: var(--orange); }
.page-hero p { color: rgba(255,255,255,0.72); font-size: 1.05rem; max-width: 620px; margin: 0 auto; }

/* ── Sections ── */
.section { padding: 64px 0; }
.section-alt { background: var(--light-bg); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section-tag {
    display: inline-block; background: rgba(0,0,128,0.06); color: var(--navy);
    font-size: 0.74rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 5px 14px; border-radius: 50px; margin-bottom: 14px;
}
.section-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--dark-text); margin: 0 0 10px; }
.section-title span { color: var(--orange-dark); }
.section-sub { color: var(--muted); font-size: 1rem; }

/* ── Card grid ── */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid-5 { grid-template-columns: 1fr; } }
.pcard {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow); overflow: hidden; transition: all .25s ease; display: flex; flex-direction: column;
}
.pcard:hover { box-shadow: var(--card-hover); transform: translateY(-3px); }
.pcard-thumb { height: 170px; background: linear-gradient(135deg, var(--navy-light), var(--navy)); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-size: 2rem; }
.pcard-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pcard-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.pcard-cat { font-size: 0.72rem; font-weight: 700; color: var(--orange-dark); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.pcard-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; color: var(--dark-text); }
.pcard-desc { color: var(--muted); font-size: 0.88rem; flex: 1; margin-bottom: 14px; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.pcard-price { font-weight: 800; color: var(--navy); font-family: var(--font-display); }

/* ── Product media (show-solution.php / show-script.php — thumbnail + gallery strip) ── */
.product-media-main {
    border-radius: var(--radius, 12px); overflow: hidden; background: var(--navy-light, #eef);
    aspect-ratio: 16 / 9; margin-bottom: 10px;
}
.product-media-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-media-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.product-media-thumb {
    width: 84px; height: 60px; object-fit: cover; border-radius: 8px; cursor: pointer;
    border: 2px solid transparent; opacity: 0.75; transition: 0.2s; flex-shrink: 0;
}
.product-media-thumb:hover { opacity: 1; border-color: var(--orange); }

/* ── Buttons ── */
.pbtn {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 8px;
    font-weight: 700; font-size: 0.88rem; cursor: pointer; border: none; text-decoration: none;
}
.pbtn-navy { background: var(--navy); color: var(--white); }
.pbtn-navy:hover { background: var(--navy-dark); color: var(--white); }
.pbtn-orange { background: var(--orange); color: var(--navy); }
.pbtn-orange:hover { background: var(--orange-dark); color: var(--navy); }
.pbtn-outline { background: transparent; border: 1.5px solid var(--navy); color: var(--navy); }
.pbtn-outline:hover { background: var(--navy); color: var(--white); }
.pbtn-sm { padding: 7px 14px; font-size: 0.8rem; }

/* ── Forms ── */
.pform-label { display: block; font-weight: 600; font-size: 0.86rem; margin-bottom: 6px; color: var(--dark-text); }
.pform-control {
    width: 100%; border: 1.5px solid var(--border); border-radius: 8px; padding: 11px 14px;
    font-size: 0.92rem; font-family: var(--font-main); background: var(--white); color: var(--dark-text);
}
.pform-control:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,0,128,0.08); }
.pform-group { margin-bottom: 18px; }
.honeypot { position: absolute; left: -9999px; opacity: 0; }
.pform-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .pform-row-2 { grid-template-columns: 1fr; } }

/* ── Testimonial / team card ── */
.tcard { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--card-shadow); }
.tcard .stars { color: var(--orange); margin-bottom: 10px; }
.tcard .msg { color: var(--dark-text); font-size: 0.94rem; margin-bottom: 16px; }
.tcard .who { display: flex; align-items: center; gap: 12px; }
.tcard .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.tcard .name { font-weight: 700; font-size: 0.92rem; }
.tcard .role { font-size: 0.78rem; color: var(--muted); }

.team-card { text-align: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--card-shadow); }
.team-card .photo { width: 88px; height: 88px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; margin: 0 auto 14px; overflow: hidden; }
.team-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card .name { font-weight: 700; }
.team-card .role { color: var(--orange-dark); font-size: 0.82rem; font-weight: 600; margin-bottom: 8px; }
.team-card .bio { color: var(--muted); font-size: 0.84rem; }

/* ── FAQ accordion ── */
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.faq-q {
    width: 100%; text-align: left; background: var(--white); border: none; padding: 16px 20px;
    font-weight: 600; font-size: 0.94rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    font-family: inherit; color: var(--dark-text);
}
.faq-q .chev { transition: transform .2s; color: var(--muted); }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; background: var(--light-bg); }
.faq-item.open .faq-a { max-height: 400px; }
.faq-a-inner { padding: 16px 20px; color: var(--muted); font-size: 0.9rem; }

/* ── Footer ── */
.site-footer { background: var(--navy-dark); color: rgba(255,255,255,0.7); padding: 56px 0 0; }
.footer-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.site-footer h5 { color: var(--white); font-size: 0.92rem; margin-bottom: 14px; }
.site-footer a { color: rgba(255,255,255,0.65); font-size: 0.86rem; display: block; margin-bottom: 8px; transition: color 0.15s, transform 0.15s; }
.site-footer a:hover { color: var(--orange); transform: translateX(2px); }
.site-footer .brand { font-family: var(--font-display); font-weight: 800; color: var(--white); font-size: 1.15rem; margin-bottom: 10px; }
.site-footer .newsletter-form { margin-top: 10px; }
.site-footer .newsletter-form-row { display: flex; gap: 8px; }
.site-footer .newsletter-form input { flex: 1; padding: 9px 12px; border-radius: 7px; border: none; font-size: 0.85rem; }
.site-footer .g-recaptcha { transform: scale(0.87); transform-origin: left top; }
.footer-socials { display: flex; gap: 10px; margin-top: 18px; }
.footer-socials a {
    width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center; margin-bottom: 0;
    color: rgba(255,255,255,0.75); font-size: 0.92rem; transition: background 0.2s, color 0.2s, transform 0.2s;
}
.footer-socials a:hover { background: var(--orange); color: var(--navy-dark); transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 18px 0; text-align: center; font-size: 0.8rem; margin-top: 24px; }
.footer-bottom a { display: inline; margin: 0 8px; }

/* ── Mobile nav toggle + right-side slide-in drawer ── */
.site-nav-toggle {
    display: none; width: 40px; height: 40px; border-radius: 8px; border: 1.5px solid transparent;
    background: transparent; color: var(--navy); font-size: 1.2rem; cursor: pointer;
    align-items: center; justify-content: center; flex-shrink: 0; z-index: 151;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.site-nav.nav-open .site-nav-toggle { border-color: var(--orange); color: var(--orange-dark); background: rgba(255,165,0,0.1); }
.site-nav-links a { position: relative; padding: 4px 0; }
.site-nav-links a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
    background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.2s;
}
.site-nav-links a:hover::after, .site-nav-links a.active::after { transform: scaleX(1); }
.site-nav-cta-drawer { display: none; }

.site-nav-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,32,0.45); z-index: 140;
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}

@media (max-width: 900px) {
    .site-nav-toggle { display: flex; }
    /* header must out-rank the backdrop (a sibling, z-index:140) or the toggle
       button and drawer — both header descendants — would render beneath it */
    .site-nav.nav-open { z-index: 160; }
    .site-nav-links {
        position: fixed; top: 0; right: 0; bottom: 0; left: auto;
        width: min(300px, 82vw);
        background: var(--white); flex-direction: column; align-items: stretch; gap: 0;
        padding: 84px 28px 24px; margin: 0; overflow-y: auto;
        box-shadow: -12px 0 40px rgba(0,0,32,0.18);
        transform: translateX(100%); opacity: 1; pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
        display: flex; z-index: 150;
    }
    .site-nav.nav-open .site-nav-links { transform: translateX(0); pointer-events: all; }
    .site-nav.nav-open ~ .site-nav-backdrop { opacity: 1; pointer-events: all; }
    .site-nav-links a {
        padding: 14px 4px; border-bottom: 1px solid var(--border); font-size: 1rem;
    }
    .site-nav-links a::after { display: none; }
    .site-nav-links a.active { color: var(--navy); font-weight: 700; }
    .site-nav-cta-drawer {
        display: inline-flex; justify-content: center; align-self: center;
        margin-top: 24px; border-bottom: none !important; padding: 12px 24px !important;
    }
}
@media (min-width: 900.02px) {
    .site-nav-links { display: flex !important; position: static; transform: none; opacity: 1; pointer-events: all; padding: 0; box-shadow: none; }
    .site-nav-backdrop { display: none; }
}
/* Small laptops: keep every link on one row (the menu wraps otherwise). */
@media (min-width: 900.02px) and (max-width: 1240px) {
    .site-nav-inner { gap: 16px; }
    .site-nav-links { gap: 13px; margin-left: 4px; flex-wrap: nowrap; }
    .site-nav-links a { font-size: 0.82rem; white-space: nowrap; }
    .site-nav-cta { margin-left: 4px; padding: 8px 14px; }
}

/* ── Navbar scroll behavior — driven by public/js/site.js.
   Deliberately shadow-only: .site-nav is `position: sticky`, not `fixed`, so any rule here
   that changes its layout height (a shrink, a hide-via-transform on a still-in-flow element,
   etc.) shifts the content below it, which changes window.scrollY, which re-fires the scroll
   handler that set the class in the first place — a feedback loop that shows up as visible
   jitter/"vibration" while scrolling, especially under mobile's continuous momentum-scroll
   events. A previous version shrank the nav's height and hid it via transform on scroll-down;
   both were removed for exactly this reason — keep any future scroll-driven nav effect to
   properties that don't affect layout (box-shadow, color, opacity on an already-fixed element). */
.site-nav { transition: box-shadow 0.3s cubic-bezier(0.4,0,0.2,1); }
.site-nav.scrolled { box-shadow: 0 4px 20px rgba(0,0,128,0.1); }

/* ── Page loading overlay (mirrors the admin #page-overlay pattern) ── */
#page-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,128,0.7); backdrop-filter: blur(3px);
    z-index: 99999; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
#page-overlay.active { opacity: 1; pointer-events: all; }
#page-overlay .overlay-spinner {
    width: 56px; height: 56px; border: 4px solid rgba(255,255,255,0.2);
    border-top-color: var(--orange); border-radius: 50%; animation: p-spin 0.75s linear infinite;
}
@keyframes p-spin { to { transform: rotate(360deg); } }

/* ── Back to top ── */
#backToTop {
    position: fixed; bottom: 28px; right: 28px; width: 46px; height: 46px; border-radius: 50%;
    background: var(--navy); color: var(--white); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
    box-shadow: 0 6px 20px rgba(0,0,128,0.3); opacity: 0; pointer-events: none;
    transition: opacity 0.25s, transform 0.2s; z-index: 900;
}
#backToTop.visible { opacity: 1; pointer-events: all; }
#backToTop:hover { transform: translateY(-3px); background: var(--navy-dark); }

/* ── Hero (homepage) ── */
.hero-section {
    position: relative; overflow: hidden; padding: 100px 0 60px;
    background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 50%, #001a6e 100%);
}
.hero-section::after {
    content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 60px;
    background: var(--white); clip-path: ellipse(55% 100% at 50% 100%);
}
/* Ambient drifting gradient orbs + faint dot-grid texture behind the hero content */
.hero-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-orbs .orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.4; animation: orb-drift ease-in-out infinite; }
.hero-orbs .orb-1 { width: 340px; height: 340px; background: radial-gradient(circle, var(--orange) 0%, transparent 70%); top: -100px; left: 6%; animation-duration: 16s; }
.hero-orbs .orb-2 { width: 280px; height: 280px; background: radial-gradient(circle, #4f6bff 0%, transparent 70%); bottom: -80px; right: 8%; animation-duration: 20s; animation-delay: -6s; }
.hero-orbs .orb-3 { width: 200px; height: 200px; background: radial-gradient(circle, var(--orange-light) 0%, transparent 70%); top: 38%; left: 46%; animation-duration: 18s; animation-delay: -3s; opacity: 0.25; }
@keyframes orb-drift { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-24px) scale(1.12); } 66% { transform: translate(-24px,18px) scale(0.94); } }
.hero-dotgrid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 25%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 75% 55% at 50% 25%, #000 40%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) { .hero-orbs .orb { animation: none; } }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 1; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px; background: rgba(255,165,0,0.15);
    border: 1px solid rgba(255,165,0,0.4); color: var(--orange-light); padding: 6px 16px;
    border-radius: 50px; text-transform: uppercase; letter-spacing: 1px; font-size: 0.74rem; font-weight: 700;
}
.hero-badge .dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; animation: p-pulse 1.5s ease-in-out infinite; }
@keyframes p-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.4); } }
.hero-title { color: var(--white); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; line-height: 1.12; margin: 16px 0; }
.hero-title .highlight {
    background: linear-gradient(90deg, var(--orange) 0%, #ffd580 45%, var(--orange) 100%);
    background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--orange); animation: shimmer-text 4s linear infinite;
}
@keyframes shimmer-text { to { background-position: -220% center; } }
.hero-desc { color: rgba(255,255,255,0.75); font-size: 1.05rem; max-width: 520px; margin-bottom: 28px; }
.hero-stats { display: flex; gap: 32px; margin-top: 36px; flex-wrap: wrap; }
.hero-stat .num { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--orange); line-height: 1; }
.hero-stat .label { color: rgba(255,255,255,0.6); font-size: 0.78rem; margin-top: 4px; }

/* Fake code-editor window graphic */
.hero-visual { position: relative; }
.hero-visual::before {
    content: ''; position: absolute; inset: 22px; z-index: -1; border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,165,0,0.55), rgba(90,120,255,0.4));
    filter: blur(34px); opacity: 0.55; animation: glow-pulse 4s ease-in-out infinite;
}
@keyframes glow-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.65; } }
.hero-code-window {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
    backdrop-filter: blur(12px); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.4); position: relative;
}
.code-titlebar { background: rgba(255,255,255,0.06); padding: 12px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.code-dot { width: 10px; height: 10px; border-radius: 50%; }
.code-dot.red { background: #ff5f57; } .code-dot.yellow { background: #ffbd2e; } .code-dot.green { background: #28c840; }
.code-titlebar .fname { margin-left: 10px; color: rgba(255,255,255,0.4); font-size: 0.76rem; font-family: monospace; }
.code-live-badge { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 0.66rem; color: #4ade80; font-family: var(--font-main); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.code-live-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: p-pulse 1.5s ease-in-out infinite; }
.code-body { padding: 20px 24px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.8rem; line-height: 2; white-space: pre; overflow-x: auto; }
.code-body .kw { color: #7dd3fc; } .code-body .fn { color: #86efac; } .code-body .str { color: var(--orange); } .code-body .cm { color: rgba(255,255,255,0.3); } .code-body .pu { color: rgba(255,255,255,0.7); }
.code-cursor { display: inline-block; width: 7px; height: 15px; background: var(--orange); vertical-align: middle; margin-left: 2px; animation: cursor-blink 1s step-end infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
.floating-card {
    position: absolute; background: var(--white); border-radius: 12px; padding: 12px 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 10px;
    animation: p-float 3s ease-in-out infinite; font-size: 0.82rem;
}
.floating-card .icon-wrap { width: 32px; height: 32px; border-radius: 8px; background: var(--navy); color: var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.floating-card .title { font-weight: 700; color: var(--dark-text); }
.floating-card .sub { color: var(--muted); font-size: 0.76rem; }
.floating-card.card-1 { bottom: -18px; left: -20px; animation-delay: 0s; }
.floating-card.card-2 { top: 20px; right: -20px; animation-delay: 1.5s; }
.floating-card.card-3 { top: 132px; right: -26px; animation-delay: 0.8s; }
@keyframes p-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 991.98px) { .floating-card { display: none; } }

/* Admin-uploaded hero image slider — fills the entire hero section as a full-bleed
   background when at least one active slide exists (views/admin/hero-slides), with the
   headline/CTA content laid over a dark scrim on top. Falls back to the code-window
   mockup (untouched, above) when no slides are configured. Each slide can carry a
   different entrance animation (see the five keyframe sets below) so a multi-slide
   set doesn't repeat the same effect on every transition. */
.hero-section.has-hero-slider { padding-top: 160px; padding-bottom: 60px; }
@media (max-width: 900px) { .hero-section.has-hero-slider { padding-top: 130px; padding-bottom: 50px; } }
.hero-section.has-hero-slider .container { position: relative; z-index: 2; }
.hero-section.has-hero-slider .hero-grid { grid-template-columns: 1fr; }
/* A fixed banner height, not inset:0 — the section's full auto height also includes the
   tech-strip logo row further down, and stretching the photo/scrim/caption to match THAT
   would push the caption down into the tech-strip instead of sitting inside the banner. */
.hero-slider.hero-slider-bg, .hero-slider-scrim { position: absolute; top: 0; left: 0; right: 0; height: 740px; }
.hero-slider.hero-slider-bg { z-index: 0; overflow: hidden; }
.hero-slider-scrim {
    z-index: 1;
    background: linear-gradient(100deg, rgba(0,0,30,0.96) 0%, rgba(0,0,60,0.9) 32%, rgba(0,0,70,0.62) 55%, rgba(0,0,70,0.3) 100%),
                linear-gradient(0deg, rgba(0,0,30,0.65) 0%, transparent 40%);
}
@media (max-width: 900px) {
    .hero-slider.hero-slider-bg, .hero-slider-scrim { height: 620px; }
}
.hero-slide {
    position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
}
.hero-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* These run for the slider's full ~5.5s display window (matching site.js's autoplay
   interval), not just a quick entrance flourish — a brief 1s animation followed by 4+
   static seconds reads as "not moving" to anyone glancing at the page mid-cycle. */
.hero-slide.active[data-animation="fade"] img { animation: heroFade 1.2s ease both; }
.hero-slide.active[data-animation="slide-left"] img { animation: heroSlideLeft 5.5s ease-in-out both; }
.hero-slide.active[data-animation="slide-right"] img { animation: heroSlideRight 5.5s ease-in-out both; }
.hero-slide.active[data-animation="zoom"] img { animation: heroZoom 5.5s ease-in-out both; }
.hero-slide.active[data-animation="slide-up"] img { animation: heroSlideUp 5.5s ease-in-out both; }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroSlideLeft { from { transform: translateX(3%) scale(1.08); } to { transform: translateX(-3%) scale(1.08); } }
@keyframes heroSlideRight { from { transform: translateX(-3%) scale(1.08); } to { transform: translateX(3%) scale(1.08); } }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.15); } }
@keyframes heroSlideUp { from { transform: translateY(3%) scale(1.08); } to { transform: translateY(-2%) scale(1.08); } }
/* Anchored to the right third only — the left ~55% is permanently occupied by the
   hero's own headline/stats column (rendered in the same .hero-slider-bg-covered
   section), so a full-width caption band would collide with it. */
.hero-slide-overlay {
    /* Right padding clears the fixed WhatsApp/chat launcher buttons (right:28px, 56px wide,
       see .whatsapp-float/.chat-launcher) so the slide's own button never sits under them. */
    position: absolute; right: 0; bottom: 0; left: 58%; padding: 28px 120px 56px 4%;
    background: linear-gradient(0deg, rgba(0,0,20,0.85) 0%, rgba(0,0,20,0.55) 55%, transparent 100%);
    border-radius: 18px 0 0 0;
    color: #fff; z-index: 2; text-align: right;
}
.hero-slide-overlay h3 {
    font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 900;
    line-height: 1.2; margin: 0 0 10px;
    text-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.95);
}
.hero-slide-overlay p {
    font-size: clamp(0.92rem, 1.3vw, 1.08rem); font-weight: 500; color: rgba(255,255,255,0.94);
    margin: 0 0 18px; text-shadow: 0 3px 14px rgba(0,0,0,0.75);
}
.hero-slide-overlay .pbtn { font-size: 0.9rem; padding: 12px 26px; }
@media (max-width: 900px) {
    /* The headline column goes full-width and stacks tall here — a bottom caption band
       would run into it regardless of alignment, so it's dropped rather than cramped in.
       The core message (headline, stats, CTA) is already carried by the column itself. */
    .hero-slide-overlay { display: none; }
}
.hero-slide.active .hero-slide-overlay > * { animation: heroOverlayIn 0.8s cubic-bezier(.22,.85,.4,1) both; }
.hero-slide.active .hero-slide-overlay > *:nth-child(1) { animation-delay: 0.1s; }
.hero-slide.active .hero-slide-overlay > *:nth-child(2) { animation-delay: 0.22s; }
.hero-slide.active .hero-slide-overlay > *:nth-child(3) { animation-delay: 0.34s; }
@keyframes heroOverlayIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.hero-slider-dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; gap: 7px; }
.hero-slider-dot {
    width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,0.4);
    cursor: pointer; padding: 0; transition: var(--transition);
}
.hero-slider-dot.active { background: var(--orange); width: 22px; border-radius: 4px; }
.hero-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px;
    border-radius: 50%; border: none; background: rgba(0,0,20,0.45); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: var(--transition); opacity: 0;
}
.hero-slider:hover .hero-slider-arrow { opacity: 1; }
.hero-slider-arrow:hover { background: var(--orange); }
.hero-slider-arrow.prev { left: 18px; } .hero-slider-arrow.next { right: 18px; }
@media (max-width: 991.98px) { .hero-slider-arrow { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .hero-slide.active img { animation: none !important; }
    .hero-slide.active .hero-slide-overlay > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Tech logo strip */
.tech-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; opacity: 0.7; padding: 28px 0; }
.tech-strip .tech-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.7); font-size: 0.88rem; font-weight: 500; }
.tech-strip .tech-item i { font-size: 1.3rem; }

/* Hero scroll-down cue */
.hero-scroll-cue {
    display: flex; flex-direction: column; align-items: center; gap: 6px; width: fit-content; margin: 44px auto 0;
    color: rgba(255,255,255,0.45); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1px;
    position: relative; z-index: 1; animation: scroll-cue-bob 2s ease-in-out infinite;
}
.hero-scroll-cue i { font-size: 0.9rem; }
@keyframes scroll-cue-bob { 0%, 100% { transform: translateY(0); opacity: 0.45; } 50% { transform: translateY(6px); opacity: 0.85; } }
@media (max-width: 900px) { .hero-scroll-cue { display: none; } }

/* Service cards (top gradient reveal bar + icon rotate) */
.service-card { position: relative; overflow: hidden; }
.service-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--navy), var(--orange)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s;
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { border-color: transparent; }
.service-icon {
    width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(0,0,128,0.08), rgba(255,165,0,0.08)); color: var(--navy);
    font-size: 1.4rem; margin-bottom: 14px; transition: all 0.3s;
}
.service-card:hover .service-icon { background: linear-gradient(135deg, var(--navy), var(--navy-light)); color: var(--orange); transform: rotate(-6deg) scale(1.08); }

/* Corner badges (SALE / FEATURED) on product/script cards */
.pcard { position: relative; }
.pcard-badge {
    position: absolute; top: 12px; right: 12px; z-index: 2; padding: 4px 11px; border-radius: 50px;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
}
.pcard-badge.sale { background: var(--orange); color: var(--navy); }
.pcard-badge.featured { background: var(--navy); color: var(--white); }

/* "Trusted by numbers" navy section */
.why-section { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy-dark), var(--navy)); }
.why-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: 36px; } }
.why-section::before {
    content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,165,0,0.1) 0%, transparent 70%); top: -100px; right: -100px; pointer-events: none;
}
.why-item { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; position: relative; z-index: 1; }
.why-item .icon-box { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,165,0,0.12); color: var(--orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.2rem; }
.why-item .num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--orange); }
.why-item .label { color: var(--white); font-weight: 700; margin: 2px 0; }
.why-item .desc { color: rgba(255,255,255,0.6); font-size: 0.86rem; }
.glass-box {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius);
    padding: 18px; text-align: center; position: relative; z-index: 1;
}
.glass-box .num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--orange); }
.glass-box .label { color: rgba(255,255,255,0.75); font-size: 0.8rem; margin-top: 4px; }

/* "Free Consultation" CTA card + feature-badge grid inside the why-section */
.why-cta-card {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
    padding: 40px 32px; text-align: center; margin-bottom: 20px; position: relative; z-index: 1;
}
.why-cta-card .amount { color: var(--orange); font-size: 3rem; font-weight: 900; font-family: var(--font-display); line-height: 1; }
.why-cta-card .title { color: #fff; font-size: 1.1rem; font-weight: 700; margin: 10px 0 8px; }
.why-cta-card .desc { color: rgba(255,255,255,0.6); font-size: 0.88rem; margin-bottom: 22px; }
.why-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; z-index: 1; }
.why-feature-card { background: rgba(255,255,255,0.05); border-radius: 14px; padding: 20px; text-align: center; }
.why-feature-card i { color: var(--orange); font-size: 1.4rem; margin-bottom: 8px; display: block; }
.why-feature-card .title { color: #fff; font-weight: 700; font-size: 0.85rem; margin-bottom: 3px; }
.why-feature-card .sub { color: rgba(255,255,255,0.4); font-size: 0.72rem; }

/* Partner logo carousel — infinite CSS marquee, no JS library needed. The list is
   rendered twice in the markup (see home.php) so translating exactly -50% loops seamlessly. */
.partners-section { padding-bottom: 24px; }
.partners-carousel {
    overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: partners-scroll 28s linear infinite; }
.partners-carousel.paused .partners-track { animation-play-state: paused; }
.partner-logo { flex-shrink: 0; height: 56px; display: flex; align-items: center; }
.partner-logo img { max-height: 100%; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: filter 0.25s, opacity 0.25s; }
.partner-logo:hover img { filter: grayscale(0); opacity: 1; }
@keyframes partners-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .partners-track { animation: none; } }

/* Process steps — circular numbered badge */
.process-step { text-align: center; }
.process-step .step-num {
    width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), var(--navy-light)); color: var(--orange);
    display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
    font-size: 1.4rem; font-weight: 900; box-shadow: 0 4px 20px rgba(0,0,128,0.25);
}
.process-step .title { font-weight: 700; margin-bottom: 6px; }
.process-step .desc { color: var(--muted); font-size: 0.86rem; }

/* Testimonial card — giant background quote mark */
.tcard { position: relative; overflow: hidden; }
.tcard::before {
    content: '\201C'; position: absolute; top: 8px; right: 20px; font-size: 6rem; line-height: 1;
    color: rgba(0,0,128,0.06); font-family: Georgia, serif; pointer-events: none;
}

/* Team card — photo darken + zoom on hover */
.team-card .photo { position: relative; }
.team-card .photo img { transition: transform 0.35s; }
.team-card:hover .photo img { transform: scale(1.1); }

/* Portfolio card — slide-up overlay on hover */
.portfolio-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.portfolio-card .pcard-thumb { position: relative; }
.portfolio-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px;
    background: linear-gradient(0deg, rgba(0,0,128,0.92) 0%, transparent 65%); opacity: 0; transition: opacity 0.3s;
}
.portfolio-card:hover .portfolio-overlay { opacity: 1; }
.portfolio-overlay .title { color: var(--white); font-weight: 700; }
.portfolio-overlay .cat { color: var(--orange-light); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── FAQ (exact accordion: left accent bar grows in on open, not just chevron) ── */
.faq-item { position: relative; }
.faq-q { position: relative; padding-left: 24px; }
.faq-q::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 0; background: var(--orange); border-radius: 0 4px 4px 0; transition: height 0.3s;
}
.faq-item.open .faq-q::before { height: 60%; }
.faq-search {
    background: var(--white); border-radius: 50px; padding: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    display: flex; align-items: center; gap: 8px; max-width: 480px; margin: 0 auto;
}
.faq-search input { flex: 1; border: none; outline: none; padding: 10px 16px; font-size: 0.9rem; font-family: var(--font-main); border-radius: 50px; }
.faq-search button { background: var(--orange); color: var(--navy); border: none; padding: 10px 20px; border-radius: 50px; font-weight: 700; cursor: pointer; }
.cat-chip {
    position: relative; overflow: hidden; background: var(--white); border: 1.5px solid var(--border); color: var(--dark-text);
    padding: 8px 16px; border-radius: 50px; font-size: 0.84rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.cat-chip .count { background: rgba(0,0,128,0.08); color: var(--navy); font-size: 0.7rem; font-weight: 800; padding: 1px 7px; border-radius: 50px; }
.cat-chip.active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.cat-chip.active .count { background: rgba(255,255,255,0.2); color: var(--white); }

/* ── Footer additions ── */
.footer-heading { position: relative; padding-bottom: 8px; }
.footer-heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: var(--orange); }
.visitor-strip {
    text-align: center; padding: 12px 20px; background: linear-gradient(135deg, var(--navy), var(--navy-dark));
    border-top: 2px solid var(--orange); font-size: 0.8rem; letter-spacing: 0.4px; color: rgba(255,255,255,0.75);
}
.visitor-strip strong { color: var(--orange-light); }

/* ── Floating action stack (WhatsApp / Chat / Back-to-top, bottom-right) ── */
.whatsapp-float {
    position: fixed; bottom: 158px; right: 28px; width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    box-shadow: 0 6px 24px rgba(37,211,102,0.45); z-index: 901; transition: transform 0.2s, opacity 0.2s;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }
.whatsapp-float.hidden-behind-chat { opacity: 0; pointer-events: none; transform: scale(0.8); }

/* ── Chat widget ── */
.chat-launcher {
    position: fixed; bottom: 88px; right: 28px; width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), var(--navy-light)); color: var(--orange); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    box-shadow: 0 6px 24px rgba(0,0,128,0.35); z-index: 901; transition: transform 0.2s;
}
.chat-launcher:hover { transform: scale(1.08); }
.chat-launcher .launcher-badge {
    position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; background: var(--orange);
    border-radius: 50%; border: 2px solid var(--white); animation: p-pulse 1.5s infinite;
}
.chat-window {
    position: fixed; bottom: 154px; right: 28px; width: 340px; max-width: calc(100vw - 40px); height: 460px;
    max-height: calc(100vh - 140px); background: var(--white); border-radius: 18px; box-shadow: 0 12px 48px rgba(0,0,128,0.25);
    display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(16px) scale(0.97);
    pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 900;
}
.chat-window.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.chat-header { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); color: var(--white); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; }
.chat-header .title { font-weight: 700; font-size: 0.9rem; }
.chat-header .sub { font-size: 0.72rem; color: rgba(255,255,255,0.6); }
.chat-header button { background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 1rem; }
.chat-header-actions { display: flex; align-items: center; gap: 8px; }
.chat-header .chat-clear { font-size: 0.72rem; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 5px; }
.chat-header .chat-clear:hover { background: rgba(255,255,255,0.12); }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--light-bg); }
.chat-msg { max-width: 82%; padding: 9px 13px; border-radius: 12px; font-size: 0.84rem; line-height: 1.5; animation: chat-in 0.25s ease; white-space: pre-line; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 90%; animation: chat-in 0.25s ease; }
.chat-suggestion-chip {
    background: var(--white); border: 1.5px solid var(--navy); color: var(--navy);
    border-radius: 50px; padding: 6px 13px; font-size: 0.78rem; font-weight: 600;
    font-family: var(--font-main); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.chat-suggestion-chip:hover { background: var(--navy); color: var(--white); }
@keyframes chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.chat-msg.bot { background: var(--white); border: 1px solid var(--border); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg.user { background: linear-gradient(135deg, var(--navy), var(--navy-light)); color: var(--white); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-typing { display: flex; gap: 4px; align-self: flex-start; padding: 10px 13px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; border-bottom-left-radius: 4px; }
.chat-typing span { width: 6px; height: 6px; background: var(--muted); border-radius: 50%; animation: chat-bounce 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; } .chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--white); }
.chat-input-row input { flex: 1; border: 1.5px solid var(--border); border-radius: 50px; padding: 9px 14px; font-size: 0.84rem; font-family: var(--font-main); outline: none; }
.chat-input-row input:focus { border-color: var(--navy); }
.chat-input-row button { width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: var(--navy); border: none; cursor: pointer; flex-shrink: 0; }
@media (max-width: 480px) {
    .chat-window { right: 0; bottom: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    #backToTop { right: 20px; bottom: 20px; }
    .chat-launcher { right: 20px; bottom: 78px; }
    .whatsapp-float { right: 20px; bottom: 146px; }
}

/* AOS fallback: if the CDN script never loads, force-reveal so content isn't stuck invisible */
.aos-init-fallback [data-aos] { opacity: 1 !important; transform: none !important; }

/* ── Data tables (services, scripts) — Bootstrap-table-compatible skin ── */
.data-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--card-shadow); border: 1px solid var(--border); }
.data-table-wrap::-webkit-scrollbar { height: 6px; }
.data-table-wrap::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 3px; }
table.p-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: 0.88rem; }
table.p-table thead th {
    background: var(--navy); color: var(--white); text-align: left; padding: 14px 16px;
    font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; white-space: nowrap;
}
table.p-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.p-table tbody tr:hover td { background: rgba(0,0,128,0.03); }
table.p-table tbody tr:last-child td { border-bottom: none; }
.p-table-name { font-weight: 700; color: var(--dark-text); display: flex; align-items: center; gap: 10px; }
.p-table-name .ic { width: 34px; height: 34px; border-radius: 8px; background: rgba(0,0,128,0.08); color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.p-pill { display: inline-block; background: rgba(0,0,128,0.06); color: var(--navy); font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; }

/* Dev-zone warning banner (scripts page) */
/* ── Rich content (Quill-authored post/product HTML) ── */
.rich-content h2 { font-size: 1.3rem; font-weight: 700; margin: 28px 0 12px; color: var(--dark-text); }
.rich-content h3 { font-size: 1.1rem; font-weight: 700; margin: 22px 0 10px; color: var(--dark-text); }
.rich-content h2:first-child, .rich-content h3:first-child { margin-top: 0; }
.rich-content p { margin: 0 0 14px; }
.rich-content ul, .rich-content ol { margin: 0 0 14px; padding-left: 22px; }
.rich-content li { margin-bottom: 6px; }
.rich-content a { color: var(--navy); text-decoration: underline; }
.rich-content blockquote {
    margin: 0 0 14px; padding: 12px 20px; border-left: 3px solid var(--orange);
    background: var(--light-bg); color: var(--muted); font-style: italic;
}
.rich-content strong { font-weight: 700; }

/* ── Public invoice page: pay-online buttons + bank transfer box ── */
.invoice-pay-box {
    padding: 24px 28px; margin-bottom: 20px;
    background: linear-gradient(135deg, var(--navy-dark), var(--navy)); border: none;
}
.invoice-pay-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 4px; }
.invoice-pay-label { color: rgba(255,255,255,0.65); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.invoice-pay-amount { color: #fff; font-size: 1.7rem; font-weight: 800; }
.invoice-pay-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.invoice-pay-btn {
    flex: 1 1 200px; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 18px; border-radius: 10px; border: none; cursor: pointer;
    font-weight: 700; font-size: 0.92rem; text-decoration: none; transition: var(--transition);
}
.invoice-pay-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.invoice-pay-btn.is-loading { opacity: 0.75; }
.invoice-pay-btn.gateway-paystack { background: #00C3F7; color: #001a2e; }
.invoice-pay-btn.gateway-paystack:hover { background: #33d0f9; }
.invoice-pay-btn.gateway-flutterwave { background: #F5A623; color: #2a1900; }
.invoice-pay-btn.gateway-flutterwave:hover { background: #f7b64d; }
.invoice-pay-btn.gateway-link { background: rgba(255,255,255,0.14); color: #fff; border: 1.5px solid rgba(255,255,255,0.3); }
.invoice-pay-btn.gateway-link:hover { background: rgba(255,255,255,0.22); }

.invoice-bank-box { padding: 22px 28px; margin-bottom: 20px; border: 1.5px solid var(--orange); background: #fff9f0; }
.invoice-bank-box h5 { font-weight: 700; font-size: 0.98rem; margin-bottom: 14px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.bank-detail-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 0.88rem;
}
.bank-detail-row span { color: var(--muted); }
.bank-copy-btn {
    border: none; background: var(--navy-light); color: var(--navy); width: 26px; height: 26px;
    border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; flex-shrink: 0;
}
.bank-copy-btn:hover { background: var(--navy); color: #fff; }
.bank-additional-info { margin-top: 10px; font-size: 0.82rem; color: var(--muted); white-space: pre-line; }
.bank-reference-note { margin-top: 12px; font-size: 0.8rem; color: var(--muted); }

.dev-zone-banner {
    background: linear-gradient(135deg, #0d0d2b, #1a1a3e); border-left: 4px solid var(--orange);
    border-radius: var(--radius); padding: 18px 22px; color: rgba(255,255,255,0.85); margin-bottom: 28px;
    display: flex; align-items: flex-start; gap: 14px; font-size: 0.88rem;
}
.dev-zone-banner i { color: var(--orange); font-size: 1.2rem; margin-top: 2px; }
.dev-zone-banner code { background: rgba(255,165,0,0.15); color: var(--orange-light); padding: 2px 6px; border-radius: 4px; }

/* Service modal header (Bootstrap modal, navy-gradient) */
.modal-header-navy { background: linear-gradient(135deg, var(--navy), var(--navy-light)); color: var(--white); border: none; }
.modal-header-navy .btn-close { filter: invert(1); }

/* Solutions — distinct teal hero */
.solutions-hero { background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); padding: 100px 0 64px; text-align: center; }
.installation-guide { background: linear-gradient(135deg, #11998e, #38ef7d); border-radius: var(--radius); padding: 24px; color: #fff; }
.installation-guide ol { margin: 0; padding-left: 20px; }
.installation-guide li { margin-bottom: 10px; }
.guarantee-badge {
    background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 8px;
    padding: 12px 16px; display: flex; align-items: center; gap: 10px; color: #065f46; font-weight: 600; font-size: 0.88rem;
}
.gold-badge { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #4a3800; }

/* Product-detail tabs (Bootstrap nav-tabs skin) */
.p-tabs .nav-link { color: var(--muted); font-weight: 600; border: none; border-bottom: 3px solid transparent; padding: 12px 18px; }
.p-tabs .nav-link.active { color: var(--navy); border-bottom-color: var(--orange); background: none; }

/* Review stars + rating bars */
.rating-star-picker { display: flex; gap: 6px; font-size: 1.6rem; }
.rating-star-picker i { color: #ddd; cursor: pointer; transition: color 0.15s; }
.rating-star-picker i.active { color: var(--orange); }
.rating-bar-row { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; margin-bottom: 6px; }
.rating-bar-row .stars-label { width: 40px; flex-shrink: 0; color: var(--muted); }
.rating-bar-track { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.rating-bar-fill { height: 100%; background: var(--orange); }
.rating-bar-row .pct { width: 34px; text-align: right; color: var(--muted); flex-shrink: 0; }
.review-item { background: var(--light-bg); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.review-item .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.86rem; }

/* ── Policy pages (Privacy / Terms) ── */
.policy-updated {
    display: inline-flex; align-items: center; gap: 8px; background: var(--light-bg);
    border: 1px solid var(--border); border-radius: 50px; padding: 7px 16px;
    font-size: 0.8rem; color: var(--muted); margin-bottom: 28px;
}
.policy-updated i { color: var(--orange-dark); }
.policy-content h2 {
    font-size: 1.2rem; font-weight: 700; color: var(--dark-text); margin: 34px 0 12px;
    padding-left: 14px; border-left: 3px solid var(--orange);
}
.policy-content h2:first-child { margin-top: 0; }
.policy-content p { color: var(--muted); margin: 0 0 14px; }
.policy-content ul { color: var(--muted); margin: 0 0 14px; padding-left: 22px; }
.policy-content li { margin-bottom: 6px; }
.policy-cta {
    margin-top: 40px; padding: 24px 28px; background: var(--light-bg); border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.policy-cta p { margin: 0; color: var(--dark-text); font-weight: 600; font-size: 0.94rem; }

/* ── Let's Talk page — info sidebar ── */
.talk-info-card {
    background: linear-gradient(135deg, var(--navy-dark), var(--navy)); border-radius: var(--radius-lg);
    padding: 28px 26px; color: #fff;
}
.talk-info-card h3 { color: #fff; font-size: 1.05rem; margin: 0 0 18px; }
.talk-step { display: flex; gap: 14px; margin-bottom: 18px; }
.talk-step:last-child { margin-bottom: 0; }
.talk-step .n {
    width: 30px; height: 30px; border-radius: 50%; background: rgba(255,165,0,0.15); color: var(--orange);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.84rem; flex-shrink: 0;
}
.talk-step .t { font-weight: 700; font-size: 0.9rem; color: #fff; margin-bottom: 2px; }
.talk-step .d { font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.talk-contact-card {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 22px 24px; margin-top: 20px; box-shadow: var(--card-shadow);
}
.talk-contact-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.talk-contact-row:last-child { margin-bottom: 0; }
.talk-contact-row .ic {
    width: 38px; height: 38px; border-radius: 10px; background: rgba(0,0,128,0.06); color: var(--navy);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.talk-contact-row .label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.talk-contact-row .value { font-weight: 700; font-size: 0.88rem; color: var(--dark-text); }
.talk-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 860px) { .talk-layout { grid-template-columns: 1fr; } }

/* ── Contact page ── */
.map-embed {
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--card-shadow);
    border: 1px solid var(--border); margin-top: 40px;
}
.map-embed iframe { display: block; width: 100%; height: 340px; border: 0; }
.contact-hours-row { display: flex; justify-content: space-between; font-size: 0.84rem; padding: 8px 0; border-bottom: 1px solid var(--border); }
.contact-hours-row:last-child { border-bottom: none; }
.contact-hours-row .day { color: var(--dark-text); font-weight: 600; }
.contact-hours-row .time { color: var(--muted); }

/* ── Blog layout: two-column with category sidebar (index + show) ── */
.blog-layout, .blog-detail-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
@media (max-width: 900px) { .blog-layout, .blog-detail-layout { grid-template-columns: 1fr; } }
.blog-aside { position: sticky; top: 100px; }
@media (max-width: 900px) { .blog-aside { position: static; } }
.aside-widget {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 22px; box-shadow: var(--card-shadow);
}
.aside-widget-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.95rem; font-weight: 800; color: var(--dark-text); margin: 0 0 14px;
}
.aside-widget-title i { color: var(--navy); }
.aside-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.aside-cat-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 10px; border-radius: 8px; font-size: 0.87rem; color: var(--dark-text);
    text-decoration: none; transition: background 0.2s ease, color 0.2s ease;
}
.aside-cat-list a:hover { background: var(--light-bg); color: var(--navy); }
.aside-cat-list a.active { background: var(--navy); color: var(--white); font-weight: 700; }
.aside-cat-list a.active .aside-cat-count { background: rgba(255,255,255,0.25); color: var(--white); }
.aside-cat-count {
    font-size: 0.72rem; font-weight: 700; color: var(--muted); background: var(--light-bg);
    padding: 1px 8px; border-radius: 50px; min-width: 22px; text-align: center;
}

/* ── Blog post comments (views/public/blog/show.php) ── */
.comments-section { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--border); }
.comments-heading {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.1rem; font-weight: 800; color: var(--dark-text); margin-bottom: 22px;
}
.comments-heading i { color: var(--navy); }
.comment-count-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 7px; border-radius: 50px;
    background: var(--navy); color: var(--white); font-size: 0.76rem; font-weight: 700;
}
.comments-empty {
    text-align: center; padding: 36px 20px; color: var(--muted);
    background: var(--light-bg); border-radius: var(--radius); margin-bottom: 8px;
}
.comments-empty i { font-size: 1.8rem; color: var(--navy-light); opacity: 0.6; margin-bottom: 10px; display: block; }
.comments-empty p { margin: 0; font-size: 0.92rem; }

.comment-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.comment-card {
    display: flex; gap: 14px; padding: 16px 18px; background: var(--white);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 2px 10px rgba(0,0,128,0.04); transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.comment-card:hover { box-shadow: var(--card-shadow); border-color: var(--navy-light); }
.comment-avatar {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--white); font-weight: 800; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
}
.comment-content { min-width: 0; flex: 1; }
.comment-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.comment-name { font-weight: 700; font-size: 0.92rem; color: var(--dark-text); }
.comment-date { font-size: 0.76rem; color: var(--muted); }
.comment-body { margin: 0; font-size: 0.9rem; line-height: 1.65; color: var(--dark-text); word-break: break-word; }

.comment-form-card {
    background: var(--light-bg); border-radius: var(--radius-lg);
    padding: 26px 26px 22px; border: 1px solid var(--border);
}
.comment-form-title { margin: 0 0 16px; font-size: 0.98rem; font-weight: 800; color: var(--dark-text); }
.pform-label-note { color: var(--muted); font-weight: 400; }
.comment-form-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 4px;
}
.comment-moderation-note { font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.comment-moderation-note i { color: var(--navy-light); }
@media (max-width: 560px) {
    .comment-form-foot { flex-direction: column; align-items: stretch; }
    .comment-form-foot button { width: 100%; justify-content: center; }
    .comment-card { padding: 14px; }
}

/* ── About page: tech stack, values, approach steps, industries (views/public/about.php) ── */
.tech-stack-card {
    background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px; box-shadow: var(--card-shadow); transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.tech-stack-card:hover { box-shadow: var(--card-hover); transform: translateY(-3px); }
.tech-stack-title { font-weight: 800; color: var(--navy); font-size: 0.94rem; margin-bottom: 14px; }
.tech-stack-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tech-tag {
    font-size: 0.76rem; font-weight: 600; color: var(--dark-text); background: var(--light-bg);
    border: 1px solid var(--border); border-radius: 50px; padding: 4px 12px;
}

.value-card {
    text-align: center; padding: 28px 20px; background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--card-shadow); transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.value-card:hover { box-shadow: var(--card-hover); transform: translateY(-3px); }
.value-icon {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--navy), var(--navy-light)); color: var(--white);
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.value-card .pcard-title, .value-card .pcard-desc { text-align: center; }

.approach-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px; }
.approach-step { position: relative; padding: 22px 18px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); }
.approach-step-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--orange); opacity: 0.85; margin-bottom: 8px; }
.approach-step-title { font-weight: 700; color: var(--dark-text); font-size: 0.96rem; margin-bottom: 6px; }
.approach-step-desc { color: var(--muted); font-size: 0.84rem; line-height: 1.5; }

.industry-chip-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.industry-chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 18px; border-radius: 50px; background: var(--white); border: 1px solid var(--border);
    font-size: 0.86rem; font-weight: 600; color: var(--dark-text);
    box-shadow: var(--card-shadow); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.industry-chip i { color: var(--navy); }
.industry-chip:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.industry-chip:hover i { color: var(--orange); }

/* ── Gallery (views/public/gallery.php + partials/gallery-item-card.php) ── */
.gallery-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.gallery-item { position: relative; }
.gallery-thumb {
    display: block; position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius);
    overflow: hidden; background: linear-gradient(135deg, var(--navy-light), var(--navy));
    box-shadow: var(--card-shadow); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery-thumb:hover { transform: translateY(-4px); box-shadow: var(--card-hover); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.gallery-thumb:hover img { transform: scale(1.06); }
.gallery-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-size: 2rem; }
.gallery-play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,50,0.22); transition: background 0.25s ease; }
.gallery-play-icon i {
    width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--navy);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem; padding-left: 3px;
    box-shadow: var(--card-shadow); transition: transform 0.25s ease;
}
.gallery-thumb:hover .gallery-play-icon i { transform: scale(1.1); }
.gallery-item-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px;
    background: linear-gradient(to top, rgba(0,0,40,0.85), transparent);
    color: #fff; font-size: 0.84rem; font-weight: 600;
    opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.gallery-thumb:hover .gallery-item-caption { opacity: 1; transform: translateY(0); }
/* Event cards (photo albums) show their name always, not just on hover — it's the label, not a bonus. */
.gallery-item-caption.is-static { opacity: 1; transform: none; font-size: 0.9rem; }
.gallery-photo-count {
    position: absolute; top: 10px; right: 10px; z-index: 1;
    display: flex; align-items: center; gap: 5px;
    background: rgba(0,0,50,0.65); color: #fff; font-size: 0.74rem; font-weight: 700;
    padding: 4px 10px; border-radius: 50px; backdrop-filter: blur(2px);
}
#galleryLoadMore.is-loading { opacity: 0.6; pointer-events: none; }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } }

/* ── Lead-capture popup (views/partials/lead-popup.php, public/js/lead-popup.js) ──
   Fills the viewport on purpose: the visitor either gives an email or dismisses it (X, Esc,
   backdrop click, or "No thanks"). Sits below #page-overlay (99999) so the navigation spinner
   still wins, and above the chat/WhatsApp/back-to-top widgets (900-901). */
.lp-overlay {
    position: fixed; inset: 0; z-index: 99000; display: flex; align-items: center; justify-content: center;
    padding: 24px; overflow-y: auto; overscroll-behavior: contain;
    background: radial-gradient(1200px 600px at 15% 10%, rgba(255,165,0,0.16), transparent 60%),
                radial-gradient(900px 600px at 90% 90%, rgba(0,0,168,0.55), transparent 60%),
                rgba(0,0,40,0.86);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; transition: opacity 0.35s ease;
}
.lp-overlay[hidden] { display: none; }
.lp-overlay.is-open { opacity: 1; }
body.lp-locked { overflow: hidden; }

.lp-close {
    position: fixed; top: 18px; right: 18px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.1); color: #fff; font-size: 1.05rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s;
}
.lp-close:hover { background: rgba(255,255,255,0.22); transform: rotate(90deg); }

.lp-card {
    position: relative; width: 100%; max-width: 900px; margin: auto; display: grid; grid-template-columns: 1.05fr 1fr;
    border-radius: 24px; overflow: hidden; background: var(--white);
    box-shadow: 0 30px 80px rgba(0,0,30,0.55);
    transform: translateY(24px) scale(0.97); transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
.lp-overlay.is-open .lp-card { transform: none; }

.lp-aside {
    position: relative; padding: 42px 38px; color: #fff; overflow: hidden;
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
}
.lp-aside::before {
    content: ''; position: absolute; width: 320px; height: 320px; right: -120px; top: -120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,165,0,0.35), transparent 65%); pointer-events: none;
}
.lp-aside::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
    background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px); background-size: 22px 22px;
}
.lp-aside > * { position: relative; z-index: 1; }
.lp-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-bottom: 26px; }
.lp-brand em { font-style: normal; color: var(--orange); }
.lp-brand img { height: 32px; max-width: 170px; object-fit: contain; display: block; }
.lp-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 50px; margin-bottom: 16px;
    background: var(--orange); color: var(--navy); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.lp-title { font-size: 1.85rem; line-height: 1.2; margin: 0 0 12px; color: #fff; }
.lp-sub { margin: 0 0 22px; color: rgba(255,255,255,0.78); font-size: 0.95rem; line-height: 1.7; }
.lp-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.lp-bullets li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.92rem; color: rgba(255,255,255,0.92); }
.lp-bullets i { color: var(--orange); margin-top: 4px; }
/* Free mini project card (shown when Admin › Free project gift is live) */
.lp-gift {
    display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; padding: 12px; border-radius: 14px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
}
.lp-gift-cover { width: 92px; height: 58px; flex: 0 0 92px; border-radius: 9px; object-fit: cover; background: rgba(255,255,255,0.1); }
.lp-gift-ic { display: flex; align-items: center; justify-content: center; color: var(--orange); font-size: 1.5rem; }
.lp-gift-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lp-gift-body strong { color: #fff; font-size: 0.98rem; line-height: 1.3; }
.lp-gift-body span { color: rgba(255,255,255,0.7); font-size: 0.78rem; }

.lp-main { padding: 42px 38px; display: flex; flex-direction: column; justify-content: center; min-height: 420px; }
.lp-state[hidden] { display: none; }
.lp-form-title { font-size: 1.4rem; margin: 0 0 4px; color: var(--navy); }
.lp-form-hint { margin: 0 0 20px; color: var(--muted); font-size: 0.92rem; }
.lp-label { display: block; margin: 0 0 6px; font-size: 0.82rem; font-weight: 600; color: var(--dark-text); }
.lp-label span { font-weight: 400; color: var(--muted); }
.lp-field {
    position: relative; margin-bottom: 16px;
}
.lp-field i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.9rem; pointer-events: none; }
.lp-field input {
    width: 100%; padding: 13px 14px 13px 40px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff;
    font-family: var(--font-main); font-size: 1rem; color: var(--dark-text); outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.lp-field input:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(0,0,128,0.1); }
.lp-field input.is-invalid { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192,57,43,0.1); }
.lp-error { margin: -4px 0 14px; padding: 9px 12px; border-radius: 8px; background: #fbeceb; color: #b0392a; font-size: 0.84rem; }
.lp-error[hidden] { display: none; }

.lp-submit {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 20px; border: none; border-radius: 12px;
    background: var(--orange); color: var(--navy); font-family: var(--font-main); font-size: 1rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 8px 22px rgba(255,165,0,0.35); transition: background 0.2s, transform 0.15s, box-shadow 0.2s; text-decoration: none;
}
.lp-submit:hover { background: var(--orange-dark); color: var(--navy); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(255,165,0,0.45); }
.lp-submit:disabled { opacity: 0.7; cursor: progress; transform: none; }
.lp-submit[hidden] { display: none; }
.lp-submit.is-loading i { display: none; }
.lp-submit.is-loading .lp-submit-label::before {
    content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
    border: 2px solid rgba(0,0,128,0.25); border-top-color: var(--navy); border-radius: 50%; animation: p-spin 0.7s linear infinite;
}
.lp-privacy { margin: 14px 0 0; font-size: 0.76rem; color: var(--muted); text-align: center; }
.lp-privacy i { margin-right: 4px; }
.lp-privacy a { text-decoration: underline; }
.lp-skip {
    display: block; margin: 14px auto 0; background: none; border: none; padding: 6px 10px; cursor: pointer;
    font-family: var(--font-main); font-size: 0.82rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.lp-skip:hover { color: var(--navy); }
.lp-secondary { display: block; margin-top: 14px; text-align: center; font-size: 0.9rem; font-weight: 600; }

.lp-state-done { text-align: center; }
.lp-done-icon {
    width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #eaf5ef; color: #1c7a52; font-size: 1.7rem; animation: lp-pop 0.5s cubic-bezier(0.2,1.4,0.4,1);
}
.lp-download { margin-top: 4px; }
@keyframes lp-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 760px) {
    .lp-overlay { padding: 0; align-items: stretch; background: var(--navy-dark); }
    .lp-card { grid-template-columns: 1fr; border-radius: 0; min-height: 100%; box-shadow: none; }
    .lp-aside { padding: 28px 22px 24px; }
    .lp-brand { margin-bottom: 16px; }
    .lp-title { font-size: 1.5rem; }
    .lp-sub { font-size: 0.9rem; margin-bottom: 14px; }
    .lp-bullets { gap: 8px; }
    .lp-bullets li { font-size: 0.86rem; }
    .lp-gift { padding: 10px; gap: 12px; margin-bottom: 12px; }
    .lp-gift-cover { width: 72px; height: 46px; flex-basis: 72px; }
    .lp-main { padding: 26px 22px 34px; min-height: 0; }
    .lp-close { top: 12px; right: 12px; width: 40px; height: 40px; background: rgba(0,0,60,0.55); }
}
@media (prefers-reduced-motion: reduce) {
    .lp-overlay, .lp-card { transition: none; }
    .lp-close:hover { transform: none; }
    .lp-done-icon { animation: none; }
}

/* "I'm not a robot" box (reCAPTCHA v2 is a fixed 304px wide — scale it down on very narrow phones) */
.lp-captcha { margin: 2px 0 16px; min-height: 78px; transform-origin: 0 0; font-size: 0.82rem; color: var(--muted); }
@media (max-width: 360px) { .lp-captcha { transform: scale(0.85); margin-bottom: 4px; } }

/* ── Customer Service contact (views/partials/cs-contact.php) ── */
.cs-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: .86rem; text-decoration: none; background: var(--orange); color: var(--navy); border: 1px solid var(--orange); transition: transform .15s, background .15s; min-height: 42px; }
.cs-btn:hover { transform: translateY(-1px); background: var(--orange-light); color: var(--navy); }
.cs-btn.wa { background: #1fa855; border-color: #1fa855; color: #fff; }
.cs-btn.wa:hover { background: #18914a; color: #fff; }
.cs-btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.cs-btn.ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.cs-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 8px 0 26px; padding: 18px 22px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,165,0,.16), rgba(255,165,0,.04)); border: 1px solid rgba(255,165,0,.3); }
.cs-strip-who { display: flex; align-items: center; gap: 14px; color: #fff; }
.cs-strip-who strong { display: block; font-size: 1rem; }
.cs-strip-who small { display: block; color: rgba(255,255,255,.65); font-size: .8rem; margin-top: 2px; }
.cs-strip-ic, .cs-card-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--orange); color: var(--navy); font-size: 1.15rem; flex: 0 0 46px; }
.cs-strip-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.site-footer .cs-strip a { margin: 0; }
.cs-card { border: 1.5px solid rgba(255,165,0,.45); background: linear-gradient(180deg, #fffaf0, #fff); }
.cs-card-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.cs-card-head h5 { margin: 0; font-weight: 800; color: var(--dark-text, #1a1a3e); }
.cs-card-head small { color: var(--muted, #6b7280); font-size: .8rem; }
.cs-card-phone { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 800; color: var(--navy); text-decoration: none; margin-bottom: 12px; letter-spacing: .01em; }
.cs-card-phone i { font-size: 1rem; color: var(--orange-dark); }
.cs-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.cs-card-actions .cs-btn { justify-content: center; }
.cs-card-line { display: flex; gap: 8px; align-items: baseline; font-size: .84rem; color: var(--muted, #6b7280); padding: 6px 0; border-top: 1px dashed var(--border, #e5e7eb); }
.cs-card-line i { color: var(--orange-dark); width: 16px; text-align: center; }
.cs-card-line a { color: var(--navy); font-weight: 600; }
@media (max-width: 640px) {
    .cs-strip { padding: 16px; }
    .cs-strip-actions, .cs-strip-actions .cs-btn { width: 100%; justify-content: center; }
    .cs-card-actions { grid-template-columns: 1fr; }
}

/* Slide-in (AOS fade-left/right) columns start off-screen; never let them make the page scroll sideways on phones. */
html, body { overflow-x: clip; }